fix(bundle): fix issues with minified bundle

berndartmueller · Sep 1, 2020 · bdc6860 · bdc6860
1 parent b94376b
commit bdc6860
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 127 deletions.
diff --git a/entry/entry-complete.ts b/entry/entry-complete.ts
@@ -1,9 +1,9 @@
-import { Virchual as VirchualCore, VirchualSettings } from './../src/virchual';
 import { Controls } from './../src/components/controls';
 import { Lazy } from './../src/components/lazy';
+import { Virchual as VirchualCore, VirchualSettings } from './../src/virchual';
 
 export default class Virchual extends VirchualCore {
-  constructor(public container: HTMLElement, public settings: VirchualSettings = {}) {
+  constructor(container: HTMLElement, settings: VirchualSettings = {}) {
     super(container, settings);
 
     this.register(Controls, { isEnabled: true });

diff --git a/examples/src/index.ts b/examples/src/index.ts
@@ -1,7 +1,7 @@
-import { Lazy } from './../../src/components/lazy/lazy';
-import './../../dist/index.css';
+import Virchual from '@virchual/index';
+import { Controls } from '@virchual/components/controls/controls';
 
-import Virchual from './../../src/index';
+import './../../src/css/styles.css';
 
 [].forEach.call(document.querySelectorAll('.image-swiper'), (slider: HTMLElement) => {
   const instance = new Virchual(slider, {
@@ -33,8 +33,7 @@ import Virchual from './../../src/index';
     },
   });
 
-  // instance.register(Controls, { isEnabled: true });
-  instance.register(Lazy, { threshold: 300 });
+  instance.register(Controls, { isEnabled: true });
 
-  // instance.mount();
+  instance.mount();
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "build:esm": "rollup --config build/esm.js && rollup --config build/esm.modular.js",
     "build": "npm run build:css && npm run build:umd && npm run build:esm && tsc",
     "build:prod": "NODE_ENV=production npm run build",
-    "dev": "NODE_ENV=development rollup -cw && tsc",
+    "dev": "NODE_ENV=development concurrently \"rollup -cw\" \"rollup --watch --config build/umd.min.js\"",
     "lint-staged": "lint-staged",
     "typecheck": "tsc --noUnusedParameters false --noUnusedLocals false --outDir ./tmpDist --declarationDir ./tmpDist && rm -rf tmpDist",
     "prepublishOnly": "npm run build:prod",
@@ -69,6 +69,7 @@
     "@types/jest": "^26.0.10",
     "@typescript-eslint/eslint-plugin": "^3.9.1",
     "@typescript-eslint/parser": "^3.9.1",
+    "concurrently": "^5.3.0",
     "cssnano": "^4.1.10",
     "eslint": "^7.7.0",
     "eslint-config-prettier": "^6.11.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,81 +1,10 @@
 import typescript from 'rollup-plugin-typescript2';
-import pkg from './package.json';
 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';
-import bundleSize from 'rollup-plugin-bundle-size';
-
-const isDevelopment = process.env.NODE_ENV === 'development';
 
 export default [
-  // library
-  {
-    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: 'Virchual', // the global which can be used in a browser,
-      },
-    ],
-    plugins: [
-      typescript({
-        typescript: require('typescript'),
-      }),
-      terser({
-        compress: {
-          drop_console: !isDevelopment,
-          keep_fargs: false,
-          passes: 2,
-        },
-        keep_fnames: false,
-        ecma: 6,
-        mangle: {
-          properties: {
-            keep_quoted: true,
-            builtins: false,
-            reserved: ['next', 'prev', 'register'],
-          },
-          toplevel: false,
-        },
-      }), // 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,
-      }),
-    ],
-  },
-
-  // example
   {
     input: './examples/src/index.ts', // our source file
     output: [
@@ -99,29 +28,18 @@ export default [
             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',
-          openPage: '/index.html',
-          contentBase: ['./examples/src', './examples'],
-          host: 'localhost',
-          port: 1337,
-        }),
+      serve({
+        open: true,
+        host: '0.0.0.0',
+        openPage: '/index.html',
+        contentBase: ['./examples/src', './examples'],
+        host: 'localhost',
+        port: 1337,
+      }),
     ],
   },
 ];
diff --git a/src/components/lazy/lazy.ts b/src/components/lazy/lazy.ts
@@ -11,6 +11,6 @@ export class Lazy {
       ...settings,
     };
 
-    this.imports.virchual.mount();
+    this.imports.virchual.mount.apply(this.imports.virchual);
   }
 }