Merge pull request #268 from FormidableLabs/jp-upgrade-babel

upgrade Babel, Rollup, Storybook

.babelrc

@@ -1,14 +1,24 @@
 {
   "presets": [
-    ["env", { "loose": true }],
-    "react"
+    [
+      "@babel/preset-env",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/preset-react"
   ],
   "plugins": [
     "add-module-exports",
-    "transform-object-rest-spread",
-    "transform-class-properties",
-    ["transform-react-remove-prop-types", {
-      "mode": "wrap"
-    }]
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-private-property-in-object",
+    "@babel/plugin-proposal-private-methods",
+    [
+      "transform-react-remove-prop-types",
+      {
+        "mode": "wrap"
+      }
+    ]
   ]
-}
+}

.storybook/.babelrc

@@ -1,11 +1,11 @@
 {
   "presets": [
-    "env",
-    "react"
+    "@babel/preset-env",
+    "@babel/preset-react"
   ],
   "plugins": [
     "add-module-exports",
-    "transform-object-rest-spread",
-    "transform-class-properties"
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
   ]
-}
+}

.storybook/main.js

@@ -0,0 +1,9 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*js"
+  ],
+  "addons": [
+    "@storybook/addon-controls",
+    // "@storybook/addon-actions"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,8 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  // controls: {
+  //   matchers: {
+  //     color: /(background|color)$/i,
+  //   },
+  // },
+}

package.json

@@ -8,8 +8,8 @@
   "module": "dist/react-live.es.js",
   "license": "MIT",
   "scripts": {
-    "storybook": "start-storybook -p 9001 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o .out",
+    "storybook": "start-storybook -p 9001",
+    "storybook:build": "build-storybook -o .out",
     "prebuild:lib": "rm -rf lib/*",
     "build": "rollup -c",
     "prepublishOnly": "npm run build",
@@ -29,19 +29,24 @@
     "unescape": "^1.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-knobs": "^3.3.12",
-    "@storybook/react": "^3.3.12",
+    "@babel/core": "^7.15.0",
+    "@babel/eslint-parser": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@storybook/addon-controls": "^6.3.6",
+    "@storybook/react": "^6.3.6",
     "@types/react": "^16.0.36",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^22.2.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.23.0",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-react": "^6.23.0",
+    "babel-jest": "^27.0.6",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-add-module-exports": "^1.0.4",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^5.16.0",
@@ -50,17 +55,13 @@
     "eslint-plugin-filenames": "^1.2.0",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-react": "^7.7.0",
-    "jest": "^22.2.1",
+    "jest": "^27.0.6",
     "prettier": "^1.17.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "rollup": "^0.55.3",
-    "rollup-plugin-babel": "^3.0.3",
-    "rollup-plugin-commonjs": "^8.3.0",
-    "rollup-plugin-filesize": "^1.5.0",
-    "rollup-plugin-node-resolve": "^3.0.2",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify-es": "^0.0.1",
+    "rollup": "^2.55.1",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^4.0.0-beta.8",
     "typescript": "^2.9.2",
     "typings-tester": "^0.3.1"

rollup.config.js

@@ -1,8 +1,8 @@
-import nodeResolve from 'rollup-plugin-node-resolve';
-import replace from 'rollup-plugin-replace';
-import commonjs from 'rollup-plugin-commonjs';
-import babel from 'rollup-plugin-babel';
-import uglify from 'rollup-plugin-uglify-es';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import commonjs from '@rollup/plugin-commonjs';
+import { babel } from '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
 import filesize from 'rollup-plugin-filesize';
 
 const plugins = [
@@ -12,35 +12,38 @@ const plugins = [
   }),
   commonjs({
     include: 'node_modules/**',
-    namedExports: {
-      'buble/dist/buble.deps': ['transform'],
-      buble: ['transform'],
-      'prismjs/components/prism-core': ['highlight', 'languages']
-    }
   }),
   babel({
+    babelHelpers: 'runtime',
     babelrc: false,
-    presets: [['env', { modules: false, loose: true }], 'react'],
+    presets: [
+      ['@babel/preset-env', { modules: false, loose: true }],
+      '@babel/preset-react',
+    ],
     plugins: [
-      'external-helpers',
-      'transform-object-rest-spread',
-      'transform-class-properties',
-      'transform-react-remove-prop-types'
+      '@babel/plugin-transform-runtime',
+      '@babel/plugin-proposal-object-rest-spread',
+      '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-proposal-private-property-in-object',
+      '@babel/plugin-proposal-private-methods',
+      'transform-react-remove-prop-types',
     ].filter(Boolean)
   })
 ];
 
 const devPlugins = plugins.concat([
   replace({
-    'process.env.NODE_ENV': JSON.stringify('development')
+    'process.env.NODE_ENV': JSON.stringify('development'),
+    preventAssignment: true,
   })
 ]);
 
 const prodPlugins = plugins.concat([
   replace({
-    'process.env.NODE_ENV': JSON.stringify('production')
+    'process.env.NODE_ENV': JSON.stringify('production'),
+    preventAssignment: true,
   }),
-  uglify(),
+  terser(),
   filesize()
 ]);
 

stories/Editor.js

@@ -1,11 +1,16 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs/react';
 
 import { Editor } from '../src/index';
 
-storiesOf('Editor', module)
-  .addDecorator(withKnobs)
-  .add('default', () => (
-    <Editor language="js" code="const x = 'Hello World!';" />
-  ));
+export default {
+  title: 'Editor',
+  component: Editor,
+}
+
+const Template = (args) => <Editor {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  language: "js",
+  code: "const x = 'Hello World!';"
+};