From 427aab08625fe9c387069449868e0682f8ada27e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 14:17:42 +0800 Subject: [PATCH 01/21] HTML: split out webpack preset --- .circleci/config.yml | 1 + app/html/package.json | 1 + app/html/src/server/preset.ts | 15 ++----- lib/core-common/src/types.ts | 8 +++- nx.json | 3 ++ package.json | 2 + presets/html-webpack/README.md | 25 +++++++++++ presets/html-webpack/package.json | 66 ++++++++++++++++++++++++++++++ presets/html-webpack/preset.js | 1 + presets/html-webpack/src/preset.ts | 10 +++++ presets/html-webpack/tsconfig.json | 9 ++++ workspace.json | 4 ++ yarn.lock | 20 +++++++++ 13 files changed, 153 insertions(+), 12 deletions(-) create mode 100644 presets/html-webpack/README.md create mode 100644 presets/html-webpack/package.json create mode 100644 presets/html-webpack/preset.js create mode 100644 presets/html-webpack/src/preset.ts create mode 100644 presets/html-webpack/tsconfig.json diff --git a/.circleci/config.yml b/.circleci/config.yml index e5261ea469ad..8ff4aaa2d430 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -107,6 +107,7 @@ jobs: - app - lib - renderers + - presets chromatic: executor: sb_node_14_browsers parallelism: 4 diff --git a/app/html/package.json b/app/html/package.json index e78930f7aca4..30205138b83d 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -42,6 +42,7 @@ "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/preset-html-webpack": "6.5.0-alpha.64", "@storybook/renderer-html": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", diff --git a/app/html/src/server/preset.ts b/app/html/src/server/preset.ts index 5ad201fb77b2..3948e2714a72 100644 --- a/app/html/src/server/preset.ts +++ b/app/html/src/server/preset.ts @@ -1,13 +1,6 @@ -import type { Configuration } from 'webpack'; import type { StorybookConfig } from '@storybook/core-common'; -export function webpack(config: Configuration) { - config.module.rules.push({ - test: /\.html$/, - use: require.resolve('html-loader') as string, - }); - - return config; -} - -export const addons: StorybookConfig['addons'] = ['@storybook/renderer-html']; +export const addons: StorybookConfig['addons'] = [ + '@storybook/preset-html-webpack', + '@storybook/renderer-html', +]; diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index 287c5476d2d9..dd1489f212e0 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -409,7 +409,13 @@ export interface StorybookConfig { refs?: StorybookRefs | ((config: Configuration, options: Options) => StorybookRefs); /** - * Modify or return a custom Webpack config. + * Modify or return a custom Webpack config after the Storybook's default configuration + * has run (mostly used by addons). + */ + webpack?: (config: Configuration, options: Options) => Configuration | Promise; + + /** + * Modify or return a custom Webpack config after every addon has run. */ webpackFinal?: ( config: Configuration, diff --git a/nx.json b/nx.json index e9aa14a9ff0d..b57087248f87 100644 --- a/nx.json +++ b/nx.json @@ -88,6 +88,9 @@ "@storybook/preact": { "implicitDependencies": [] }, + "@storybook/preset-html-webpack": { + "implicitDependencies": [] + }, "@storybook/renderer-html": { "implicitDependencies": [] }, diff --git a/package.json b/package.json index c22794470cc9..49bcfac370f4 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "addons/storyshots/*", "app/*", "renderers/*", + "presets/*", "examples-native/*", "examples/*", "!examples/web-components-kitchen-sink", @@ -175,6 +176,7 @@ "@storybook/node-logger": "workspace:*", "@storybook/postinstall": "workspace:*", "@storybook/preact": "workspace:*", + "@storybook/preset-html-webpack": "workspace:*", "@storybook/preview-web": "workspace:*", "@storybook/react": "workspace:*", "@storybook/renderer-html": "workspace:*", diff --git a/presets/html-webpack/README.md b/presets/html-webpack/README.md new file mode 100644 index 000000000000..e4a80130d0e9 --- /dev/null +++ b/presets/html-webpack/README.md @@ -0,0 +1,25 @@ +# Storybook for HTML (Webpack) + +--- + +Storybook for HTML is a UI development environment for your plain HTML snippets. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-app +npx sb init -t html +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/html/configure/storybook-addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/html/workflows/publish-storybook) of your storybook and deploy it anywhere you want. diff --git a/presets/html-webpack/package.json b/presets/html-webpack/package.json new file mode 100644 index 000000000000..fdb6ef9d0a85 --- /dev/null +++ b/presets/html-webpack/package.json @@ -0,0 +1,66 @@ +{ + "name": "@storybook/preset-html-webpack", + "version": "6.5.0-alpha.64", + "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/html-webpack", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "presets/html-webpack" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/ts3.9/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/core-common": "6.5.0-alpha.64", + "@types/node": "^14.14.20 || ^16.0.0", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "html-loader": "^1.3.2", + "react": "16.14.0", + "react-dom": "16.14.0", + "regenerator-runtime": "^0.13.7", + "webpack": ">=4.0.0 <6.0.0" + }, + "devDependencies": { + "webpack": "4" + }, + "peerDependencies": { + "@babel/core": "*" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "416f87dc715cae299c7b4f37f1c9db7f686d4d21", + "sbmodern": "dist/modern/client/index.js" +} diff --git a/presets/html-webpack/preset.js b/presets/html-webpack/preset.js new file mode 100644 index 000000000000..e45ac5b4cec0 --- /dev/null +++ b/presets/html-webpack/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/preset'); diff --git a/presets/html-webpack/src/preset.ts b/presets/html-webpack/src/preset.ts new file mode 100644 index 000000000000..c185773b64c2 --- /dev/null +++ b/presets/html-webpack/src/preset.ts @@ -0,0 +1,10 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const webpack: StorybookConfig['webpack'] = (config) => { + config.module.rules.push({ + test: /\.html$/, + use: require.resolve('html-loader') as string, + }); + + return config; +}; diff --git a/presets/html-webpack/tsconfig.json b/presets/html-webpack/tsconfig.json new file mode 100644 index 000000000000..a7b3b6102f4c --- /dev/null +++ b/presets/html-webpack/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env", "node"] + }, + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] +} diff --git a/workspace.json b/workspace.json index 92578ebb77f4..d292a3cd6d2b 100644 --- a/workspace.json +++ b/workspace.json @@ -305,6 +305,10 @@ "root": "lib/preview-web", "type": "library" }, + "@storybook/preset-html-webpack": { + "root": "presets/html-webpack", + "type": "library" + }, "@storybook/renderer-html": { "root": "renderers/html", "type": "library" diff --git a/yarn.lock b/yarn.lock index 539d55e27d50..9ccf59b0234d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8061,6 +8061,7 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/preset-html-webpack": 6.5.0-alpha.64 "@storybook/renderer-html": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 @@ -8356,6 +8357,24 @@ __metadata: languageName: node linkType: hard +"@storybook/preset-html-webpack@6.5.0-alpha.64, @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack": + version: 0.0.0-use.local + resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack" + dependencies: + "@storybook/core-common": 6.5.0-alpha.64 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + html-loader: ^1.3.2 + react: 16.14.0 + react-dom: 16.14.0 + regenerator-runtime: ^0.13.7 + webpack: 4 + peerDependencies: + "@babel/core": "*" + languageName: unknown + linkType: soft + "@storybook/preset-scss@npm:^1.0.3": version: 1.0.3 resolution: "@storybook/preset-scss@npm:1.0.3" @@ -8730,6 +8749,7 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/postinstall": "workspace:*" "@storybook/preact": "workspace:*" + "@storybook/preset-html-webpack": "workspace:*" "@storybook/preview-web": "workspace:*" "@storybook/react": "workspace:*" "@storybook/renderer-html": "workspace:*" From d75e7686be6efc1c51590751b868f98cf6b22d88 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 15:57:06 +0800 Subject: [PATCH 02/21] Cleanup --- addons/docs/src/typings.d.ts | 1 - app/html/package.json | 2 -- 2 files changed, 3 deletions(-) diff --git a/addons/docs/src/typings.d.ts b/addons/docs/src/typings.d.ts index 99571482f456..711442922516 100644 --- a/addons/docs/src/typings.d.ts +++ b/addons/docs/src/typings.d.ts @@ -4,7 +4,6 @@ declare module '@egoist/vue-to-react'; declare module 'remark-slug'; declare module 'remark-external-links'; declare module 'babel-plugin-react-docgen'; -declare module 'require-from-string'; declare module 'styled-components'; declare module 'acorn-jsx'; declare module 'vue/dist/vue'; diff --git a/app/html/package.json b/app/html/package.json index 30205138b83d..d87f42deb11a 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -41,14 +41,12 @@ "dependencies": { "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", - "@storybook/docs-tools": "6.5.0-alpha.64", "@storybook/preset-html-webpack": "6.5.0-alpha.64", "@storybook/renderer-html": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", - "html-loader": "^1.3.2", "react": "16.14.0", "react-dom": "16.14.0", "regenerator-runtime": "^0.13.7", From 3aa7e068be989eabe5bc0dce66ff87e19725e50a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 15:59:33 +0800 Subject: [PATCH 03/21] Preact: webpack preset refactor --- app/preact/package.json | 4 +- app/preact/preset.js | 2 +- app/preact/src/server/preset.ts | 6 ++ presets/preact-webpack/README.md | 29 ++++++++ presets/preact-webpack/package.json | 69 +++++++++++++++++++ presets/preact-webpack/preset.js | 1 + .../src}/framework-preset-preact.ts | 12 ++-- presets/preact-webpack/tsconfig.json | 17 +++++ 8 files changed, 128 insertions(+), 12 deletions(-) create mode 100644 app/preact/src/server/preset.ts create mode 100644 presets/preact-webpack/README.md create mode 100644 presets/preact-webpack/package.json create mode 100644 presets/preact-webpack/preset.js rename {app/preact/src/server => presets/preact-webpack/src}/framework-preset-preact.ts (66%) create mode 100644 presets/preact-webpack/tsconfig.json diff --git a/app/preact/package.json b/app/preact/package.json index 87a77caf66a4..206261a7b796 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -39,18 +39,16 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.12.12", "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", + "@storybook/preset-preact-webpack": "6.5.0-alpha.64", "@storybook/renderer-preact": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", - "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0", "regenerator-runtime": "^0.13.7", - "ts-dedent": "^2.0.0", "webpack": ">=4.0.0 <6.0.0" }, "devDependencies": { diff --git a/app/preact/preset.js b/app/preact/preset.js index 324b0db8eda2..f09c6698e046 100644 --- a/app/preact/preset.js +++ b/app/preact/preset.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/server/framework-preset-preact'); +module.exports = require('./dist/cjs/server/preset'); diff --git a/app/preact/src/server/preset.ts b/app/preact/src/server/preset.ts new file mode 100644 index 000000000000..43a2056fea79 --- /dev/null +++ b/app/preact/src/server/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + '@storybook/preset-preact-webpack', + '@storybook/renderer-preact', +]; diff --git a/presets/preact-webpack/README.md b/presets/preact-webpack/README.md new file mode 100644 index 000000000000..886a1a134b13 --- /dev/null +++ b/presets/preact-webpack/README.md @@ -0,0 +1,29 @@ +# Storybook for Preact + +Storybook for Preact is a UI development environment for your Preact components. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-preact-app +npx sb init +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/preact/configure/storybook-addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/preact/workflows/publish-storybook) of your storybook and deploy it anywhere you want. + +## Docs + +- [Basics](https://storybook.js.org/docs/preact/get-started/introduction) +- [Configurations](https://storybook.js.org/docs/preact/configure/overview) +- [Addons](https://storybook.js.org/docs/preact/configure/storybook-addons) diff --git a/presets/preact-webpack/package.json b/presets/preact-webpack/package.json new file mode 100644 index 000000000000..def11f34295e --- /dev/null +++ b/presets/preact-webpack/package.json @@ -0,0 +1,69 @@ +{ + "name": "@storybook/preset-preact-webpack", + "version": "6.5.0-alpha.64", + "description": "Storybook for Preact: Develop Preact Component in isolation.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/preact-webpack", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "presets/preact-webpack" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "main": "dist/cjs/client/index.js", + "module": "dist/esm/client/index.js", + "types": "dist/ts3.9/client/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@babel/plugin-transform-react-jsx": "^7.12.12", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/renderer-preact": "6.5.0-alpha.64", + "@types/node": "^14.14.20 || ^16.0.0", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "react": "16.14.0", + "react-dom": "16.14.0", + "regenerator-runtime": "^0.13.7", + "webpack": ">=4.0.0 <6.0.0" + }, + "devDependencies": { + "preact": "^10.5.13", + "webpack": "4" + }, + "peerDependencies": { + "@babel/core": "*", + "preact": "^8.0.0||^10.0.0" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", + "sbmodern": "dist/modern/client/index.js" +} diff --git a/presets/preact-webpack/preset.js b/presets/preact-webpack/preset.js new file mode 100644 index 000000000000..76efc04b567b --- /dev/null +++ b/presets/preact-webpack/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/framework-preset-preact'); diff --git a/app/preact/src/server/framework-preset-preact.ts b/presets/preact-webpack/src/framework-preset-preact.ts similarity index 66% rename from app/preact/src/server/framework-preset-preact.ts rename to presets/preact-webpack/src/framework-preset-preact.ts index eb5c75188be9..12a5fb38abbc 100644 --- a/app/preact/src/server/framework-preset-preact.ts +++ b/presets/preact-webpack/src/framework-preset-preact.ts @@ -1,9 +1,7 @@ import path from 'path'; -import type { TransformOptions } from '@babel/core'; -import type { Configuration } from 'webpack'; import type { StorybookConfig } from '@storybook/core-common'; -export function babelDefault(config: TransformOptions): TransformOptions { +export const babelDefault: StorybookConfig['babelDefault'] = (config) => { return { ...config, plugins: [ @@ -11,9 +9,9 @@ export function babelDefault(config: TransformOptions): TransformOptions { [require.resolve('@babel/plugin-transform-react-jsx'), { pragma: 'h' }, 'preset'], ], }; -} +}; -export function webpackFinal(config: Configuration): Configuration { +export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => { return { ...config, resolve: { @@ -26,6 +24,4 @@ export function webpackFinal(config: Configuration): Configuration { }, }, }; -} - -export const addons: StorybookConfig['addons'] = ['@storybook/renderer-preact']; +}; diff --git a/presets/preact-webpack/tsconfig.json b/presets/preact-webpack/tsconfig.json new file mode 100644 index 000000000000..ea47a78eb476 --- /dev/null +++ b/presets/preact-webpack/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": [ + "webpack-env", + "node" + ], + "resolveJsonModule": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/**/*.test.*" + ] +} \ No newline at end of file From 2bceb2cf0f2a53bedc3ec6f7e48bc33d7e2c6e3d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:00:08 +0800 Subject: [PATCH 04/21] React: webpack preset refactor --- app/react/package.json | 21 +--- app/react/src/server/preset.ts | 5 +- presets/react-webpack/README.md | 47 ++++++++ presets/react-webpack/package.json | 101 ++++++++++++++++++ presets/react-webpack/preset.js | 1 + .../react-webpack/src}/cra-config.test.ts | 0 .../react-webpack/src}/cra-config.ts | 0 .../src}/framework-preset-cra.ts | 7 +- .../src}/framework-preset-react-docs.test.ts | 0 .../src}/framework-preset-react-docs.ts | 12 +-- .../src}/framework-preset-react-dom-hack.ts | 7 +- .../src}/framework-preset-react.test.ts | 0 .../src}/framework-preset-react.ts | 20 ++-- presets/react-webpack/src/preset.ts | 8 ++ presets/react-webpack/src/typings.d.ts | 44 ++++++++ presets/react-webpack/tsconfig.json | 10 ++ 16 files changed, 237 insertions(+), 46 deletions(-) create mode 100644 presets/react-webpack/README.md create mode 100644 presets/react-webpack/package.json create mode 100644 presets/react-webpack/preset.js rename {app/react/src/server => presets/react-webpack/src}/cra-config.test.ts (100%) rename {app/react/src/server => presets/react-webpack/src}/cra-config.ts (100%) rename {app/react/src/server => presets/react-webpack/src}/framework-preset-cra.ts (82%) rename {app/react/src/server => presets/react-webpack/src}/framework-preset-react-docs.test.ts (100%) rename {app/react/src/server => presets/react-webpack/src}/framework-preset-react-docs.ts (80%) rename {app/react/src/server => presets/react-webpack/src}/framework-preset-react-dom-hack.ts (80%) rename {app/react/src/server => presets/react-webpack/src}/framework-preset-react.test.ts (100%) rename {app/react/src/server => presets/react-webpack/src}/framework-preset-react.ts (83%) create mode 100644 presets/react-webpack/src/preset.ts create mode 100644 presets/react-webpack/src/typings.d.ts create mode 100644 presets/react-webpack/tsconfig.json diff --git a/app/react/package.json b/app/react/package.json index ad2ae7c81a93..39f66afccf35 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -40,39 +40,24 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/preset-flow": "^7.12.1", - "@babel/preset-react": "^7.12.10", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", - "@storybook/docs-tools": "6.5.0-alpha.64", - "@storybook/node-logger": "6.5.0-alpha.64", - "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", + "@storybook/preset-react-webpack": "6.5.0-alpha.64", "@storybook/renderer-react": "6.5.0-alpha.64", - "@storybook/semver": "^7.3.2", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", - "babel-plugin-add-react-displayname": "^0.0.5", - "babel-plugin-react-docgen": "^4.2.1", "core-js": "^3.8.2", - "fs-extra": "^9.0.1", - "global": "^4.4.0", - "react-refresh": "^0.11.0", "regenerator-runtime": "^0.13.7", - "ts-dedent": "^2.0.0", - "util-deprecate": "^1.0.2", "webpack": ">=4.43.0 <6.0.0" }, "devDependencies": { - "@types/util-deprecate": "^1.0.0", + "jest-specific-snapshot": "^4.0.0", "webpack": "4" }, "peerDependencies": { "@babel/core": "^7.11.5", - "jest-specific-snapshot": "^4.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "require-from-string": "^2.0.2" + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "@babel/core": { diff --git a/app/react/src/server/preset.ts b/app/react/src/server/preset.ts index 1df8fc3cc348..2f9de9bc575e 100644 --- a/app/react/src/server/preset.ts +++ b/app/react/src/server/preset.ts @@ -1,9 +1,6 @@ import type { StorybookConfig } from '@storybook/core-common'; export const addons: StorybookConfig['addons'] = [ + '@storybook/preset-react-webpack', '@storybook/renderer-react', - require.resolve('./framework-preset-react'), - require.resolve('./framework-preset-react-dom-hack'), - require.resolve('./framework-preset-cra'), - require.resolve('./framework-preset-react-docs'), ]; diff --git a/presets/react-webpack/README.md b/presets/react-webpack/README.md new file mode 100644 index 000000000000..2e7e11dcbfe7 --- /dev/null +++ b/presets/react-webpack/README.md @@ -0,0 +1,47 @@ +# Storybook for React + +Storybook for React is a UI development environment for your React components. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-react-app +npx sb init +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/react/workflows/publish-storybook) of your storybook and deploy it anywhere you want. + +Here are some featured storybooks that you can reference to see how Storybook works: + +- [Demo of Storybook Design System](https://storybook.js.org/design-system) - [source](https://github.com/storybookjs/design-system) + +## Create React App + +Support for [Create React App](https://create-react-app.dev/) is handled by [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app). + +This preset enables support for all Create React App features, including Sass/SCSS and TypeScript. + +If you're working on an app that was initialized manually (i.e., without the use of Create React App), ensure that your app has [react-dom](https://www.npmjs.com/package/react-dom) included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project. + +## Typescript + +`@storybook/react` is now exporting its own types to use with Typescript. +You don't need to have `@types/storybook__react` installed anymore if it was your case. +But you probably also need to use types from `@types/node @types/react`. + +## Docs + +- [Basics](https://storybook.js.org/docs/react/get-started/introduction) +- [Configurations](https://storybook.js.org/docs/react/configure/overview) +- [Addons](https://storybook.js.org/docs/react/configure/storybook-addons) diff --git a/presets/react-webpack/package.json b/presets/react-webpack/package.json new file mode 100644 index 000000000000..71ab58a29895 --- /dev/null +++ b/presets/react-webpack/package.json @@ -0,0 +1,101 @@ +{ + "name": "@storybook/preset-react-webpack", + "version": "6.5.0-alpha.64", + "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/react-webpack", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "presets/react-webpack" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "main": "dist/cjs/client/index.js", + "module": "dist/esm/client/index.js", + "types": "dist/ts3.9/client/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "dist/**/*", + "types/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@babel/preset-flow": "^7.12.1", + "@babel/preset-react": "^7.12.10", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", + "@storybook/renderer-react": "6.5.0-alpha.64", + "@storybook/semver": "^7.3.2", + "@types/node": "^14.14.20 || ^16.0.0", + "@types/webpack-env": "^1.16.0", + "babel-plugin-add-react-displayname": "^0.0.5", + "babel-plugin-react-docgen": "^4.2.1", + "core-js": "^3.8.2", + "fs-extra": "^9.0.1", + "react-refresh": "^0.11.0", + "regenerator-runtime": "^0.13.7", + "webpack": ">=4.43.0 <6.0.0" + }, + "devDependencies": { + "@types/util-deprecate": "^1.0.0", + "webpack": "4" + }, + "peerDependencies": { + "@babel/core": "^7.11.5", + "jest-specific-snapshot": "^4.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "require-from-string": "^2.0.2" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@storybook/builder-webpack4": { + "optional": true + }, + "@storybook/builder-webpack5": { + "optional": true + }, + "@storybook/manager-webpack4": { + "optional": true + }, + "@storybook/manager-webpack5": { + "optional": true + }, + "typescript": { + "optional": true + } + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", + "sbmodern": "dist/modern/client/index.js" +} diff --git a/presets/react-webpack/preset.js b/presets/react-webpack/preset.js new file mode 100644 index 000000000000..e45ac5b4cec0 --- /dev/null +++ b/presets/react-webpack/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/preset'); diff --git a/app/react/src/server/cra-config.test.ts b/presets/react-webpack/src/cra-config.test.ts similarity index 100% rename from app/react/src/server/cra-config.test.ts rename to presets/react-webpack/src/cra-config.test.ts diff --git a/app/react/src/server/cra-config.ts b/presets/react-webpack/src/cra-config.ts similarity index 100% rename from app/react/src/server/cra-config.ts rename to presets/react-webpack/src/cra-config.ts diff --git a/app/react/src/server/framework-preset-cra.ts b/presets/react-webpack/src/framework-preset-cra.ts similarity index 82% rename from app/react/src/server/framework-preset-cra.ts rename to presets/react-webpack/src/framework-preset-cra.ts index e1b72670a28d..b5023958a682 100644 --- a/app/react/src/server/framework-preset-cra.ts +++ b/presets/react-webpack/src/framework-preset-cra.ts @@ -1,6 +1,5 @@ -import type { Configuration } from 'webpack'; import { logger } from '@storybook/node-logger'; -import type { Options } from '@storybook/core-common'; +import type { StorybookConfig } from '@storybook/core-common'; import { isReactScriptsInstalled } from './cra-config'; type Preset = string | { name: string }; @@ -20,9 +19,9 @@ const checkForNewPreset = (presetsList: Preset[]) => { } }; -export function webpackFinal(config: Configuration, { presetsList }: Options) { +export const webpackFinal: StorybookConfig['webpack'] = (config, { presetsList }) => { if (isReactScriptsInstalled()) { checkForNewPreset(presetsList); } return config; -} +}; diff --git a/app/react/src/server/framework-preset-react-docs.test.ts b/presets/react-webpack/src/framework-preset-react-docs.test.ts similarity index 100% rename from app/react/src/server/framework-preset-react-docs.test.ts rename to presets/react-webpack/src/framework-preset-react-docs.test.ts diff --git a/app/react/src/server/framework-preset-react-docs.ts b/presets/react-webpack/src/framework-preset-react-docs.ts similarity index 80% rename from app/react/src/server/framework-preset-react-docs.ts rename to presets/react-webpack/src/framework-preset-react-docs.ts index 6db076a167d4..59d254941226 100644 --- a/app/react/src/server/framework-preset-react-docs.ts +++ b/presets/react-webpack/src/framework-preset-react-docs.ts @@ -1,10 +1,8 @@ -import type { StorybookConfig, Options, TypescriptConfig } from '@storybook/core-common'; -import type { TransformOptions } from '@babel/core'; -import type { Configuration } from 'webpack'; +import type { StorybookConfig, TypescriptConfig } from '@storybook/core-common'; import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export async function babel(config: TransformOptions, options: Options) { +export const babel: StorybookConfig['babel'] = async (config, options) => { if (!hasDocsOrControls(options)) return config; const typescriptOptions = await options.presets.apply('typescript', {} as any); @@ -31,9 +29,9 @@ export async function babel(config: TransformOptions, options: Options) { }, ], }; -} +}; -export async function webpackFinal(config: Configuration, options: Options) { +export const webpackFinal: StorybookConfig['webpackFinal'] = async (config, options) => { if (!hasDocsOrControls(options)) return config; const typescriptOptions = await options.presets.apply('typescript', {} as any); @@ -55,4 +53,4 @@ export async function webpackFinal(config: Configuration, options: Options) { }), ], }; -} +}; diff --git a/app/react/src/server/framework-preset-react-dom-hack.ts b/presets/react-webpack/src/framework-preset-react-dom-hack.ts similarity index 80% rename from app/react/src/server/framework-preset-react-dom-hack.ts rename to presets/react-webpack/src/framework-preset-react-dom-hack.ts index a00646202f00..9e44dc74b405 100644 --- a/app/react/src/server/framework-preset-react-dom-hack.ts +++ b/presets/react-webpack/src/framework-preset-react-dom-hack.ts @@ -1,10 +1,11 @@ import { readJSON } from 'fs-extra'; -import { Configuration, IgnorePlugin } from 'webpack'; +import { IgnorePlugin } from 'webpack'; +import type { StorybookConfig } from '@storybook/core-common'; // this is a hack to allow importing react-dom/client even when it's not available // this should be removed once we drop support for react-dom < 18 -export async function webpackFinal(config: Configuration) { +export const webpackFinal: StorybookConfig['webpackFinal'] = async (config) => { const reactDomPkg = await readJSON(require.resolve('react-dom/package.json')); return { @@ -20,4 +21,4 @@ export async function webpackFinal(config: Configuration) { }), ].filter(Boolean), }; -} +}; diff --git a/app/react/src/server/framework-preset-react.test.ts b/presets/react-webpack/src/framework-preset-react.test.ts similarity index 100% rename from app/react/src/server/framework-preset-react.test.ts rename to presets/react-webpack/src/framework-preset-react.test.ts diff --git a/app/react/src/server/framework-preset-react.ts b/presets/react-webpack/src/framework-preset-react.ts similarity index 83% rename from app/react/src/server/framework-preset-react.ts rename to presets/react-webpack/src/framework-preset-react.ts index 7559e61a9251..947973a7c649 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/presets/react-webpack/src/framework-preset-react.ts @@ -1,12 +1,10 @@ import path from 'path'; -import { TransformOptions } from '@babel/core'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; -import type { Configuration } from 'webpack'; import { logger } from '@storybook/node-logger'; -import type { Options } from '@storybook/core-common'; +import type { StorybookConfig } from '@storybook/core-common'; -export async function babel(config: TransformOptions, options: Options) { +export const babel: StorybookConfig['babel'] = async (config, options) => { const isDevelopment = options.configType === 'DEVELOPMENT'; const reactOptions = await options.presets.apply( 'reactOptions', @@ -29,8 +27,10 @@ export async function babel(config: TransformOptions, options: Options) { ...(config.plugins || []), ], }; -} -const storybookReactDirName = path.dirname(require.resolve('@storybook/react/package.json')); +}; +const storybookReactDirName = path.dirname( + require.resolve('@storybook/preset-react-webpack/package.json') +); // TODO: improve node_modules detection const context = storybookReactDirName.includes('node_modules') ? path.join(storybookReactDirName, '../../') // Real life case, already in node_modules @@ -45,7 +45,7 @@ const hasJsxRuntime = () => { } }; -export async function babelDefault(config: TransformOptions): Promise { +export const babelDefault: StorybookConfig['babelDefault'] = async (config) => { const presetReactOptions = hasJsxRuntime() ? { runtime: 'automatic' } : {}; return { ...config, @@ -56,9 +56,9 @@ export async function babelDefault(config: TransformOptions): Promise { const isDevelopment = options.configType === 'DEVELOPMENT'; const reactOptions = await options.presets.apply( 'reactOptions', @@ -96,4 +96,4 @@ export async function webpackFinal(config: Configuration, options: Options) { }), ], }; -} +}; diff --git a/presets/react-webpack/src/preset.ts b/presets/react-webpack/src/preset.ts new file mode 100644 index 000000000000..b57cf57c3fe5 --- /dev/null +++ b/presets/react-webpack/src/preset.ts @@ -0,0 +1,8 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-react'), + require.resolve('./framework-preset-react-dom-hack'), + require.resolve('./framework-preset-cra'), + require.resolve('./framework-preset-react-docs'), +]; diff --git a/presets/react-webpack/src/typings.d.ts b/presets/react-webpack/src/typings.d.ts new file mode 100644 index 000000000000..cd1929c868b2 --- /dev/null +++ b/presets/react-webpack/src/typings.d.ts @@ -0,0 +1,44 @@ +declare module '@storybook/semver'; +declare module 'global'; + +// TODO: Replace, as soon as @types/react-dom 17.0.14 is used +// Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts +declare module 'react-dom/client' { + +import React = require('react'); + export interface HydrationOptions { + onHydrated?(suspenseInstance: Comment): void; + onDeleted?(suspenseInstance: Comment): void; + /** + * Prefix for `useId`. + */ + identifierPrefix?: string; + onRecoverableError?: (error: unknown) => void; + } + + export interface RootOptions { + /** + * Prefix for `useId`. + */ + identifierPrefix?: string; + onRecoverableError?: (error: unknown) => void; + } + + export interface Root { + render(children: React.ReactChild | Iterable): void; + unmount(): void; + } + + /** + * Replaces `ReactDOM.render` when the `.render` method is called and enables Concurrent Mode. + * + * @see https://reactjs.org/docs/concurrent-mode-reference.html#createroot + */ + export function createRoot(container: Element | Document | DocumentFragment | Comment, options?: RootOptions): Root; + + export function hydrateRoot( + container: Element | Document | DocumentFragment | Comment, + initialChildren: React.ReactChild | Iterable, + options?: HydrationOptions, + ): Root; +} diff --git a/presets/react-webpack/tsconfig.json b/presets/react-webpack/tsconfig.json new file mode 100644 index 000000000000..b16c7ffdcb0d --- /dev/null +++ b/presets/react-webpack/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env", "node"], + "resolveJsonModule": true + }, + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"] +} From 3c2e442e3764ab88ee98b51422f0e5752b0a78b0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:01:25 +0800 Subject: [PATCH 05/21] Server: webpack preset refactor --- app/server/package.json | 11 +- app/server/preset.js | 2 +- app/server/src/client/index.ts | 1 - app/server/src/server/preset.ts | 6 + presets/server-webpack/README.md | 317 ++++++++++++++++++ presets/server-webpack/package.json | 68 ++++ presets/server-webpack/preset.js | 1 + .../lib/compiler/__testfixtures__/a11y.json | 0 .../compiler/__testfixtures__/a11y.snapshot | 0 .../compiler/__testfixtures__/actions.json | 0 .../__testfixtures__/actions.snapshot | 0 .../__testfixtures__/backgrounds.json | 0 .../__testfixtures__/backgrounds.snapshot | 0 .../compiler/__testfixtures__/controls.json | 0 .../__testfixtures__/controls.snapshot | 0 .../__testfixtures__/kitchen_sink.json | 0 .../__testfixtures__/kitchen_sink.snapshot | 0 .../lib/compiler/__testfixtures__/links.json | 0 .../compiler/__testfixtures__/links.snapshot | 0 .../__testfixtures__/multiple_stories.json | 0 .../multiple_stories.snapshot | 0 .../lib/compiler/__testfixtures__/params.json | 0 .../compiler/__testfixtures__/params.snapshot | 0 .../__testfixtures__/params_override.json | 0 .../__testfixtures__/params_override.snapshot | 0 .../compiler/__testfixtures__/yaml.snapshot | 0 .../lib/compiler/__testfixtures__/yaml.yaml | 0 .../compiler/__testfixtures__/yml.snapshot | 0 .../src/lib/compiler/__testfixtures__/yml.yml | 0 .../server-webpack}/src/lib/compiler/index.ts | 0 .../lib/compiler/json-to-csf-compiler.test.ts | 0 .../src/lib/compiler/stringifier.ts | 0 .../server-webpack}/src/lib/compiler/types.ts | 0 .../src/server/framework-preset-server.ts | 7 +- .../server-webpack}/src/server/loader.ts | 0 .../server-webpack}/src/typings.d.ts | 0 presets/server-webpack/tsconfig.json | 16 + 37 files changed, 413 insertions(+), 16 deletions(-) delete mode 100644 app/server/src/client/index.ts create mode 100644 app/server/src/server/preset.ts create mode 100644 presets/server-webpack/README.md create mode 100644 presets/server-webpack/package.json create mode 100644 presets/server-webpack/preset.js rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/a11y.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/a11y.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/actions.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/actions.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/backgrounds.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/backgrounds.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/controls.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/controls.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/kitchen_sink.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/links.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/links.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/multiple_stories.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/multiple_stories.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/params.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/params.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/params_override.json (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/params_override.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/yaml.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/yaml.yaml (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/yml.snapshot (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/__testfixtures__/yml.yml (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/index.ts (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/json-to-csf-compiler.test.ts (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/stringifier.ts (100%) rename {app/server => presets/server-webpack}/src/lib/compiler/types.ts (100%) rename {app/server => presets/server-webpack}/src/server/framework-preset-server.ts (69%) rename {app/server => presets/server-webpack}/src/server/loader.ts (100%) rename {app/server => presets/server-webpack}/src/typings.d.ts (100%) create mode 100644 presets/server-webpack/tsconfig.json diff --git a/app/server/package.json b/app/server/package.json index 2a28a61cc117..5ffd1fe73b42 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -41,21 +41,14 @@ "dependencies": { "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", + "@storybook/preset-server-webpack": "6.5.0-alpha.64", "@storybook/renderer-server": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", - "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0", - "regenerator-runtime": "^0.13.7", - "safe-identifier": "^0.4.1", - "ts-dedent": "^2.0.0", - "yaml-loader": "^0.6.0" - }, - "devDependencies": { - "fs-extra": "^9.0.1", - "yaml": "^1.10.0" + "regenerator-runtime": "^0.13.7" }, "engines": { "node": ">=10.13.0" diff --git a/app/server/preset.js b/app/server/preset.js index 21c9e8fec3b5..f09c6698e046 100644 --- a/app/server/preset.js +++ b/app/server/preset.js @@ -1 +1 @@ -module.exports = require('./dist/cjs/server/framework-preset-server'); +module.exports = require('./dist/cjs/server/preset'); diff --git a/app/server/src/client/index.ts b/app/server/src/client/index.ts deleted file mode 100644 index 16e7fdbacf12..000000000000 --- a/app/server/src/client/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@storybook/renderer-server'; diff --git a/app/server/src/server/preset.ts b/app/server/src/server/preset.ts new file mode 100644 index 000000000000..cfdc2240edfe --- /dev/null +++ b/app/server/src/server/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + '@storybook/preset-server-webpack', + '@storybook/renderer-server', +]; diff --git a/presets/server-webpack/README.md b/presets/server-webpack/README.md new file mode 100644 index 000000000000..3421377c873e --- /dev/null +++ b/presets/server-webpack/README.md @@ -0,0 +1,317 @@ +# Storybook for Server + +--- + +Storybook for Server is a UI development environment for your plain HTML snippets rendered by your server backend. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-app +npx sb init -t server +``` + +To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`: + +```js +export const parameters = { + server: { + url: `http://localhost:${port}/storybook_preview`, + }, +}; +``` + +The URL you connect to should have the ability to render a story, see [server rendering](#server-rendering) below. + +For more information visit: [storybook.js.org](https://storybook.js.org) + +## Writing Stories + +To write a story, use whatever API is natural for your server-side rendering framework to generate set of JSON or YAML files of stories analogous to CSF files (see the [`server-kitchen-sink`](../../examples/server-kitchen-sink/stories) example for ideas). + +```json +{ + "title": "Component", + "parameters": { + "options": { "component": "my_widget" } + }, + "stories": [ + { + "name": "Default", + "parameters": { + "server": { "id": "path/of/your/story" } + } + } + ] +} +``` + +In your `.storybook/main.js` you simply provide a glob specifying the location of those JSON files, e.g. + +```js +module.exports = { + stories: ['../stories/**/*.stories.json'], +}; +``` + +Notice that the JSON does not specify a rendering function -- `@storybook/server` will instead call your `parameters.server.url` with the story's server id appended. + +For example the JSON story above is requivalent to the CSF3 definition: + +```javascript +export default { + title: 'Component', + parameters: { + options: { + component: 'my_widget', + }, + }, +}; + +export const Default = { + name: 'Default', + parameters: { + server: { + id: 'path/of/your/story"', + }, + }, +}; +``` + +With the story HTML will be fetched from the server by making a GET request to http://localhost/storybook_preview/path/of/your/story` + +### Ruby/Rails support + +In particular the [View Component::Storybook](https://github.com/jonspalmer/view_component_storybook) gem provides a Ruby API for easily creating the above with a Ruby/Rails DSL (as well as providing a server rendering endpoint). + +## Server rendering + +The server rendering side of things is relatively straightfoward. When you browse to a story in the sidebar, Storybook will make a `fetch` request to `${parameters.server.url}/{parameters.server.id}` and display the HTML that is returned. + +You need to ensure the route in your server app renders the appropriate HTML when called in that fashion. + +### Passing parameters to the server + +Many components are likely to be dynamic - responding to parameters that change their content or appearance. `@storybook\server` has two mechanisms for passing those parameters to the server - `params` and `args`. Parameters defined in this way are appended to the fetch url as query string parameters. The server endpoint is responsible for interpreting those parameters and vary the returned html appropriately + +#### Constant parameters with `params` + +Static parameters can be defined using the `params` story parameter. For example suppose you have a Button component that has a label and color options: + +```json +{ + "title": "Buttons", + "stories": [ + { + "name": "Red", + "parameters": { + "server": { + "id": "button", + "params": { "color": "red", "label": "Stop" } + } + } + }, + { + "name": "Green", + "parameters": { + "server": { + "id": "button", + "params": { "color": "green", "label": "OK" } + } + } + } + ] +} +``` + +The Red and Green story HTML will be fetched from the urls `server.url/controls/button?color=red&label=Stop` and `server.url/controls/button?color=green&label=OK` + +Like all story parameters server params can be defined in the default export and overridden in stories. + +```json +{ + "title": "Buttons", + "parameters": { + "server": { + "params": { "color": "red" } + } + }, + "stories": [ + { + "name": "Default", + "parameters": { + "server": { + "id": "button", + "params": { "label": "Stop" } + } + } + }, + { + "name": "Green", + "parameters": { + "server": { + "id": "button", + "params": { "color": "green", "label": "OK" } + } + } + } + ] +} +``` + +#### Dynamic parameters with `args` and Controls + +Dynamic parameters can be defined using args and the Controls addon + +```json +{ + "title": "Buttons", + "stories": [ + { + "name": "Red", + "parameters": { + "server": { + "id": "button" + } + }, + "args": { "color": "red", "label": "Stop" } + }, + { + "name": "Green", + "parameters": { + "server": { + "id": "button" + } + }, + "args": { "color": "green", "label": "Go" } + } + ] +} +``` + +Story args are passed to the server as url query parameters just like `params` except now they can be varied on the Controls addon panel. + +Just like CSF stories we can define `argTypes` to specify the controls used in the controls panel. `argTypes` can be defined at the default or story level. + +```json +{ + "title": "Buttons", + "argTypes": { + "color": { "control": { "type": "color" } } + }, + "stories": [ + { + "name": "Red", + "parameters": { + "server": { + "id": "button" + } + }, + "args": { "color": "red", "label": "Stop" } + }, + { + "name": "Green", + "parameters": { + "server": { + "id": "button" + } + }, + "args": { "color": "green", "label": "Go" } + } + ] +} +``` + +## Addon compatibility + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) and a great API to customize as you wish. As some addons assume the story is rendered in JS, they may not work with `@storybook/server` (yet!). + +Many addons that act on the manager side (such as `backgrounds` and `viewport`) will work out of the box with `@storybook/server` -- you can configure them with parameters written on the server as usual. + +### Controls + +To configure controls, simple add `args` and `argTypes` keys to the story JSON much like you would CSF: + +```json +{ + "title": "Controls", + "stories": [ + { + "name": "Button", + "parameters": { + "server": { "id": "controls/button" } + }, + "args": { "button_text": "Push Me", "color": "red" }, + "argTypes": { "button_text": { "control": { "type": "color" } } } + } + ] +} +``` + +The controls values will be added to your story URL as query parameters. + +### Actions + +To use actions, use the `parameters.actions.handles` parameter: + +```json +{ + "title": "Actions", + "stories": [ + { + "name": "Button", + "parameters": { + "server": { "id": "actions/button" }, + "actions": { + "handles": ["mouseover", "click .btn"] + } + } + } + ] +} +``` + +## Advanced Configuration + +### fetchStoryHtml + +For control over how `@storybook/server` fetches Html from the server you can provide a `fetchStoryHtml` function as a parameter. You would typically set this in `.storybook/preview.js` but it's just a regular Storybook parameter so could be overridden at the stories or story level. + +```javascript +// .storybook/preview.js + +const fetchStoryHtml = async (url, path, params, context) => { + // Custom fetch implementation + // .... + return html; +}; + +export const parameters = { + server: { + url: `http://localhost:${port}/storybook_preview`, + fetchStoryHtml, + }, +}; +``` + +`fetchStoryHtml` should be an async function with the following signature + +```javascript +type FetchStoryHtmlType = ( + url: string, + id: string, + params: any, + context: StoryContext +) => Promise; +``` + +- url: Server url configured by the `parameters.server.url` +- id: Id of the story being rendered given by `parameters.server.id` +- params: Merged story params `parameters.server.params`and story args +- context: The context of the story diff --git a/presets/server-webpack/package.json b/presets/server-webpack/package.json new file mode 100644 index 000000000000..6c07e74eed58 --- /dev/null +++ b/presets/server-webpack/package.json @@ -0,0 +1,68 @@ +{ + "name": "@storybook/preset-server-webpack", + "version": "6.5.0-alpha.64", + "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/server-webpack", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "presets/server-webpack" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "main": "dist/cjs/client/index.js", + "module": "dist/esm/client/index.js", + "types": "dist/ts3.9/client/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/core-server": "6.5.0-alpha.64", + "@storybook/renderer-server": "6.5.0-alpha.64", + "@types/node": "^14.14.20 || ^16.0.0", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "react": "16.14.0", + "react-dom": "16.14.0", + "regenerator-runtime": "^0.13.7", + "safe-identifier": "^0.4.1", + "ts-dedent": "^2.0.0" + }, + "devDependencies": { + "fs-extra": "^9.0.1", + "jest-specific-snapshot": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", + "sbmodern": "dist/modern/client/index.js" +} diff --git a/presets/server-webpack/preset.js b/presets/server-webpack/preset.js new file mode 100644 index 000000000000..756a40da0d16 --- /dev/null +++ b/presets/server-webpack/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/framework-preset-server'); diff --git a/app/server/src/lib/compiler/__testfixtures__/a11y.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/a11y.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.json diff --git a/app/server/src/lib/compiler/__testfixtures__/a11y.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/a11y.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/a11y.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/actions.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/actions.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/actions.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/actions.json diff --git a/app/server/src/lib/compiler/__testfixtures__/actions.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/actions.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/actions.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/actions.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/backgrounds.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/backgrounds.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.json diff --git a/app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/backgrounds.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/controls.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/controls.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/controls.json diff --git a/app/server/src/lib/compiler/__testfixtures__/controls.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/controls.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/controls.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/kitchen_sink.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.json diff --git a/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/links.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/links.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/links.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/links.json diff --git a/app/server/src/lib/compiler/__testfixtures__/links.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/links.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/links.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/links.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/multiple_stories.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/multiple_stories.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.json diff --git a/app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/multiple_stories.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/params.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/params.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/params.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/params.json diff --git a/app/server/src/lib/compiler/__testfixtures__/params.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/params.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/params.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/params.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/params_override.json b/presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.json similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/params_override.json rename to presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.json diff --git a/app/server/src/lib/compiler/__testfixtures__/params_override.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/params_override.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/params_override.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/yaml.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/yaml.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/yaml.yaml b/presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.yaml similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/yaml.yaml rename to presets/server-webpack/src/lib/compiler/__testfixtures__/yaml.yaml diff --git a/app/server/src/lib/compiler/__testfixtures__/yml.snapshot b/presets/server-webpack/src/lib/compiler/__testfixtures__/yml.snapshot similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/yml.snapshot rename to presets/server-webpack/src/lib/compiler/__testfixtures__/yml.snapshot diff --git a/app/server/src/lib/compiler/__testfixtures__/yml.yml b/presets/server-webpack/src/lib/compiler/__testfixtures__/yml.yml similarity index 100% rename from app/server/src/lib/compiler/__testfixtures__/yml.yml rename to presets/server-webpack/src/lib/compiler/__testfixtures__/yml.yml diff --git a/app/server/src/lib/compiler/index.ts b/presets/server-webpack/src/lib/compiler/index.ts similarity index 100% rename from app/server/src/lib/compiler/index.ts rename to presets/server-webpack/src/lib/compiler/index.ts diff --git a/app/server/src/lib/compiler/json-to-csf-compiler.test.ts b/presets/server-webpack/src/lib/compiler/json-to-csf-compiler.test.ts similarity index 100% rename from app/server/src/lib/compiler/json-to-csf-compiler.test.ts rename to presets/server-webpack/src/lib/compiler/json-to-csf-compiler.test.ts diff --git a/app/server/src/lib/compiler/stringifier.ts b/presets/server-webpack/src/lib/compiler/stringifier.ts similarity index 100% rename from app/server/src/lib/compiler/stringifier.ts rename to presets/server-webpack/src/lib/compiler/stringifier.ts diff --git a/app/server/src/lib/compiler/types.ts b/presets/server-webpack/src/lib/compiler/types.ts similarity index 100% rename from app/server/src/lib/compiler/types.ts rename to presets/server-webpack/src/lib/compiler/types.ts diff --git a/app/server/src/server/framework-preset-server.ts b/presets/server-webpack/src/server/framework-preset-server.ts similarity index 69% rename from app/server/src/server/framework-preset-server.ts rename to presets/server-webpack/src/server/framework-preset-server.ts index fdad4774bca3..52a4c1a362c5 100644 --- a/app/server/src/server/framework-preset-server.ts +++ b/presets/server-webpack/src/server/framework-preset-server.ts @@ -1,8 +1,7 @@ import path from 'path'; import type { StorybookConfig } from '@storybook/core-common'; -import type { Configuration } from 'webpack'; -export function webpack(config: Configuration) { +export const webpack: StorybookConfig['webpack'] = (config) => { config.module.rules.push({ type: 'javascript/auto', test: /\.stories\.json$/, @@ -16,6 +15,4 @@ export function webpack(config: Configuration) { }); return config; -} - -export const addons: StorybookConfig['addons'] = ['@storybook/renderer-server']; +}; diff --git a/app/server/src/server/loader.ts b/presets/server-webpack/src/server/loader.ts similarity index 100% rename from app/server/src/server/loader.ts rename to presets/server-webpack/src/server/loader.ts diff --git a/app/server/src/typings.d.ts b/presets/server-webpack/src/typings.d.ts similarity index 100% rename from app/server/src/typings.d.ts rename to presets/server-webpack/src/typings.d.ts diff --git a/presets/server-webpack/tsconfig.json b/presets/server-webpack/tsconfig.json new file mode 100644 index 000000000000..77e11bbd2ab9 --- /dev/null +++ b/presets/server-webpack/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": [ + "webpack-env", + "node" + ] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/__tests__/**/*" + ] +} \ No newline at end of file From 74e005bb9daf2fa2d0380f15ba95bc576c36dbba Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:01:56 +0800 Subject: [PATCH 06/21] Svelte: webpack preset refactor --- app/svelte/package.json | 7 +- app/svelte/src/server/preset.ts | 3 +- presets/svelte-webpack/README.md | 32 ++++++++ presets/svelte-webpack/package.json | 74 +++++++++++++++++++ presets/svelte-webpack/preset.js | 1 + .../src}/framework-preset-svelte-docs.ts | 13 ++-- .../src}/framework-preset-svelte.ts | 12 ++- presets/svelte-webpack/src/preset.ts | 7 ++ .../src}/svelte-docgen-loader.ts | 0 presets/svelte-webpack/tsconfig.json | 17 +++++ 10 files changed, 143 insertions(+), 23 deletions(-) create mode 100644 presets/svelte-webpack/README.md create mode 100644 presets/svelte-webpack/package.json create mode 100644 presets/svelte-webpack/preset.js rename {app/svelte/src/server => presets/svelte-webpack/src}/framework-preset-svelte-docs.ts (53%) rename {app/svelte/src/server => presets/svelte-webpack/src}/framework-preset-svelte.ts (70%) create mode 100644 presets/svelte-webpack/src/preset.ts rename {app/svelte/src/server => presets/svelte-webpack/src}/svelte-docgen-loader.ts (100%) create mode 100644 presets/svelte-webpack/tsconfig.json diff --git a/app/svelte/package.json b/app/svelte/package.json index ffead41853f1..085baf648df1 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -42,20 +42,15 @@ "dependencies": { "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", - "@storybook/node-logger": "6.5.0-alpha.64", + "@storybook/preset-svelte-webpack": "6.5.0-alpha.64", "@storybook/renderer-svelte": "6.5.0-alpha.64", "core-js": "^3.8.2", - "global": "^4.4.0", - "loader-utils": "^2.0.0", "react": "16.14.0", "react-dom": "16.14.0", "regenerator-runtime": "^0.13.7", - "sveltedoc-parser": "4.1.0", - "ts-dedent": "^2.0.0", "webpack": ">=4.0.0 <6.0.0" }, "devDependencies": { - "@types/loader-utils": "^2.0.0", "@types/webpack-env": "^1.16.0", "svelte": "^3.31.2", "svelte-loader": "^3.0.0", diff --git a/app/svelte/src/server/preset.ts b/app/svelte/src/server/preset.ts index 7ff04fa37512..24963e348ea4 100644 --- a/app/svelte/src/server/preset.ts +++ b/app/svelte/src/server/preset.ts @@ -1,7 +1,6 @@ import type { StorybookConfig } from '@storybook/core-common'; export const addons: StorybookConfig['addons'] = [ + '@storybook/preset-svelte-webpack', '@storybook/renderer-svelte', - require.resolve('./framework-preset-svelte'), - require.resolve('./framework-preset-svelte-docs'), ]; diff --git a/presets/svelte-webpack/README.md b/presets/svelte-webpack/README.md new file mode 100644 index 000000000000..fcb7b786e567 --- /dev/null +++ b/presets/svelte-webpack/README.md @@ -0,0 +1,32 @@ +# Storybook for Svelte + +Storybook for Svelte is a UI development environment for your Svelte components. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-svelte-app +npx sb init +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/svelte/configure/storybook-addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/svelte/workflows/publish-storybook) of your storybook and deploy it anywhere you want. + +## TODOs + +- [ ] Support `addon-info` +- [ ] Support Svelte markup directly in stories +- [ ] Add Svelte storybook generator +- [ ] Provide stories that show advanced Svelte use cases +- [ ] Hydratable +- [ ] Advanced mount options diff --git a/presets/svelte-webpack/package.json b/presets/svelte-webpack/package.json new file mode 100644 index 000000000000..3e3b69086570 --- /dev/null +++ b/presets/svelte-webpack/package.json @@ -0,0 +1,74 @@ +{ + "name": "@storybook/preset-svelte-webpack", + "version": "6.5.0-alpha.64", + "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/svelte-webpack", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "presets/svelte-webpack" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "main": "dist/cjs/client/index.js", + "module": "dist/esm/client/index.js", + "types": "dist/ts3.9/client/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "dist/**/*", + "templates/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/node-logger": "6.5.0-alpha.64", + "core-js": "^3.8.2", + "loader-utils": "^2.0.0", + "react": "16.14.0", + "react-dom": "16.14.0", + "regenerator-runtime": "^0.13.7", + "sveltedoc-parser": "4.1.0", + "ts-dedent": "^2.0.0", + "webpack": ">=4.0.0 <6.0.0" + }, + "devDependencies": { + "@types/loader-utils": "^2.0.0", + "@types/webpack-env": "^1.16.0", + "svelte": "^3.31.2", + "svelte-loader": "^3.0.0", + "webpack": "4" + }, + "peerDependencies": { + "@babel/core": "*", + "svelte": "^3.1.0", + "svelte-loader": "*" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", + "sbmodern": "dist/modern/client/index.js" +} diff --git a/presets/svelte-webpack/preset.js b/presets/svelte-webpack/preset.js new file mode 100644 index 000000000000..e45ac5b4cec0 --- /dev/null +++ b/presets/svelte-webpack/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/preset'); diff --git a/app/svelte/src/server/framework-preset-svelte-docs.ts b/presets/svelte-webpack/src/framework-preset-svelte-docs.ts similarity index 53% rename from app/svelte/src/server/framework-preset-svelte-docs.ts rename to presets/svelte-webpack/src/framework-preset-svelte-docs.ts index 2ae6af697652..73c425b0e449 100644 --- a/app/svelte/src/server/framework-preset-svelte-docs.ts +++ b/presets/svelte-webpack/src/framework-preset-svelte-docs.ts @@ -1,18 +1,15 @@ import path from 'path'; +import { StorybookConfig } from '@storybook/core-common'; -import { Options } from '@storybook/core-common'; - -type Configuration = any; - -export async function webpackFinal(webpackConfig: Configuration, options: Options) { +export const webpackFinal: StorybookConfig['webpackFinal'] = async (config, options) => { const svelteOptions = await options.presets.apply('svelteOptions', {} as any, options); - webpackConfig.module.rules.push({ + config.module.rules.push({ test: /\.svelte$/, loader: path.resolve(`${__dirname}/svelte-docgen-loader`), enforce: 'post', options: svelteOptions, }); - return webpackConfig; -} + return config; +}; diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/presets/svelte-webpack/src/framework-preset-svelte.ts similarity index 70% rename from app/svelte/src/server/framework-preset-svelte.ts rename to presets/svelte-webpack/src/framework-preset-svelte.ts index 31950db7fc22..f812ed0ddc93 100644 --- a/app/svelte/src/server/framework-preset-svelte.ts +++ b/presets/svelte-webpack/src/framework-preset-svelte.ts @@ -1,8 +1,6 @@ -import type { Options } from '@storybook/core-common'; -import type { Configuration } from 'webpack'; -import type { TransformOptions } from '@babel/core'; +import type { StorybookConfig } from '@storybook/core-common'; -export async function webpack(config: Configuration, options: Options): Promise { +export const webpack: StorybookConfig['webpack'] = async (config, options) => { const { preprocess = undefined, loader = {} } = await options.presets.apply( 'svelteOptions', {} as any, @@ -31,12 +29,12 @@ export async function webpack(config: Configuration, options: Options): Promise< mainFields: ['svelte', ...mainFields], }, }; -} +}; -export async function babelDefault(config: TransformOptions): Promise { +export const babelDefault: StorybookConfig['babelDefault'] = (config) => { return { ...config, presets: [...(config?.presets || [])], plugins: [...(config?.plugins || [])], }; -} +}; diff --git a/presets/svelte-webpack/src/preset.ts b/presets/svelte-webpack/src/preset.ts new file mode 100644 index 000000000000..7ff04fa37512 --- /dev/null +++ b/presets/svelte-webpack/src/preset.ts @@ -0,0 +1,7 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + '@storybook/renderer-svelte', + require.resolve('./framework-preset-svelte'), + require.resolve('./framework-preset-svelte-docs'), +]; diff --git a/app/svelte/src/server/svelte-docgen-loader.ts b/presets/svelte-webpack/src/svelte-docgen-loader.ts similarity index 100% rename from app/svelte/src/server/svelte-docgen-loader.ts rename to presets/svelte-webpack/src/svelte-docgen-loader.ts diff --git a/presets/svelte-webpack/tsconfig.json b/presets/svelte-webpack/tsconfig.json new file mode 100644 index 000000000000..ea47a78eb476 --- /dev/null +++ b/presets/svelte-webpack/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": [ + "webpack-env", + "node" + ], + "resolveJsonModule": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/**/*.test.*" + ] +} \ No newline at end of file From f23e87740440e629a50810fb8e5f448126a965bd Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:02:28 +0800 Subject: [PATCH 07/21] Vue: webpack preset refactor --- app/vue/package.json | 7 +- app/vue/src/server/preset.ts | 3 +- presets/vue-webpack/README.md | 48 ++++++++++++ presets/vue-webpack/package.json | 77 +++++++++++++++++++ presets/vue-webpack/preset.js | 1 + .../src}/framework-preset-vue-docs.ts | 18 +++-- .../vue-webpack/src}/framework-preset-vue.ts | 7 +- presets/vue-webpack/src/preset.ts | 6 ++ presets/vue-webpack/src/typings.d.ts | 1 + presets/vue-webpack/tsconfig.json | 17 ++++ 10 files changed, 165 insertions(+), 20 deletions(-) create mode 100644 presets/vue-webpack/README.md create mode 100644 presets/vue-webpack/package.json create mode 100644 presets/vue-webpack/preset.js rename {app/vue/src/server => presets/vue-webpack/src}/framework-preset-vue-docs.ts (56%) rename {app/vue/src/server => presets/vue-webpack/src}/framework-preset-vue.ts (82%) create mode 100644 presets/vue-webpack/src/preset.ts create mode 100644 presets/vue-webpack/src/typings.d.ts create mode 100644 presets/vue-webpack/tsconfig.json diff --git a/app/vue/package.json b/app/vue/package.json index 39ce34c402ab..c1b594c3e13e 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -41,19 +41,14 @@ "dependencies": { "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", - "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/preset-vue-webpack": "6.5.0-alpha.64", "@storybook/renderer-vue": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", - "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0", "regenerator-runtime": "^0.13.7", - "ts-dedent": "^2.0.0", - "ts-loader": "^8.0.14", - "vue-docgen-api": "^4.44.15", - "vue-docgen-loader": "^1.5.0", "webpack": ">=4.0.0 <6.0.0" }, "devDependencies": { diff --git a/app/vue/src/server/preset.ts b/app/vue/src/server/preset.ts index e90a0c007d41..e84e659d4dfa 100644 --- a/app/vue/src/server/preset.ts +++ b/app/vue/src/server/preset.ts @@ -1,7 +1,6 @@ import type { StorybookConfig } from '@storybook/core-common'; export const addons: StorybookConfig['addons'] = [ + '@storybook/preset-vue-webpack', '@storybook/renderer-vue', - require.resolve('./framework-preset-vue'), - require.resolve('./framework-preset-vue-docs'), ]; diff --git a/presets/vue-webpack/README.md b/presets/vue-webpack/README.md new file mode 100644 index 000000000000..169efbeee115 --- /dev/null +++ b/presets/vue-webpack/README.md @@ -0,0 +1,48 @@ +# Storybook for Vue + +Storybook for Vue is a UI development environment for your Vue components. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-vue-app +npx sb init +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework + + + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue/configure/storybook-addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/vue/workflows/publish-storybook) of your storybook and deploy it anywhere you want. + +## Vue Notes + +- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.js`. + +## Known Limitations + +In Storybook story and decorator components, you can not access the Vue instance +in factory functions for default prop values: + +```js +{ + props: { + foo: { + default() { + return this.bar; // does not work! + } + } + } +} +``` diff --git a/presets/vue-webpack/package.json b/presets/vue-webpack/package.json new file mode 100644 index 000000000000..6854cac1a55f --- /dev/null +++ b/presets/vue-webpack/package.json @@ -0,0 +1,77 @@ +{ + "name": "@storybook/preset-vue-webpack", + "version": "6.5.0-alpha.64", + "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/vue-webpack", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "presets/vue-webpack" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "main": "dist/cjs/client/index.js", + "module": "dist/esm/client/index.js", + "types": "dist/ts3.9/client/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@types/node": "^14.14.20 || ^16.0.0", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "react": "16.14.0", + "react-dom": "16.14.0", + "regenerator-runtime": "^0.13.7", + "ts-loader": "^8.0.14", + "vue-docgen-api": "^4.44.15", + "vue-docgen-loader": "^1.5.0", + "webpack": ">=4.0.0 <6.0.0" + }, + "devDependencies": { + "vue": "^2.6.12", + "vue-loader": "^15.9.6", + "vue-template-compiler": "^2.6.12", + "webpack": "4" + }, + "peerDependencies": { + "@babel/core": "*", + "babel-loader": "^7.0.0 || ^8.0.0", + "css-loader": "*", + "vue": "^2.6.8", + "vue-loader": "^15.7.0", + "vue-template-compiler": "^2.6.8" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", + "sbmodern": "dist/modern/client/index.js" +} diff --git a/presets/vue-webpack/preset.js b/presets/vue-webpack/preset.js new file mode 100644 index 000000000000..e45ac5b4cec0 --- /dev/null +++ b/presets/vue-webpack/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/preset'); diff --git a/app/vue/src/server/framework-preset-vue-docs.ts b/presets/vue-webpack/src/framework-preset-vue-docs.ts similarity index 56% rename from app/vue/src/server/framework-preset-vue-docs.ts rename to presets/vue-webpack/src/framework-preset-vue-docs.ts index 4afc344e6bb6..bcc4aca529db 100644 --- a/app/vue/src/server/framework-preset-vue-docs.ts +++ b/presets/vue-webpack/src/framework-preset-vue-docs.ts @@ -1,8 +1,8 @@ -import { Options } from '@storybook/core-common'; +import { StorybookConfig } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export function webpackFinal(webpackConfig: any = {}, options: Options) { - if (!hasDocsOrControls(options)) return webpackConfig; +export const webpackFinal: StorybookConfig['webpackFinal'] = (config, options) => { + if (!hasDocsOrControls(options)) return config; let vueDocgenOptions = {}; @@ -16,16 +16,18 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { } }); - webpackConfig.module.rules.push({ + config.module.rules.push({ test: /\.vue$/, - loader: require.resolve('vue-docgen-loader', { paths: [require.resolve('@storybook/vue')] }), + loader: require.resolve('vue-docgen-loader', { + paths: [require.resolve('@storybook/preset-vue-webpack')], + }), enforce: 'post', options: { docgenOptions: { - alias: webpackConfig.resolve.alias, + alias: config.resolve.alias, ...vueDocgenOptions, }, }, }); - return webpackConfig; -} + return config; +}; diff --git a/app/vue/src/server/framework-preset-vue.ts b/presets/vue-webpack/src/framework-preset-vue.ts similarity index 82% rename from app/vue/src/server/framework-preset-vue.ts rename to presets/vue-webpack/src/framework-preset-vue.ts index 3af8418722bb..052af46a4d20 100644 --- a/app/vue/src/server/framework-preset-vue.ts +++ b/presets/vue-webpack/src/framework-preset-vue.ts @@ -1,10 +1,9 @@ /* eslint-disable no-param-reassign */ import { VueLoaderPlugin } from 'vue-loader'; -import type { Configuration } from 'webpack'; -import type { Options, TypescriptConfig, StorybookConfig } from '@storybook/core-common'; +import type { TypescriptConfig, StorybookConfig } from '@storybook/core-common'; -export async function webpack(config: Configuration, { presets }: Options) { +export const webpack: StorybookConfig['webpack'] = async (config, { presets }) => { const typescriptOptions = await presets.apply('typescript', {} as any); config.plugins.push(new VueLoaderPlugin()); @@ -42,4 +41,4 @@ export async function webpack(config: Configuration, { presets }: Options) { config.resolve.alias = { ...config.resolve.alias, vue$: require.resolve('vue/dist/vue.esm.js') }; return config; -} +}; diff --git a/presets/vue-webpack/src/preset.ts b/presets/vue-webpack/src/preset.ts new file mode 100644 index 000000000000..89288293223c --- /dev/null +++ b/presets/vue-webpack/src/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-vue'), + require.resolve('./framework-preset-vue-docs'), +]; diff --git a/presets/vue-webpack/src/typings.d.ts b/presets/vue-webpack/src/typings.d.ts new file mode 100644 index 000000000000..45d6411e8736 --- /dev/null +++ b/presets/vue-webpack/src/typings.d.ts @@ -0,0 +1 @@ +declare module 'vue-loader/lib/plugin'; diff --git a/presets/vue-webpack/tsconfig.json b/presets/vue-webpack/tsconfig.json new file mode 100644 index 000000000000..ea47a78eb476 --- /dev/null +++ b/presets/vue-webpack/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": [ + "webpack-env", + "node" + ], + "resolveJsonModule": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/**/*.test.*" + ] +} \ No newline at end of file From 40a55bdddb763a0b80c6a736092dfedb1dee147d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:03:05 +0800 Subject: [PATCH 08/21] Vue3: webpack preset refactor --- app/vue3/package.json | 8 +- app/vue3/src/server/preset.ts | 3 +- presets/vue3-webpack/README.md | 43 +++++++++++ presets/vue3-webpack/package.json | 76 +++++++++++++++++++ presets/vue3-webpack/preset.js | 1 + .../src}/framework-preset-vue3-docs.ts | 18 +++-- .../src}/framework-preset-vue3.ts | 7 +- presets/vue3-webpack/src/preset.ts | 6 ++ presets/vue3-webpack/src/typings.d.ts | 5 ++ presets/vue3-webpack/tsconfig.json | 18 +++++ 10 files changed, 165 insertions(+), 20 deletions(-) create mode 100644 presets/vue3-webpack/README.md create mode 100644 presets/vue3-webpack/package.json create mode 100644 presets/vue3-webpack/preset.js rename {app/vue3/src/server => presets/vue3-webpack/src}/framework-preset-vue3-docs.ts (56%) rename {app/vue3/src/server => presets/vue3-webpack/src}/framework-preset-vue3.ts (85%) create mode 100644 presets/vue3-webpack/src/preset.ts create mode 100644 presets/vue3-webpack/src/typings.d.ts create mode 100644 presets/vue3-webpack/tsconfig.json diff --git a/app/vue3/package.json b/app/vue3/package.json index 7889f76d42e1..42a24bb31507 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -42,20 +42,14 @@ "dependencies": { "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", - "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/preset-vue3-webpack": "6.5.0-alpha.64", "@storybook/renderer-vue3": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", - "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0", "regenerator-runtime": "^0.13.7", - "ts-dedent": "^2.0.0", - "ts-loader": "^8.0.14", - "vue-docgen-api": "^4.44.15", - "vue-docgen-loader": "^1.5.0", - "vue-loader": "^16.4.1", "webpack": ">=4.0.0 <6.0.0" }, "devDependencies": { diff --git a/app/vue3/src/server/preset.ts b/app/vue3/src/server/preset.ts index b910b14ad4fb..8a5a7d6630a3 100644 --- a/app/vue3/src/server/preset.ts +++ b/app/vue3/src/server/preset.ts @@ -1,7 +1,6 @@ import type { StorybookConfig } from '@storybook/core-common'; export const addons: StorybookConfig['addons'] = [ + '@storybook/preset-vue3-webpack', '@storybook/renderer-vue3', - require.resolve('./framework-preset-vue3'), - require.resolve('./framework-preset-vue3-docs'), ]; diff --git a/presets/vue3-webpack/README.md b/presets/vue3-webpack/README.md new file mode 100644 index 000000000000..0d85c31aa0eb --- /dev/null +++ b/presets/vue3-webpack/README.md @@ -0,0 +1,43 @@ +# Storybook for Vue 3 + +Storybook for Vue 3 is a UI development environment for your Vue 3 components. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-vue3-app +npx sb init +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue3/configure/storybook-addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/vue3/workflows/publish-storybook) of your storybook and deploy it anywhere you want. + +## Extending the Vue application + +Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview which can be imported as `import { app } from '@storybook/vue3'`. + +When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. + +For example: + +```js +// .storybook/preview.js + +import { app } from '@storybook/vue3'; + +app.use(MyPlugin); +app.component('my-component', MyComponent); +app.mixin({ + /* My mixin */ +}); +``` diff --git a/presets/vue3-webpack/package.json b/presets/vue3-webpack/package.json new file mode 100644 index 000000000000..78d19fcd7c52 --- /dev/null +++ b/presets/vue3-webpack/package.json @@ -0,0 +1,76 @@ +{ + "name": "@storybook/preset-vue3-webpack", + "version": "6.5.0-alpha.64", + "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/vue3-webpack", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "presets/vue3-webpack" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "main": "dist/cjs/client/index.js", + "module": "dist/esm/client/index.js", + "types": "dist/ts3.9/client/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "bin/**/*", + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/core-common": "6.5.0-alpha.64", + "@storybook/docs-tools": "6.5.0-alpha.64", + "@types/node": "^14.14.20 || ^16.0.0", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "react": "16.14.0", + "react-dom": "16.14.0", + "regenerator-runtime": "^0.13.7", + "ts-loader": "^8.0.14", + "vue-docgen-api": "^4.44.15", + "vue-docgen-loader": "^1.5.0", + "vue-loader": "^16.4.1", + "webpack": ">=4.0.0 <6.0.0" + }, + "devDependencies": { + "@vue/compiler-sfc": "3.0.0", + "vue": "3.0.0", + "webpack": "4" + }, + "peerDependencies": { + "@babel/core": "*", + "@vue/compiler-sfc": "^3.0.0", + "babel-loader": "^7.0.0 || ^8.0.0", + "vue": "^3.0.0" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", + "sbmodern": "dist/modern/client/index.js" +} diff --git a/presets/vue3-webpack/preset.js b/presets/vue3-webpack/preset.js new file mode 100644 index 000000000000..e45ac5b4cec0 --- /dev/null +++ b/presets/vue3-webpack/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/preset'); diff --git a/app/vue3/src/server/framework-preset-vue3-docs.ts b/presets/vue3-webpack/src/framework-preset-vue3-docs.ts similarity index 56% rename from app/vue3/src/server/framework-preset-vue3-docs.ts rename to presets/vue3-webpack/src/framework-preset-vue3-docs.ts index 07340bb3e5fe..a0667d60b6b2 100644 --- a/app/vue3/src/server/framework-preset-vue3-docs.ts +++ b/presets/vue3-webpack/src/framework-preset-vue3-docs.ts @@ -1,8 +1,8 @@ -import type { Options } from '@storybook/core-common'; +import type { StorybookConfig } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export function webpackFinal(webpackConfig: any = {}, options: Options) { - if (!hasDocsOrControls(options)) return webpackConfig; +export const webpackFinal: StorybookConfig['webpackFinal'] = (config, options) => { + if (!hasDocsOrControls(options)) return config; let vueDocgenOptions = {}; @@ -16,16 +16,18 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { } }); - webpackConfig.module.rules.push({ + config.module.rules.push({ test: /\.vue$/, - loader: require.resolve('vue-docgen-loader', { paths: [require.resolve('@storybook/vue3')] }), + loader: require.resolve('vue-docgen-loader', { + paths: [require.resolve('@storybook/preset-vue3-webpack')], + }), enforce: 'post', options: { docgenOptions: { - alias: webpackConfig.resolve.alias, + alias: config.resolve.alias, ...vueDocgenOptions, }, }, }); - return webpackConfig; -} + return config; +}; diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/presets/vue3-webpack/src/framework-preset-vue3.ts similarity index 85% rename from app/vue3/src/server/framework-preset-vue3.ts rename to presets/vue3-webpack/src/framework-preset-vue3.ts index 5061efe35be2..d716137b109b 100644 --- a/app/vue3/src/server/framework-preset-vue3.ts +++ b/presets/vue3-webpack/src/framework-preset-vue3.ts @@ -1,7 +1,8 @@ import { VueLoaderPlugin } from 'vue-loader'; -import { Configuration, DefinePlugin } from 'webpack'; +import { DefinePlugin } from 'webpack'; +import type { StorybookConfig } from '@storybook/core-common'; -export function webpack(config: Configuration): Configuration { +export const webpack: StorybookConfig['webpack'] = (config) => { return { ...config, plugins: [ @@ -44,4 +45,4 @@ export function webpack(config: Configuration): Configuration { }, }, }; -} +}; diff --git a/presets/vue3-webpack/src/preset.ts b/presets/vue3-webpack/src/preset.ts new file mode 100644 index 000000000000..16c9fbcfde38 --- /dev/null +++ b/presets/vue3-webpack/src/preset.ts @@ -0,0 +1,6 @@ +import type { StorybookConfig } from '@storybook/core-common'; + +export const addons: StorybookConfig['addons'] = [ + require.resolve('./framework-preset-vue3'), + require.resolve('./framework-preset-vue3-docs'), +]; diff --git a/presets/vue3-webpack/src/typings.d.ts b/presets/vue3-webpack/src/typings.d.ts new file mode 100644 index 000000000000..4dd567187328 --- /dev/null +++ b/presets/vue3-webpack/src/typings.d.ts @@ -0,0 +1,5 @@ +declare module 'global'; + +declare module 'vue-loader' { + export const VueLoaderPlugin: any +} diff --git a/presets/vue3-webpack/tsconfig.json b/presets/vue3-webpack/tsconfig.json new file mode 100644 index 000000000000..5b0f285df93d --- /dev/null +++ b/presets/vue3-webpack/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": [ + "webpack-env", + "node" + ], + "resolveJsonModule": true, + "skipLibCheck": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/**/*.test.*" + ] +} \ No newline at end of file From 29791bd3f2c51bb9d43d506159c77207d85e88a2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:03:43 +0800 Subject: [PATCH 09/21] Web-components: webpack preset refactor --- app/web-components/package.json | 9 +-- app/web-components/src/server/preset.ts | 2 +- presets/web-components-webpack/README.md | 71 +++++++++++++++++++ presets/web-components-webpack/package.json | 71 +++++++++++++++++++ presets/web-components-webpack/preset.js | 1 + .../src/server/preset.ts | 7 +- presets/web-components-webpack/tsconfig.json | 9 +++ 7 files changed, 158 insertions(+), 12 deletions(-) create mode 100644 presets/web-components-webpack/README.md create mode 100644 presets/web-components-webpack/package.json create mode 100644 presets/web-components-webpack/preset.js rename app/web-components/src/server/framework-preset-web-components.ts => presets/web-components-webpack/src/server/preset.ts (87%) create mode 100644 presets/web-components-webpack/tsconfig.json diff --git a/app/web-components/package.json b/app/web-components/package.json index c6fadbad8ba2..dce3cd372e4a 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -41,22 +41,17 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.12.11", "@storybook/core-common": "6.5.0-alpha.64", "@storybook/core-server": "6.5.0-alpha.64", - "@storybook/docs-tools": "6.5.0-alpha.64", + "@storybook/preset-web-components-webpack": "6.5.0-alpha.64", "@storybook/renderer-web-components": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", - "babel-plugin-bundled-import-meta": "^0.3.1", "core-js": "^3.8.2", - "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0", - "regenerator-runtime": "^0.13.7", - "ts-dedent": "^2.0.0" + "regenerator-runtime": "^0.13.7" }, "devDependencies": { "lit-html": "2.0.2" diff --git a/app/web-components/src/server/preset.ts b/app/web-components/src/server/preset.ts index 1d220c4d4efb..1becb388a33b 100644 --- a/app/web-components/src/server/preset.ts +++ b/app/web-components/src/server/preset.ts @@ -1,6 +1,6 @@ import type { StorybookConfig } from '@storybook/core-common'; export const addons: StorybookConfig['addons'] = [ + '@storybook/preset-web-components-webpack', '@storybook/renderer-web-components', - require.resolve('./framework-preset-web-components'), ]; diff --git a/presets/web-components-webpack/README.md b/presets/web-components-webpack/README.md new file mode 100644 index 000000000000..5de2c1130fcc --- /dev/null +++ b/presets/web-components-webpack/README.md @@ -0,0 +1,71 @@ +# Storybook for web-components + +--- + +Storybook for web-components is a UI development environment for your plain web-component snippets. +With it, you can visualize different states of your UI components and develop them interactively. + +![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) + +Storybook runs outside of your app. +So you can develop UI components in isolation without worrying about app specific dependencies and requirements. + +## Getting Started + +```sh +cd my-app +npx sb init -t web_components +``` + +For more information visit: [storybook.js.org](https://storybook.js.org) + +--- + +Storybook also comes with a lot of [addons](https://storybook.js.org/docs/web-components/configure/storybook-addons) and a great API to customize as you wish. +You can also build a [static version](https://storybook.js.org/docs/web-components/workflows/publish-storybook) of your storybook and deploy it anywhere you want. + +# Hot Module Reloading (HMR) + +As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast. + +# Setup es6/7 dependencies + +By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation". + +For example if you have a library called `my-library` which is in ES2017 then you can add it like so + +```js +// .storybook/main.js + +module.exports = { + webpackFinal: async (config) => { + // find web-components rule for extra transpilation + const webComponentsRule = config.module.rules.find( + (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false + ); + // add your own `my-library` + webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); + + return config; + }, +}; +``` + +By default the following folders are included + +- `src/*.js` +- `packages/*/src/*.js` +- `node_modules/lit-html/*.js` +- `node_modules/lit-element/*.js` +- `node_modules/@open-wc/*.js` +- `node_modules/@polymer/*.js` +- `node_modules/@vaadin/*.js` + +As you can see the `src` folder is also included. +The reason for that is as it has some extra configuration to allow for example `import.meta`. +If you use a different folder you will need to make sure webpack/babel can handle it. + +# FAQ + +- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry` + => please see Setup page reload via HMR diff --git a/presets/web-components-webpack/package.json b/presets/web-components-webpack/package.json new file mode 100644 index 000000000000..8039b139c3b8 --- /dev/null +++ b/presets/web-components-webpack/package.json @@ -0,0 +1,71 @@ +{ + "name": "@storybook/preset-web-components-webpack", + "version": "6.5.0-alpha.64", + "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", + "keywords": [ + "lit-html", + "storybook", + "web-components" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/presets/web-components-webpack", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "presets/web-components-webpack" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "main": "dist/cjs/client/index.js", + "module": "dist/esm/client/index.js", + "types": "dist/ts3.9/client/index.d.ts", + "typesVersions": { + "<3.8": { + "dist/ts3.9/*": [ + "dist/ts3.4/*" + ] + } + }, + "files": [ + "dist/**/*", + "README.md", + "*.js", + "*.d.ts" + ], + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@babel/plugin-syntax-import-meta": "^7.10.4", + "@babel/preset-env": "^7.12.11", + "@storybook/core-common": "6.5.0-alpha.64", + "@types/node": "^14.14.20 || ^16.0.0", + "@types/webpack-env": "^1.16.0", + "babel-loader": "^7.0.0 || ^8.0.0", + "babel-plugin-bundled-import-meta": "^0.3.1", + "core-js": "^3.8.2", + "react": "16.14.0", + "react-dom": "16.14.0", + "regenerator-runtime": "^0.13.7" + }, + "devDependencies": { + "lit-html": "2.0.2" + }, + "peerDependencies": { + "lit-html": "^1.4.1 || ^2.0.0" + }, + "engines": { + "node": ">=10.13.0" + }, + "publishConfig": { + "access": "public" + }, + "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", + "sbmodern": "dist/modern/client/index.js" +} diff --git a/presets/web-components-webpack/preset.js b/presets/web-components-webpack/preset.js new file mode 100644 index 000000000000..e45ac5b4cec0 --- /dev/null +++ b/presets/web-components-webpack/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/preset'); diff --git a/app/web-components/src/server/framework-preset-web-components.ts b/presets/web-components-webpack/src/server/preset.ts similarity index 87% rename from app/web-components/src/server/framework-preset-web-components.ts rename to presets/web-components-webpack/src/server/preset.ts index aebad703a66e..642222f0e02c 100644 --- a/app/web-components/src/server/framework-preset-web-components.ts +++ b/presets/web-components-webpack/src/server/preset.ts @@ -1,7 +1,6 @@ -import type { Options } from '@storybook/core-common'; -import type { Configuration } from 'webpack'; +import type { StorybookConfig } from '@storybook/core-common'; -export function webpack(config: Configuration, options: Options) { +export const webpack: StorybookConfig['webpack'] = (config, options) => { const babelrcOptions = options.features?.babelModeV7 ? null : { babelrc: false }; config.module.rules.push({ test: [ @@ -37,4 +36,4 @@ export function webpack(config: Configuration, options: Options) { }); return config; -} +}; diff --git a/presets/web-components-webpack/tsconfig.json b/presets/web-components-webpack/tsconfig.json new file mode 100644 index 000000000000..a7b3b6102f4c --- /dev/null +++ b/presets/web-components-webpack/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env", "node"] + }, + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] +} From 436f46678f23a1759ee799426289d21b49eab40f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:04:12 +0800 Subject: [PATCH 10/21] Core: Add babel/babelDefault to StorybookConfig type --- lib/core-common/src/types.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index dd1489f212e0..a640e94c2d2c 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -408,6 +408,22 @@ export interface StorybookConfig { */ refs?: StorybookRefs | ((config: Configuration, options: Options) => StorybookRefs); + /** + * Modify or return babel config. + */ + babel?: ( + config: TransformOptions, + options: Options + ) => TransformOptions | Promise; + + /** + * Modify or return babel config. + */ + babelDefault?: ( + config: TransformOptions, + options: Options + ) => TransformOptions | Promise; + /** * Modify or return a custom Webpack config after the Storybook's default configuration * has run (mostly used by addons). From 9a81a66017846187922f8430a306bbd1fe90e2c3 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:05:04 +0800 Subject: [PATCH 11/21] Preset refactor project setup --- nx.json | 21 +++++ package.json | 7 ++ workspace.json | 28 ++++++ yarn.lock | 226 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 282 insertions(+) diff --git a/nx.json b/nx.json index b57087248f87..4cdded087603 100644 --- a/nx.json +++ b/nx.json @@ -91,6 +91,27 @@ "@storybook/preset-html-webpack": { "implicitDependencies": [] }, + "@storybook/preset-preact-webpack": { + "implicitDependencies": [] + }, + "@storybook/preset-react-webpack": { + "implicitDependencies": [] + }, + "@storybook/preset-server-webpack": { + "implicitDependencies": [] + }, + "@storybook/preset-svelte-webpack": { + "implicitDependencies": [] + }, + "@storybook/preset-vue-webpack": { + "implicitDependencies": [] + }, + "@storybook/preset-vue3-webpack": { + "implicitDependencies": [] + }, + "@storybook/preset-web-components-webpack": { + "implicitDependencies": [] + }, "@storybook/renderer-html": { "implicitDependencies": [] }, diff --git a/package.json b/package.json index 49bcfac370f4..ad364c60719d 100644 --- a/package.json +++ b/package.json @@ -177,6 +177,13 @@ "@storybook/postinstall": "workspace:*", "@storybook/preact": "workspace:*", "@storybook/preset-html-webpack": "workspace:*", + "@storybook/preset-preact-webpack": "workspace:*", + "@storybook/preset-react-webpack": "workspace:*", + "@storybook/preset-server-webpack": "workspace:*", + "@storybook/preset-svelte-webpack": "workspace:*", + "@storybook/preset-vue-webpack": "workspace:*", + "@storybook/preset-vue3-webpack": "workspace:*", + "@storybook/preset-web-components-webpack": "workspace:*", "@storybook/preview-web": "workspace:*", "@storybook/react": "workspace:*", "@storybook/renderer-html": "workspace:*", diff --git a/workspace.json b/workspace.json index d292a3cd6d2b..6d4810fe94eb 100644 --- a/workspace.json +++ b/workspace.json @@ -309,6 +309,34 @@ "root": "presets/html-webpack", "type": "library" }, + "@storybook/preset-preact-webpack": { + "root": "presets/preact-webpack", + "type": "library" + }, + "@storybook/preset-react-webpack": { + "root": "presets/react-webpack", + "type": "library" + }, + "@storybook/preset-server-webpack": { + "root": "presets/server-webpack", + "type": "library" + }, + "@storybook/preset-svelte-webpack": { + "root": "presets/svelte-webpack", + "type": "library" + }, + "@storybook/preset-vue-webpack": { + "root": "presets/vue-webpack", + "type": "library" + }, + "@storybook/preset-vue3-webpack": { + "root": "presets/vue3-webpack", + "type": "library" + }, + "@storybook/preset-web-components-webpack": { + "root": "presets/web-components-webpack", + "type": "library" + }, "@storybook/renderer-html": { "root": "renderers/html", "type": "library" diff --git a/yarn.lock b/yarn.lock index 9ccf59b0234d..da34fbe22595 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8320,6 +8320,7 @@ __metadata: "@babel/plugin-transform-react-jsx": ^7.12.12 "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/preset-preact-webpack": 6.5.0-alpha.64 "@storybook/renderer-preact": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 @@ -8375,6 +8376,79 @@ __metadata: languageName: unknown linkType: soft +"@storybook/preset-preact-webpack@6.5.0-alpha.64, @storybook/preset-preact-webpack@workspace:*, @storybook/preset-preact-webpack@workspace:presets/preact-webpack": + version: 0.0.0-use.local + resolution: "@storybook/preset-preact-webpack@workspace:presets/preact-webpack" + dependencies: + "@babel/plugin-transform-react-jsx": ^7.12.12 + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/renderer-preact": 6.5.0-alpha.64 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + global: ^4.4.0 + preact: ^10.5.13 + react: 16.14.0 + react-dom: 16.14.0 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + webpack: 4 + peerDependencies: + "@babel/core": "*" + preact: ^8.0.0||^10.0.0 + languageName: unknown + linkType: soft + +"@storybook/preset-react-webpack@6.5.0-alpha.64, @storybook/preset-react-webpack@workspace:*, @storybook/preset-react-webpack@workspace:presets/react-webpack": + version: 0.0.0-use.local + resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack" + dependencies: + "@babel/preset-flow": ^7.12.1 + "@babel/preset-react": ^7.12.10 + "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3 + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/node-logger": 6.5.0-alpha.64 + "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 + "@storybook/renderer-react": 6.5.0-alpha.64 + "@storybook/semver": ^7.3.2 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/util-deprecate": ^1.0.0 + "@types/webpack-env": ^1.16.0 + babel-plugin-add-react-displayname: ^0.0.5 + babel-plugin-react-docgen: ^4.2.1 + core-js: ^3.8.2 + fs-extra: ^9.0.1 + global: ^4.4.0 + react-refresh: ^0.11.0 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + webpack: 4 + peerDependencies: + "@babel/core": ^7.11.5 + jest-specific-snapshot: ^4.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + require-from-string: ^2.0.2 + peerDependenciesMeta: + "@babel/core": + optional: true + "@storybook/builder-webpack4": + optional: true + "@storybook/builder-webpack5": + optional: true + "@storybook/manager-webpack4": + optional: true + "@storybook/manager-webpack5": + optional: true + typescript: + optional: true + languageName: unknown + linkType: soft + "@storybook/preset-scss@npm:^1.0.3": version: 1.0.3 resolution: "@storybook/preset-scss@npm:1.0.3" @@ -8386,6 +8460,146 @@ __metadata: languageName: node linkType: hard +"@storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack": + version: 0.0.0-use.local + resolution: "@storybook/preset-server-webpack@workspace:presets/server-webpack" + dependencies: + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/renderer-server": 6.5.0-alpha.64 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + fs-extra: ^9.0.1 + global: ^4.4.0 + react: 16.14.0 + react-dom: 16.14.0 + regenerator-runtime: ^0.13.7 + safe-identifier: ^0.4.1 + ts-dedent: ^2.0.0 + yaml: ^1.10.0 + yaml-loader: ^0.6.0 + languageName: unknown + linkType: soft + +"@storybook/preset-svelte-webpack@6.5.0-alpha.64, @storybook/preset-svelte-webpack@workspace:*, @storybook/preset-svelte-webpack@workspace:presets/svelte-webpack": + version: 0.0.0-use.local + resolution: "@storybook/preset-svelte-webpack@workspace:presets/svelte-webpack" + dependencies: + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/node-logger": 6.5.0-alpha.64 + "@storybook/renderer-svelte": 6.5.0-alpha.64 + "@types/loader-utils": ^2.0.0 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + global: ^4.4.0 + loader-utils: ^2.0.0 + react: 16.14.0 + react-dom: 16.14.0 + regenerator-runtime: ^0.13.7 + svelte: ^3.31.2 + svelte-loader: ^3.0.0 + sveltedoc-parser: 4.1.0 + ts-dedent: ^2.0.0 + webpack: 4 + peerDependencies: + "@babel/core": "*" + svelte: ^3.1.0 + svelte-loader: "*" + languageName: unknown + linkType: soft + +"@storybook/preset-vue-webpack@6.5.0-alpha.64, @storybook/preset-vue-webpack@workspace:*, @storybook/preset-vue-webpack@workspace:presets/vue-webpack": + version: 0.0.0-use.local + resolution: "@storybook/preset-vue-webpack@workspace:presets/vue-webpack" + dependencies: + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/renderer-vue": 6.5.0-alpha.64 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + global: ^4.4.0 + react: 16.14.0 + react-dom: 16.14.0 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + ts-loader: ^8.0.14 + vue: ^2.6.12 + vue-docgen-api: ^4.44.15 + vue-docgen-loader: ^1.5.0 + vue-loader: ^15.9.6 + vue-template-compiler: ^2.6.12 + webpack: 4 + peerDependencies: + "@babel/core": "*" + babel-loader: ^7.0.0 || ^8.0.0 + css-loader: "*" + vue: ^2.6.8 + vue-loader: ^15.7.0 + vue-template-compiler: ^2.6.8 + languageName: unknown + linkType: soft + +"@storybook/preset-vue3-webpack@6.5.0-alpha.64, @storybook/preset-vue3-webpack@workspace:*, @storybook/preset-vue3-webpack@workspace:presets/vue3-webpack": + version: 0.0.0-use.local + resolution: "@storybook/preset-vue3-webpack@workspace:presets/vue3-webpack" + dependencies: + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/renderer-vue3": 6.5.0-alpha.64 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/webpack-env": ^1.16.0 + "@vue/compiler-sfc": 3.0.0 + core-js: ^3.8.2 + global: ^4.4.0 + react: 16.14.0 + react-dom: 16.14.0 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + ts-loader: ^8.0.14 + vue: 3.0.0 + vue-docgen-api: ^4.44.15 + vue-docgen-loader: ^1.5.0 + vue-loader: ^16.4.1 + webpack: 4 + peerDependencies: + "@babel/core": "*" + "@vue/compiler-sfc": ^3.0.0 + babel-loader: ^7.0.0 || ^8.0.0 + vue: ^3.0.0 + languageName: unknown + linkType: soft + +"@storybook/preset-web-components-webpack@6.5.0-alpha.64, @storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack": + version: 0.0.0-use.local + resolution: "@storybook/preset-web-components-webpack@workspace:presets/web-components-webpack" + dependencies: + "@babel/plugin-syntax-dynamic-import": ^7.8.3 + "@babel/plugin-syntax-import-meta": ^7.10.4 + "@babel/preset-env": ^7.12.11 + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/renderer-web-components": 6.5.0-alpha.64 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/webpack-env": ^1.16.0 + babel-plugin-bundled-import-meta: ^0.3.1 + core-js: ^3.8.2 + global: ^4.4.0 + lit-html: 2.0.2 + react: 16.14.0 + react-dom: 16.14.0 + regenerator-runtime: ^0.13.7 + ts-dedent: ^2.0.0 + peerDependencies: + lit-html: ^1.4.1 || ^2.0.0 + languageName: unknown + linkType: soft + "@storybook/preview-web@6.5.0-alpha.64, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web": version: 0.0.0-use.local resolution: "@storybook/preview-web@workspace:lib/preview-web" @@ -8441,6 +8655,7 @@ __metadata: "@storybook/core-server": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 "@storybook/node-logger": 6.5.0-alpha.64 + "@storybook/preset-react-webpack": 6.5.0-alpha.64 "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 "@storybook/renderer-react": 6.5.0-alpha.64 "@storybook/semver": ^7.3.2 @@ -8750,6 +8965,13 @@ __metadata: "@storybook/postinstall": "workspace:*" "@storybook/preact": "workspace:*" "@storybook/preset-html-webpack": "workspace:*" + "@storybook/preset-preact-webpack": "workspace:*" + "@storybook/preset-react-webpack": "workspace:*" + "@storybook/preset-server-webpack": "workspace:*" + "@storybook/preset-svelte-webpack": "workspace:*" + "@storybook/preset-vue-webpack": "workspace:*" + "@storybook/preset-vue3-webpack": "workspace:*" + "@storybook/preset-web-components-webpack": "workspace:*" "@storybook/preview-web": "workspace:*" "@storybook/react": "workspace:*" "@storybook/renderer-html": "workspace:*" @@ -9059,6 +9281,7 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 "@storybook/node-logger": 6.5.0-alpha.64 + "@storybook/preset-svelte-webpack": 6.5.0-alpha.64 "@storybook/renderer-svelte": 6.5.0-alpha.64 "@types/loader-utils": ^2.0.0 "@types/webpack-env": ^1.16.0 @@ -9202,6 +9425,7 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/preset-vue3-webpack": 6.5.0-alpha.64 "@storybook/renderer-vue3": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 @@ -9233,6 +9457,7 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/preset-vue-webpack": 6.5.0-alpha.64 "@storybook/renderer-vue": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 @@ -9269,6 +9494,7 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/preset-web-components-webpack": 6.5.0-alpha.64 "@storybook/renderer-web-components": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 From 5ba0e760fe63f1ceaeda91f4bfdd1d9c80df7505 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:06:44 +0800 Subject: [PATCH 12/21] Update yarn.lock --- yarn.lock | 110 +++++++++++------------------------------------------- 1 file changed, 21 insertions(+), 89 deletions(-) diff --git a/yarn.lock b/yarn.lock index da34fbe22595..62f8e8381dce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8060,14 +8060,12 @@ __metadata: dependencies: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 - "@storybook/docs-tools": 6.5.0-alpha.64 "@storybook/preset-html-webpack": 6.5.0-alpha.64 "@storybook/renderer-html": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 - html-loader: ^1.3.2 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 @@ -8317,7 +8315,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preact@workspace:app/preact" dependencies: - "@babel/plugin-transform-react-jsx": ^7.12.12 "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 "@storybook/preset-preact-webpack": 6.5.0-alpha.64 @@ -8325,12 +8322,10 @@ __metadata: "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 - global: ^4.4.0 preact: ^10.5.13 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 webpack: 4 peerDependencies: "@babel/core": "*" @@ -8382,17 +8377,14 @@ __metadata: dependencies: "@babel/plugin-transform-react-jsx": ^7.12.12 "@storybook/core-common": 6.5.0-alpha.64 - "@storybook/core-server": 6.5.0-alpha.64 "@storybook/renderer-preact": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 - global: ^4.4.0 preact: ^10.5.13 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 webpack: 4 peerDependencies: "@babel/core": "*" @@ -8408,7 +8400,6 @@ __metadata: "@babel/preset-react": ^7.12.10 "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3 "@storybook/core-common": 6.5.0-alpha.64 - "@storybook/core-server": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 "@storybook/node-logger": 6.5.0-alpha.64 "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 @@ -8421,11 +8412,8 @@ __metadata: babel-plugin-react-docgen: ^4.2.1 core-js: ^3.8.2 fs-extra: ^9.0.1 - global: ^4.4.0 react-refresh: ^0.11.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 webpack: 4 peerDependencies: "@babel/core": ^7.11.5 @@ -8460,7 +8448,7 @@ __metadata: languageName: node linkType: hard -"@storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack": +"@storybook/preset-server-webpack@6.5.0-alpha.64, @storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack": version: 0.0.0-use.local resolution: "@storybook/preset-server-webpack@workspace:presets/server-webpack" dependencies: @@ -8472,13 +8460,13 @@ __metadata: core-js: ^3.8.2 fs-extra: ^9.0.1 global: ^4.4.0 + jest-specific-snapshot: ^4.0.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 safe-identifier: ^0.4.1 ts-dedent: ^2.0.0 yaml: ^1.10.0 - yaml-loader: ^0.6.0 languageName: unknown linkType: soft @@ -8487,13 +8475,10 @@ __metadata: resolution: "@storybook/preset-svelte-webpack@workspace:presets/svelte-webpack" dependencies: "@storybook/core-common": 6.5.0-alpha.64 - "@storybook/core-server": 6.5.0-alpha.64 "@storybook/node-logger": 6.5.0-alpha.64 - "@storybook/renderer-svelte": 6.5.0-alpha.64 "@types/loader-utils": ^2.0.0 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 - global: ^4.4.0 loader-utils: ^2.0.0 react: 16.14.0 react-dom: 16.14.0 @@ -8515,17 +8500,13 @@ __metadata: resolution: "@storybook/preset-vue-webpack@workspace:presets/vue-webpack" dependencies: "@storybook/core-common": 6.5.0-alpha.64 - "@storybook/core-server": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 - "@storybook/renderer-vue": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 - global: ^4.4.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 ts-loader: ^8.0.14 vue: ^2.6.12 vue-docgen-api: ^4.44.15 @@ -8548,18 +8529,14 @@ __metadata: resolution: "@storybook/preset-vue3-webpack@workspace:presets/vue3-webpack" dependencies: "@storybook/core-common": 6.5.0-alpha.64 - "@storybook/core-server": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 - "@storybook/renderer-vue3": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 "@vue/compiler-sfc": 3.0.0 core-js: ^3.8.2 - global: ^4.4.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 ts-loader: ^8.0.14 vue: 3.0.0 vue-docgen-api: ^4.44.15 @@ -8582,19 +8559,15 @@ __metadata: "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/preset-env": ^7.12.11 "@storybook/core-common": 6.5.0-alpha.64 - "@storybook/core-server": 6.5.0-alpha.64 - "@storybook/docs-tools": 6.5.0-alpha.64 - "@storybook/renderer-web-components": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 + babel-loader: ^7.0.0 || ^8.0.0 babel-plugin-bundled-import-meta: ^0.3.1 core-js: ^3.8.2 - global: ^4.4.0 lit-html: 2.0.2 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 peerDependencies: lit-html: ^1.4.1 || ^2.0.0 languageName: unknown @@ -8648,36 +8621,20 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react@workspace:app/react" dependencies: - "@babel/preset-flow": ^7.12.1 - "@babel/preset-react": ^7.12.10 - "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3 "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 - "@storybook/docs-tools": 6.5.0-alpha.64 - "@storybook/node-logger": 6.5.0-alpha.64 "@storybook/preset-react-webpack": 6.5.0-alpha.64 - "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 "@storybook/renderer-react": 6.5.0-alpha.64 - "@storybook/semver": ^7.3.2 "@types/node": ^14.14.20 || ^16.0.0 - "@types/util-deprecate": ^1.0.0 "@types/webpack-env": ^1.16.0 - babel-plugin-add-react-displayname: ^0.0.5 - babel-plugin-react-docgen: ^4.2.1 core-js: ^3.8.2 - fs-extra: ^9.0.1 - global: ^4.4.0 - react-refresh: ^0.11.0 + jest-specific-snapshot: ^4.0.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 webpack: 4 peerDependencies: "@babel/core": ^7.11.5 - jest-specific-snapshot: ^4.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - require-from-string: ^2.0.2 peerDependenciesMeta: "@babel/core": optional: true @@ -9213,19 +9170,14 @@ __metadata: dependencies: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/preset-server-webpack": 6.5.0-alpha.64 "@storybook/renderer-server": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 - fs-extra: ^9.0.1 - global: ^4.4.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - safe-identifier: ^0.4.1 - ts-dedent: ^2.0.0 - yaml: ^1.10.0 - yaml-loader: ^0.6.0 languageName: unknown linkType: soft @@ -9280,21 +9232,15 @@ __metadata: dependencies: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 - "@storybook/node-logger": 6.5.0-alpha.64 "@storybook/preset-svelte-webpack": 6.5.0-alpha.64 "@storybook/renderer-svelte": 6.5.0-alpha.64 - "@types/loader-utils": ^2.0.0 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 - global: ^4.4.0 - loader-utils: ^2.0.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 svelte: ^3.31.2 svelte-loader: ^3.0.0 - sveltedoc-parser: 4.1.0 - ts-dedent: ^2.0.0 webpack: 4 peerDependencies: "@babel/core": "*" @@ -9424,23 +9370,16 @@ __metadata: dependencies: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 - "@storybook/docs-tools": 6.5.0-alpha.64 "@storybook/preset-vue3-webpack": 6.5.0-alpha.64 "@storybook/renderer-vue3": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 "@vue/compiler-sfc": 3.0.0 core-js: ^3.8.2 - global: ^4.4.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 - ts-loader: ^8.0.14 vue: 3.0.0 - vue-docgen-api: ^4.44.15 - vue-docgen-loader: ^1.5.0 - vue-loader: ^16.4.1 webpack: 4 peerDependencies: "@babel/core": "*" @@ -9456,21 +9395,15 @@ __metadata: dependencies: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 - "@storybook/docs-tools": 6.5.0-alpha.64 "@storybook/preset-vue-webpack": 6.5.0-alpha.64 "@storybook/renderer-vue": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 - global: ^4.4.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 - ts-loader: ^8.0.14 vue: ^2.6.12 - vue-docgen-api: ^4.44.15 - vue-docgen-loader: ^1.5.0 vue-loader: ^15.9.6 vue-template-compiler: ^2.6.12 webpack: 4 @@ -9488,24 +9421,18 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/web-components@workspace:app/web-components" dependencies: - "@babel/plugin-syntax-dynamic-import": ^7.8.3 - "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/preset-env": ^7.12.11 "@storybook/core-common": 6.5.0-alpha.64 "@storybook/core-server": 6.5.0-alpha.64 - "@storybook/docs-tools": 6.5.0-alpha.64 "@storybook/preset-web-components-webpack": 6.5.0-alpha.64 "@storybook/renderer-web-components": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 - babel-plugin-bundled-import-meta: ^0.3.1 core-js: ^3.8.2 - global: ^4.4.0 lit-html: 2.0.2 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 peerDependencies: lit-html: ^1.4.1 || ^2.0.0 languageName: unknown @@ -14475,6 +14402,21 @@ __metadata: languageName: node linkType: hard +"babel-loader@npm:^7.0.0 || ^8.0.0": + version: 8.2.5 + resolution: "babel-loader@npm:8.2.5" + dependencies: + find-cache-dir: ^3.3.1 + loader-utils: ^2.0.0 + make-dir: ^3.1.0 + schema-utils: ^2.6.5 + peerDependencies: + "@babel/core": ^7.0.0 + webpack: ">=2" + checksum: 6d11d59f0d8e94f230b7529ef805d03e42df5130849cbc21b0954c081bef5325390bbedf378b00355f4b447aee014012d37565777ba6fc17ffbb2352f5736601 + languageName: node + linkType: hard + "babel-loader@npm:^8.0.0, babel-loader@npm:^8.1.0": version: 8.2.3 resolution: "babel-loader@npm:8.2.3" @@ -48243,17 +48185,7 @@ __metadata: languageName: node linkType: hard -"yaml-loader@npm:^0.6.0": - version: 0.6.0 - resolution: "yaml-loader@npm:0.6.0" - dependencies: - loader-utils: ^1.4.0 - yaml: ^1.8.3 - checksum: 8c8e9c284721a1bcff6c70e412929a6f321ab6a15b6209f4e658be05b57dfa0a64b0d69f3ca62fdcd46b31e6bc536faca2c8d6c04c8070ccce4d1c9da79569b4 - languageName: node - linkType: hard - -"yaml@npm:^1.10.0, yaml@npm:^1.10.2, yaml@npm:^1.7.2, yaml@npm:^1.8.3": +"yaml@npm:^1.10.0, yaml@npm:^1.10.2, yaml@npm:^1.7.2": version: 1.10.2 resolution: "yaml@npm:1.10.2" checksum: 5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f From 2aa4cc58f8e0047573acb8b50088b00fa4279f86 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 16:41:19 +0800 Subject: [PATCH 13/21] Fix verdaccio config for presets --- scripts/verdaccio.yaml | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index 6cded738b0e4..1cb002fe14f2 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -39,7 +39,15 @@ packages: access: $all publish: $all proxy: npmjs - '@storybook/preset-*': + '@storybook/preset-create-react-app': + access: $all + publish: $all + proxy: npmjs + '@storybook/preset-ie11': + access: $all + publish: $all + proxy: npmjs + '@storybook/preset-scss': access: $all publish: $all proxy: npmjs From 2a80955da2691e8407c94cdce1a47076d64c2723 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 17:02:12 +0800 Subject: [PATCH 14/21] Presets CI fixes --- .../server-webpack/src/{server => }/framework-preset-server.ts | 0 presets/server-webpack/src/{server => }/loader.ts | 2 +- presets/svelte-webpack/src/preset.ts | 1 - presets/web-components-webpack/src/{server => }/preset.ts | 0 4 files changed, 1 insertion(+), 2 deletions(-) rename presets/server-webpack/src/{server => }/framework-preset-server.ts (100%) rename presets/server-webpack/src/{server => }/loader.ts (63%) rename presets/web-components-webpack/src/{server => }/preset.ts (100%) diff --git a/presets/server-webpack/src/server/framework-preset-server.ts b/presets/server-webpack/src/framework-preset-server.ts similarity index 100% rename from presets/server-webpack/src/server/framework-preset-server.ts rename to presets/server-webpack/src/framework-preset-server.ts diff --git a/presets/server-webpack/src/server/loader.ts b/presets/server-webpack/src/loader.ts similarity index 63% rename from presets/server-webpack/src/server/loader.ts rename to presets/server-webpack/src/loader.ts index 67b8aab46e0c..84d24d81ff5e 100644 --- a/presets/server-webpack/src/server/loader.ts +++ b/presets/server-webpack/src/loader.ts @@ -1,4 +1,4 @@ -import { compileCsfModule } from '../lib/compiler'; +import { compileCsfModule } from './lib/compiler'; export default (content: string) => { return compileCsfModule(JSON.parse(content)); diff --git a/presets/svelte-webpack/src/preset.ts b/presets/svelte-webpack/src/preset.ts index 7ff04fa37512..5746855d89a0 100644 --- a/presets/svelte-webpack/src/preset.ts +++ b/presets/svelte-webpack/src/preset.ts @@ -1,7 +1,6 @@ import type { StorybookConfig } from '@storybook/core-common'; export const addons: StorybookConfig['addons'] = [ - '@storybook/renderer-svelte', require.resolve('./framework-preset-svelte'), require.resolve('./framework-preset-svelte-docs'), ]; diff --git a/presets/web-components-webpack/src/server/preset.ts b/presets/web-components-webpack/src/preset.ts similarity index 100% rename from presets/web-components-webpack/src/server/preset.ts rename to presets/web-components-webpack/src/preset.ts From fa9c5da03e4c5b614b39ff2965d2b575cbe1590a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 17:27:17 +0800 Subject: [PATCH 15/21] More preset fixes --- app/server/src/client/index.ts | 1 + presets/vue-webpack/package.json | 8 ++++---- presets/vue3-webpack/package.json | 8 ++++---- presets/web-components-webpack/package.json | 8 ++++---- 4 files changed, 13 insertions(+), 12 deletions(-) create mode 100644 app/server/src/client/index.ts diff --git a/app/server/src/client/index.ts b/app/server/src/client/index.ts new file mode 100644 index 000000000000..16e7fdbacf12 --- /dev/null +++ b/app/server/src/client/index.ts @@ -0,0 +1 @@ +export * from '@storybook/renderer-server'; diff --git a/presets/vue-webpack/package.json b/presets/vue-webpack/package.json index 6854cac1a55f..2b7b594d956e 100644 --- a/presets/vue-webpack/package.json +++ b/presets/vue-webpack/package.json @@ -19,9 +19,9 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/client/index.js", - "module": "dist/esm/client/index.js", - "types": "dist/ts3.9/client/index.d.ts", + "main": "dist/cjs/preset.js", + "module": "dist/esm/preset.js", + "types": "dist/ts3.9/preset.d.ts", "typesVersions": { "<3.8": { "dist/ts3.9/*": [ @@ -73,5 +73,5 @@ "access": "public" }, "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", - "sbmodern": "dist/modern/client/index.js" + "sbmodern": "dist/modern/preset.js" } diff --git a/presets/vue3-webpack/package.json b/presets/vue3-webpack/package.json index 78d19fcd7c52..3ffba48038c6 100644 --- a/presets/vue3-webpack/package.json +++ b/presets/vue3-webpack/package.json @@ -19,9 +19,9 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/client/index.js", - "module": "dist/esm/client/index.js", - "types": "dist/ts3.9/client/index.d.ts", + "main": "dist/cjs/preset.js", + "module": "dist/esm/preset.js", + "types": "dist/ts3.9/preset.d.ts", "typesVersions": { "<3.8": { "dist/ts3.9/*": [ @@ -72,5 +72,5 @@ "access": "public" }, "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", - "sbmodern": "dist/modern/client/index.js" + "sbmodern": "dist/modern/preset.js" } diff --git a/presets/web-components-webpack/package.json b/presets/web-components-webpack/package.json index 8039b139c3b8..3f8bcafbeb44 100644 --- a/presets/web-components-webpack/package.json +++ b/presets/web-components-webpack/package.json @@ -21,9 +21,9 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/client/index.js", - "module": "dist/esm/client/index.js", - "types": "dist/ts3.9/client/index.d.ts", + "main": "dist/cjs/preset.js", + "module": "dist/esm/preset.js", + "types": "dist/ts3.9/preset.d.ts", "typesVersions": { "<3.8": { "dist/ts3.9/*": [ @@ -67,5 +67,5 @@ "access": "public" }, "gitHead": "7417a230d67b54d65caedcfb584f924b879ac9f5", - "sbmodern": "dist/modern/client/index.js" + "sbmodern": "dist/modern/preset.js" } From 32d696dd7534bffa2662a14d994897c37a27d6f1 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 21 Apr 2022 18:59:15 +0800 Subject: [PATCH 16/21] Fix web-components presets --- .../web-components-kitchen-sink/package.json | 1 + .../web-components-kitchen-sink/yarn.lock | 335 +++++++++--------- presets/web-components-webpack/package.json | 1 - yarn.lock | 16 - 4 files changed, 176 insertions(+), 177 deletions(-) diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json index 99b0594b9cd2..5ae6d8510a38 100644 --- a/examples/web-components-kitchen-sink/package.json +++ b/examples/web-components-kitchen-sink/package.json @@ -46,6 +46,7 @@ "@storybook/manager-webpack4": "portal:../../lib/manager-webpack4", "@storybook/node-logger": "portal:../../lib/node-logger", "@storybook/postinstall": "portal:../../lib/postinstall", + "@storybook/preset-web-components-webpack": "portal:../../presets/web-components-webpack", "@storybook/preview-web": "portal:../../lib/preview-web", "@storybook/renderer-web-components": "portal:../../renderers/web-components", "@storybook/router": "portal:../../lib/router", diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock index fb5cbc88fb98..233e31642462 100644 --- a/examples/web-components-kitchen-sink/yarn.lock +++ b/examples/web-components-kitchen-sink/yarn.lock @@ -2123,14 +2123,14 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/channels": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/channels": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/theming": 6.5.0-alpha.64 axe-core: ^4.2.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2154,13 +2154,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/theming": 6.5.0-alpha.64 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2188,13 +2188,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/theming": 6.5.0-alpha.64 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2216,15 +2216,15 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/core-common": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/core-common": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/node-logger": 6.5.0-alpha.63 - "@storybook/store": 6.5.0-alpha.63 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/node-logger": 6.5.0-alpha.64 + "@storybook/store": 6.5.0-alpha.64 + "@storybook/theming": 6.5.0-alpha.64 core-js: ^3.8.2 lodash: ^4.17.21 ts-dedent: ^2.0.0 @@ -2247,20 +2247,20 @@ __metadata: "@babel/preset-env": ^7.12.11 "@jest/transform": ^26.6.2 "@mdx-js/react": ^1.6.22 - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/core-common": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/docs-tools": 6.5.0-alpha.63 + "@storybook/docs-tools": 6.5.0-alpha.64 "@storybook/mdx1-csf": canary - "@storybook/node-logger": 6.5.0-alpha.63 - "@storybook/postinstall": 6.5.0-alpha.63 - "@storybook/preview-web": 6.5.0-alpha.63 - "@storybook/source-loader": 6.5.0-alpha.63 - "@storybook/store": 6.5.0-alpha.63 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/node-logger": 6.5.0-alpha.64 + "@storybook/postinstall": 6.5.0-alpha.64 + "@storybook/preview-web": 6.5.0-alpha.64 + "@storybook/source-loader": 6.5.0-alpha.64 + "@storybook/store": 6.5.0-alpha.64 + "@storybook/theming": 6.5.0-alpha.64 babel-loader: ^8.0.0 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 @@ -2315,11 +2315,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/router": 6.5.0-alpha.63 + "@storybook/router": 6.5.0-alpha.64 "@types/qs": ^6.9.5 core-js: ^3.8.2 global: ^4.4.0 @@ -2343,11 +2343,11 @@ __metadata: resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@jest/transform": ^26.6.2 - "@storybook/addons": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 "@storybook/babel-plugin-require-context-hook": 1.0.1 - "@storybook/client-api": 6.5.0-alpha.63 - "@storybook/core-client": 6.5.0-alpha.63 - "@storybook/core-common": 6.5.0-alpha.63 + "@storybook/client-api": 6.5.0-alpha.64 + "@storybook/core-client": 6.5.0-alpha.64 + "@storybook/core-common": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 "@types/glob": ^7.1.3 "@types/jest": ^26.0.16 @@ -2417,13 +2417,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/router": 6.5.0-alpha.63 - "@storybook/source-loader": 6.5.0-alpha.63 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/router": 6.5.0-alpha.64 + "@storybook/source-loader": 6.5.0-alpha.64 + "@storybook/theming": 6.5.0-alpha.64 core-js: ^3.8.2 estraverse: ^5.2.0 loader-utils: ^2.0.0 @@ -2445,12 +2445,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 + "@storybook/theming": 6.5.0-alpha.64 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2471,13 +2471,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/api": 6.5.0-alpha.63 - "@storybook/channels": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/channels": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/router": 6.5.0-alpha.63 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/router": 6.5.0-alpha.64 + "@storybook/theming": 6.5.0-alpha.64 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2492,13 +2492,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/channels": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/router": 6.5.0-alpha.63 + "@storybook/router": 6.5.0-alpha.64 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/theming": 6.5.0-alpha.64 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2527,22 +2527,22 @@ __metadata: resolution: "@storybook/builder-webpack4@portal:../../lib/builder-webpack4::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@babel/core": ^7.12.10 - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/channel-postmessage": 6.5.0-alpha.63 - "@storybook/channels": 6.5.0-alpha.63 - "@storybook/client-api": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/core-common": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 - "@storybook/node-logger": 6.5.0-alpha.63 - "@storybook/preview-web": 6.5.0-alpha.63 - "@storybook/router": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/channel-postmessage": 6.5.0-alpha.64 + "@storybook/channels": 6.5.0-alpha.64 + "@storybook/client-api": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 + "@storybook/node-logger": 6.5.0-alpha.64 + "@storybook/preview-web": 6.5.0-alpha.64 + "@storybook/router": 6.5.0-alpha.64 "@storybook/semver": ^7.3.2 - "@storybook/store": 6.5.0-alpha.63 - "@storybook/theming": 6.5.0-alpha.63 - "@storybook/ui": 6.5.0-alpha.63 + "@storybook/store": 6.5.0-alpha.64 + "@storybook/theming": 6.5.0-alpha.64 + "@storybook/ui": 6.5.0-alpha.64 "@types/node": ^14.0.10 || ^16.0.0 "@types/webpack": ^4.41.26 autoprefixer: ^9.8.6 @@ -2586,9 +2586,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/channels": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 core-js: ^3.8.2 global: ^4.4.0 qs: ^6.10.0 @@ -2600,8 +2600,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-websocket@portal:../../lib/channel-websocket::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 + "@storybook/channels": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 core-js: ^3.8.2 global: ^4.4.0 telejson: ^5.3.3 @@ -2622,13 +2622,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/channel-postmessage": 6.5.0-alpha.63 - "@storybook/channels": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/channel-postmessage": 6.5.0-alpha.64 + "@storybook/channels": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/store": 6.5.0-alpha.63 + "@storybook/store": 6.5.0-alpha.64 "@types/qs": ^6.9.5 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 @@ -2661,9 +2661,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.63 + "@storybook/client-logger": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/theming": 6.5.0-alpha.64 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -2676,16 +2676,16 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/channel-postmessage": 6.5.0-alpha.63 - "@storybook/channel-websocket": 6.5.0-alpha.63 - "@storybook/client-api": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/channel-postmessage": 6.5.0-alpha.64 + "@storybook/channel-websocket": 6.5.0-alpha.64 + "@storybook/client-api": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/preview-web": 6.5.0-alpha.63 - "@storybook/store": 6.5.0-alpha.63 - "@storybook/ui": 6.5.0-alpha.63 + "@storybook/preview-web": 6.5.0-alpha.64 + "@storybook/store": 6.5.0-alpha.64 + "@storybook/ui": 6.5.0-alpha.64 airbnb-js-shims: ^2.2.1 ansi-to-html: ^0.6.11 core-js: ^3.8.2 @@ -2732,7 +2732,7 @@ __metadata: "@babel/preset-react": ^7.12.10 "@babel/preset-typescript": ^7.12.7 "@babel/register": ^7.12.1 - "@storybook/node-logger": 6.5.0-alpha.63 + "@storybook/node-logger": 6.5.0-alpha.64 "@storybook/semver": ^7.3.2 "@types/node": ^14.0.10 || ^16.0.0 "@types/pretty-hrtime": ^1.0.0 @@ -2782,16 +2782,16 @@ __metadata: resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@discoveryjs/json-ext": ^0.5.3 - "@storybook/builder-webpack4": 6.5.0-alpha.63 - "@storybook/core-client": 6.5.0-alpha.63 - "@storybook/core-common": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/builder-webpack4": 6.5.0-alpha.64 + "@storybook/core-client": 6.5.0-alpha.64 + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/csf-tools": 6.5.0-alpha.63 - "@storybook/manager-webpack4": 6.5.0-alpha.63 - "@storybook/node-logger": 6.5.0-alpha.63 + "@storybook/csf-tools": 6.5.0-alpha.64 + "@storybook/manager-webpack4": 6.5.0-alpha.64 + "@storybook/node-logger": 6.5.0-alpha.64 "@storybook/semver": ^7.3.2 - "@storybook/store": 6.5.0-alpha.63 + "@storybook/store": 6.5.0-alpha.64 "@types/node": ^14.0.10 || ^16.0.0 "@types/node-fetch": ^2.5.7 "@types/pretty-hrtime": ^1.0.0 @@ -2880,7 +2880,7 @@ __metadata: dependencies: "@babel/core": ^7.12.10 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/store": 6.5.0-alpha.63 + "@storybook/store": 6.5.0-alpha.64 core-js: ^3.8.2 doctrine: ^3.0.0 lodash: ^4.17.21 @@ -2895,12 +2895,12 @@ __metadata: "@babel/core": ^7.12.10 "@babel/plugin-transform-template-literals": ^7.12.1 "@babel/preset-react": ^7.12.10 - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/core-client": 6.5.0-alpha.63 - "@storybook/core-common": 6.5.0-alpha.63 - "@storybook/node-logger": 6.5.0-alpha.63 - "@storybook/theming": 6.5.0-alpha.63 - "@storybook/ui": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/core-client": 6.5.0-alpha.64 + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/node-logger": 6.5.0-alpha.64 + "@storybook/theming": 6.5.0-alpha.64 + "@storybook/ui": 6.5.0-alpha.64 "@types/node": ^14.0.10 || ^16.0.0 "@types/webpack": ^4.41.26 babel-loader: ^8.0.0 @@ -2975,16 +2975,36 @@ __metadata: languageName: node linkType: soft +"@storybook/preset-web-components-webpack@portal:../../presets/web-components-webpack::locator=web-components-kitchen-sink%40workspace%3A.": + version: 0.0.0-use.local + resolution: "@storybook/preset-web-components-webpack@portal:../../presets/web-components-webpack::locator=web-components-kitchen-sink%40workspace%3A." + dependencies: + "@babel/plugin-syntax-dynamic-import": ^7.8.3 + "@babel/plugin-syntax-import-meta": ^7.10.4 + "@babel/preset-env": ^7.12.11 + "@storybook/core-common": 6.5.0-alpha.64 + "@types/node": ^14.14.20 || ^16.0.0 + "@types/webpack-env": ^1.16.0 + babel-plugin-bundled-import-meta: ^0.3.1 + core-js: ^3.8.2 + react: 16.14.0 + react-dom: 16.14.0 + regenerator-runtime: ^0.13.7 + peerDependencies: + lit-html: ^1.4.1 || ^2.0.0 + languageName: node + linkType: soft + "@storybook/preview-web@portal:../../lib/preview-web::locator=web-components-kitchen-sink%40workspace%3A.": version: 0.0.0-use.local resolution: "@storybook/preview-web@portal:../../lib/preview-web::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/channel-postmessage": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/channel-postmessage": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/store": 6.5.0-alpha.63 + "@storybook/store": 6.5.0-alpha.64 ansi-to-html: ^0.6.11 core-js: ^3.8.2 global: ^4.4.0 @@ -3005,14 +3025,14 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/renderer-web-components@portal:../../renderers/web-components::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-client": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-client": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@storybook/docs-tools": 6.5.0-alpha.63 - "@storybook/preview-web": 6.5.0-alpha.63 - "@storybook/store": 6.5.0-alpha.63 + "@storybook/docs-tools": 6.5.0-alpha.64 + "@storybook/preview-web": 6.5.0-alpha.64 + "@storybook/store": 6.5.0-alpha.64 core-js: ^3.8.2 global: ^4.4.0 react: 16.14.0 @@ -3028,7 +3048,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.63 + "@storybook/client-logger": 6.5.0-alpha.64 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -3053,8 +3073,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 core-js: ^3.8.2 estraverse: ^5.2.0 @@ -3073,9 +3093,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/store@portal:../../lib/store::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 @@ -3098,7 +3118,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/theming@portal:../../lib/theming::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.63 + "@storybook/client-logger": 6.5.0-alpha.64 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -3111,15 +3131,15 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.63 - "@storybook/api": 6.5.0-alpha.63 - "@storybook/channels": 6.5.0-alpha.63 - "@storybook/client-logger": 6.5.0-alpha.63 - "@storybook/components": 6.5.0-alpha.63 - "@storybook/core-events": 6.5.0-alpha.63 - "@storybook/router": 6.5.0-alpha.63 + "@storybook/addons": 6.5.0-alpha.64 + "@storybook/api": 6.5.0-alpha.64 + "@storybook/channels": 6.5.0-alpha.64 + "@storybook/client-logger": 6.5.0-alpha.64 + "@storybook/components": 6.5.0-alpha.64 + "@storybook/core-events": 6.5.0-alpha.64 + "@storybook/router": 6.5.0-alpha.64 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.5.0-alpha.63 + "@storybook/theming": 6.5.0-alpha.64 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 resolve-from: ^5.0.0 @@ -3133,22 +3153,17 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/web-components@portal:../../app/web-components::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@babel/plugin-syntax-dynamic-import": ^7.8.3 - "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/preset-env": ^7.12.11 - "@storybook/core-common": 6.5.0-alpha.63 - "@storybook/core-server": 6.5.0-alpha.63 - "@storybook/docs-tools": 6.5.0-alpha.63 - "@storybook/renderer-web-components": 6.5.0-alpha.63 + "@storybook/core-common": 6.5.0-alpha.64 + "@storybook/core-server": 6.5.0-alpha.64 + "@storybook/preset-web-components-webpack": 6.5.0-alpha.64 + "@storybook/renderer-web-components": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 - babel-plugin-bundled-import-meta: ^0.3.1 core-js: ^3.8.2 - global: ^4.4.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 peerDependencies: lit-html: ^1.4.1 || ^2.0.0 languageName: node diff --git a/presets/web-components-webpack/package.json b/presets/web-components-webpack/package.json index 3f8bcafbeb44..e7a541ecd3cd 100644 --- a/presets/web-components-webpack/package.json +++ b/presets/web-components-webpack/package.json @@ -47,7 +47,6 @@ "@storybook/core-common": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "@types/webpack-env": "^1.16.0", - "babel-loader": "^7.0.0 || ^8.0.0", "babel-plugin-bundled-import-meta": "^0.3.1", "core-js": "^3.8.2", "react": "16.14.0", diff --git a/yarn.lock b/yarn.lock index 62f8e8381dce..5aaef8311001 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8561,7 +8561,6 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 - babel-loader: ^7.0.0 || ^8.0.0 babel-plugin-bundled-import-meta: ^0.3.1 core-js: ^3.8.2 lit-html: 2.0.2 @@ -14402,21 +14401,6 @@ __metadata: languageName: node linkType: hard -"babel-loader@npm:^7.0.0 || ^8.0.0": - version: 8.2.5 - resolution: "babel-loader@npm:8.2.5" - dependencies: - find-cache-dir: ^3.3.1 - loader-utils: ^2.0.0 - make-dir: ^3.1.0 - schema-utils: ^2.6.5 - peerDependencies: - "@babel/core": ^7.0.0 - webpack: ">=2" - checksum: 6d11d59f0d8e94f230b7529ef805d03e42df5130849cbc21b0954c081bef5325390bbedf378b00355f4b447aee014012d37565777ba6fc17ffbb2352f5736601 - languageName: node - linkType: hard - "babel-loader@npm:^8.0.0, babel-loader@npm:^8.1.0": version: 8.2.3 resolution: "babel-loader@npm:8.2.3" From 6498d99ad20935e2032080b0dddbcef9c3ffe366 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 22 Apr 2022 15:07:56 +0800 Subject: [PATCH 17/21] Remove unnecessary webpack-env types --- addons/a11y/package.json | 3 +- addons/a11y/tsconfig.json | 11 ++------ addons/actions/package.json | 3 +- addons/actions/tsconfig.json | 11 ++------ addons/backgrounds/package.json | 3 -- addons/backgrounds/tsconfig.json | 11 ++------ addons/controls/tsconfig.json | 12 ++------ addons/docs/tsconfig.json | 12 ++------ addons/essentials/package.json | 3 +- addons/essentials/tsconfig.json | 12 ++------ addons/interactions/tsconfig.json | 11 ++------ addons/jest/package.json | 3 -- addons/jest/tsconfig.json | 11 ++------ addons/links/package.json | 3 -- addons/links/tsconfig.json | 11 ++------ addons/measure/package.json | 3 -- addons/measure/tsconfig.json | 11 ++------ addons/outline/package.json | 3 -- addons/outline/tsconfig.json | 11 ++------ .../storyshots-puppeteer/tsconfig.json | 15 +++------- addons/storysource/tsconfig.json | 11 ++------ addons/toolbars/tsconfig.json | 11 ++------ addons/viewport/tsconfig.json | 11 ++------ app/angular/package.json | 1 - app/angular/tsconfig.json | 12 ++------ app/ember/tsconfig.json | 16 +++-------- app/html/tsconfig.json | 2 +- app/preact/package.json | 1 - app/preact/tsconfig.json | 15 +++------- app/react/package.json | 1 - app/react/tsconfig.json | 2 +- app/server/package.json | 1 - app/server/tsconfig.json | 15 +++------- app/svelte/package.json | 1 - app/svelte/tsconfig.json | 15 +++------- app/vue/package.json | 1 - app/vue/tsconfig.json | 15 +++------- app/vue3/package.json | 1 - app/vue3/tsconfig.json | 15 +++------- app/web-components/package.json | 1 - app/web-components/tsconfig.json | 2 +- examples/angular-cli/package.json | 1 - examples/vue-3-cli/tsconfig.json | 28 ++++--------------- lib/source-loader/tsconfig.json | 11 ++------ lib/ui/tsconfig.json | 16 ++--------- package.json | 1 - presets/html-webpack/package.json | 1 - presets/html-webpack/tsconfig.json | 2 +- presets/preact-webpack/package.json | 1 - presets/preact-webpack/tsconfig.json | 15 +++------- presets/react-webpack/package.json | 1 - presets/react-webpack/tsconfig.json | 2 +- presets/server-webpack/package.json | 1 - presets/server-webpack/tsconfig.json | 15 +++------- presets/svelte-webpack/package.json | 1 - presets/svelte-webpack/tsconfig.json | 15 +++------- presets/vue-webpack/package.json | 1 - presets/vue-webpack/tsconfig.json | 15 +++------- presets/vue3-webpack/package.json | 1 - presets/vue3-webpack/tsconfig.json | 15 +++------- presets/web-components-webpack/package.json | 1 - presets/web-components-webpack/tsconfig.json | 2 +- renderers/svelte/tsconfig.json | 15 +++------- yarn.lock | 26 ----------------- 64 files changed, 117 insertions(+), 383 deletions(-) diff --git a/addons/a11y/package.json b/addons/a11y/package.json index 528f49965ee5..4a4621180d93 100644 --- a/addons/a11y/package.json +++ b/addons/a11y/package.json @@ -63,8 +63,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@testing-library/react": "^11.2.2", - "@types/webpack-env": "^1.16.0" + "@testing-library/react": "^11.2.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/addons/a11y/tsconfig.json b/addons/a11y/tsconfig.json index a7db239dea4e..f5ab5293de24 100644 --- a/addons/a11y/tsconfig.json +++ b/addons/a11y/tsconfig.json @@ -2,10 +2,7 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "jest" - ], + "types": ["jest"], "forceConsistentCasingInFileNames": true, "strict": true, "noUnusedLocals": true, @@ -13,9 +10,7 @@ "noImplicitReturns": true, "noFallthroughCasesInSwitch": true }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -24,4 +19,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/actions/package.json b/addons/actions/package.json index 51615f0e1c6d..f6ad8288c3bc 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -62,8 +62,7 @@ "uuid-browser": "^3.1.0" }, "devDependencies": { - "@types/lodash": "^4.14.167", - "@types/webpack-env": "^1.16.0" + "@types/lodash": "^4.14.167" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/addons/actions/tsconfig.json b/addons/actions/tsconfig.json index 0baf78294f75..3fe5e6e0dffa 100644 --- a/addons/actions/tsconfig.json +++ b/addons/actions/tsconfig.json @@ -2,14 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "jest" - ] + "types": ["jest"] }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -18,4 +13,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index d8c92fb73491..f1daa91caf41 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -59,9 +59,6 @@ "ts-dedent": "^2.0.0", "util-deprecate": "^1.0.2" }, - "devDependencies": { - "@types/webpack-env": "^1.16.0" - }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/addons/backgrounds/tsconfig.json b/addons/backgrounds/tsconfig.json index 36ca4e1d3033..61cbbd6356c3 100644 --- a/addons/backgrounds/tsconfig.json +++ b/addons/backgrounds/tsconfig.json @@ -1,14 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": [ - "webpack-env" - ] + "rootDir": "./src" }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -17,4 +12,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/controls/tsconfig.json b/addons/controls/tsconfig.json index 64141341cff1..b9bb7eacdbd4 100644 --- a/addons/controls/tsconfig.json +++ b/addons/controls/tsconfig.json @@ -2,15 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "jest", - "node" - ] + "types": ["jest", "node"] }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -19,4 +13,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/docs/tsconfig.json b/addons/docs/tsconfig.json index 54dcf5a7ef0b..0858899bf697 100644 --- a/addons/docs/tsconfig.json +++ b/addons/docs/tsconfig.json @@ -3,15 +3,9 @@ "compilerOptions": { "rootDir": "./src", "skipLibCheck": true, - "types": [ - "webpack-env", - "jest", - "node" - ] + "types": ["jest", "node"] }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/__tests__/**/*", @@ -19,4 +13,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/essentials/package.json b/addons/essentials/package.json index 6b16393004d9..0161f823af73 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -58,8 +58,7 @@ "devDependencies": { "@babel/core": "^7.12.10", "@storybook/vue": "6.5.0-alpha.64", - "@types/jest": "^26.0.16", - "@types/webpack-env": "^1.16.0" + "@types/jest": "^26.0.16" }, "peerDependencies": { "@babel/core": "^7.9.6" diff --git a/addons/essentials/tsconfig.json b/addons/essentials/tsconfig.json index 64141341cff1..b9bb7eacdbd4 100644 --- a/addons/essentials/tsconfig.json +++ b/addons/essentials/tsconfig.json @@ -2,15 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "jest", - "node" - ] + "types": ["jest", "node"] }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -19,4 +13,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/interactions/tsconfig.json b/addons/interactions/tsconfig.json index 36ca4e1d3033..61cbbd6356c3 100644 --- a/addons/interactions/tsconfig.json +++ b/addons/interactions/tsconfig.json @@ -1,14 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": [ - "webpack-env" - ] + "rootDir": "./src" }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -17,4 +12,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/jest/package.json b/addons/jest/package.json index 318f61b9ecbc..53bc56f60163 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -59,9 +59,6 @@ "regenerator-runtime": "^0.13.7", "upath": "^1.2.0" }, - "devDependencies": { - "@types/webpack-env": "^1.16.0" - }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/addons/jest/tsconfig.json b/addons/jest/tsconfig.json index 0baf78294f75..3fe5e6e0dffa 100644 --- a/addons/jest/tsconfig.json +++ b/addons/jest/tsconfig.json @@ -2,14 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "jest" - ] + "types": ["jest"] }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -18,4 +13,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/links/package.json b/addons/links/package.json index dbeb442d109f..a9cbe3e1adde 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -54,9 +54,6 @@ "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0" }, - "devDependencies": { - "@types/webpack-env": "^1.16.0" - }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/addons/links/tsconfig.json b/addons/links/tsconfig.json index 0d8e23c22271..6a106413ed17 100644 --- a/addons/links/tsconfig.json +++ b/addons/links/tsconfig.json @@ -2,14 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "@testing-library/jest-dom" - ] + "types": ["@testing-library/jest-dom"] }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -18,4 +13,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/measure/package.json b/addons/measure/package.json index 887df4229b7c..206cbd3833bc 100644 --- a/addons/measure/package.json +++ b/addons/measure/package.json @@ -53,9 +53,6 @@ "core-js": "^3.8.2", "global": "^4.4.0" }, - "devDependencies": { - "@types/webpack-env": "^1.16.0" - }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/addons/measure/tsconfig.json b/addons/measure/tsconfig.json index 36ca4e1d3033..61cbbd6356c3 100644 --- a/addons/measure/tsconfig.json +++ b/addons/measure/tsconfig.json @@ -1,14 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": [ - "webpack-env" - ] + "rootDir": "./src" }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -17,4 +12,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/outline/package.json b/addons/outline/package.json index 12177733a47a..d3a8ea420fa4 100644 --- a/addons/outline/package.json +++ b/addons/outline/package.json @@ -58,9 +58,6 @@ "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0" }, - "devDependencies": { - "@types/webpack-env": "^1.16.0" - }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/addons/outline/tsconfig.json b/addons/outline/tsconfig.json index 36ca4e1d3033..61cbbd6356c3 100644 --- a/addons/outline/tsconfig.json +++ b/addons/outline/tsconfig.json @@ -1,14 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": [ - "webpack-env" - ] + "rootDir": "./src" }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -17,4 +12,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/storyshots/storyshots-puppeteer/tsconfig.json b/addons/storyshots/storyshots-puppeteer/tsconfig.json index a055df7e6154..a5612ccd5eb2 100644 --- a/addons/storyshots/storyshots-puppeteer/tsconfig.json +++ b/addons/storyshots/storyshots-puppeteer/tsconfig.json @@ -3,16 +3,9 @@ "compilerOptions": { "rootDir": "./src", "skipLibCheck": true, - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "declaration": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/__tests__/**/*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/__tests__/**/*"] +} diff --git a/addons/storysource/tsconfig.json b/addons/storysource/tsconfig.json index 36ca4e1d3033..61cbbd6356c3 100644 --- a/addons/storysource/tsconfig.json +++ b/addons/storysource/tsconfig.json @@ -1,14 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": [ - "webpack-env" - ] + "rootDir": "./src" }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -17,4 +12,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/toolbars/tsconfig.json b/addons/toolbars/tsconfig.json index 0baf78294f75..3fe5e6e0dffa 100644 --- a/addons/toolbars/tsconfig.json +++ b/addons/toolbars/tsconfig.json @@ -2,14 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "jest" - ] + "types": ["jest"] }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -18,4 +13,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/addons/viewport/tsconfig.json b/addons/viewport/tsconfig.json index 36ca4e1d3033..61cbbd6356c3 100644 --- a/addons/viewport/tsconfig.json +++ b/addons/viewport/tsconfig.json @@ -1,14 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": [ - "webpack-env" - ] + "rootDir": "./src" }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -17,4 +12,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/app/angular/package.json b/app/angular/package.json index 7a5046068d56..43c73f505702 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -54,7 +54,6 @@ "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "^16.14.23", "@types/react-dom": "^16.9.14", - "@types/webpack-env": "^1.16.0", "autoprefixer": "^9.8.6", "core-js": "^3.8.2", "find-up": "^5.0.0", diff --git a/app/angular/tsconfig.json b/app/angular/tsconfig.json index 1b0fdfe5cf28..756d533bb308 100644 --- a/app/angular/tsconfig.json +++ b/app/angular/tsconfig.json @@ -3,17 +3,11 @@ "compileOnSave": false, "compilerOptions": { "outDir": "dist", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "rootDir": "./src", "skipLibCheck": true, "resolveJsonModule": true, "allowJs": true }, - "include": [ - "src/**/*", - "src/**/*.json" - ] -} \ No newline at end of file + "include": ["src/**/*", "src/**/*.json"] +} diff --git a/app/ember/tsconfig.json b/app/ember/tsconfig.json index 21c9e27f55dd..d698e3cf4ddc 100644 --- a/app/ember/tsconfig.json +++ b/app/ember/tsconfig.json @@ -2,17 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": ".", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true }, - "include": [ - "src/**/*", - "package.json" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*", "package.json"], + "exclude": ["src/**/*.test.*"] +} diff --git a/app/html/tsconfig.json b/app/html/tsconfig.json index a7b3b6102f4c..4cd92b3f6ed9 100644 --- a/app/html/tsconfig.json +++ b/app/html/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": ["webpack-env", "node"] + "types": ["node"] }, "include": ["src/**/*"], "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] diff --git a/app/preact/package.json b/app/preact/package.json index 206261a7b796..05ab82253207 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -44,7 +44,6 @@ "@storybook/preset-preact-webpack": "6.5.0-alpha.64", "@storybook/renderer-preact": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/app/preact/tsconfig.json b/app/preact/tsconfig.json index ea47a78eb476..aae6d1d3e370 100644 --- a/app/preact/tsconfig.json +++ b/app/preact/tsconfig.json @@ -2,16 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/app/react/package.json b/app/react/package.json index 39f66afccf35..9ae4543cfba8 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -45,7 +45,6 @@ "@storybook/preset-react-webpack": "6.5.0-alpha.64", "@storybook/renderer-react": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "regenerator-runtime": "^0.13.7", "webpack": ">=4.43.0 <6.0.0" diff --git a/app/react/tsconfig.json b/app/react/tsconfig.json index b16c7ffdcb0d..534e4ddd108a 100644 --- a/app/react/tsconfig.json +++ b/app/react/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": ["webpack-env", "node"], + "types": ["node"], "resolveJsonModule": true }, "include": ["src/**/*"], diff --git a/app/server/package.json b/app/server/package.json index 5ffd1fe73b42..8b554081b8d1 100644 --- a/app/server/package.json +++ b/app/server/package.json @@ -44,7 +44,6 @@ "@storybook/preset-server-webpack": "6.5.0-alpha.64", "@storybook/renderer-server": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/app/server/tsconfig.json b/app/server/tsconfig.json index 77e11bbd2ab9..58b6d0df246f 100644 --- a/app/server/tsconfig.json +++ b/app/server/tsconfig.json @@ -2,15 +2,8 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ] + "types": ["node"] }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/__tests__/**/*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/__tests__/**/*"] +} diff --git a/app/svelte/package.json b/app/svelte/package.json index 085baf648df1..7f163c0497ac 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -51,7 +51,6 @@ "webpack": ">=4.0.0 <6.0.0" }, "devDependencies": { - "@types/webpack-env": "^1.16.0", "svelte": "^3.31.2", "svelte-loader": "^3.0.0", "webpack": "4" diff --git a/app/svelte/tsconfig.json b/app/svelte/tsconfig.json index ea47a78eb476..aae6d1d3e370 100644 --- a/app/svelte/tsconfig.json +++ b/app/svelte/tsconfig.json @@ -2,16 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/app/vue/package.json b/app/vue/package.json index c1b594c3e13e..7fc73d89894b 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -44,7 +44,6 @@ "@storybook/preset-vue-webpack": "6.5.0-alpha.64", "@storybook/renderer-vue": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/app/vue/tsconfig.json b/app/vue/tsconfig.json index ea47a78eb476..aae6d1d3e370 100644 --- a/app/vue/tsconfig.json +++ b/app/vue/tsconfig.json @@ -2,16 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/app/vue3/package.json b/app/vue3/package.json index 42a24bb31507..813c3f9c67f6 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -45,7 +45,6 @@ "@storybook/preset-vue3-webpack": "6.5.0-alpha.64", "@storybook/renderer-vue3": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/app/vue3/tsconfig.json b/app/vue3/tsconfig.json index 5b0f285df93d..5978a9c3956f 100644 --- a/app/vue3/tsconfig.json +++ b/app/vue3/tsconfig.json @@ -2,17 +2,10 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true, "skipLibCheck": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/app/web-components/package.json b/app/web-components/package.json index dce3cd372e4a..bab312d44be5 100644 --- a/app/web-components/package.json +++ b/app/web-components/package.json @@ -47,7 +47,6 @@ "@storybook/preset-web-components-webpack": "6.5.0-alpha.64", "@storybook/renderer-web-components": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/app/web-components/tsconfig.json b/app/web-components/tsconfig.json index a7b3b6102f4c..4cd92b3f6ed9 100644 --- a/app/web-components/tsconfig.json +++ b/app/web-components/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": ["webpack-env", "node"] + "types": ["node"] }, "include": ["src/**/*"], "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 2ec4f3d5bdf7..1eb348a0f496 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -60,7 +60,6 @@ "@types/jest": "^26.0.16", "@types/node": "^14.14.20 || ^16.0.0", "@types/sass": "^1", - "@types/webpack-env": "^1.16.0", "@webcomponents/custom-elements": "^1.4.3", "global": "^4.4.0", "jasmine-core": "~3.6.0", diff --git a/examples/vue-3-cli/tsconfig.json b/examples/vue-3-cli/tsconfig.json index 7d55a5e7ab2e..721be65f1a2d 100644 --- a/examples/vue-3-cli/tsconfig.json +++ b/examples/vue-3-cli/tsconfig.json @@ -11,29 +11,11 @@ "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", - "types": [ - "webpack-env" - ], "paths": { - "@/*": [ - "src/*" - ] + "@/*": ["src/*"] }, - "lib": [ - "esnext", - "dom", - "dom.iterable", - "scripthost" - ] + "lib": ["esnext", "dom", "dom.iterable", "scripthost"] }, - "include": [ - "src/**/*.ts", - "src/**/*.tsx", - "src/**/*.vue", - "tests/**/*.ts", - "tests/**/*.tsx" - ], - "exclude": [ - "node_modules" - ] -} \ No newline at end of file + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/lib/source-loader/tsconfig.json b/lib/source-loader/tsconfig.json index 36ca4e1d3033..61cbbd6356c3 100644 --- a/lib/source-loader/tsconfig.json +++ b/lib/source-loader/tsconfig.json @@ -1,14 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": [ - "webpack-env" - ] + "rootDir": "./src" }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -17,4 +12,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/lib/ui/tsconfig.json b/lib/ui/tsconfig.json index b4b016454a7f..5ac15d35c87b 100644 --- a/lib/ui/tsconfig.json +++ b/lib/ui/tsconfig.json @@ -1,19 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": [ - "webpack-env" - ], - "lib": [ - "ESNext", - "DOM", - "DOM.Iterable" - ] + "lib": ["ESNext", "DOM", "DOM.Iterable"] }, - "include": [ - "src/**/*" - ], + "include": ["src/**/*"], "exclude": [ "src/**/*.test.*", "src/**/tests/**/*", @@ -22,4 +12,4 @@ "src/**/*.mockdata.*", "src/**/__testfixtures__/**" ] -} \ No newline at end of file +} diff --git a/package.json b/package.json index ad364c60719d..2dc38dd9ccfc 100644 --- a/package.json +++ b/package.json @@ -228,7 +228,6 @@ "@types/shelljs": "^0.8.7", "@types/terser-webpack-plugin": "^4.2.0", "@types/webpack-dev-middleware": "^3.7.3", - "@types/webpack-env": "^1.16.0", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.1.0", "babel-jest": "^26.6.3", diff --git a/presets/html-webpack/package.json b/presets/html-webpack/package.json index fdb6ef9d0a85..d5e5983dc26c 100644 --- a/presets/html-webpack/package.json +++ b/presets/html-webpack/package.json @@ -41,7 +41,6 @@ "dependencies": { "@storybook/core-common": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "html-loader": "^1.3.2", "react": "16.14.0", diff --git a/presets/html-webpack/tsconfig.json b/presets/html-webpack/tsconfig.json index a7b3b6102f4c..4cd92b3f6ed9 100644 --- a/presets/html-webpack/tsconfig.json +++ b/presets/html-webpack/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": ["webpack-env", "node"] + "types": ["node"] }, "include": ["src/**/*"], "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] diff --git a/presets/preact-webpack/package.json b/presets/preact-webpack/package.json index def11f34295e..61e2c39c0588 100644 --- a/presets/preact-webpack/package.json +++ b/presets/preact-webpack/package.json @@ -43,7 +43,6 @@ "@storybook/core-common": "6.5.0-alpha.64", "@storybook/renderer-preact": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/presets/preact-webpack/tsconfig.json b/presets/preact-webpack/tsconfig.json index ea47a78eb476..aae6d1d3e370 100644 --- a/presets/preact-webpack/tsconfig.json +++ b/presets/preact-webpack/tsconfig.json @@ -2,16 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/presets/react-webpack/package.json b/presets/react-webpack/package.json index 71ab58a29895..d6fecc431598 100644 --- a/presets/react-webpack/package.json +++ b/presets/react-webpack/package.json @@ -50,7 +50,6 @@ "@storybook/renderer-react": "6.5.0-alpha.64", "@storybook/semver": "^7.3.2", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-react-docgen": "^4.2.1", "core-js": "^3.8.2", diff --git a/presets/react-webpack/tsconfig.json b/presets/react-webpack/tsconfig.json index b16c7ffdcb0d..534e4ddd108a 100644 --- a/presets/react-webpack/tsconfig.json +++ b/presets/react-webpack/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": ["webpack-env", "node"], + "types": ["node"], "resolveJsonModule": true }, "include": ["src/**/*"], diff --git a/presets/server-webpack/package.json b/presets/server-webpack/package.json index 6c07e74eed58..3fe9169e9d38 100644 --- a/presets/server-webpack/package.json +++ b/presets/server-webpack/package.json @@ -43,7 +43,6 @@ "@storybook/core-server": "6.5.0-alpha.64", "@storybook/renderer-server": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", diff --git a/presets/server-webpack/tsconfig.json b/presets/server-webpack/tsconfig.json index 77e11bbd2ab9..58b6d0df246f 100644 --- a/presets/server-webpack/tsconfig.json +++ b/presets/server-webpack/tsconfig.json @@ -2,15 +2,8 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ] + "types": ["node"] }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/__tests__/**/*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/__tests__/**/*"] +} diff --git a/presets/svelte-webpack/package.json b/presets/svelte-webpack/package.json index 3e3b69086570..67cc27d37934 100644 --- a/presets/svelte-webpack/package.json +++ b/presets/svelte-webpack/package.json @@ -53,7 +53,6 @@ }, "devDependencies": { "@types/loader-utils": "^2.0.0", - "@types/webpack-env": "^1.16.0", "svelte": "^3.31.2", "svelte-loader": "^3.0.0", "webpack": "4" diff --git a/presets/svelte-webpack/tsconfig.json b/presets/svelte-webpack/tsconfig.json index ea47a78eb476..aae6d1d3e370 100644 --- a/presets/svelte-webpack/tsconfig.json +++ b/presets/svelte-webpack/tsconfig.json @@ -2,16 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/presets/vue-webpack/package.json b/presets/vue-webpack/package.json index 2b7b594d956e..9e3634c52609 100644 --- a/presets/vue-webpack/package.json +++ b/presets/vue-webpack/package.json @@ -42,7 +42,6 @@ "@storybook/core-common": "6.5.0-alpha.64", "@storybook/docs-tools": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/presets/vue-webpack/tsconfig.json b/presets/vue-webpack/tsconfig.json index ea47a78eb476..aae6d1d3e370 100644 --- a/presets/vue-webpack/tsconfig.json +++ b/presets/vue-webpack/tsconfig.json @@ -2,16 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/presets/vue3-webpack/package.json b/presets/vue3-webpack/package.json index 3ffba48038c6..c46d91299ebc 100644 --- a/presets/vue3-webpack/package.json +++ b/presets/vue3-webpack/package.json @@ -43,7 +43,6 @@ "@storybook/core-common": "6.5.0-alpha.64", "@storybook/docs-tools": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", diff --git a/presets/vue3-webpack/tsconfig.json b/presets/vue3-webpack/tsconfig.json index 5b0f285df93d..5978a9c3956f 100644 --- a/presets/vue3-webpack/tsconfig.json +++ b/presets/vue3-webpack/tsconfig.json @@ -2,17 +2,10 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true, "skipLibCheck": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/presets/web-components-webpack/package.json b/presets/web-components-webpack/package.json index e7a541ecd3cd..8c8a6a1c225d 100644 --- a/presets/web-components-webpack/package.json +++ b/presets/web-components-webpack/package.json @@ -46,7 +46,6 @@ "@babel/preset-env": "^7.12.11", "@storybook/core-common": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "babel-plugin-bundled-import-meta": "^0.3.1", "core-js": "^3.8.2", "react": "16.14.0", diff --git a/presets/web-components-webpack/tsconfig.json b/presets/web-components-webpack/tsconfig.json index a7b3b6102f4c..4cd92b3f6ed9 100644 --- a/presets/web-components-webpack/tsconfig.json +++ b/presets/web-components-webpack/tsconfig.json @@ -2,7 +2,7 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": ["webpack-env", "node"] + "types": ["node"] }, "include": ["src/**/*"], "exclude": ["src/**/*.test.*", "src/__tests__/**/*"] diff --git a/renderers/svelte/tsconfig.json b/renderers/svelte/tsconfig.json index ea47a78eb476..aae6d1d3e370 100644 --- a/renderers/svelte/tsconfig.json +++ b/renderers/svelte/tsconfig.json @@ -2,16 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "rootDir": "./src", - "types": [ - "webpack-env", - "node" - ], + "types": ["node"], "resolveJsonModule": true }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/**/*.test.*" - ] -} \ No newline at end of file + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*"] +} diff --git a/yarn.lock b/yarn.lock index 5aaef8311001..1e070cf35907 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6554,7 +6554,6 @@ __metadata: "@storybook/csf": 0.0.2--canary.7c6c115.0 "@storybook/theming": 6.5.0-alpha.64 "@testing-library/react": ^11.2.2 - "@types/webpack-env": ^1.16.0 axe-core: ^4.2.0 core-js: ^3.8.2 global: ^4.4.0 @@ -6586,7 +6585,6 @@ __metadata: "@storybook/csf": 0.0.2--canary.7c6c115.0 "@storybook/theming": 6.5.0-alpha.64 "@types/lodash": ^4.14.167 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -6621,7 +6619,6 @@ __metadata: "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 "@storybook/theming": 6.5.0-alpha.64 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -6734,7 +6731,6 @@ __metadata: "@storybook/node-logger": 6.5.0-alpha.64 "@storybook/vue": 6.5.0-alpha.64 "@types/jest": ^26.0.16 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 ts-dedent: ^2.0.0 @@ -6838,7 +6834,6 @@ __metadata: "@storybook/components": 6.5.0-alpha.64 "@storybook/core-events": 6.5.0-alpha.64 "@storybook/theming": 6.5.0-alpha.64 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 react-sizeme: ^3.0.1 @@ -6865,7 +6860,6 @@ __metadata: "@storybook/csf": 0.0.2--canary.7c6c115.0 "@storybook/router": 6.5.0-alpha.64 "@types/qs": ^6.9.5 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 prop-types: ^15.7.2 @@ -6893,7 +6887,6 @@ __metadata: "@storybook/components": 6.5.0-alpha.64 "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 peerDependencies: @@ -6917,7 +6910,6 @@ __metadata: "@storybook/components": 6.5.0-alpha.64 "@storybook/core-events": 6.5.0-alpha.64 "@storybook/csf": 0.0.2--canary.7c6c115.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 regenerator-runtime: ^0.13.7 @@ -7211,7 +7203,6 @@ __metadata: "@types/react": ^16.14.23 "@types/react-dom": ^16.9.14 "@types/tmp": ^0.2.3 - "@types/webpack-env": ^1.16.0 autoprefixer: ^9.8.6 core-js: ^3.8.2 cross-spawn: ^7.0.3 @@ -8320,7 +8311,6 @@ __metadata: "@storybook/preset-preact-webpack": 6.5.0-alpha.64 "@storybook/renderer-preact": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 preact: ^10.5.13 react: 16.14.0 @@ -8359,7 +8349,6 @@ __metadata: dependencies: "@storybook/core-common": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 html-loader: ^1.3.2 react: 16.14.0 @@ -8379,7 +8368,6 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/renderer-preact": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 preact: ^10.5.13 react: 16.14.0 @@ -8407,7 +8395,6 @@ __metadata: "@storybook/semver": ^7.3.2 "@types/node": ^14.14.20 || ^16.0.0 "@types/util-deprecate": ^1.0.0 - "@types/webpack-env": ^1.16.0 babel-plugin-add-react-displayname: ^0.0.5 babel-plugin-react-docgen: ^4.2.1 core-js: ^3.8.2 @@ -8456,7 +8443,6 @@ __metadata: "@storybook/core-server": 6.5.0-alpha.64 "@storybook/renderer-server": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 fs-extra: ^9.0.1 global: ^4.4.0 @@ -8477,7 +8463,6 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/node-logger": 6.5.0-alpha.64 "@types/loader-utils": ^2.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 loader-utils: ^2.0.0 react: 16.14.0 @@ -8502,7 +8487,6 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 react: 16.14.0 react-dom: 16.14.0 @@ -8531,7 +8515,6 @@ __metadata: "@storybook/core-common": 6.5.0-alpha.64 "@storybook/docs-tools": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 "@vue/compiler-sfc": 3.0.0 core-js: ^3.8.2 react: 16.14.0 @@ -8560,7 +8543,6 @@ __metadata: "@babel/preset-env": ^7.12.11 "@storybook/core-common": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 babel-plugin-bundled-import-meta: ^0.3.1 core-js: ^3.8.2 lit-html: 2.0.2 @@ -8625,7 +8607,6 @@ __metadata: "@storybook/preset-react-webpack": 6.5.0-alpha.64 "@storybook/renderer-react": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 jest-specific-snapshot: ^4.0.0 regenerator-runtime: ^0.13.7 @@ -8972,7 +8953,6 @@ __metadata: "@types/shelljs": ^0.8.7 "@types/terser-webpack-plugin": ^4.2.0 "@types/webpack-dev-middleware": ^3.7.3 - "@types/webpack-env": ^1.16.0 babel-core: ^7.0.0-bridge.0 babel-eslint: ^10.1.0 babel-jest: ^26.6.3 @@ -9172,7 +9152,6 @@ __metadata: "@storybook/preset-server-webpack": 6.5.0-alpha.64 "@storybook/renderer-server": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 react: 16.14.0 react-dom: 16.14.0 @@ -9233,7 +9212,6 @@ __metadata: "@storybook/core-server": 6.5.0-alpha.64 "@storybook/preset-svelte-webpack": 6.5.0-alpha.64 "@storybook/renderer-svelte": 6.5.0-alpha.64 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 react: 16.14.0 react-dom: 16.14.0 @@ -9372,7 +9350,6 @@ __metadata: "@storybook/preset-vue3-webpack": 6.5.0-alpha.64 "@storybook/renderer-vue3": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 "@vue/compiler-sfc": 3.0.0 core-js: ^3.8.2 react: 16.14.0 @@ -9397,7 +9374,6 @@ __metadata: "@storybook/preset-vue-webpack": 6.5.0-alpha.64 "@storybook/renderer-vue": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 react: 16.14.0 react-dom: 16.14.0 @@ -9426,7 +9402,6 @@ __metadata: "@storybook/preset-web-components-webpack": 6.5.0-alpha.64 "@storybook/renderer-web-components": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 lit-html: 2.0.2 react: 16.14.0 @@ -13320,7 +13295,6 @@ __metadata: "@types/jest": ^26.0.16 "@types/node": ^14.14.20 || ^16.0.0 "@types/sass": ^1 - "@types/webpack-env": ^1.16.0 "@webcomponents/custom-elements": ^1.4.3 core-js: ^3.8.2 global: ^4.4.0 From 483d265bb8cfe1bb3c30bb140e256835256e3746 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 22 Apr 2022 15:45:02 +0800 Subject: [PATCH 18/21] Remove webpack deps --- addons/essentials/package.json | 15 --------------- app/html/package.json | 7 +------ app/preact/package.json | 6 ++---- app/react/package.json | 18 ++---------------- app/svelte/package.json | 6 ++---- app/vue/package.json | 6 ++---- app/vue3/package.json | 6 ++---- lib/core-client/package.json | 3 +-- renderers/html/package.json | 6 +----- yarn.lock | 27 --------------------------- 10 files changed, 13 insertions(+), 87 deletions(-) diff --git a/addons/essentials/package.json b/addons/essentials/package.json index 0161f823af73..60d1312b22eb 100644 --- a/addons/essentials/package.json +++ b/addons/essentials/package.json @@ -67,18 +67,6 @@ "@storybook/angular": { "optional": true }, - "@storybook/builder-manager4": { - "optional": true - }, - "@storybook/builder-manager5": { - "optional": true - }, - "@storybook/builder-webpack4": { - "optional": true - }, - "@storybook/builder-webpack5": { - "optional": true - }, "@storybook/html": { "optional": true }, @@ -111,9 +99,6 @@ }, "vue": { "optional": true - }, - "webpack": { - "optional": true } }, "publishConfig": { diff --git a/app/html/package.json b/app/html/package.json index d87f42deb11a..9ef8758e34c8 100644 --- a/app/html/package.json +++ b/app/html/package.json @@ -44,16 +44,11 @@ "@storybook/preset-html-webpack": "6.5.0-alpha.64", "@storybook/renderer-html": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", - "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0", - "regenerator-runtime": "^0.13.7", - "webpack": ">=4.0.0 <6.0.0" - }, - "devDependencies": { - "webpack": "4" + "regenerator-runtime": "^0.13.7" }, "peerDependencies": { "@babel/core": "*" diff --git a/app/preact/package.json b/app/preact/package.json index 05ab82253207..b5cb92bc9391 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -47,12 +47,10 @@ "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", - "regenerator-runtime": "^0.13.7", - "webpack": ">=4.0.0 <6.0.0" + "regenerator-runtime": "^0.13.7" }, "devDependencies": { - "preact": "^10.5.13", - "webpack": "4" + "preact": "^10.5.13" }, "peerDependencies": { "@babel/core": "*", diff --git a/app/react/package.json b/app/react/package.json index 9ae4543cfba8..d5c867a83014 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -46,12 +46,10 @@ "@storybook/renderer-react": "6.5.0-alpha.64", "@types/node": "^14.14.20 || ^16.0.0", "core-js": "^3.8.2", - "regenerator-runtime": "^0.13.7", - "webpack": ">=4.43.0 <6.0.0" + "regenerator-runtime": "^0.13.7" }, "devDependencies": { - "jest-specific-snapshot": "^4.0.0", - "webpack": "4" + "jest-specific-snapshot": "^4.0.0" }, "peerDependencies": { "@babel/core": "^7.11.5", @@ -62,18 +60,6 @@ "@babel/core": { "optional": true }, - "@storybook/builder-webpack4": { - "optional": true - }, - "@storybook/builder-webpack5": { - "optional": true - }, - "@storybook/manager-webpack4": { - "optional": true - }, - "@storybook/manager-webpack5": { - "optional": true - }, "typescript": { "optional": true } diff --git a/app/svelte/package.json b/app/svelte/package.json index 7f163c0497ac..93849e73f444 100644 --- a/app/svelte/package.json +++ b/app/svelte/package.json @@ -47,13 +47,11 @@ "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", - "regenerator-runtime": "^0.13.7", - "webpack": ">=4.0.0 <6.0.0" + "regenerator-runtime": "^0.13.7" }, "devDependencies": { "svelte": "^3.31.2", - "svelte-loader": "^3.0.0", - "webpack": "4" + "svelte-loader": "^3.0.0" }, "peerDependencies": { "@babel/core": "*", diff --git a/app/vue/package.json b/app/vue/package.json index 7fc73d89894b..c4e7a74efb8c 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -47,14 +47,12 @@ "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", - "regenerator-runtime": "^0.13.7", - "webpack": ">=4.0.0 <6.0.0" + "regenerator-runtime": "^0.13.7" }, "devDependencies": { "vue": "^2.6.12", "vue-loader": "^15.9.6", - "vue-template-compiler": "^2.6.12", - "webpack": "4" + "vue-template-compiler": "^2.6.12" }, "peerDependencies": { "@babel/core": "*", diff --git a/app/vue3/package.json b/app/vue3/package.json index 813c3f9c67f6..4057b6dfcf72 100644 --- a/app/vue3/package.json +++ b/app/vue3/package.json @@ -48,13 +48,11 @@ "core-js": "^3.8.2", "react": "16.14.0", "react-dom": "16.14.0", - "regenerator-runtime": "^0.13.7", - "webpack": ">=4.0.0 <6.0.0" + "regenerator-runtime": "^0.13.7" }, "devDependencies": { "@vue/compiler-sfc": "3.0.0", - "vue": "3.0.0", - "webpack": "4" + "vue": "3.0.0" }, "peerDependencies": { "@babel/core": "*", diff --git a/lib/core-client/package.json b/lib/core-client/package.json index c9885c19662c..b60a57a6acd0 100644 --- a/lib/core-client/package.json +++ b/lib/core-client/package.json @@ -63,8 +63,7 @@ }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "webpack": "*" + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "typescript": { diff --git a/renderers/html/package.json b/renderers/html/package.json index b6e1fb3e1202..b8182bc4c826 100644 --- a/renderers/html/package.json +++ b/renderers/html/package.json @@ -50,11 +50,7 @@ "react": "16.14.0", "react-dom": "16.14.0", "regenerator-runtime": "^0.13.7", - "ts-dedent": "^2.0.0", - "webpack": ">=4.0.0 <6.0.0" - }, - "devDependencies": { - "webpack": "4" + "ts-dedent": "^2.0.0" }, "peerDependencies": { "@babel/core": "*" diff --git a/yarn.lock b/yarn.lock index 1e070cf35907..bc7210cc4a50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6739,14 +6739,6 @@ __metadata: peerDependenciesMeta: "@storybook/angular": optional: true - "@storybook/builder-manager4": - optional: true - "@storybook/builder-manager5": - optional: true - "@storybook/builder-webpack4": - optional: true - "@storybook/builder-webpack5": - optional: true "@storybook/html": optional: true "@storybook/vue": @@ -6769,8 +6761,6 @@ __metadata: optional: true vue: optional: true - webpack: - optional: true languageName: unknown linkType: soft @@ -7675,7 +7665,6 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - webpack: "*" peerDependenciesMeta: typescript: optional: true @@ -8054,13 +8043,11 @@ __metadata: "@storybook/preset-html-webpack": 6.5.0-alpha.64 "@storybook/renderer-html": 6.5.0-alpha.64 "@types/node": ^14.14.20 || ^16.0.0 - "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - webpack: 4 peerDependencies: "@babel/core": "*" languageName: unknown @@ -8316,7 +8303,6 @@ __metadata: react: 16.14.0 react-dom: 16.14.0 regenerator-runtime: ^0.13.7 - webpack: 4 peerDependencies: "@babel/core": "*" preact: ^8.0.0||^10.0.0 @@ -8610,7 +8596,6 @@ __metadata: core-js: ^3.8.2 jest-specific-snapshot: ^4.0.0 regenerator-runtime: ^0.13.7 - webpack: 4 peerDependencies: "@babel/core": ^7.11.5 react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -8618,14 +8603,6 @@ __metadata: peerDependenciesMeta: "@babel/core": optional: true - "@storybook/builder-webpack4": - optional: true - "@storybook/builder-webpack5": - optional: true - "@storybook/manager-webpack4": - optional: true - "@storybook/manager-webpack5": - optional: true typescript: optional: true languageName: unknown @@ -8647,7 +8624,6 @@ __metadata: react-dom: 16.14.0 regenerator-runtime: ^0.13.7 ts-dedent: ^2.0.0 - webpack: 4 peerDependencies: "@babel/core": "*" languageName: unknown @@ -9218,7 +9194,6 @@ __metadata: regenerator-runtime: ^0.13.7 svelte: ^3.31.2 svelte-loader: ^3.0.0 - webpack: 4 peerDependencies: "@babel/core": "*" svelte: ^3.1.0 @@ -9356,7 +9331,6 @@ __metadata: react-dom: 16.14.0 regenerator-runtime: ^0.13.7 vue: 3.0.0 - webpack: 4 peerDependencies: "@babel/core": "*" "@vue/compiler-sfc": ^3.0.0 @@ -9381,7 +9355,6 @@ __metadata: vue: ^2.6.12 vue-loader: ^15.9.6 vue-template-compiler: ^2.6.12 - webpack: 4 peerDependencies: "@babel/core": "*" babel-loader: ^7.0.0 || ^8.0.0 From a662961dc60d39a0fe0c21cf5a754d1656564cc5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 26 Apr 2022 17:24:08 +0800 Subject: [PATCH 19/21] Cleanup HMR optimization using optional chaining --- app/angular/src/client/index.ts | 5 ++--- app/ember/src/client/index.ts | 5 ++--- renderers/html/src/index.ts | 5 ++--- renderers/react/src/index.ts | 5 ++--- renderers/server/src/index.ts | 5 ++--- renderers/svelte/src/index.ts | 5 ++--- renderers/vue/src/index.ts | 5 ++--- renderers/vue3/src/index.ts | 5 ++--- 8 files changed, 16 insertions(+), 24 deletions(-) diff --git a/app/angular/src/client/index.ts b/app/angular/src/client/index.ts index 5d2a76536cef..57214c9ce8c4 100644 --- a/app/angular/src/client/index.ts +++ b/app/angular/src/client/index.ts @@ -15,6 +15,5 @@ export type { StoryFnAngularReturnType as IStory } from './preview/types'; export { moduleMetadata, componentWrapperDecorator } from './preview/decorators'; -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} +// optimization: stop HMR propagation in webpack +module?.hot?.decline(); diff --git a/app/ember/src/client/index.ts b/app/ember/src/client/index.ts index 8034a9d6433d..0088e1b3ad16 100644 --- a/app/ember/src/client/index.ts +++ b/app/ember/src/client/index.ts @@ -9,6 +9,5 @@ export { raw, } from './preview'; -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} +// optimization: stop HMR propagation in webpack +module?.hot?.decline(); diff --git a/renderers/html/src/index.ts b/renderers/html/src/index.ts index 620f2fae5cd0..60fb2a70d1a0 100644 --- a/renderers/html/src/index.ts +++ b/renderers/html/src/index.ts @@ -11,6 +11,5 @@ export { export * from './preview/types-6-0'; -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} +// optimization: stop HMR propagation in webpack +module?.hot?.decline(); diff --git a/renderers/react/src/index.ts b/renderers/react/src/index.ts index 141f7e7f43fc..d8e47c130c28 100644 --- a/renderers/react/src/index.ts +++ b/renderers/react/src/index.ts @@ -13,6 +13,5 @@ export * from './testing'; export * from './preview/types-6-3'; -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} +// optimization: stop HMR propagation in webpack +module?.hot?.decline(); diff --git a/renderers/server/src/index.ts b/renderers/server/src/index.ts index 8034a9d6433d..0088e1b3ad16 100644 --- a/renderers/server/src/index.ts +++ b/renderers/server/src/index.ts @@ -9,6 +9,5 @@ export { raw, } from './preview'; -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} +// optimization: stop HMR propagation in webpack +module?.hot?.decline(); diff --git a/renderers/svelte/src/index.ts b/renderers/svelte/src/index.ts index 8034a9d6433d..0088e1b3ad16 100644 --- a/renderers/svelte/src/index.ts +++ b/renderers/svelte/src/index.ts @@ -9,6 +9,5 @@ export { raw, } from './preview'; -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} +// optimization: stop HMR propagation in webpack +module?.hot?.decline(); diff --git a/renderers/vue/src/index.ts b/renderers/vue/src/index.ts index 620f2fae5cd0..60fb2a70d1a0 100644 --- a/renderers/vue/src/index.ts +++ b/renderers/vue/src/index.ts @@ -11,6 +11,5 @@ export { export * from './preview/types-6-0'; -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} +// optimization: stop HMR propagation in webpack +module?.hot?.decline(); diff --git a/renderers/vue3/src/index.ts b/renderers/vue3/src/index.ts index de13a1bc49ff..c0f468fb3ec0 100644 --- a/renderers/vue3/src/index.ts +++ b/renderers/vue3/src/index.ts @@ -13,6 +13,5 @@ export { export * from './preview/types-6-0'; -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} +// optimization: stop HMR propagation in webpack +module?.hot?.decline(); From f4ee89420d0c3f1550851f409c049ef87ed5d972 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 27 Apr 2022 09:33:56 +0800 Subject: [PATCH 20/21] Clean up preset READMEs --- presets/html-webpack/README.md | 27 +- presets/preact-webpack/README.md | 31 +-- presets/react-webpack/README.md | 49 +--- presets/server-webpack/README.md | 319 +---------------------- presets/svelte-webpack/README.md | 34 +-- presets/vue-webpack/README.md | 50 +--- presets/vue3-webpack/README.md | 45 +--- presets/web-components-webpack/README.md | 73 +----- 8 files changed, 32 insertions(+), 596 deletions(-) diff --git a/presets/html-webpack/README.md b/presets/html-webpack/README.md index e4a80130d0e9..dd70fe593868 100644 --- a/presets/html-webpack/README.md +++ b/presets/html-webpack/README.md @@ -1,25 +1,6 @@ -# Storybook for HTML (Webpack) +# Storybook Webpack preset for HTML ---- +This package is a [preset](https://storybook.js.org/docs/html/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling HTML. +It's an internal package that's not intended to be used directly by users. -Storybook for HTML is a UI development environment for your plain HTML snippets. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-app -npx sb init -t html -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/docs/html/configure/storybook-addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/html/workflows/publish-storybook) of your storybook and deploy it anywhere you want. +- More info on [Storybook for HTML](https://storybook.js.org/docs/html/get-started/introduction) diff --git a/presets/preact-webpack/README.md b/presets/preact-webpack/README.md index 886a1a134b13..3afe613128d0 100644 --- a/presets/preact-webpack/README.md +++ b/presets/preact-webpack/README.md @@ -1,29 +1,6 @@ -# Storybook for Preact +# Storybook Webpack preset for Preact -Storybook for Preact is a UI development environment for your Preact components. -With it, you can visualize different states of your UI components and develop them interactively. +This package is a [preset](https://storybook.js.org/docs/preact/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Preact. +It's an internal package that's not intended to be used directly by users. -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-preact-app -npx sb init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/docs/preact/configure/storybook-addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/preact/workflows/publish-storybook) of your storybook and deploy it anywhere you want. - -## Docs - -- [Basics](https://storybook.js.org/docs/preact/get-started/introduction) -- [Configurations](https://storybook.js.org/docs/preact/configure/overview) -- [Addons](https://storybook.js.org/docs/preact/configure/storybook-addons) +- More info on [Storybook for Preact](https://storybook.js.org/docs/preact/get-started/introduction) diff --git a/presets/react-webpack/README.md b/presets/react-webpack/README.md index 2e7e11dcbfe7..43fa9210cdee 100644 --- a/presets/react-webpack/README.md +++ b/presets/react-webpack/README.md @@ -1,47 +1,6 @@ -# Storybook for React +# Storybook Webpack preset for React -Storybook for React is a UI development environment for your React components. -With it, you can visualize different states of your UI components and develop them interactively. +This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React. +It's an internal package that's not intended to be used directly by users. -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-react-app -npx sb init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/react/workflows/publish-storybook) of your storybook and deploy it anywhere you want. - -Here are some featured storybooks that you can reference to see how Storybook works: - -- [Demo of Storybook Design System](https://storybook.js.org/design-system) - [source](https://github.com/storybookjs/design-system) - -## Create React App - -Support for [Create React App](https://create-react-app.dev/) is handled by [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app). - -This preset enables support for all Create React App features, including Sass/SCSS and TypeScript. - -If you're working on an app that was initialized manually (i.e., without the use of Create React App), ensure that your app has [react-dom](https://www.npmjs.com/package/react-dom) included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project. - -## Typescript - -`@storybook/react` is now exporting its own types to use with Typescript. -You don't need to have `@types/storybook__react` installed anymore if it was your case. -But you probably also need to use types from `@types/node @types/react`. - -## Docs - -- [Basics](https://storybook.js.org/docs/react/get-started/introduction) -- [Configurations](https://storybook.js.org/docs/react/configure/overview) -- [Addons](https://storybook.js.org/docs/react/configure/storybook-addons) +- More info on [Storybook for React](https://storybook.js.org/docs/react/get-started/introduction) diff --git a/presets/server-webpack/README.md b/presets/server-webpack/README.md index 3421377c873e..8cc5b0b75f33 100644 --- a/presets/server-webpack/README.md +++ b/presets/server-webpack/README.md @@ -1,317 +1,6 @@ -# Storybook for Server +# Storybook Webpack preset for Server ---- +This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React. +It's an internal package that's not intended to be used directly by users. -Storybook for Server is a UI development environment for your plain HTML snippets rendered by your server backend. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-app -npx sb init -t server -``` - -To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`: - -```js -export const parameters = { - server: { - url: `http://localhost:${port}/storybook_preview`, - }, -}; -``` - -The URL you connect to should have the ability to render a story, see [server rendering](#server-rendering) below. - -For more information visit: [storybook.js.org](https://storybook.js.org) - -## Writing Stories - -To write a story, use whatever API is natural for your server-side rendering framework to generate set of JSON or YAML files of stories analogous to CSF files (see the [`server-kitchen-sink`](../../examples/server-kitchen-sink/stories) example for ideas). - -```json -{ - "title": "Component", - "parameters": { - "options": { "component": "my_widget" } - }, - "stories": [ - { - "name": "Default", - "parameters": { - "server": { "id": "path/of/your/story" } - } - } - ] -} -``` - -In your `.storybook/main.js` you simply provide a glob specifying the location of those JSON files, e.g. - -```js -module.exports = { - stories: ['../stories/**/*.stories.json'], -}; -``` - -Notice that the JSON does not specify a rendering function -- `@storybook/server` will instead call your `parameters.server.url` with the story's server id appended. - -For example the JSON story above is requivalent to the CSF3 definition: - -```javascript -export default { - title: 'Component', - parameters: { - options: { - component: 'my_widget', - }, - }, -}; - -export const Default = { - name: 'Default', - parameters: { - server: { - id: 'path/of/your/story"', - }, - }, -}; -``` - -With the story HTML will be fetched from the server by making a GET request to http://localhost/storybook_preview/path/of/your/story` - -### Ruby/Rails support - -In particular the [View Component::Storybook](https://github.com/jonspalmer/view_component_storybook) gem provides a Ruby API for easily creating the above with a Ruby/Rails DSL (as well as providing a server rendering endpoint). - -## Server rendering - -The server rendering side of things is relatively straightfoward. When you browse to a story in the sidebar, Storybook will make a `fetch` request to `${parameters.server.url}/{parameters.server.id}` and display the HTML that is returned. - -You need to ensure the route in your server app renders the appropriate HTML when called in that fashion. - -### Passing parameters to the server - -Many components are likely to be dynamic - responding to parameters that change their content or appearance. `@storybook\server` has two mechanisms for passing those parameters to the server - `params` and `args`. Parameters defined in this way are appended to the fetch url as query string parameters. The server endpoint is responsible for interpreting those parameters and vary the returned html appropriately - -#### Constant parameters with `params` - -Static parameters can be defined using the `params` story parameter. For example suppose you have a Button component that has a label and color options: - -```json -{ - "title": "Buttons", - "stories": [ - { - "name": "Red", - "parameters": { - "server": { - "id": "button", - "params": { "color": "red", "label": "Stop" } - } - } - }, - { - "name": "Green", - "parameters": { - "server": { - "id": "button", - "params": { "color": "green", "label": "OK" } - } - } - } - ] -} -``` - -The Red and Green story HTML will be fetched from the urls `server.url/controls/button?color=red&label=Stop` and `server.url/controls/button?color=green&label=OK` - -Like all story parameters server params can be defined in the default export and overridden in stories. - -```json -{ - "title": "Buttons", - "parameters": { - "server": { - "params": { "color": "red" } - } - }, - "stories": [ - { - "name": "Default", - "parameters": { - "server": { - "id": "button", - "params": { "label": "Stop" } - } - } - }, - { - "name": "Green", - "parameters": { - "server": { - "id": "button", - "params": { "color": "green", "label": "OK" } - } - } - } - ] -} -``` - -#### Dynamic parameters with `args` and Controls - -Dynamic parameters can be defined using args and the Controls addon - -```json -{ - "title": "Buttons", - "stories": [ - { - "name": "Red", - "parameters": { - "server": { - "id": "button" - } - }, - "args": { "color": "red", "label": "Stop" } - }, - { - "name": "Green", - "parameters": { - "server": { - "id": "button" - } - }, - "args": { "color": "green", "label": "Go" } - } - ] -} -``` - -Story args are passed to the server as url query parameters just like `params` except now they can be varied on the Controls addon panel. - -Just like CSF stories we can define `argTypes` to specify the controls used in the controls panel. `argTypes` can be defined at the default or story level. - -```json -{ - "title": "Buttons", - "argTypes": { - "color": { "control": { "type": "color" } } - }, - "stories": [ - { - "name": "Red", - "parameters": { - "server": { - "id": "button" - } - }, - "args": { "color": "red", "label": "Stop" } - }, - { - "name": "Green", - "parameters": { - "server": { - "id": "button" - } - }, - "args": { "color": "green", "label": "Go" } - } - ] -} -``` - -## Addon compatibility - -Storybook also comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) and a great API to customize as you wish. As some addons assume the story is rendered in JS, they may not work with `@storybook/server` (yet!). - -Many addons that act on the manager side (such as `backgrounds` and `viewport`) will work out of the box with `@storybook/server` -- you can configure them with parameters written on the server as usual. - -### Controls - -To configure controls, simple add `args` and `argTypes` keys to the story JSON much like you would CSF: - -```json -{ - "title": "Controls", - "stories": [ - { - "name": "Button", - "parameters": { - "server": { "id": "controls/button" } - }, - "args": { "button_text": "Push Me", "color": "red" }, - "argTypes": { "button_text": { "control": { "type": "color" } } } - } - ] -} -``` - -The controls values will be added to your story URL as query parameters. - -### Actions - -To use actions, use the `parameters.actions.handles` parameter: - -```json -{ - "title": "Actions", - "stories": [ - { - "name": "Button", - "parameters": { - "server": { "id": "actions/button" }, - "actions": { - "handles": ["mouseover", "click .btn"] - } - } - } - ] -} -``` - -## Advanced Configuration - -### fetchStoryHtml - -For control over how `@storybook/server` fetches Html from the server you can provide a `fetchStoryHtml` function as a parameter. You would typically set this in `.storybook/preview.js` but it's just a regular Storybook parameter so could be overridden at the stories or story level. - -```javascript -// .storybook/preview.js - -const fetchStoryHtml = async (url, path, params, context) => { - // Custom fetch implementation - // .... - return html; -}; - -export const parameters = { - server: { - url: `http://localhost:${port}/storybook_preview`, - fetchStoryHtml, - }, -}; -``` - -`fetchStoryHtml` should be an async function with the following signature - -```javascript -type FetchStoryHtmlType = ( - url: string, - id: string, - params: any, - context: StoryContext -) => Promise; -``` - -- url: Server url configured by the `parameters.server.url` -- id: Id of the story being rendered given by `parameters.server.id` -- params: Merged story params `parameters.server.params`and story args -- context: The context of the story +- More info on [Storybook for Server](https://github.com/storybookjs/storybook/tree/main/app/server) diff --git a/presets/svelte-webpack/README.md b/presets/svelte-webpack/README.md index fcb7b786e567..2cf2606a3b91 100644 --- a/presets/svelte-webpack/README.md +++ b/presets/svelte-webpack/README.md @@ -1,32 +1,6 @@ -# Storybook for Svelte +# Storybook Webpack preset for Svelte -Storybook for Svelte is a UI development environment for your Svelte components. -With it, you can visualize different states of your UI components and develop them interactively. +This package is a [preset](https://storybook.js.org/docs/svelte/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Svelte. +It's an internal package that's not intended to be used directly by users. -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-svelte-app -npx sb init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/docs/svelte/configure/storybook-addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/svelte/workflows/publish-storybook) of your storybook and deploy it anywhere you want. - -## TODOs - -- [ ] Support `addon-info` -- [ ] Support Svelte markup directly in stories -- [ ] Add Svelte storybook generator -- [ ] Provide stories that show advanced Svelte use cases -- [ ] Hydratable -- [ ] Advanced mount options +- More info on [Storybook for Svelte](https://storybook.js.org/docs/svelte/get-started/introduction) diff --git a/presets/vue-webpack/README.md b/presets/vue-webpack/README.md index 169efbeee115..17acb9801107 100644 --- a/presets/vue-webpack/README.md +++ b/presets/vue-webpack/README.md @@ -1,48 +1,6 @@ -# Storybook for Vue +# Storybook Webpack preset for Vue -Storybook for Vue is a UI development environment for your Vue components. -With it, you can visualize different states of your UI components and develop them interactively. +This package is a [preset](https://storybook.js.org/docs/vue/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue. +It's an internal package that's not intended to be used directly by users. -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-vue-app -npx sb init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - -## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework - - - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue/configure/storybook-addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/vue/workflows/publish-storybook) of your storybook and deploy it anywhere you want. - -## Vue Notes - -- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.js`. - -## Known Limitations - -In Storybook story and decorator components, you can not access the Vue instance -in factory functions for default prop values: - -```js -{ - props: { - foo: { - default() { - return this.bar; // does not work! - } - } - } -} -``` +- More info on [Storybook for Vue](https://storybook.js.org/docs/vue/get-started/introduction) diff --git a/presets/vue3-webpack/README.md b/presets/vue3-webpack/README.md index 0d85c31aa0eb..aee6a93bb9fb 100644 --- a/presets/vue3-webpack/README.md +++ b/presets/vue3-webpack/README.md @@ -1,43 +1,6 @@ -# Storybook for Vue 3 +# Storybook Webpack preset for Vue3 -Storybook for Vue 3 is a UI development environment for your Vue 3 components. -With it, you can visualize different states of your UI components and develop them interactively. +This package is a [preset](https://storybook.js.org/docs/vue/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue3. +It's an internal package that's not intended to be used directly by users. -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-vue3-app -npx sb init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue3/configure/storybook-addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/vue3/workflows/publish-storybook) of your storybook and deploy it anywhere you want. - -## Extending the Vue application - -Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview which can be imported as `import { app } from '@storybook/vue3'`. - -When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. - -For example: - -```js -// .storybook/preview.js - -import { app } from '@storybook/vue3'; - -app.use(MyPlugin); -app.component('my-component', MyComponent); -app.mixin({ - /* My mixin */ -}); -``` +- More info on [Storybook for Vue3](https://storybook.js.org/docs/vue/get-started/introduction) diff --git a/presets/web-components-webpack/README.md b/presets/web-components-webpack/README.md index 5de2c1130fcc..d2da44b36356 100644 --- a/presets/web-components-webpack/README.md +++ b/presets/web-components-webpack/README.md @@ -1,71 +1,6 @@ -# Storybook for web-components +# Storybook Webpack preset for Web components ---- +This package is a [preset](https://storybook.js.org/docs/web-components/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Web components. +It's an internal package that's not intended to be used directly by users. -Storybook for web-components is a UI development environment for your plain web-component snippets. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-app -npx sb init -t web_components -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/docs/web-components/configure/storybook-addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/web-components/workflows/publish-storybook) of your storybook and deploy it anywhere you want. - -# Hot Module Reloading (HMR) - -As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast. - -# Setup es6/7 dependencies - -By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation". - -For example if you have a library called `my-library` which is in ES2017 then you can add it like so - -```js -// .storybook/main.js - -module.exports = { - webpackFinal: async (config) => { - // find web-components rule for extra transpilation - const webComponentsRule = config.module.rules.find( - (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false - ); - // add your own `my-library` - webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); - - return config; - }, -}; -``` - -By default the following folders are included - -- `src/*.js` -- `packages/*/src/*.js` -- `node_modules/lit-html/*.js` -- `node_modules/lit-element/*.js` -- `node_modules/@open-wc/*.js` -- `node_modules/@polymer/*.js` -- `node_modules/@vaadin/*.js` - -As you can see the `src` folder is also included. -The reason for that is as it has some extra configuration to allow for example `import.meta`. -If you use a different folder you will need to make sure webpack/babel can handle it. - -# FAQ - -- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry` - => please see Setup page reload via HMR +- More info on [Storybook for Web components](https://storybook.js.org/docs/web-components/get-started/introduction) From 82032adb0c06010cf3ae83400eeccd6aae165253 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 27 Apr 2022 09:36:01 +0800 Subject: [PATCH 21/21] React: Fix config types --- app/react/types.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/react/types.d.ts b/app/react/types.d.ts index 5329e4da6943..001ce4ea6a42 100644 --- a/app/react/types.d.ts +++ b/app/react/types.d.ts @@ -1 +1 @@ -export * from './dist/ts3.9/types/index.d'; +export * from './dist/ts3.9/types.d';