Merge pull request #4077 from storybooks/no-babelrc-false

Use `babelrc: false` only for custom config in `.storybook` directory

app/angular/package.json

@@ -32,6 +32,7 @@
     "react-dom": "^16.4.2",
     "sass-loader": "^7.1.0",
     "ts-loader": "^4.4.2",
+    "webpack": "^4.16.4",
     "zone.js": "^0.8.26"
   },
   "peerDependencies": {

app/angular/src/server/wrapInitialConfig.js

@@ -1,3 +1,5 @@
+import path from 'path';
+import { ContextReplacementPlugin } from 'webpack';
 import loadTsConfig from './ts_config';
 
 export default (config, configDir) => ({
@@ -35,4 +37,9 @@ export default (config, configDir) => ({
     ...config.resolve,
     extensions: [...config.resolve.extensions, '.ts', '.tsx'],
   },
+  plugins: [
+    ...config.plugins,
+    // See https://github.com/angular/angular/issues/11580#issuecomment-401127742
+    new ContextReplacementPlugin(/@angular(\\|\/)core(\\|\/)fesm5/, path.resolve(__dirname, '..')),
+  ],
 });

app/polymer/package.json

@@ -28,7 +28,8 @@
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "react": "^16.4.2",
-    "react-dom": "^16.4.2"
+    "react-dom": "^16.4.2",
+    "webpack": "^4.16.4"
   },
   "devDependencies": {
     "lit-html": "^0.10.2",

app/polymer/src/server/wrapInitialConfig.js

@@ -1,3 +1,5 @@
+import { IgnorePlugin } from 'webpack';
+
 export default config => ({
   ...config,
   module: {
@@ -16,4 +18,9 @@ export default config => ({
       },
     ],
   },
+  plugins: [
+    ...config.plugins,
+    // See https://github.com/webcomponents/webcomponentsjs/issues/794#issuecomment-386554298
+    new IgnorePlugin(/^vertx$/),
+  ],
 });

examples/marko-cli/package.json

@@ -19,8 +19,7 @@
   },
   "dependencies": {
     "marko": "^4.12.4",
-    "marko-starter": "^2.0.4",
-    "marko-widgets": "^7.0.1"
+    "marko-starter": "^2.0.4"
   },
   "devDependencies": {
     "@storybook/addon-actions": "4.0.0-alpha.18",

examples/marko-cli/src/stories/addon-knobs.stories.js

@@ -1,9 +1,7 @@
 import { storiesOf } from '@storybook/marko';
-import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
+import { withKnobs, text, number } from '@storybook/addon-knobs';
 import { withOptions } from '@storybook/addon-options';
 import Hello from '../components/hello/index.marko';
-import MarkoWidgetHello from '../components/marko-widgets/hello';
-import MarkoWidgetButton from '../components/marko-widgets/button';
 
 storiesOf('Addons|Knobs/Hello', module)
   .addDecorator(withOptions)
@@ -17,27 +15,3 @@ storiesOf('Addons|Knobs/Hello', module)
       age,
     });
   });
-
-storiesOf('Addons|Knobs/Hello (Marko Widget)', module)
-  .addDecorator(withOptions)
-  .addDecorator(withKnobs)
-  .addParameters({ options: { addonPanelInRight: false } })
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    return MarkoWidgetHello.renderSync({
-      name,
-    });
-  });
-
-storiesOf('Addons|Knobs/Button (Marko Widget)', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const body = text('Body', 'Hello Button');
-    const priority = text('Priority', 'danger');
-    const disabled = boolean('Disabled', false);
-    return MarkoWidgetButton.renderSync({
-      body,
-      priority,
-      disabled,
-    });
-  });

