Move demo to separate file

demo/demo.js

+/* eslint-disable */
+const sholo = new Sholo({
+  animate: true,
+  opacity: 0.8,
+  padding: 5,
+});
+
+sholo.defineSteps([
+  {
+    element: '.section__header',
+    popover: {
+      title: 'Adding Introductions',
+      description: 'You can use it to add popovers on top of the website',
+      position: 'bottom',
+    },
+  },
+  {
+    element: '.btn__example',
+    popover: {
+      title: 'Adding Introductions',
+      description: 'You can use it to add popovers on top of the website',
+      position: 'left',
+    },
+  },
+  {
+    element: '.btn__light',
+    popover: {
+      title: 'Adding Introductions',
+      description: 'You can use it to add popovers on top of the website',
+      position: 'rig',
+    },
+  },
+  {
+    element: '.section__how',
+    popover: {
+      title: 'Just Specify the Item',
+      description: 'All you have to do is provide the query selector of element to highlight',
+      position: 'right',
+    },
+  },
+  {
+    element: '.section__purpose',
+    popover: {
+      title: 'Automatically Position',
+      description: 'It can automatically position too if you dont provide',
+    },
+  },
+  {
+    element: '.section__examples',
+  },
+  {
+    element: '.section__contributing',
+    popover: {
+      title: 'Automatically Position',
+      description: 'It can automatically position too if you dont provide',
+    },
+  },
+]);
+
+document.querySelector('.btn__example')
+  .addEventListener('click', () => {
+    sholo.start();
+  });

index.html

@@ -56,70 +56,6 @@
 </div>
 
 <script src="./dist/sholo.js"></script>
-<script>
-  const sholo = new Sholo({
-    animate: true,
-    opacity: 0.8,
-    padding: 5
-  });
-
-  sholo.defineSteps([
-    {
-      element: '.section__header',
-      popover: {
-        title: 'Adding Introductions',
-        description: 'You can use it to add popovers on top of the website',
-        position: 'bottom',
-      },
-    },
-    {
-      element: '.btn__example',
-      popover: {
-        title: 'Adding Introductions',
-        description: 'You can use it to add popovers on top of the website',
-        position: 'left',
-      },
-    },
-    {
-      element: '.btn__light',
-      popover: {
-        title: 'Adding Introductions',
-        description: 'You can use it to add popovers on top of the website',
-        position: 'rig',
-      },
-    },
-    {
-      element: '.section__how',
-      popover: {
-        title: 'Just Specify the Item',
-        description: 'All you have to do is provide the query selector of element to highlight',
-        position: 'right'
-      },
-    },
-    {
-      element: '.section__purpose',
-      popover:  {
-        title: 'Automatically Position',
-        description: 'It can automatically position too if you dont provide'
-      }
-    },
-    {
-      element: '.section__examples',
-    },
-    {
-      element: '.section__contributing',
-      popover:  {
-        title: 'Automatically Position',
-        description: 'It can automatically position too if you dont provide'
-      }
-    },
-  ]);
-
-  document.querySelector('.btn__example')
-    .addEventListener('click', function () {
-      sholo.start();
-    });
-
-</script>
+<script src="./dist/demo.js"></script>
 </body>
 </html>
\ No newline at end of file

package.json

@@ -16,6 +16,7 @@
     "babel-loader": "^7.1.3",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-env": "^1.6.1",
+    "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.10",
     "eslint": "^4.18.2",
     "eslint-config-airbnb-base": "^12.1.0",

webpack.config.dev.js

 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
@@ -47,6 +48,9 @@ module.exports = {
       filename: 'demo.css',
       allChunks: true,
     }),
+    new CopyWebpackPlugin([
+      './demo/demo.js',
+    ]),
   ],
   stats: {
     colors: true,

yarn.lock

@@ -271,7 +271,7 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
-arrify@^1.0.0:
+arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
 
@@ -1226,7 +1226,7 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
-cacache@^10.0.1:
+cacache@^10.0.1, cacache@^10.0.4:
   version "10.0.4"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
   dependencies:
@@ -1664,6 +1664,19 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
+copy-webpack-plugin@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.5.1.tgz#fc4f68f4add837cc5e13d111b20715793225d29c"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    globby "^7.1.1"
+    is-glob "^4.0.0"
+    loader-utils "^1.1.0"
+    minimatch "^3.0.4"
+    p-limit "^1.0.0"
+    serialize-javascript "^1.4.0"
+
 core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
@@ -2021,6 +2034,13 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dir-glob@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -2928,6 +2948,17 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
 globule@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
@@ -3222,7 +3253,7 @@ iferr@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
 
-ignore@^3.3.3, ignore@^3.3.6:
+ignore@^3.3.3, ignore@^3.3.5, ignore@^3.3.6:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
@@ -4667,7 +4698,7 @@ p-lazy@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-lazy/-/p-lazy-1.0.0.tgz#ec53c802f2ee3ac28f166cc82d0b2b02de27a835"
 
-p-limit@^1.1.0:
+p-limit@^1.0.0, p-limit@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
   dependencies:
@@ -4804,6 +4835,12 @@ path-type@^2.0.0:
   dependencies:
     pify "^2.0.0"
 
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
 pbkdf2@^3.0.3:
   version "3.0.14"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"