Core: Support webpack5 and webpack4 side by side

.babelrc.js

@@ -91,6 +91,11 @@ module.exports = {
     {
       test: [
         './lib/node-logger',
+        './lib/core',
+        './lib/core-common',
+        './lib/core-server',
+        './lib/builder-webpack4',
+        './lib/builder-webpack5',
         './lib/codemod',
         './addons/storyshots',
         '**/src/server/**',

.eslintignore

@@ -7,7 +7,7 @@ docs/public
 storybook-static
 built-storybooks
 lib/cli/test
-lib/core/prebuilt
+lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
 scripts/storage
 *.bundle.js

.eslintrc.js

@@ -1,6 +1,9 @@
 module.exports = {
   root: true,
   extends: ['@storybook/eslint-config-storybook'],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'warn',
+  },
   overrides: [
     {
       files: [
@@ -10,8 +13,6 @@ module.exports = {
         '**/*.test.*',
         '**/*.stories.*',
         '**/storyshots/**/stories/**',
-        'docs/src/new-components/lib/StoryLinkWrapper.js',
-        'docs/src/stories/**',
       ],
       rules: {
         '@typescript-eslint/no-empty-function': 'off',

.gitignore

@@ -23,7 +23,6 @@ integration/__image_snapshots__/__diff_output__
 /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
 lib/*.jar
 lib/**/dll
-lib/core/prebuilt
 /false
 /addons/docs/common/config-*
 built-storybooks
@@ -32,4 +31,5 @@ cypress/screenshots
 examples/ember-cli/ember-output
 .verdaccio-cache
 tsconfig.tsbuildinfo
+lib/core-server/prebuilt
 examples/angular-cli/addon-jest.testresults.json

__mocks__/fs.js

@@ -1,4 +1,4 @@
-const fs = jest.genMockFromModule('fs');
+const fs = jest.createMockFromModule('fs');
 
 // This is a custom function that our tests can use during setup to specify
 // what the files on the "mock" filesystem should look like when any of the

addons/a11y/package.json

@@ -59,7 +59,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@testing-library/react": "^10.4.9",
+    "@testing-library/react": "^11.2.2",
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {

addons/actions/package.json

@@ -47,7 +47,7 @@
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "lodash": "^4.17.20",
-    "polished": "^3.6.7",
+    "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-inspector": "^5.1.0",
     "regenerator-runtime": "^0.13.7",

addons/docs/package.json

@@ -75,7 +75,7 @@
     "acorn-walk": "^7.2.0",
     "core-js": "^3.8.2",
     "doctrine": "^3.0.0",
-    "escodegen": "^1.14.3",
+    "escodegen": "^2.0.0",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "html-tags": "^3.1.0",
@@ -86,7 +86,7 @@
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "^14.3.2",
     "regenerator-runtime": "^0.13.7",
-    "remark-external-links": "^6.1.0",
+    "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
@@ -104,10 +104,10 @@
     "@types/doctrine": "^0.0.3",
     "@types/enzyme": "^3.10.8",
     "@types/estree": "^0.0.44",
-    "@types/jest": "^25.2.3",
+    "@types/jest": "^26.0.16",
     "@types/loader-utils": "^2.0.0",
     "@types/prop-types": "^15.7.3",
-    "@types/tmp": "^0.1.0",
+    "@types/tmp": "^0.2.0",
     "@types/util-deprecate": "^1.0.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-react-docgen": "^4.2.1",
@@ -120,12 +120,12 @@
     "require-from-string": "^2.0.2",
     "rxjs": "^6.6.3",
     "styled-components": "^5.2.1",
-    "terser-webpack-plugin": "^3.1.0",
+    "terser-webpack-plugin": "^5.0.3",
     "tmp": "^0.2.1",
     "tslib": "^2.1.0",
     "vue": "^2.6.10",
     "web-component-analyzer": "^1.1.6",
-    "webpack": "^4.46.0",
+    "webpack": "4",
     "zone.js": "^0.11.3"
   },
   "peerDependencies": {
@@ -139,7 +139,7 @@
     "svelte": "^3.31.2",
     "sveltedoc-parser": "^3.0.4",
     "vue": "^2.6.10 || ^3.0.0",
-    "webpack": ">=4"
+    "webpack": "*"
   },
   "peerDependenciesMeta": {
     "@storybook/angular": {

addons/docs/src/frameworks/angular/angular-properties.test.ts

@@ -35,6 +35,7 @@ describe('angular component properties', () => {
       const testDir = path.join(fixturesDir, testEntry.name);
       const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
       if (testFile) {
+        // eslint-disable-next-line jest/valid-title
         it(testEntry.name, () => {
           const inputPath = path.join(testDir, testFile);
 

addons/docs/src/frameworks/common/preset.ts

@@ -6,7 +6,7 @@ import remarkExternalLinks from 'remark-external-links';
 import createCompiler from '../../mdx/mdx-compiler-plugin';
 
 const resolvedBabelLoader = require.resolve('babel-loader', {
-  paths: [require.resolve('@storybook/core')],
+  paths: [require.resolve('@storybook/builder-webpack4')], // FIXME!!!
 });
 
 // for frameworks that are not working with react, we need to configure

addons/docs/src/frameworks/react/react-properties.test.ts

@@ -48,6 +48,7 @@ describe('react component properties', () => {
       const testDir = path.join(fixturesDir, testEntry.name);
       const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
       if (testFile) {
+        // eslint-disable-next-line jest/valid-title
         it(testEntry.name, () => {
           const inputPath = path.join(testDir, testFile);
 

addons/docs/src/frameworks/svelte/preset.ts

@@ -1,10 +1,10 @@
 import path from 'path';
 
 import { Configuration } from 'webpack';
-import type { StorybookOptions } from '@storybook/core/types';
+import type { Options } from '@storybook/core-common';
 
-export async function webpackFinal(webpackConfig: Configuration, options: StorybookOptions) {
-  const svelteOptions = await options.presets.apply('svelteOptions', {}, options);
+export async function webpackFinal(webpackConfig: Configuration, options: Options) {
+  const svelteOptions = await options.presets.apply('svelteOptions', {} as any, options);
 
   webpackConfig.module.rules.push({
     test: /\.svelte$/,

addons/docs/src/frameworks/web-components/__testfixtures__/lit-element-demo-card/input.js

@@ -151,9 +151,7 @@ export class DemoWcCard extends LitElement {
   render() {
     return html`
       <div id="front" part="front">
-        <div class="header">
-          ${this.header}
-        </div>
+        <div class="header">${this.header}</div>
         <div class="content">
           <slot></slot>
         </div>
@@ -163,9 +161,7 @@ export class DemoWcCard extends LitElement {
         </div>
       </div>
       <div id="back" part="back">
-        <div class="header">
-          ${this.header}
-        </div>
+        <div class="header">${this.header}</div>
 
         <div class="content">
           ${this.rows.length === 0

addons/docs/src/frameworks/web-components/web-components-properties.test.ts

@@ -37,6 +37,7 @@ describe('web-components component properties', () => {
       const testDir = path.join(fixturesDir, testEntry.name);
       const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
       if (testFile) {
+        // eslint-disable-next-line jest/valid-title
         it(testEntry.name, () => {
           const inputPath = path.join(testDir, testFile);
 

addons/docs/src/mdx/mdx-compiler-plugin.test.js

@@ -31,6 +31,7 @@ describe('docs-mdx-compiler-plugin', () => {
     .filter((fileName) => inputRegExp.test(fileName))
     .filter((fileName) => fileName !== 'story-missing-props.mdx')
     .forEach((fixtureFile) => {
+      // eslint-disable-next-line jest/valid-title
       it(fixtureFile, async () => {
         const inputPath = path.join(transformFixturesDir, fixtureFile);
         const code = await generate(inputPath);

addons/essentials/package.json

@@ -51,7 +51,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@storybook/vue": "6.2.0-alpha.29",
-    "@types/jest": "^25.2.3",
+    "@types/jest": "^26.0.16",
     "@types/webpack-env": "^1.16.0"
   },
   "peerDependencies": {
@@ -60,7 +60,7 @@
     "babel-loader": "^8.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "webpack": ">=4"
+    "webpack": "*"
   },
   "peerDependenciesMeta": {
     "@storybook/vue": {

addons/graphql/package.json

@@ -41,15 +41,14 @@
     "@babel/plugin-transform-classes": "^7.12.1",
     "@storybook/addons": "6.2.0-alpha.29",
     "@storybook/api": "6.2.0-alpha.29",
-    "@types/webpack": "^4.41.26",
     "babel-loader": "^8.2.2",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "graphiql": "^0.17.5",
     "graphql": "^15.4.0",
     "prop-types": "^15.7.2",
     "regenerator-runtime": "^0.13.7",
-    "webpack": "^4.46.0"
+    "webpack": "4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",

addons/graphql/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": ["webpack-env"]
+    "types": ["webpack-env", "node"]
   },
   "include": [
     "src/**/*"

addons/knobs/package.json

@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.8",
-    "@types/escape-html": "0.0.20",
+    "@types/escape-html": "1.0.0",
     "@types/react-color": "^3.0.4",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-select": "^3.1.2",

addons/links/src/react/components/RoutedLink.tsx

@@ -12,10 +12,9 @@ const LEFT_BUTTON = 0;
 const isPlainLeftClick = (e: React.MouseEvent) =>
   e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
 
-const RoutedLink: React.FC<React.DetailedHTMLProps<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  HTMLAnchorElement
->> = ({ href = '#', children, onClick, className, style }) => {
+const RoutedLink: React.FC<
+  React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+> = ({ href = '#', children, onClick, className, style }) => {
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     if (isPlainLeftClick(e)) {
       e.preventDefault();

addons/storyshots/storyshots-core/package.json

@@ -44,8 +44,9 @@
     "@storybook/addons": "6.2.0-alpha.29",
     "@storybook/client-api": "6.2.0-alpha.29",
     "@storybook/core": "6.2.0-alpha.29",
+    "@storybook/core-common": "6.2.0-alpha.29",
     "@types/glob": "^7.1.3",
-    "@types/jest": "^25.2.3",
+    "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",
     "babel-plugin-require-context-hook": "^1.0.0",
     "core-js": "^3.8.2",
@@ -64,6 +65,7 @@
     "@storybook/addon-docs": "6.2.0-alpha.29",
     "@storybook/angular": "6.2.0-alpha.29",
     "@storybook/react": "6.2.0-alpha.29",
+    "@storybook/vue": "6.2.0-alpha.29",
     "@storybook/vue3": "6.2.0-alpha.29",
     "babel-loader": "^8.2.2",
     "enzyme": "^3.11.0",
@@ -123,9 +125,6 @@
     },
     "vue": {
       "optional": true
-    },
-    "vue-jest": {
-      "optional": true
     }
   },
   "publishConfig": {

addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts

@@ -1,3 +1,4 @@
+/* eslint-disable jest/valid-title */
 /* eslint-disable jest/no-export */
 /* eslint-disable jest/expect-expect */
 import { describe, it } from 'global';
@@ -11,7 +12,7 @@ function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams
     it(
       name,
       () =>
-        new Promise((resolve, reject) =>
+        new Promise<void>((resolve, reject) =>
           testMethod({
             done: (error: any) => (error ? reject(error) : resolve()),
             story: item,

addons/storyshots/storyshots-core/src/frameworks/configure.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { toRequireContext } from '@storybook/core/server';
+import { toRequireContext } from '@storybook/core-common';
 import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
 import global from 'global';
 import { ArgTypesEnhancer, DecoratorFunction } from '@storybook/client-api';

addons/storyshots/storyshots-core/src/typings.d.ts

@@ -3,5 +3,4 @@ declare module 'jest-preset-angular/*';
 declare module 'preact-render-to-json';
 declare module 'react-test-renderer*';
 declare module 'rax-test-renderer*';
-declare module '@storybook/core/server';
 declare module 'babel-plugin-require-context-hook/register';

addons/storyshots/storyshots-puppeteer/package.json

@@ -38,15 +38,15 @@
   "dependencies": {
     "@storybook/csf": "0.0.1",
     "@storybook/node-logger": "6.2.0-alpha.29",
-    "@types/jest-image-snapshot": "^2.12.2",
+    "@types/jest-image-snapshot": "^4.1.3",
     "@wordpress/jest-puppeteer-axe": "^1.10.0",
     "core-js": "^3.8.2",
     "jest-image-snapshot": "^4.3.0",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
     "@storybook/csf": "0.0.1",
-    "@types/puppeteer": "^2.1.5"
+    "@types/puppeteer": "^5.4.0"
   },
   "peerDependencies": {
     "@storybook/addon-storyshots": "6.2.0-alpha.29",

addons/storysource/package.json

@@ -45,7 +45,7 @@
     "@storybook/source-loader": "6.2.0-alpha.29",
     "@storybook/theming": "6.2.0-alpha.29",
     "core-js": "^3.8.2",
-    "estraverse": "^4.3.0",
+    "estraverse": "^5.2.0",
     "loader-utils": "^2.0.0",
     "prettier": "~2.2.1",
     "prop-types": "^15.7.2",

app/angular/package.json

@@ -44,6 +44,7 @@
     "@storybook/addons": "6.2.0-alpha.29",
     "@storybook/api": "6.2.0-alpha.29",
     "@storybook/core": "6.2.0-alpha.29",
+    "@storybook/core-common": "6.2.0-alpha.29",
     "@storybook/node-logger": "6.2.0-alpha.29",
     "@types/webpack-env": "^1.16.0",
     "autoprefixer": "^9.8.6",
@@ -57,13 +58,13 @@
     "react-dom": "16.14.0",
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "^10.1.0",
     "strip-json-comments": "3.1.1",
     "ts-dedent": "^2.0.0",
-    "ts-loader": "^6.2.2",
+    "ts-loader": "^8.0.14",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "util-deprecate": "^1.0.2",
-    "webpack": "^4.46.0"
+    "webpack": "4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1102.0",
@@ -78,7 +79,7 @@
     "@angular/platform-browser-dynamic": "^11.2.0",
     "@nrwl/workspace": "^11.1.5",
     "@types/autoprefixer": "^9.7.2",
-    "@types/jest": "^25.2.3",
+    "@types/jest": "^26.0.16",
     "@webcomponents/custom-elements": "^1.4.3",
     "jest": "^26.6.3",
     "jest-preset-angular": "^8.3.2",