Merge pull request #14 from NickKaramoff/feature/default-export

Export the `shareon` function

README.md

@@ -18,8 +18,8 @@ Observe the live demo here: [shareon.js.org](https://shareon.js.org)
 Include the link to shareon's JS and CSS in your website:
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script>
+<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
 ```
 
 or install it via NPM use it in a JS file that you will bundle:
@@ -31,7 +31,48 @@ yarn add shareon
 ```
 
 ```js
-require('shareon');
+const shareon = require('shareon');
+// or
+import shareon from 'shareon';
+```
+
+## Initialization
+
+By default, shareon will initialize every button after page load. It also
+exports the `shareon` function, that will let you repopulate your buttons with
+updated information (for example, if you changed the page title):
+
+```js
+// shareon auto-initializes
+
+window.title = "Cool new window title";
+shareon();
+```
+
+If you want to postpone the initialization, you can import the `noinit`-version
+of the package. You'll need to manually call the `shareon` function when you
+want the buttons to be initialized:
+
+```html
+<!-- notice the 'noinit' section of the url for JS -->
+<link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/noinit/shareon.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
+
+<script type="text/javascript">
+  // do something important
+  shareon();
+</script>
+```
+
+or, if you're using Node:
+
+```js
+const shareon = require('shareon/dist/noinit/shareon');
+// or
+import shareon from 'shareon/dist/noinit/shareon';
+
+// do something important
+shareon();
 ```
 
 ## Usage

docs/index.html

@@ -103,14 +103,60 @@
                 Include the link to shareon's JS and CSS in your website:
             </p>
 
-            <pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css"
+            <pre><code>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
       rel="stylesheet"&gt;
-&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js"
+&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
         type="text/javascript"&gt;&lt;/script&gt;</code></pre>
 
-            <p>or install it via NPM use it in a JS file that you will later bundle:</p>
+            <p>or install it via NPM and use it in a JS file that you will later bundle:</p>
-            <pre><code>require('shareon');</code></pre>
+            <pre><code>const shareon = require('shareon');</code></pre>
-            <pre><code>import 'shareon';</code></pre>
+            <pre><code>import shareon from 'shareon';</code></pre>
+        </article>
+
+        <article>
+            <h2>
+                <a id="initialization" href="#initialization" aria-hidden="true"></a>
+                Initialization
+            </h2>
+            <p>
+                By default, shareon will initialize every button after page load.
+                It also exports the <code>shareon</code> function, that will let
+                you repopulate your buttons with updated information (for example,
+                if you changed the page title):
+            </p>
+
+            <pre><code>// shareon auto-initializes
+
+window.title = "Cool new window title";
+shareon();</code></pre>
+
+            <p>
+                If you want to postpone the initialization, you can import the
+                <code>noinit</code>-version of the package. You'll need to
+                manually call the <code>shareon</code> function when you want the
+                buttons to be initialized:
+            </p>
+            <pre><code>&lt;!-- notice the 'noinit' section of the url for JS --&gt;
+&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js"
+        type="text/javascript"&gt;&lt;/script&gt;
+&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css"
+      rel="stylesheet"&gt;
+
+&lt;script type="text/javascript"&gt;
+  // do something important
+  shareon();
+&lt;/script&gt;</code></pre>
+
+            <p>
+                or, if you're using Node:
+            </p>
+
+            <pre><code>const shareon = require('shareon');
+// or
+import shareon from 'shareon';
+
+// do something important
+shareon();</code></pre>
         </article>
 
         <article>
@@ -225,7 +271,7 @@
         </p>
     </footer>
 
-    <link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script>
+    <script src="https://cdn.jsdelivr.net/npm/shareon@1.3/dist/shareon.min.js" type="text/javascript"></script>
 </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shareon",
-  "version": "1.2.1",
+  "version": "1.3.0-6",
   "description": "Lightweight, stylish and ethical share buttons for popular social networks",
   "license": "MIT",
   "homepage": "https://shareon.js.org",

rollup.config.js

@@ -10,18 +10,18 @@ const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development'
 
 const pkg = require('./package.json');
 
-const inputFile = './src/index.ts';
 const outputDir = isDev ? './dev/' : './dist/';
 
 const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
 
-/*
+/**
- * PLUGINS
+ * Plugins to build the project
+ *
+ * @type {Plugin[]}
  */
-
+const plugins = [
-const plugins = [];
+  typescript(),
-
+];
-plugins.push(typescript());
 
 if (!isDev) {
   plugins.push(strip({
@@ -52,43 +52,57 @@ plugins.push(postcss({
   ],
 }));
 
-/*
+/**
- * OUTPUTS
+ * @typedef {import('rollup').OutputOptions} OutputOptions
  */
 
-const output = [];
+/**
+ *
+ * @param {string} baseDir base directory for the output files
+ * @return {OutputOptions[]} array of outputs
+ */
+const getOutputs = (baseDir) => {
+  const result = [];
 
   if (isDev) {
-  output.push({
+    result.push({
       name: pkg.name,
       format: 'iife',
-    file: `${outputDir}${pkg.name}.js`,
+      file: `${baseDir}${pkg.name}.js`,
     });
   } else {
-  output.push({
+    result.push({
       name: pkg.name,
       format: 'cjs',
-    file: `${outputDir}${pkg.name}.cjs`,
+      file: `${baseDir}${pkg.name}.cjs`,
     });
-  output.push({
+    result.push({
       name: pkg.name,
       format: 'esm',
-    file: `${outputDir}${pkg.name}.mjs`,
+      file: `${baseDir}${pkg.name}.mjs`,
     });
-  output.push({
+    result.push({
       name: pkg.name,
       format: 'iife',
-    file: `${outputDir}${pkg.name}.min.js`,
+      file: `${baseDir}${pkg.name}.min.js`,
       plugins: [terser({ output: { comments: false } })],
     });
   }
 
-/*
+  return result;
- * EXPORT
- */
-
-export default {
-  input: inputFile,
-  output,
-  plugins,
 };
+
+const config = [
+  {
+    input: './src/autoinit.ts',
+    output: getOutputs(`${outputDir}`),
+    plugins,
+  },
+  {
+    input: './src/shareon.ts',
+    output: getOutputs(`${outputDir}noinit/`),
+    plugins: plugins.slice(0, -1),
+  },
+];
+
+export default config;

src/autoinit.ts

@@ -0,0 +1,9 @@
+import './style.scss';
+
+import initializeShareon from './shareon';
+
+window.onload = () => {
+  initializeShareon();
+};
+
+export default initializeShareon;

src/shareon.ts

@@ -1,5 +1,3 @@
-import './style.scss';
-
 interface PublishPreset {
   url: string,
   title: string,
@@ -44,7 +42,7 @@ function initShareonChild(child: HTMLElement, preset: PublishPreset) {
   }
 }
 
-window.onload = () => {
+const initializeShareon = () : void => {
   const shareonContainers = document.getElementsByClassName('shareon');
 
   for (let i = 0; i < shareonContainers.length; i += 1) {
@@ -70,3 +68,5 @@ window.onload = () => {
     }
   }
 };
+
+export default initializeShareon;