FormidableLabs · ryan-roemer · Mar 20, 2018 · Mar 18, 2018 · Mar 18, 2018 · Mar 18, 2018
diff --git a/.babelrc b/.babelrc
@@ -1,28 +1,15 @@
 {
-  "presets": [
-    [ "es2015", { "loose": true, "modules" : false } ],
-    "stage-0",
-    "react"
-  ],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
-    "transform-decorators-legacy",
-    "emotion"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-emotion"
   ],
   "env": {
-    "production": {
-      "plugins": [
-        "transform-es2015-modules-commonjs",
-        "transform-react-remove-prop-types",
-        "transform-react-constant-elements",
-        "transform-react-inline-elements",
-        "transform-runtime",
-        "transform-decorators-legacy",
-        "emotion"
-      ]
-    },
-    "test": {
-      "plugins": [
-        "transform-es2015-modules-commonjs"
+    "esm": {
+      "presets": [
+        ["@babel/preset-env", { "modules": false }],
+        "@babel/preset-react"
       ]
     }
   }

diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 node_modules
 dist
 lib
+es
 *.log
 .DS_Store
 .vscode
diff --git a/.npmignore b/.npmignore
@@ -2,6 +2,7 @@
 !/dist/spectacle*
 dist/*.map
 !/docs
+!/es
 !/lib
 !/src
 __snapshots__

diff --git a/.travis.yml b/.travis.yml
@@ -1,8 +1,9 @@
 language: node_js
 
 node_js:
-  - 6
-  - 8
+  - "6"
+  - "8"
+  - "9"
 
 # Use container-based Travis infrastructure.
 sudo: false
@@ -16,10 +17,6 @@ notifications:
     on_success: change
     on_failure: always
 
-before_install:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
-
 script:
-  - yarn run lint
-  - yarn run test
+  - yarn run build
+  - yarn run check
diff --git a/README.md b/README.md
@@ -132,11 +132,11 @@ We can start with this project's sample at [`one-page.html`](./one-page.html). I
 <body>
     <div id="root"></div>
     <script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
-    <script src="https://unpkg.com/react@15/dist/react.js"></script>
-    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
-    <script src="https://unpkg.com/spectacle/dist/spectacle.js"></script>
-    <script src="https://unpkg.com/spectacle/lib/one-page.js"></script>
+    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
+    <script src="https://unpkg.com/spectacle@^4/dist/spectacle.js"></script>
+    <script src="https://unpkg.com/spectacle@^4/lib/one-page.js"></script>
     <script type="text/spectacle">
       () => {
         // Your JS Code goes here

diff --git a/example/assets/interactive.js b/example/assets/interactive.js
@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import Heading from "../../src/components/heading";
+import React, { Component } from 'react';
+import Heading from '../../src/components/heading';
 
 export default class Interactive extends Component {
   constructor() {
@@ -17,15 +17,15 @@ export default class Interactive extends Component {
   render() {
     const styles = {
       padding: 20,
-      background: "black",
+      background: 'black',
       minWidth: 300,
       marginTop: 20,
-      textTransform: "uppercase",
-      border: "none",
-      color: "white",
-      outline: "none",
-      fontWeight: "bold",
-      fontSize: "2em"
+      textTransform: 'uppercase',
+      border: 'none',
+      color: 'white',
+      outline: 'none',
+      fontWeight: 'bold',
+      fontSize: '2em'
     };
     return (
       <div>

diff --git a/example/src/index.js b/example/src/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import {
   Appear, BlockQuote, Cite, CodePane, ComponentPlayground, Deck, Fill,
@@ -27,14 +27,20 @@ const theme = createTheme({
   primary: '#ff4081'
 });
 
-export default class Presentation extends React.Component {
+export default class Presentation extends Component {
+  constructor() {
+    super(...arguments);
+
+    this.updateSteps = this.updateSteps.bind(this);
+  }
+
   state = {
     steps: 0
-  }
+  };
 
-  updateSteps = steps => {
-    if (this.state.steps !== steps) { // eslint-disable-line no-invalid-this
-      this.setState({ steps }); // eslint-disable-line no-invalid-this
+  updateSteps(steps) {
+    if (this.state.steps !== steps) {
+      this.setState({ steps });
     }
   }
 

diff --git a/one-page.html b/one-page.html
@@ -11,9 +11,9 @@
 <body>
     <div id="root"></div>
     <script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
-    <script src="https://unpkg.com/react@15/dist/react.js"></script>
-    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
-    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
     <script src="https://unpkg.com/spectacle@^4/dist/spectacle.js"></script>
     <script src="https://unpkg.com/spectacle@^4/lib/one-page.js"></script>
     <script type="text/spectacle">

diff --git a/package.json b/package.json
@@ -3,22 +3,29 @@
   "version": "4.1.0",
   "description": "ReactJS Powered Presentation Framework",
   "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
   "scripts": {
     "preversion": "npm run test && npm run lint",
     "version": "npm run build:publish",
     "clean:lib": "rimraf lib",
     "clean:dist": "rimraf dist",
     "clean": "npm run clean:lib && npm run clean:dist",
-    "build:lib": "cross-env NODE_ENV=production babel src -d lib --copy-files && rimraf 'lib/**/__snapshots__' 'lib/**/*.test.js'",
-    "build:dist": "cross-env NODE_ENV=production webpack --config webpack.config.production.js",
-    "build:dist-umd": "webpack --config webpack.config.umd.js",
-    "build:dist-umd-prod": "cross-env NODE_ENV=production webpack --config webpack.config.umd.production.js",
-    "build:publish": "npm run clean && npm run build:lib && npm run build:dist-umd && npm run build:dist-umd-prod",
-    "lint": "eslint src *.js",
+    "build-babel": "babel src --ignore \"/__snapshots__/,/**/*.test.js/\"",
+    "build:es": "builder run  --env \"{\\\"BABEL_ENV\\\":\\\"esm\\\"}\" build-babel -- -d es",
+    "build:lib": "builder run build-babel -- -d lib",
+    "build-webpack": "webpack",
+    "build:dist": "builder run build-webpack --env \"{\\\"NODE_ENV\\\":\\\"production\\\"}\" -- --config webpack.config.production.js",
+    "build:dist-umd": "builder run build-webpack -- --config webpack.config.umd.js",
+    "build:dist-umd-prod": "builder run build-webpack --env \"{\\\"NODE_ENV\\\":\\\"production\\\"}\" -- --config webpack.config.umd.production.js",
+    "build": "builder concurrent --buffer build:es build:lib build:dist build:dist-umd build:dist-umd-prod",
+    "build:publish": "npm run clean && npm run build",
+    "lint": "eslint src example *.js",
     "deploy": "npm run build:dist && surge -p .",
     "start": "node server.js",
     "test": "jest --verbose",
-    "test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
+    "test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand",
+    "check": "npm run lint && npm run test"
   },
   "author": "",
   "license": "MIT",
@@ -50,24 +57,18 @@
     "react-dom": "^16.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
+    "@babel/cli": "^7.0.0-beta.42",
+    "@babel/core": "^7.0.0-beta.42",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.42",
+    "@babel/polyfill": "^7.0.0-beta.42",
+    "@babel/preset-env": "^7.0.0-beta.42",
+    "@babel/preset-react": "^7.0.0-beta.42",
     "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.3",
+    "babel-jest": "^22.1.0",
     "babel-loader": "^7.0.0",
-    "babel-plugin-emotion": "^8.0.6",
-    "babel-plugin-react-transform": "^2.0.0-beta1",
-    "babel-plugin-transform-decorators-legacy": "^1.2.0",
-    "babel-plugin-transform-react-constant-elements": "^6.23.0",
-    "babel-plugin-transform-react-inline-elements": "^6.22.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.5",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-runtime": "^6.23.0",
-    "cross-env": "^5.0.0",
+    "babel-plugin-emotion": "^9.0.1",
+    "builder": "^4.0.0",
     "css-loader": "^0.28.2",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.1",
@@ -79,16 +80,14 @@
     "eslint-plugin-react": "^7.0.1",
     "express": "^4.15.3",
     "file-loader": "^0.11.1",
-    "jest": "^20.0.4",
+    "jest": "^22.4.2",
     "jest-serializer-enzyme": "^1.0.0",
     "node-libs-browser": "^2.0.0",
     "prop-types": "^15.5.10",
     "raw-loader": "^0.5.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",
-    "react-transform-catch-errors": "^1.0.0",
-    "react-transform-hmr": "^1.0.1",
     "redbox-react": "1.5.0",
     "rimraf": "^2.6.1",
     "style-loader": "^0.18.1",
@@ -98,6 +97,9 @@
     "webpack-dev-middleware": "^1.10.2",
     "webpack-hot-middleware": "^2.18.0"
   },
