Skip to content

Commit f578f8e

Browse files
ryan-roemerryan-roemer
authored
Build: Add ESM files + babel updates. (#493)
- Add ESM `es/` directory and `package.json:module` field. Fixes #491 - Enables webpack tree-shaking. Fixes #490 - Update to babel 7 - Refactor all es7 method arrow funcs (`foo = () => {}`) to real methods (`foo() {}`). (Just ones that are class methods, not generic arrow funcs). - Update `one-page` files with modern includes and catching up to the full Spectacle API. - Add `example` to lint - Add `builder` to run all our different builds concurrently for speedup. - Update travis config
1 parent c032f73 commit f578f8e

33 files changed

+2759
-1465
lines changed

‎.babelrc‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,15 @@
11
{
2-
"presets": [
3-
[ "es2015", { "loose": true, "modules" : false } ],
4-
"stage-0",
5-
"react"
6-
],
2+
"presets": ["@babel/preset-env", "@babel/preset-react"],
73
"plugins": [
8-
"transform-decorators-legacy",
9-
"emotion"
4+
"@babel/plugin-proposal-object-rest-spread",
5+
"@babel/plugin-proposal-class-properties",
6+
"babel-plugin-emotion"
107
],
118
"env": {
12-
"production": {
13-
"plugins": [
14-
"transform-es2015-modules-commonjs",
15-
"transform-react-remove-prop-types",
16-
"transform-react-constant-elements",
17-
"transform-react-inline-elements",
18-
"transform-runtime",
19-
"transform-decorators-legacy",
20-
"emotion"
21-
]
22-
},
23-
"test": {
24-
"plugins": [
25-
"transform-es2015-modules-commonjs"
9+
"esm": {
10+
"presets": [
11+
["@babel/preset-env", { "modules": false }],
12+
"@babel/preset-react"
2613
]
2714
}
2815
}

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
node_modules
22
dist
33
lib
4+
es
45
*.log
56
.DS_Store
67
.vscode

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
!/dist/spectacle*
33
dist/*.map
44
!/docs
5+
!/es
56
!/lib
67
!/src
78
__snapshots__

‎.travis.yml‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
language: node_js
22

33
node_js:
4-
- 6
5-
- 8
4+
- "6"
5+
- "8"
6+
- "9"
67

78
# Use container-based Travis infrastructure.
89
sudo: false
@@ -16,10 +17,6 @@ notifications:
1617
on_success: change
1718
on_failure: always
1819

19-
before_install:
20-
- export DISPLAY=:99.0
21-
- sh -e /etc/init.d/xvfb start
22-
2320
script:
24-
- yarn run lint
25-
- yarn run test
21+
- yarn run build
22+
- yarn run check

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,11 @@ We can start with this project's sample at [`one-page.html`](./one-page.html). I
132132
<body>
133133
<div id="root"></div>
134134
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
135-
<script src="https://unpkg.com/react@15/dist/react.js"></script>
136-
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
137-
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
138-
<script src="https://unpkg.com/spectacle/dist/spectacle.js"></script>
139-
<script src="https://unpkg.com/spectacle/lib/one-page.js"></script>
135+
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
136+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
137+
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
138+
<script src="https://unpkg.com/spectacle@^4/dist/spectacle.js"></script>
139+
<script src="https://unpkg.com/spectacle@^4/lib/one-page.js"></script>
140140
<script type="text/spectacle">
141141
() => {
142142
// Your JS Code goes here

‎example/assets/interactive.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { Component } from "react";
2-
import Heading from "../../src/components/heading";
1+
import React, { Component } from 'react';
2+
import Heading from '../../src/components/heading';
33

44
export default class Interactive extends Component {
55
constructor() {
@@ -17,15 +17,15 @@ export default class Interactive extends Component {
1717
render() {
1818
const styles = {
1919
padding: 20,
20-
background: "black",
20+
background: 'black',
2121
minWidth: 300,
2222
marginTop: 20,
23-
textTransform: "uppercase",
24-
border: "none",
25-
color: "white",
26-
outline: "none",
27-
fontWeight: "bold",
28-
fontSize: "2em"
23+
textTransform: 'uppercase',
24+
border: 'none',
25+
color: 'white',
26+
outline: 'none',
27+
fontWeight: 'bold',
28+
fontSize: '2em'
2929
};
3030
return (
3131
<div>

‎example/src/index.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { Component } from 'react';
22

33
import {
44
Appear, BlockQuote, Cite, CodePane, ComponentPlayground, Deck, Fill,
@@ -27,14 +27,20 @@ const theme = createTheme({
2727
primary: '#ff4081'
2828
});
2929

30-
export default class Presentation extends React.Component {
30+
export default class Presentation extends Component {
31+
constructor() {
32+
super(...arguments);
33+
34+
this.updateSteps = this.updateSteps.bind(this);
35+
}
36+
3137
state = {
3238
steps: 0
33-
}
39+
};
3440

35-
updateSteps = steps => {
36-
if (this.state.steps !== steps) { // eslint-disable-line no-invalid-this
37-
this.setState({ steps }); // eslint-disable-line no-invalid-this
41+
updateSteps(steps) {
42+
if (this.state.steps !== steps) {
43+
this.setState({ steps });
3844
}
3945
}
4046

‎one-page.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
<body>
1212
<div id="root"></div>
1313
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
14-
<script src="https://unpkg.com/react@15/dist/react.js"></script>
15-
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
16-
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
14+
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
15+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
16+
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
1717
<script src="https://unpkg.com/spectacle@^4/dist/spectacle.js"></script>
1818
<script src="https://unpkg.com/spectacle@^4/lib/one-page.js"></script>
1919
<script type="text/spectacle">

‎package.json‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,29 @@
33
"version": "4.1.0",
44
"description": "ReactJS Powered Presentation Framework",
55
"main": "lib/index.js",
6+
"module": "es/index.js",
7+
"jsnext:main": "es/index.js",
68
"scripts": {
79
"preversion": "npm run test && npm run lint",
810
"version": "npm run build:publish",
911
"clean:lib": "rimraf lib",
1012
"clean:dist": "rimraf dist",
1113
"clean": "npm run clean:lib && npm run clean:dist",
12-
"build:lib": "cross-env NODE_ENV=production babel src -d lib --copy-files && rimraf 'lib/**/__snapshots__' 'lib/**/*.test.js'",
13-
"build:dist": "cross-env NODE_ENV=production webpack --config webpack.config.production.js",
14-
"build:dist-umd": "webpack --config webpack.config.umd.js",
15-
"build:dist-umd-prod": "cross-env NODE_ENV=production webpack --config webpack.config.umd.production.js",
16-
"build:publish": "npm run clean && npm run build:lib && npm run build:dist-umd && npm run build:dist-umd-prod",
17-
"lint": "eslint src *.js",
14+
"build-babel": "babel src --ignore \"/__snapshots__/,/**/*.test.js/\"",
15+
"build:es": "builder run --env \"{\\\"BABEL_ENV\\\":\\\"esm\\\"}\" build-babel -- -d es",
16+
"build:lib": "builder run build-babel -- -d lib",
17+
"build-webpack": "webpack",
18+
"build:dist": "builder run build-webpack --env \"{\\\"NODE_ENV\\\":\\\"production\\\"}\" -- --config webpack.config.production.js",
19+
"build:dist-umd": "builder run build-webpack -- --config webpack.config.umd.js",
20+
"build:dist-umd-prod": "builder run build-webpack --env \"{\\\"NODE_ENV\\\":\\\"production\\\"}\" -- --config webpack.config.umd.production.js",
21+
"build": "builder concurrent --buffer build:es build:lib build:dist build:dist-umd build:dist-umd-prod",
22+
"build:publish": "npm run clean && npm run build",
23+
"lint": "eslint src example *.js",
1824
"deploy": "npm run build:dist && surge -p .",
1925
"start": "node server.js",
2026
"test": "jest --verbose",
21-
"test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
27+
"test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand",
28+
"check": "npm run lint && npm run test"
2229
},
2330
"author": "",
2431
"license": "MIT",
@@ -50,24 +57,18 @@
5057
"react-dom": "^16.0.0"
5158
},
5259
"devDependencies": {
53-
"babel-cli": "^6.24.1",
54-
"babel-core": "^6.24.1",
60+
"@babel/cli": "^7.0.0-beta.42",
61+
"@babel/core": "^7.0.0-beta.42",
62+
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
63+
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.42",
64+
"@babel/polyfill": "^7.0.0-beta.42",
65+
"@babel/preset-env": "^7.0.0-beta.42",
66+
"@babel/preset-react": "^7.0.0-beta.42",
5567
"babel-eslint": "^7.2.3",
56-
"babel-jest": "^20.0.3",
68+
"babel-jest": "^22.1.0",
5769
"babel-loader": "^7.0.0",
58-
"babel-plugin-emotion": "^8.0.6",
59-
"babel-plugin-react-transform": "^2.0.0-beta1",
60-
"babel-plugin-transform-decorators-legacy": "^1.2.0",
61-
"babel-plugin-transform-react-constant-elements": "^6.23.0",
62-
"babel-plugin-transform-react-inline-elements": "^6.22.0",
63-
"babel-plugin-transform-react-remove-prop-types": "^0.4.5",
64-
"babel-plugin-transform-runtime": "^6.23.0",
65-
"babel-polyfill": "^6.23.0",
66-
"babel-preset-es2015": "^6.24.1",
67-
"babel-preset-react": "^6.24.1",
68-
"babel-preset-stage-0": "^6.24.1",
69-
"babel-runtime": "^6.23.0",
70-
"cross-env": "^5.0.0",
70+
"babel-plugin-emotion": "^9.0.1",
71+
"builder": "^4.0.0",
7172
"css-loader": "^0.28.2",
7273
"enzyme": "^3.1.0",
7374
"enzyme-adapter-react-16": "^1.0.1",
@@ -79,16 +80,14 @@
7980
"eslint-plugin-react": "^7.0.1",
8081
"express": "^4.15.3",
8182
"file-loader": "^0.11.1",
82-
"jest": "^20.0.4",
83+
"jest": "^22.4.2",
8384
"jest-serializer-enzyme": "^1.0.0",
8485
"node-libs-browser": "^2.0.0",
8586
"prop-types": "^15.5.10",
8687
"raw-loader": "^0.5.1",
8788
"react": "^16.0.0",
8889
"react-dom": "^16.0.0",
8990
"react-test-renderer": "^16.0.0",
90-
"react-transform-catch-errors": "^1.0.0",
91-
"react-transform-hmr": "^1.0.1",
9291
"redbox-react": "1.5.0",
9392
"rimraf": "^2.6.1",
9493
"style-loader": "^0.18.1",
@@ -98,6 +97,9 @@
9897
"webpack-dev-middleware": "^1.10.2",
9998
"webpack-hot-middleware": "^2.18.0"
10099
},
100+
"resolutions": {
101+
"babel-core": "^7.0.0-beta.42"
102+
},
101103
"jest": {
102104
"moduleNameMapper": {
103105
"\\.(css)$": "<rootDir>/__mocks__/styleMock.js"

‎src/components/__snapshots__/code-pane.test.js.snap‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,15 @@ exports[`<CodePane /> should render correctly. 1`] = `
3333
<Styled(Component)
3434
className="language-jsx builtin-prism-theme "
3535
code="
36-
const myButton = (
37-
<CustomButton
38-
style={{ background: '#f00' }}
39-
onClick={this.action}
40-
>
41-
Click Me
42-
</CustomButton>
43-
);
44-
"
36+
const myButton = (
37+
<CustomButton
38+
style={{ background: '#f00' }}
39+
onClick={this.action}
40+
>
41+
Click Me
42+
</CustomButton>
43+
);
44+
"
4545
contentEditable={false}
4646
language="jsx"
4747
onClick={[Function]}
@@ -53,15 +53,15 @@ exports[`<CodePane /> should render correctly. 1`] = `
5353
<Component
5454
className="language-jsx builtin-prism-theme css-3w3gcf"
5555
code="
56-
const myButton = (
57-
<CustomButton
58-
style={{ background: '#f00' }}
59-
onClick={this.action}
60-
>
61-
Click Me
62-
</CustomButton>
63-
);
64-
"
56+
const myButton = (
57+
<CustomButton
58+
style={{ background: '#f00' }}
59+
onClick={this.action}
60+
>
61+
Click Me
62+
</CustomButton>
63+
);
64+
"
6565
contentEditable={false}
6666
language="jsx"
6767
onClick={[Function]}
@@ -73,15 +73,15 @@ exports[`<CodePane /> should render correctly. 1`] = `
7373
<Editor
7474
className="language-jsx builtin-prism-theme css-3w3gcf"
7575
code="
76-
const myButton = (
77-
<CustomButton
78-
style={{ background: '#f00' }}
79-
onClick={this.action}
80-
>
81-
Click Me
82-
</CustomButton>
83-
);
84-
"
76+
const myButton = (
77+
<CustomButton
78+
style={{ background: '#f00' }}
79+
onClick={this.action}
80+
>
81+
Click Me
82+
</CustomButton>
83+
);
84+
"
8585
contentEditable={false}
8686
language="jsx"
8787
onClick={[Function]}
@@ -94,15 +94,15 @@ exports[`<CodePane /> should render correctly. 1`] = `
9494
dangerouslySetInnerHTML={
9595
Object {
9696
"__html": "
97-
<span class=\\"token keyword\\">const</span> myButton <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">(</span>
98-
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>CustomButton</span>
99-
<span class=\\"token attr-name\\">style</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">{</span> background<span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">'#f00'</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">}</span></span>
100-
<span class=\\"token attr-name\\">onClick</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>action<span class=\\"token punctuation\\">}</span></span>
101-
<span class=\\"token punctuation\\">></span></span>
102-
Click Me
103-
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>CustomButton</span><span class=\\"token punctuation\\">></span></span>
104-
<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
105-
",
97+
<span class=\\"token keyword\\">const</span> myButton <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">(</span>
98+
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>CustomButton</span>
99+
<span class=\\"token attr-name\\">style</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">{</span> background<span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">'#f00'</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">}</span></span>
100+
<span class=\\"token attr-name\\">onClick</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>action<span class=\\"token punctuation\\">}</span></span>
101+
<span class=\\"token punctuation\\">></span></span>
102+
Click Me
103+
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>CustomButton</span><span class=\\"token punctuation\\">></span></span>
104+
<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
105+
",
106106
}
107107
}
108108
onClick={undefined}

0 commit comments

Comments
 (0)