feat: Switch bundle from webpack to rollup and emit new esm bundle

ui-router · Sep 15, 2020 · c4444db · c4444db
1 parent 36e9a5a
commit c4444db
Show file tree

Hide file tree

Showing 9 changed files with 1,379 additions and 3,637 deletions.
diff --git a/example/index.html b/example/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <script src="//unpkg.com/angular@latest/angular.js"></script>
@@ -16,11 +16,11 @@
     <script src="components/person.js"></script>
 
     <!-- Visualizer and url -->
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="styles.css" />
     <script src="//unpkg.com/show-current-browser-url"></script>
-    <script src="../_bundles/ui-router-visualizer.min.js"></script>
+    <script src="../_bundles/ui-router-visualizer.js"></script>
   </head>
-  
+
   <body ng-app="hello" ng-class="{'debug-sref': debug.uisref, 'debug-view': debug.uiview}">
     <div>
       <button onClick="document.location.reload(true)">reload plunker</button>
@@ -37,6 +37,5 @@
     <button ng-if="disposed" style="float: right" ng-click="create()">Create visualizer</button>
     <button ng-if="!disposed" style="float: right" ng-click="dispose()">Dispose visualizer</button>
     <ui-view></ui-view>
-
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,9 +4,9 @@
   "version": "7.0.0",
   "scripts": {
     "start": "webpack-dev-server --port 4039 --content-base example",
-    "clean": "shx rm -rf lib lib-esm _bundles",
-    "compile": "tsc && tsc -m es6 --outdir lib-esm",
-    "bundle": "webpack --progress --mode=production",
+    "clean": "shx rm -rf dist lib lib-esm _bundles",
+    "compile": "tsc --outdir lib && tsc -m es6 --outdir lib-esm",
+    "bundle": "rollup -c",
     "build": "npm run clean && npm run compile && npm run bundle",
     "prepublishOnly": "npm run build",
     "release": "release"
@@ -33,30 +33,27 @@
   },
   "license": "MIT",
   "dependencies": {
-    "d3-hierarchy": "^1.1.8",
-    "d3-interpolate": "^1.3.2",
-    "preact": "~8.4.2"
+    "d3-hierarchy": "^2.0.0",
+    "d3-interpolate": "^2.0.1",
+    "preact": "~10.4.8"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-typescript": "^5.0.2",
     "@types/d3-hierarchy": "^1.1.5",
     "@types/d3-interpolate": "^1.3.0",
-    "@uirouter/core": "^5.0.22",
+    "@uirouter/core": "^6.0.6",
     "@uirouter/publish-scripts": "2.5.3",
-    "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "fork-ts-checker-webpack-plugin": "^0.5.2",
-    "husky": "^1.3.1",
-    "prettier": "^1.16.1",
-    "pretty-quick": "^1.10.0",
+    "husky": "^4.2.5",
+    "prettier": "^2.1.1",
+    "pretty-quick": "^3.0.0",
+    "rollup": "^2.26.10",
+    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-terser": "^7.0.2",
     "shx": "^0.3.2",
-    "style-loader": "0.23.1",
-    "ts-loader": "^5.3.3",
-    "typescript": "^3.2.4",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.1.14"
+    "tslib": "^2.0.1",
+    "typescript": "^4.0.2"
   },
   "peerDependencies": {
     "@uirouter/core": ">=5.0.0"

diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,29 @@
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+// const commonjs = require('@rollup/plugin-commonjs');
+const typescript = require('@rollup/plugin-typescript');
+const postCss = require('rollup-plugin-postcss');
+const { terser } = require('rollup-plugin-terser');
+
+module.exports = {
+  input: 'src/visualizer.ts',
+  plugins: [
+    nodeResolve(),
+    // commonjs(),
+    typescript(),
+    // import from .css, .less, and inject into the document <head></head>
+    postCss(),
+  ],
+  output: [
+    {
+      file: '_bundles/ui-router-visualizer.js',
+      format: 'umd',
+      name: '@uirouter/visualizer',
+      sourcemap: true,
+    },
+    {
+      file: '_bundles/ui-router-visualizer.esm.js',
+      format: 'es',
+      sourcemap: true,
+    },
+  ],
+};
diff --git a/src/statevis/Controls.tsx b/src/statevis/Controls.tsx
@@ -21,9 +21,6 @@ export interface IControlsState {
   showRendererPrefs: boolean;
 }
 
-declare function require(string): string;
-const imgChevron = require('../../images/16/chevron-down.png');
-
 export class Controls extends Component<IControlsProps, IControlsState> {
   state = {
     showRendererPrefs: false,

diff --git a/src/statevis/StateVisualizer.tsx b/src/statevis/StateVisualizer.tsx
@@ -7,9 +7,7 @@ import { Controls } from './Controls';
 import { StateVisWindow } from './StateVisWindow';
 import { DEFAULT_RENDERER } from './renderers';
 import { Renderer } from './interface';
-
-declare function require(string): string;
-require('./statevis.css');
+import './statevis.css';
 
 export interface IProps {
   router;
@@ -129,7 +127,7 @@ export class StateVisualizer extends Component<IProps, IState> {
   }
 
   componentWillUnmount() {
-    this.deregisterFns.forEach(fn => fn());
+    this.deregisterFns.forEach((fn) => fn());
   }
 
   draggable() {
@@ -155,13 +153,13 @@ export class StateVisualizer extends Component<IProps, IState> {
     const { minimized } = this.state;
     return (
       <div
-        ref={el => (this.el = el as HTMLElement)}
+        ref={(el) => (this.el = el as HTMLElement)}
         onMouseDown={this.cancelAutoMinimize.bind(this)}
         onMouseEnter={this.cancelAutoMinimize.bind(this)}
       >
         <StateVisWindow
           minimized={this.state.minimized}
-          ref={windowRef => (this.windowEl = (windowRef && windowRef.el) || this.windowEl)}
+          ref={(windowRef) => (this.windowEl = (windowRef && windowRef.el) || this.windowEl)}
           onResize={({ width, height }) => this.setState({ width, height })}
         >
           <div

diff --git a/src/transition/TransitionVisualizer.tsx b/src/transition/TransitionVisualizer.tsx
@@ -3,9 +3,7 @@ import { h, render, Component } from 'preact';
 import { TransitionView } from './TransitionView';
 import { easing } from '../util/easing';
 import { animatePath } from '../util/animatepath';
-
-declare var require;
-require('./transitionVisualizer.css');
+import './transitionVisualizer.css';
 
 export interface IProps {
   router: any;
@@ -114,7 +112,7 @@ export class TransitionVisualizer extends Component<IProps, IState> {
   cancelPreviousAnim = null;
 
   componentDidMount() {
-    let dereg = this.props.router.transitionService.onBefore({}, trans => {
+    let dereg = this.props.router.transitionService.onBefore({}, (trans) => {
       this.setState({ transitions: this.state.transitions.concat(trans) });
 
       let duration = 750,
@@ -133,7 +131,7 @@ export class TransitionVisualizer extends Component<IProps, IState> {
           this.setState({ transitions: list.slice(list.length - max) });
         };
 
-        let callback = vals => (el.scrollLeft = vals[0]);
+        let callback = (vals) => (el.scrollLeft = vals[0]);
         this.cancelPreviousAnim = animatePath(newVal, oldVal, duration, callback, enforceMax, easing.easeInOutCubic);
       };
 
@@ -153,7 +151,7 @@ export class TransitionVisualizer extends Component<IProps, IState> {
    *
    * Enable pointer events when mouse is inside the timeline to allow horizontal scroll & scroll wheel
    */
-  onMouseMove = evt => {
+  onMouseMove = (evt) => {
     let windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
     var pointerEvents = windowHeight - evt.clientY < 65 ? 'auto' : 'none';
     if (this.state.pointerEvents != pointerEvents) {
@@ -169,9 +167,9 @@ export class TransitionVisualizer extends Component<IProps, IState> {
     let pointerEvents = this.state.pointerEvents;
 
     return (
-      <div ref={el => (this._div = el)}>
+      <div ref={(el) => (this._div = el)}>
         <div className="uirTranVis_history" style={{ pointerEvents }}>
-          {this.state.transitions.map(trans => (
+          {this.state.transitions.map((trans) => (
             <div key={trans.$id} className="uirTranVis_transition">
               <TransitionView transition={trans} />
               <div style={{ minWidth: '18em', border: '1px solid transparent' }} />

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,22 +1,14 @@
 {
-  "files": [
-    "src/visualizer.ts", "src/svg.d.ts"
-  ],
-
+  "include": ["src"],
   "compilerOptions": {
     "jsx": "react",
     "jsxFactory": "h",
     "lib": ["es6", "dom"],
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "rootDir": "src",
+    "rootDir": ".",
     "sourceRoot": "src",
     "moduleResolution": "node",
-    "module": "commonjs",
     "target": "es5",
-    "outDir": "lib",
-    "declaration": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "inlineSources": true
   }
 }
-
diff --git a/webpack.config.js b/webpack.config.js