Skip to content

Commit c4444db

Browse files
christopherthielenchristopherthielen
committed
feat: Switch bundle from webpack to rollup and emit new esm bundle
1 parent 36e9a5a commit c4444db

File tree

9 files changed

+1379
-3637
lines changed

9 files changed

+1379
-3637
lines changed

‎example/index.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
44
<script src="//unpkg.com/angular@latest/angular.js"></script>
@@ -16,11 +16,11 @@
1616
<script src="components/person.js"></script>
1717

1818
<!-- Visualizer and url -->
19-
<link rel="stylesheet" href="styles.css">
19+
<link rel="stylesheet" href="styles.css" />
2020
<script src="//unpkg.com/show-current-browser-url"></script>
21-
<script src="../_bundles/ui-router-visualizer.min.js"></script>
21+
<script src="../_bundles/ui-router-visualizer.js"></script>
2222
</head>
23-
23+
2424
<body ng-app="hello" ng-class="{'debug-sref': debug.uisref, 'debug-view': debug.uiview}">
2525
<div>
2626
<button onClick="document.location.reload(true)">reload plunker</button>
@@ -37,6 +37,5 @@
3737
<button ng-if="disposed" style="float: right" ng-click="create()">Create visualizer</button>
3838
<button ng-if="!disposed" style="float: right" ng-click="dispose()">Dispose visualizer</button>
3939
<ui-view></ui-view>
40-
4140
</body>
4241
</html>

