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

Export the `shareon` function
2020-07-26 14:44:10 +02:00 · 2020-07-26 14:44:10 +02:00 · 8ccc88d99a
parent 5f5abd1611 bece4cdcf2
commit 8ccc88d99a
6 changed files with 166 additions and 56 deletions
--- a/README.md
+++ b/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">
-<script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script>
+<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.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
--- a/docs/index.html
+++ b/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>
-            <pre><code>require('shareon');</code></pre>
-            <pre><code>import 'shareon';</code></pre>
+            <p>or install it via NPM and use it in a JS file that you will later bundle:</p>
+            <pre><code>const shareon = require('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">
-    <script src="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.js" type="text/javascript"></script>
+    <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.3/dist/shareon.min.js" type="text/javascript"></script>
 </body>
 </html>
--- a/package.json
+++ b/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",
--- a/rollup.config.js
+++ b/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 = [];
-
-plugins.push(typescript());
+const plugins = [
+  typescript(),
+];

 if (!isDev) {
  plugins.push(strip({
@ -52,43 +52,57 @@ plugins.push(postcss({
  ],
 }));

-/*
- * OUTPUTS
+/**
+ * @typedef {import('rollup').OutputOptions} OutputOptions
 */

-const output = [];
-
-if (isDev) {
-  output.push({
-    name: pkg.name,
-    format: 'iife',
-    file: `${outputDir}${pkg.name}.js`,
-  });
-} else {
-  output.push({
-    name: pkg.name,
-    format: 'cjs',
-    file: `${outputDir}${pkg.name}.cjs`,
-  });
-  output.push({
-    name: pkg.name,
-    format: 'esm',
-    file: `${outputDir}${pkg.name}.mjs`,
-  });
-  output.push({
-    name: pkg.name,
-    format: 'iife',
-    file: `${outputDir}${pkg.name}.min.js`,
-    plugins: [terser({ output: { comments: false } })],
-  });
-}
-
-/*
- * EXPORT
+/**
+ *
+ * @param {string} baseDir base directory for the output files
+ * @return {OutputOptions[]} array of outputs
 */
+const getOutputs = (baseDir) => {
+  const result = [];

-export default {
-  input: inputFile,
-  output,
-  plugins,
+  if (isDev) {
+    result.push({
+      name: pkg.name,
+      format: 'iife',
+      file: `${baseDir}${pkg.name}.js`,
+    });
+  } else {
+    result.push({
+      name: pkg.name,
+      format: 'cjs',
+      file: `${baseDir}${pkg.name}.cjs`,
+    });
+    result.push({
+      name: pkg.name,
+      format: 'esm',
+      file: `${baseDir}${pkg.name}.mjs`,
+    });
+    result.push({
+      name: pkg.name,
+      format: 'iife',
+      file: `${baseDir}${pkg.name}.min.js`,
+      plugins: [terser({ output: { comments: false } })],
+    });
+  }
+
+  return result;
 };
+
+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;
--- a/src/autoinit.ts
+++ b/src/autoinit.ts
@ -0,0 +1,9 @@
+import './style.scss';
+
+import initializeShareon from './shareon';
+
+window.onload = () => {
+  initializeShareon();
+};
+
+export default initializeShareon;
--- a/src/shareon.ts
+++ b/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;