+  "resolutions": {
+    "babel-core": "^7.0.0-beta.42"
+  },
   "jest": {
     "moduleNameMapper": {
       "\\.(css)$": "<rootDir>/__mocks__/styleMock.js"

diff --git a/src/components/__snapshots__/code-pane.test.js.snap b/src/components/__snapshots__/code-pane.test.js.snap
@@ -33,15 +33,15 @@ exports[`<CodePane /> should render correctly. 1`] = `
       <Styled(Component)
         className="language-jsx builtin-prism-theme "
         code="
-            const myButton = (
-              <CustomButton
-                style={{ background: '#f00' }}
-                onClick={this.action}
-              >
-               Click Me
-              </CustomButton>
-            );
-          "
+      const myButton = (
+        <CustomButton
+          style={{ background: '#f00' }}
+          onClick={this.action}
+        >
+         Click Me
+        </CustomButton>
+      );
+    "
         contentEditable={false}
         language="jsx"
         onClick={[Function]}
@@ -53,15 +53,15 @@ exports[`<CodePane /> should render correctly. 1`] = `
         <Component
           className="language-jsx builtin-prism-theme  css-3w3gcf"
           code="
-              const myButton = (
-                <CustomButton
-                  style={{ background: '#f00' }}
-                  onClick={this.action}
-                >
-                 Click Me
-                </CustomButton>
-              );
-            "
+      const myButton = (
+        <CustomButton
+          style={{ background: '#f00' }}
+          onClick={this.action}
+        >
+         Click Me
+        </CustomButton>
+      );
+    "
           contentEditable={false}
           language="jsx"
           onClick={[Function]}
@@ -73,15 +73,15 @@ exports[`<CodePane /> should render correctly. 1`] = `
           <Editor
             className="language-jsx builtin-prism-theme  css-3w3gcf"
             code="
-                const myButton = (
-                  <CustomButton
-                    style={{ background: '#f00' }}
-                    onClick={this.action}
-                  >
-                   Click Me
-                  </CustomButton>
-                );
-              "
+      const myButton = (
+        <CustomButton
+          style={{ background: '#f00' }}
+          onClick={this.action}
+        >
+         Click Me
+        </CustomButton>
+      );
+    "
             contentEditable={false}
             language="jsx"
             onClick={[Function]}
@@ -94,15 +94,15 @@ exports[`<CodePane /> should render correctly. 1`] = `
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "
-                      <span class=\\"token keyword\\">const</span> myButton <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">(</span>
-                        <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>CustomButton</span>
-                          <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>
-                          <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>
-                        <span class=\\"token punctuation\\">></span></span>
-                         Click Me
-                        <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>CustomButton</span><span class=\\"token punctuation\\">></span></span>
-                      <span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
-                    ",
+      <span class=\\"token keyword\\">const</span> myButton <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">(</span>
+        <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>CustomButton</span>
+          <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>
+          <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>
+        <span class=\\"token punctuation\\">></span></span>
+         Click Me
+        <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>CustomButton</span><span class=\\"token punctuation\\">></span></span>
+      <span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
+    ",
                 }
               }
               onClick={undefined}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ @@
     !/dist/spectacle*
     dist/*.map
     !/docs
+    !/es
     !/lib
     !/src
     __snapshots__
@@ Expand Down @@