examples/official-storybook/webpack.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const { DefinePlugin } = require('webpack');
+const { DefinePlugin, ContextReplacementPlugin } = require('webpack');
 
 module.exports = (baseConfig, env, defaultConfig) => ({
   ...defaultConfig,
@@ -38,5 +38,7 @@ module.exports = (baseConfig, env, defaultConfig) => ({
     new DefinePlugin({
       process: JSON.stringify(true),
     }),
+    // See https://github.com/graphql/graphql-language-service/issues/111#issuecomment-306723400
+    new ContextReplacementPlugin(/graphql-language-service-interface[/\\]dist/, /\.js$/),
   ],
 });

lib/cli/lib/helpers.js

@@ -69,16 +69,6 @@ export function writePackageJson(packageJson) {
   fs.writeFileSync(packageJsonPath, content, 'utf8');
 }
 
-export function getBabelRc() {
-  const babelRcPath = path.resolve('.babelrc');
-  if (!fs.existsSync(babelRcPath)) {
-    return false;
-  }
-
-  const babelRcContent = fs.readFileSync(babelRcPath, 'utf8');
-  return JSON.parse(babelRcContent);
-}
-
 export function writeBabelRc(babelRc) {
   const content = `${JSON.stringify(babelRc, null, 2)}\n`;
   const babelRcPath = path.resolve('.babelrc');
@@ -185,12 +175,6 @@ export async function installBabel(npmOptions, packageJson) {
     );
     // Babel 6
     if (satisfies(latestCompatibleBabelVersion, '^6.0.0')) {
-      if (!getBabelRc()) {
-        logger.warn(
-          chalk.red(`
-  You have a dependency on Babel 6 but don't have a .babelrc file. Please add one either in project directory or in .storybook.'`)
-        );
-      }
       babelLoaderVersion = '^7.0.0';
     }
   }

lib/cli/test/fixtures/react_babel_config_js/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

lib/cli/test/fixtures/react_babel_config_js/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['@babel/plugin-proposal-optional-chaining'],
+};

lib/cli/test/fixtures/react_babel_config_js/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-babel-config-js-fixture",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "stories/index.stories.js",
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "7.0.0-rc.3",
+    "@babel/core": "7.0.0-rc.3",
+    "babel-loader": "8.0.0-beta.6",
+    "@storybook/react": "^4.0.0-alpha.17"
+  }
+}

lib/cli/test/fixtures/react_babel_config_js/stories/index.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+const data = {
+  user: {
+    name: 'Joe',
+  },
+};
+
+storiesOf('My Component', module)
+  .add('state', () => <span>Hello {data.user?.name}</span>)

lib/cli/test/fixtures/react_babel_custom_preset/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["./babel-preset-custom"]
+}

lib/cli/test/fixtures/react_babel_custom_preset/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

lib/cli/test/fixtures/react_babel_custom_preset/babel-preset-custom/index.js

@@ -0,0 +1,3 @@
+module.exports = () => ({
+  plugins: ['@babel/plugin-proposal-optional-chaining'],
+});

lib/cli/test/fixtures/react_babel_custom_preset/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-babel-custom-preset-fixture",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "stories/index.stories.js",
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "7.0.0-rc.3",
+    "@babel/core": "7.0.0-rc.3",
+    "babel-loader": "8.0.0-beta.6",
+    "@storybook/react": "^4.0.0-alpha.17"
+  }
+}

lib/cli/test/fixtures/react_babel_custom_preset/stories/index.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+const data = {
+  user: {
+    name: 'Joe',
+  },
+};
+
+storiesOf('My Component', module)
+  .add('state', () => <span>Hello {data.user?.name}</span>)

lib/cli/test/fixtures/react_babel_pkg_json/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

lib/cli/test/fixtures/react_babel_pkg_json/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "react-babel-pkg-json-fixture",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "stories/index.stories.js",
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "7.0.0-rc.3",
+    "@babel/core": "7.0.0-rc.3",
+    "babel-loader": "8.0.0-beta.6",
+    "@storybook/react": "^4.0.0-alpha.17"
+  },
+  "babel": {
+    "plugins": ["@babel/plugin-proposal-optional-chaining"]
+  }
+}

lib/cli/test/fixtures/react_babel_pkg_json/stories/index.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+const data = {
+  user: {
+    name: 'Joe',
+  },
+};
+
+storiesOf('My Component', module)
+  .add('state', () => <span>Hello {data.user?.name}</span>)

lib/cli/test/fixtures/react_babelrc/.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-proposal-optional-chaining"]
+}

lib/cli/test/fixtures/react_babelrc/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);