Core: Support custom addons using JSX

addons/actions/src/manager.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import addons from '@storybook/addons';
 import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';

examples/marko-cli/src/stories/hello.stories.js

@@ -8,5 +8,3 @@ export default {
 };
 
 export const Simple = () => ({ input: { name: 'abc', age: 20 } });
-export const Story2 = () => 'NOT A MARKO RENDER_RESULT';
-Story2.story = { name: 'with ERROR!' };

lib/core/package.json

@@ -27,11 +27,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-export-default-from": "^7.8.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
     "@storybook/addons": "6.0.0-alpha.6",
     "@storybook/channel-postmessage": "6.0.0-alpha.6",
     "@storybook/client-api": "6.0.0-alpha.6",
@@ -45,9 +48,10 @@
     "airbnb-js-shims": "^2.2.1",
     "ansi-to-html": "^0.6.11",
     "autoprefixer": "^9.7.2",
+    "babel-loader": "^8.0.6",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-emotion": "^10.0.20",
-    "babel-plugin-macros": "^2.7.0",
+    "babel-plugin-macros": "^2.8.0",
     "babel-preset-minify": "^0.5.0 || 0.6.0-alpha.5",
     "boxen": "^4.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",

lib/core/src/server/manager/babel-loader-manager.js

@@ -0,0 +1,33 @@
+import { includePaths } from '../config/utils';
+
+export default () => ({
+  test: /\.(mjs|tsx?|jsx?)$/,
+  use: [
+    {
+      loader: require.resolve('babel-loader'),
+      options: {
+        sourceType: 'unambiguous',
+        presets: [
+          [
+            require.resolve('@babel/preset-env'),
+            { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' },
+          ],
+          require.resolve('@babel/preset-typescript'),
+          require.resolve('@babel/preset-react'),
+        ],
+        plugins: [
+          [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
+          require.resolve('@babel/plugin-proposal-export-default-from'),
+          require.resolve('@babel/plugin-syntax-dynamic-import'),
+          [
+            require.resolve('@babel/plugin-proposal-object-rest-spread'),
+            { loose: true, useBuiltIns: true },
+          ],
+          require.resolve('babel-plugin-macros'),
+        ],
+      },
+    },
+  ],
+  include: includePaths,
+  exclude: [/node_module/, /dist/],
+});

lib/core/src/server/manager/manager-webpack.config.js

@@ -12,7 +12,8 @@ import uiPaths from '@storybook/ui/paths';
 import { version } from '../../../package.json';
 import { getManagerHeadHtml } from '../utils/template';
 import { loadEnv } from '../config/utils';
-import babelLoader from '../common/babel-loader';
+
+import babelLoader from './babel-loader-manager';
 import { resolvePathInStorybookCache } from '../utils/resolve-path-in-sb-cache';
 
 const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
@@ -26,7 +27,6 @@ export default ({
   dll,
   outputDir,
   cache,
-  babelOptions,
   previewUrl,
   versionCheck,
 }) => {
@@ -85,7 +85,7 @@ export default ({
     ].filter(Boolean),
     module: {
       rules: [
-        babelLoader(babelOptions),
+        babelLoader(),
         {
           test: /\.css$/,
           use: [

lib/core/src/server/preview/iframe-webpack.config.js

@@ -7,11 +7,12 @@ import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModul
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import CoreJSUpgradeWebpackPlugin from 'corejs-upgrade-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
+import PnpWebpackPlugin from 'pnp-webpack-plugin';
 
 import resolveFrom from 'resolve-from';
 
-import PnpWebpackPlugin from 'pnp-webpack-plugin';
-import createBabelLoader from '../common/babel-loader';
+import createBabelLoader from './babel-loader-preview';
+
 import { nodeModulesPaths, loadEnv } from '../config/utils';
 import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template';
 import { toRequireContextString } from './to-require-context';

yarn.lock

@@ -653,7 +653,7 @@
     "@babel/helper-create-class-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.3.3", "@babel/plugin-proposal-class-properties@^7.5.5", "@babel/plugin-proposal-class-properties@^7.7.0", "@babel/plugin-proposal-class-properties@^7.8.3":
+"@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.3.3", "@babel/plugin-proposal-class-properties@^7.5.5", "@babel/plugin-proposal-class-properties@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
   integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
@@ -705,7 +705,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-export-default-from" "^7.2.0"
 
-"@babel/plugin-proposal-export-default-from@^7.2.0", "@babel/plugin-proposal-export-default-from@^7.5.2":
+"@babel/plugin-proposal-export-default-from@^7.2.0", "@babel/plugin-proposal-export-default-from@^7.5.2", "@babel/plugin-proposal-export-default-from@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.8.3.tgz#4cb7c2fdeaed490b60d9bfd3dc8a20f81f9c2e7c"
   integrity sha512-PYtv2S2OdCdp7GSPDg5ndGZFm9DmWFvuLoS5nBxZCgOBggluLnhTScspJxng96alHQzPyrrHxvC9/w4bFuspeA==
@@ -777,7 +777,7 @@
     "@babel/helper-plugin-utils" "^7.8.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.2.0", "@babel/plugin-proposal-object-rest-spread@^7.6.2", "@babel/plugin-proposal-object-rest-spread@^7.7.4", "@babel/plugin-proposal-object-rest-spread@^7.8.3":
+"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.2.0", "@babel/plugin-proposal-object-rest-spread@^7.7.4", "@babel/plugin-proposal-object-rest-spread@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.8.3.tgz#eb5ae366118ddca67bed583b53d7554cad9951bb"
   integrity sha512-8qvuPwU/xxUCt78HocNlv0mXXo0wdh9VT1R04WU8HGOfaOob26pF+9P5/lYjN/q7DHOX1bvX60hnhOvuQUJdbA==
@@ -845,7 +845,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.7.4", "@babel/plugin-syntax-dynamic-import@^7.8.0":
+"@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.7.4", "@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
   integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
@@ -1612,7 +1612,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.7.4"
 
-"@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.3.3":
+"@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.3.3", "@babel/preset-typescript@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.8.3.tgz#90af8690121beecd9a75d0cc26c6be39d1595d13"
   integrity sha512-qee5LgPGui9zQ0jR1TeU5/fP9L+ovoArklEqY12ek8P/wV5ZeM/VYSQYwICeoT6FfpJTekG9Ilay5PhwsOpMHA==
@@ -6247,7 +6247,7 @@ [email protected]:
     cosmiconfig "^6.0.0"
     resolve "^1.12.0"
 
-babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.7.0:
+babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.7.0, babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==