‎package.json

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"version": "7.0.0",
55
"scripts": {
66
"start": "webpack-dev-server --port 4039 --content-base example",
7-
"clean": "shx rm -rf lib lib-esm _bundles",
8-
"compile": "tsc && tsc -m es6 --outdir lib-esm",
9-
"bundle": "webpack --progress --mode=production",
7+
"clean": "shx rm -rf dist lib lib-esm _bundles",
8+
"compile": "tsc --outdir lib && tsc -m es6 --outdir lib-esm",
9+
"bundle": "rollup -c",
1010
"build": "npm run clean && npm run compile && npm run bundle",
1111
"prepublishOnly": "npm run build",
1212
"release": "release"
@@ -33,30 +33,27 @@
3333
},
3434
"license": "MIT",
3535
"dependencies": {
36-
"d3-hierarchy": "^1.1.8",
37-
"d3-interpolate": "^1.3.2",
38-
"preact": "~8.4.2"
36+
"d3-hierarchy": "^2.0.0",
37+
"d3-interpolate": "^2.0.1",
38+
"preact": "~10.4.8"
3939
},
4040
"devDependencies": {
41+
"@rollup/plugin-commonjs": "^15.0.0",
42+
"@rollup/plugin-node-resolve": "^9.0.0",
43+
"@rollup/plugin-typescript": "^5.0.2",
4144
"@types/d3-hierarchy": "^1.1.5",
4245
"@types/d3-interpolate": "^1.3.0",
43-
"@uirouter/core": "^5.0.22",
46+
"@uirouter/core": "^6.0.6",
4447
"@uirouter/publish-scripts": "2.5.3",
45-
"copy-webpack-plugin": "^4.6.0",
46-
"css-loader": "^2.1.0",
47-
"file-loader": "^3.0.1",
48-
"fork-ts-checker-webpack-plugin": "^0.5.2",
49-
"husky": "^1.3.1",
50-
"prettier": "^1.16.1",
51-
"pretty-quick": "^1.10.0",
48+
"husky": "^4.2.5",
49+
"prettier": "^2.1.1",
50+
"pretty-quick": "^3.0.0",
51+
"rollup": "^2.26.10",
52+
"rollup-plugin-postcss": "^3.1.8",
53+
"rollup-plugin-terser": "^7.0.2",
5254
"shx": "^0.3.2",
53-
"style-loader": "0.23.1",
54-
"ts-loader": "^5.3.3",
55-
"typescript": "^3.2.4",
56-
"url-loader": "^1.1.2",
57-
"webpack": "^4.29.0",
58-
"webpack-cli": "^3.2.1",
59-
"webpack-dev-server": "^3.1.14"
55+
"tslib": "^2.0.1",
56+
"typescript": "^4.0.2"
6057
},
6158
"peerDependencies": {
6259
"@uirouter/core": ">=5.0.0"

‎rollup.config.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const { nodeResolve } = require('@rollup/plugin-node-resolve');
2+
// const commonjs = require('@rollup/plugin-commonjs');
3+
const typescript = require('@rollup/plugin-typescript');
4+
const postCss = require('rollup-plugin-postcss');
5+
const { terser } = require('rollup-plugin-terser');
6+
7+
module.exports = {
8+
input: 'src/visualizer.ts',
9+
plugins: [
10+
nodeResolve(),
11+
// commonjs(),
12+
typescript(),
13+
// import from .css, .less, and inject into the document <head></head>
14+
postCss(),
15+
],
16+
output: [
17+
{
18+
file: '_bundles/ui-router-visualizer.js',
19+
format: 'umd',
20+
name: '@uirouter/visualizer',
21+
sourcemap: true,
22+
},
23+
{
24+
file: '_bundles/ui-router-visualizer.esm.js',
25+
format: 'es',
26+
sourcemap: true,
27+
},
28+
],
29+
};

‎src/statevis/Controls.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@ export interface IControlsState {
2121
showRendererPrefs: boolean;
2222
}
2323

24-
declare function require(string): string;
25-
const imgChevron = require('../../images/16/chevron-down.png');
26-
2724
export class Controls extends Component<IControlsProps, IControlsState> {
2825
state = {
2926
showRendererPrefs: false,

‎src/statevis/StateVisualizer.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ import { Controls } from './Controls';
77
import { StateVisWindow } from './StateVisWindow';
88
import { DEFAULT_RENDERER } from './renderers';
99
import { Renderer } from './interface';
10-
11-
declare function require(string): string;
12-
require('./statevis.css');
10+
import './statevis.css';
1311

1412
export interface IProps {
1513
router;
@@ -129,7 +127,7 @@ export class StateVisualizer extends Component<IProps, IState> {
129127
}
130128

131129
componentWillUnmount() {
132-
this.deregisterFns.forEach(fn => fn());
130+
this.deregisterFns.forEach((fn) => fn());
133131
}
134132

135133
draggable() {
@@ -155,13 +153,13 @@ export class StateVisualizer extends Component<IProps, IState> {
155153
const { minimized } = this.state;
156154
return (
157155
<div
158-
ref={el => (this.el = el as HTMLElement)}
156+
ref={(el) => (this.el = el as HTMLElement)}
159157
onMouseDown={this.cancelAutoMinimize.bind(this)}
160158
onMouseEnter={this.cancelAutoMinimize.bind(this)}
161159
>
162160
<StateVisWindow
163161
minimized={this.state.minimized}
164-
ref={windowRef => (this.windowEl = (windowRef && windowRef.el) || this.windowEl)}
162+
ref={(windowRef) => (this.windowEl = (windowRef && windowRef.el) || this.windowEl)}
165163
onResize={({ width, height }) => this.setState({ width, height })}
166164
>
167165
<div

‎src/transition/TransitionVisualizer.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import { h, render, Component } from 'preact';
33
import { TransitionView } from './TransitionView';
44
import { easing } from '../util/easing';
55
import { animatePath } from '../util/animatepath';
6-
7-
declare var require;
8-
require('./transitionVisualizer.css');
6+
import './transitionVisualizer.css';
97

108
export interface IProps {
119
router: any;
@@ -114,7 +112,7 @@ export class TransitionVisualizer extends Component<IProps, IState> {
114112
cancelPreviousAnim = null;
115113

116114
componentDidMount() {
117-
let dereg = this.props.router.transitionService.onBefore({}, trans => {
115+
let dereg = this.props.router.transitionService.onBefore({}, (trans) => {
118116
this.setState({ transitions: this.state.transitions.concat(trans) });
119117

120118
let duration = 750,
@@ -133,7 +131,7 @@ export class TransitionVisualizer extends Component<IProps, IState> {
133131
this.setState({ transitions: list.slice(list.length - max) });
134132
};
135133

136-
let callback = vals => (el.scrollLeft = vals[0]);
134+
let callback = (vals) => (el.scrollLeft = vals[0]);
137135
this.cancelPreviousAnim = animatePath(newVal, oldVal, duration, callback, enforceMax, easing.easeInOutCubic);
138136
};
139137

@@ -153,7 +151,7 @@ export class TransitionVisualizer extends Component<IProps, IState> {
153151
*
154152
* Enable pointer events when mouse is inside the timeline to allow horizontal scroll & scroll wheel
155153
*/
156-
onMouseMove = evt => {
154+
onMouseMove = (evt) => {
157155
let windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
158156
var pointerEvents = windowHeight - evt.clientY < 65 ? 'auto' : 'none';
159157
if (this.state.pointerEvents != pointerEvents) {
@@ -169,9 +167,9 @@ export class TransitionVisualizer extends Component<IProps, IState> {
169167
let pointerEvents = this.state.pointerEvents;
170168

171169
return (
172-
<div ref={el => (this._div = el)}>
170+
<div ref={(el) => (this._div = el)}>
173171
<div className="uirTranVis_history" style={{ pointerEvents }}>
174-
{this.state.transitions.map(trans => (
172+
{this.state.transitions.map((trans) => (
175173
<div key={trans.$id} className="uirTranVis_transition">
176174
<TransitionView transition={trans} />
177175
<div style={{ minWidth: '18em', border: '1px solid transparent' }} />

‎tsconfig.json

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
11
{
2-
"files": [
3-
"src/visualizer.ts", "src/svg.d.ts"
4-
],
5-
2+
"include": ["src"],
63
"compilerOptions": {
74
"jsx": "react",
85
"jsxFactory": "h",
96
"lib": ["es6", "dom"],
10-
"emitDecoratorMetadata": true,
11-
"experimentalDecorators": true,
12-
"rootDir": "src",
7+
"rootDir": ".",
138
"sourceRoot": "src",
149
"moduleResolution": "node",
15-
"module": "commonjs",
1610
"target": "es5",
17-
"outDir": "lib",
18-
"declaration": true,
19-
"sourceMap": true
11+
"sourceMap": true,
12+
"inlineSources": true
2013
}
2114
}
22-

‎webpack.config.js

Lines changed: 0 additions & 63 deletions
This file was deleted.

0 commit comments

Comments
 (0)