diff --git a/README.md b/README.md index 1ce751a..071bfdb 100644 --- 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 - - + + ``` 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 + + + + + +``` + +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 diff --git a/docs/index.html b/docs/index.html index cfa568e..e425142 100644 --- a/docs/index.html +++ b/docs/index.html @@ -103,14 +103,60 @@ Include the link to shareon's JS and CSS in your website:

- 
<link href="https://cdn.jsdelivr.net/npm/shareon@1.2.1/dist/shareon.min.css"
+            
<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"
+<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 later bundle:

-            
require('shareon');

-            
import 'shareon';

+            
or install it via NPM and use it in a JS file that you will later bundle:

+            
const shareon = require('shareon');

+            
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):
+            

+
+            
// 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:
+            

+            
<!-- notice the 'noinit' section of the url for JS -->
+<script src="https://cdn.jsdelivr.net/npm/shareon@1.3/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 type="text/javascript">
+  // do something important
+  shareon();
+</script>

+
+            

+                or, if you're using Node:
+            

+
+            
const shareon = require('shareon');
+// or
+import shareon from 'shareon';
+
+// do something important
+shareon();

         

 
         

@@ -225,7 +271,7 @@
         

     
 
-    
-    
+    
+    
 
 
diff --git a/package.json b/package.json
index 43a1b0e..2a71f82 100644
--- 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",
diff --git a/rollup.config.js b/rollup.config.js
index 3905827..253060e 100644
--- 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;
diff --git a/src/autoinit.ts b/src/autoinit.ts
new file mode 100644
index 0000000..a44dece
--- /dev/null
+++ b/src/autoinit.ts
@@ -0,0 +1,9 @@
+import './style.scss';
+
+import initializeShareon from './shareon';
+
+window.onload = () => {
+  initializeShareon();
+};
+
+export default initializeShareon;
diff --git a/src/index.ts b/src/shareon.ts
similarity index 97%
rename from src/index.ts
rename to src/shareon.ts
index 4634160..79e27a0 100644
--- a/src/index.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;