unmount, setup example

berndartmueller · Aug 27, 2020 · c386433 · c386433
1 parent c36c0e6
commit c386433
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 3,881 deletions.
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/package.json b/examples/package.json
diff --git a/examples/src/index.html b/examples/src/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="dist/index.bundle.css" />
+    <link rel="stylesheet" href="dist/index.css" />
     <style>
       .image-swiper {
         border: 1px solid #ccc;
@@ -70,6 +70,6 @@
       </button>
     </div>
 
-    <script src="dist/index.bundle.js"></script>
+    <script src="dist/index.js"></script>
   </body>
 </html>
diff --git a/examples/src/index.ts b/examples/src/index.ts
@@ -1,3 +1,5 @@
+import './../../dist/index.css';
+
 import { Virchual } from './../../src/virchual';
 
 [].forEach.call(document.querySelectorAll('.image-swiper'), (slider: HTMLElement) => {

diff --git a/examples/tsconfig.json b/examples/tsconfig.json
diff --git a/examples/tsconfig.webpack.json b/examples/tsconfig.webpack.json
diff --git a/examples/webpack.config.ts b/examples/webpack.config.ts
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,7 +1,7 @@
 import typescript from 'rollup-plugin-typescript2';
 import pkg from './package.json';
-import { terser } from 'rollup-plugin-terser';
 import serve from 'rollup-plugin-serve';
+import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
 import postcss_import from 'postcss-import';
 import postcss_copy from 'postcss-copy';
@@ -10,84 +10,118 @@ import bundleSize from 'rollup-plugin-bundle-size';
 
 const isDevelopment = process.env.NODE_ENV === 'development';
 
-export default {
-  input: 'src/index.ts', // our source file
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-    },
-    {
-      file: pkg.module,
-      format: 'es', // the preferred format
-    },
-    {
-      file: pkg.browser,
-      format: 'iife',
-      name: 'MyPackage', // the global which can be used in a browser,
-      sourcemap: true,
-    },
-  ],
-  external: [...Object.keys(pkg.dependencies || {})],
-  plugins: [
-    visualizer(),
-    typescript({
-      typescript: require('typescript'),
-    }),
-    terser({
-      compress: {
-        drop_console: !isDevelopment,
-        keep_fargs: false,
-        passes: 2,
+export default [
+  // library
+  {
+    input: 'src/index.ts', // our source file
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
       },
-      keep_fnames: false,
-      ecma: 6,
-      mangle: {
-        properties: true,
-        toplevel: true,
+      {
+        file: pkg.module,
+        format: 'es', // the preferred format
       },
-    }), // minifies generated bundles
-    bundleSize(),
-    postcss({
-      plugins: [
-        postcss_import({}),
-        postcss_copy({
-          basePath: './src/css',
-          preservePath: true,
-          dest: 'dist',
-          template: 'css/styles.[ext]',
-        }),
-
-        // postcss_url(),
-        // postcss_url({
-        //      url: "copy",
-        //      basePath: path.resolve("."),
-        //      assetPath: "resources"
-        // })
-      ],
-      // Save it to a .css file - we'll reference it ourselves thank you
-      // very much
-      extract: true,
-      sourceMap: true,
-      //minimize: true, // Causes an error at the moment for some reason
-    }),
-    isDevelopment &&
-      serve({
-        open: true,
-
-        host: '0.0.0.0',
+      {
+        file: pkg.browser,
+        format: 'iife',
+        name: 'MyPackage', // the global which can be used in a browser,
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      visualizer(),
+      typescript({
+        typescript: require('typescript'),
+      }),
+      terser({
+        compress: {
+          drop_console: !isDevelopment,
+          keep_fargs: false,
+          passes: 2,
+        },
+        keep_fnames: false,
+        ecma: 6,
+        mangle: {
+          properties: true,
+          toplevel: true,
+        },
+      }), // minifies generated bundles
+      bundleSize(),
+      postcss({
+        plugins: [
+          postcss_import({}),
+          postcss_copy({
+            basePath: './src/css',
+            preservePath: true,
+            dest: 'dist',
+            template: 'css/styles.[ext]',
+          }),
 
-        // Page to navigate to when opening the browser.
-        // Will not do anything if open=false.
-        // Remember to start with a slash.
-        openPage: '/index.html',
+          // postcss_url(),
+          // postcss_url({
+          //      url: "copy",
+          //      basePath: path.resolve("."),
+          //      assetPath: "resources"
+          // })
+        ],
+        // Save it to a .css file - we'll reference it ourselves thank you
+        // very much
+        extract: true,
+        sourceMap: true,
+        //minimize: true, // Causes an error at the moment for some reason
+      }),
+    ],
+  },
 
-        // Multiple folders to serve from
-        contentBase: ['dist', 'examples'],
+  // example
+  {
+    input: './examples/src/index.ts', // our source file
+    output: [
+      {
+        file: './examples/dist/index.js',
+        format: 'iife',
+        name: 'virchual', // the global which can be used in a browser,
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      typescript({
+        typescript: require('typescript'),
+      }),
+      postcss({
+        plugins: [
+          postcss_import({}),
+          postcss_copy({
+            basePath: './src/css',
+            preservePath: true,
+            dest: 'dist',
+            template: 'css/styles.[ext]',
+          }),
 
-        // Options used in setting up server
-        host: 'localhost',
-        port: 1337,
+          // postcss_url(),
+          // postcss_url({
+          //      url: "copy",
+          //      basePath: path.resolve("."),
+          //      assetPath: "resources"
+          // })
+        ],
+        // Save it to a .css file - we'll reference it ourselves thank you
+        // very much
+        extract: true,
+        sourceMap: true,
+        //minimize: true, // Causes an error at the moment for some reason
       }),
-  ],
-};
+      isDevelopment &&
+        serve({
+          open: true,
+          host: '0.0.0.0',
+          openPage: '/index.html',
+          contentBase: ['./examples/src', './examples'],
+          host: 'localhost',
+          port: 1337,
+        }),
+    ],
+  },
+];
diff --git a/src/virchual.ts b/src/virchual.ts
@@ -95,6 +95,15 @@ export class Virchual {
     this.mountAndUnmountSlides();
   }
 
+  /**
+   * Unmount components and cleanup events.
+   */
+  unmount() {
+    this.eventBus.destroy();
+
+    this.eventBus.emit('unmounted');
+  }
+
   /**
    * Register callback fired on the given event(s).
    *