From 8346850e25156122dc7ebc6ab136fb2a8201a34c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 12 Jan 2022 16:38:12 +0800 Subject: [PATCH 1/8] Merge pull request #17213 from storybookjs/16067-fix-manager-process Webpack5: Fix manager.js process references --- lib/manager-webpack5/src/presets/manager-preset.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/manager-webpack5/src/presets/manager-preset.ts b/lib/manager-webpack5/src/presets/manager-preset.ts index 6fe9535cd611..0a909f470f42 100644 --- a/lib/manager-webpack5/src/presets/manager-preset.ts +++ b/lib/manager-webpack5/src/presets/manager-preset.ts @@ -1,6 +1,6 @@ import path from 'path'; import fse from 'fs-extra'; -import { DefinePlugin, Configuration, WebpackPluginInstance } from 'webpack'; +import { DefinePlugin, Configuration, WebpackPluginInstance, ProvidePlugin } from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; @@ -113,7 +113,8 @@ export async function managerWebpack( new DefinePlugin({ ...stringifyProcessEnvs(envs), NODE_ENV: JSON.stringify(envs.NODE_ENV), - }) as WebpackPluginInstance, + }), + new ProvidePlugin({ process: 'process/browser.js' }), // isProd && // BundleAnalyzerPlugin && // new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }), From 8fe40273898d04dc2f64abd7dcbe18abbe7bdb59 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 14 Jan 2022 17:53:02 +0800 Subject: [PATCH 2/8] Merge pull request #17240 from storybookjs/15574-fix-namedexportsorder-warning Core: Fix __namedExportsOrder warning from preview.js --- lib/builder-webpack4/src/preview/virtualModuleEntry.template.js | 1 + lib/builder-webpack5/src/preview/virtualModuleEntry.template.js | 1 + 2 files changed, 2 insertions(+) diff --git a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js index cd9e191534da..2c4c62fad0c0 100644 --- a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js @@ -41,6 +41,7 @@ Object.keys(config).forEach((key) => { v[key] = value; return addParameters(v, false); } + case '__namedExportsOrder': case 'decorateStory': case 'renderToDOM': { return null; // This key is not handled directly in v6 mode. diff --git a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js index cd9e191534da..2c4c62fad0c0 100644 --- a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js @@ -41,6 +41,7 @@ Object.keys(config).forEach((key) => { v[key] = value; return addParameters(v, false); } + case '__namedExportsOrder': case 'decorateStory': case 'renderToDOM': { return null; // This key is not handled directly in v6 mode. From de25e1936cc92ebce9c9af7eb10a7673c42ce63f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 12 Jan 2022 18:39:53 +0800 Subject: [PATCH 3/8] Merge pull request #17206 from storybookjs/angular/fix-angular-13.1 Angular: Fix 13.1 and add CI test cases --- .circleci/config.yml | 2 +- app/angular/src/server/angular-cli-webpack-13.x.x.js | 4 ++-- .../src/server/framework-preset-angular-cli.ts | 2 +- .../ANGULAR/template-csf/.storybook/tsconfig.json | 3 ++- lib/cli/src/repro-generators/configs.ts | 12 ++++++++++++ 5 files changed, 18 insertions(+), 5 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c5222aac5d6a..a561a14ec563 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -222,7 +222,7 @@ jobs: # Do not test CRA here because it's done in PnP part # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released # TODO: Add `angular` as soon as Storybook is compatible with Angular 13 - command: yarn test:e2e-framework vue3 angular12 angular11 web_components_typescript web_components_lit2 + command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 no_output_timeout: 5m - store_artifacts: path: /tmp/cypress-record diff --git a/app/angular/src/server/angular-cli-webpack-13.x.x.js b/app/angular/src/server/angular-cli-webpack-13.x.x.js index 0b74d3af9889..c8c87041cf20 100644 --- a/app/angular/src/server/angular-cli-webpack-13.x.x.js +++ b/app/angular/src/server/angular-cli-webpack-13.x.x.js @@ -6,7 +6,7 @@ const { getCommonConfig, getStylesConfig, getDevServerConfig, - getTypescriptWorkerPlugin, + getTypeScriptConfig, } = require('@angular-devkit/build-angular/src/webpack/configs'); const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); @@ -45,7 +45,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext } (wco) => [ getCommonConfig(wco), getStylesConfig(wco), - getTypescriptWorkerPlugin ? getTypescriptWorkerPlugin(wco) : getDevServerConfig(wco), + getTypeScriptConfig ? getTypeScriptConfig(wco) : getDevServerConfig(wco), ] ); diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index 3e6637910b9a..ba559c1e5b5d 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -47,8 +47,8 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P return getWebpackConfig13_x_x(_baseConfig, { builderOptions: { watch: options.configType === 'DEVELOPMENT', - ...builderOptions, ...legacyDefaultOptions, + ...builderOptions, }, builderContext, }); diff --git a/lib/cli/src/generators/ANGULAR/template-csf/.storybook/tsconfig.json b/lib/cli/src/generators/ANGULAR/template-csf/.storybook/tsconfig.json index 28aadc68fd9a..b1e810022ba0 100644 --- a/lib/cli/src/generators/ANGULAR/template-csf/.storybook/tsconfig.json +++ b/lib/cli/src/generators/ANGULAR/template-csf/.storybook/tsconfig.json @@ -1,7 +1,8 @@ { "extends": "%SET_DURING_SB_INIT%", "compilerOptions": { - "types": ["node"] + "types": ["node"], + "allowSyntheticDefaultImports": true }, "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"], "include": ["../src/**/*", "../projects/**/*"], diff --git a/lib/cli/src/repro-generators/configs.ts b/lib/cli/src/repro-generators/configs.ts index d9d1238e6973..629e3884007a 100644 --- a/lib/cli/src/repro-generators/configs.ts +++ b/lib/cli/src/repro-generators/configs.ts @@ -117,6 +117,18 @@ export const angular12: Parameters = { version: 'v12-lts', }; +export const angular130: Parameters = { + ...baseAngular, + name: 'angular130', + version: '13.0.x', +}; + +export const angular13: Parameters = { + ...baseAngular, + name: 'angular13', + version: '13.1.x', +}; + export const angular: Parameters = baseAngular; // #endregion From ec142c831dc76d0f75f0f2dbf9073ecdc16d088f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 14 Jan 2022 17:53:18 +0800 Subject: [PATCH 4/8] Merge pull request #17239 from storybookjs/16820-fix-prettier-transpilation Fix prettier transpile problems --- addons/docs/package.json | 2 +- addons/storysource/package.json | 2 +- lib/codemod/package.json | 2 +- lib/csf-tools/package.json | 2 +- lib/source-loader/package.json | 2 +- package.json | 2 +- yarn.lock | 30 +++++++++++++++--------------- 7 files changed, 21 insertions(+), 21 deletions(-) diff --git a/addons/docs/package.json b/addons/docs/package.json index accada3406fd..0c523ff4ff02 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -92,7 +92,7 @@ "lodash": "^4.17.21", "nanoid": "^3.1.23", "p-limit": "^3.1.0", - "prettier": "^2.2.1", + "prettier": "<=2.3.0", "prop-types": "^15.7.2", "react-element-to-jsx-string": "^14.3.4", "regenerator-runtime": "^0.13.7", diff --git a/addons/storysource/package.json b/addons/storysource/package.json index 1f775aab80b8..5b0510221d2c 100644 --- a/addons/storysource/package.json +++ b/addons/storysource/package.json @@ -51,7 +51,7 @@ "core-js": "^3.8.2", "estraverse": "^5.2.0", "loader-utils": "^2.0.0", - "prettier": "^2.2.1", + "prettier": "<=2.3.0", "prop-types": "^15.7.2", "react-syntax-highlighter": "^13.5.3", "regenerator-runtime": "^0.13.7" diff --git a/lib/codemod/package.json b/lib/codemod/package.json index dfdcd1765395..426b3e9c9489 100644 --- a/lib/codemod/package.json +++ b/lib/codemod/package.json @@ -51,7 +51,7 @@ "globby": "^11.0.2", "jscodeshift": "^0.7.0", "lodash": "^4.17.21", - "prettier": "^2.2.1", + "prettier": "<=2.3.0", "recast": "^0.19.0", "regenerator-runtime": "^0.13.7" }, diff --git a/lib/csf-tools/package.json b/lib/csf-tools/package.json index f2385bcc9647..bb6c72ac1e5e 100644 --- a/lib/csf-tools/package.json +++ b/lib/csf-tools/package.json @@ -54,7 +54,7 @@ "global": "^4.4.0", "js-string-escape": "^1.0.1", "lodash": "^4.17.21", - "prettier": "^2.2.1", + "prettier": "<=2.3.0", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0" }, diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json index afdac652b40f..50a38247dc43 100644 --- a/lib/source-loader/package.json +++ b/lib/source-loader/package.json @@ -49,7 +49,7 @@ "global": "^4.4.0", "loader-utils": "^2.0.0", "lodash": "^4.17.21", - "prettier": "^2.2.1", + "prettier": "<=2.3.0", "regenerator-runtime": "^0.13.7" }, "peerDependencies": { diff --git a/package.json b/package.json index c70d17f23768..4f69ad63f944 100644 --- a/package.json +++ b/package.json @@ -259,7 +259,7 @@ "npmlog": "^5.0.1", "p-limit": "^3.1.0", "postcss-loader": "^4.2.0", - "prettier": "^2.2.1", + "prettier": "<=2.3.0", "prompts": "^2.4.0", "raf": "^3.4.1", "regenerator-runtime": "^0.13.7", diff --git a/yarn.lock b/yarn.lock index 1661ba9e1d45..d57b07bae343 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7079,7 +7079,7 @@ __metadata: lodash: ^4.17.21 nanoid: ^3.1.23 p-limit: ^3.1.0 - prettier: ^2.2.1 + prettier: <=2.3.0 prop-types: ^15.7.2 react-element-to-jsx-string: ^14.3.4 regenerator-runtime: ^0.13.7 @@ -7483,7 +7483,7 @@ __metadata: core-js: ^3.8.2 estraverse: ^5.2.0 loader-utils: ^2.0.0 - prettier: ^2.2.1 + prettier: <=2.3.0 prop-types: ^15.7.2 react-syntax-highlighter: ^13.5.3 regenerator-runtime: ^0.13.7 @@ -8068,7 +8068,7 @@ __metadata: jest-specific-snapshot: ^4.0.0 jscodeshift: ^0.7.0 lodash: ^4.17.21 - prettier: ^2.2.1 + prettier: <=2.3.0 recast: ^0.19.0 regenerator-runtime: ^0.13.7 languageName: unknown @@ -8335,7 +8335,7 @@ __metadata: js-string-escape: ^1.0.1 js-yaml: ^3.14.1 lodash: ^4.17.21 - prettier: ^2.2.1 + prettier: <=2.3.0 regenerator-runtime: ^0.13.7 ts-dedent: ^2.0.0 languageName: unknown @@ -9015,7 +9015,7 @@ __metadata: npmlog: ^5.0.1 p-limit: ^3.1.0 postcss-loader: ^4.2.0 - prettier: ^2.2.1 + prettier: <=2.3.0 prompts: ^2.4.0 puppeteer: ^2.1.1 raf: ^3.4.1 @@ -9183,7 +9183,7 @@ __metadata: global: ^4.4.0 loader-utils: ^2.0.0 lodash: ^4.17.21 - prettier: ^2.2.1 + prettier: <=2.3.0 regenerator-runtime: ^0.13.7 peerDependencies: react: ^16.8.0 || ^17.0.0 @@ -36562,6 +36562,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"prettier@npm:<=2.3.0": + version: 2.3.0 + resolution: "prettier@npm:2.3.0" + bin: + prettier: bin-prettier.js + checksum: b9f434af2f25a37aad0b133894827e980885eb8bf317444c9dde0401ed2c7f463f9996d691f5ee5a0a4450ab46a894cd6557516b561e2522821522ce1f4c6668 + languageName: node + linkType: hard + "prettier@npm:^1.18.2": version: 1.19.1 resolution: "prettier@npm:1.19.1" @@ -36571,15 +36580,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"prettier@npm:^2.2.1": - version: 2.2.1 - resolution: "prettier@npm:2.2.1" - bin: - prettier: bin-prettier.js - checksum: 4041ff87d6cba9134a8e0eb74a9e7f50f7091de6b95f5a6fb1928795c7d0584ae46806e0d75588fbc912b2cda2439d28a14fb84416946384cf71d60f5a0a68a6 - languageName: node - linkType: hard - "pretty-bytes@npm:^5.1.0, pretty-bytes@npm:^5.3.0, pretty-bytes@npm:^5.6.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0" From f2a72564bb19022f81f04f2157066607a528c835 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 3 Jan 2022 23:15:23 +0800 Subject: [PATCH 5/8] Merge pull request #17022 from Taillook/chore/react-dev-utils React: Remove react-dev-utils --- app/react/package.json | 3 +- lib/builder-webpack4/package.json | 2 - .../src/preview/iframe-webpack.config.ts | 3 - lib/builder-webpack5/package.json | 2 - .../src/preview/iframe-webpack.config.ts | 3 - .../cra-ts-essentials_preview-dev | 2 +- .../html-kitchen-sink_preview-dev | 1 - .../src/__snapshots__/vue-3-cli_preview-dev | 1 - .../web-components-kitchen-sink_preview-dev | 1 - yarn.lock | 101 ++---------------- 10 files changed, 8 insertions(+), 111 deletions(-) diff --git a/app/react/package.json b/app/react/package.json index cef46c3254a0..e96854adec0f 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -65,8 +65,7 @@ "global": "^4.4.0", "lodash": "^4.17.21", "prop-types": "^15.7.2", - "react-dev-utils": "^11.0.4", - "react-refresh": "^0.10.0", + "react-refresh": "^0.11.0", "read-pkg-up": "^7.0.1", "regenerator-runtime": "^0.13.7", "ts-dedent": "^2.0.0", diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json index 3ad781d56a46..b67c2a34f97b 100644 --- a/lib/builder-webpack4/package.json +++ b/lib/builder-webpack4/package.json @@ -98,7 +98,6 @@ "postcss-flexbugs-fixes": "^4.2.1", "postcss-loader": "^4.2.0", "raw-loader": "^4.0.2", - "react-dev-utils": "^11.0.4", "stable": "^0.1.8", "style-loader": "^1.3.0", "terser-webpack-plugin": "^4.2.3", @@ -113,7 +112,6 @@ }, "devDependencies": { "@types/case-sensitive-paths-webpack-plugin": "^2.1.4", - "@types/react-dev-utils": "^9.0.4", "@types/terser-webpack-plugin": "^5.0.2", "@types/webpack-dev-middleware": "^3.7.3", "@types/webpack-hot-middleware": "^2.25.3", diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 524a733bd1e9..45f8927f8b0c 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -4,7 +4,6 @@ import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin } from 'webpac import type { Configuration, RuleSetRule } from '@types/webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; -import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin'; import TerserWebpackPlugin from 'terser-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; import PnpWebpackPlugin from 'pnp-webpack-plugin'; @@ -19,7 +18,6 @@ import { es6Transpiler, handlebars, interpolate, - nodeModulesPaths, Options, toImportFn, normalizeStories, @@ -210,7 +208,6 @@ export default async (options: Options & Record): Promise): Promise Date: Fri, 14 Jan 2022 19:23:18 +0800 Subject: [PATCH 6/8] Merge pull request #17241 from storybookjs/17008-fix-staticdirs-favicon Core: Fix staticDirs favicon handling by refactor --- .../cra-ts-essentials_manager-prod | 247 +++++++++++++++++- .../cra-ts-essentials_preview-prod | 4 +- lib/core-server/src/utils/server-statics.ts | 31 +-- 3 files changed, 262 insertions(+), 20 deletions(-) diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod index 0f9cc7677236..ddac44d15324 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod @@ -1,6 +1,251 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`cra-ts-essentials manager production mode 1`] = ` +exports[`cra-ts-essentials manager dev 1`] = ` +Object { + "entry": Array [ + "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", + "ROOT/lib/core-client/dist/esm/globals/polyfills.js", + "ROOT/lib/core-client/dist/esm/manager/index.js", + "ROOT/addons/docs/dist/esm/register.js", + "ROOT/addons/controls/dist/esm/register.js", + "ROOT/addons/actions/dist/esm/register.js", + "ROOT/addons/backgrounds/dist/esm/register.js", + "ROOT/addons/toolbars/dist/esm/register.js", + "ROOT/addons/measure/dist/esm/register.js", + "ROOT/addons/outline/dist/esm/register.js", + ], + "keys": Array [ + "name", + "mode", + "bail", + "devtool", + "entry", + "output", + "watchOptions", + "plugins", + "module", + "resolve", + "resolveLoader", + "recordsPath", + "performance", + "optimization", + ], + "module": Object { + "rules": Array [ + Object { + "exclude": Array [ + "NODE_MODULES/", + "/dist/", + ], + "include": Array [ + "ROOT", + ], + "test": "/\\\\.(mjs|tsx?|jsx?)$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "configFile": false, + "plugins": Array [ + "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", + Object { + "legacy": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", + Object { + "loose": true, + }, + ], + "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", + "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", + Object { + "loose": true, + "useBuiltIns": true, + }, + ], + "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", + "NODE_MODULES/babel-plugin-macros/dist/index.js", + "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", + "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", + Array [ + "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", + Object { + "absoluteImports": "NODE_MODULES/core-js/index.js", + "method": "usage-global", + "version": "*", + }, + ], + "NODE_MODULES/@babel/plugin-transform-template-literals/lib/index.js", + ], + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "loose": true, + "shippedProposals": true, + }, + ], + "NODE_MODULES/@babel/preset-typescript/lib/index.js", + "NODE_MODULES/@babel/preset-react/lib/index.js", + ], + "sourceType": "unambiguous", + }, + }, + ], + }, + Object { + "include": [Function], + "test": "/\\\\.js$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "plugins": Array [ + "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", + Object { + "legacy": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", + Object { + "loose": true, + }, + ], + "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", + "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", + Object { + "loose": true, + "useBuiltIns": true, + }, + ], + "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", + "NODE_MODULES/babel-plugin-macros/dist/index.js", + "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", + "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", + Array [ + "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", + Object { + "absoluteImports": "NODE_MODULES/core-js/index.js", + "method": "usage-global", + "version": "*", + }, + ], + ], + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "loose": true, + "modules": false, + "shippedProposals": true, + "targets": "defaults", + }, + ], + "NODE_MODULES/@babel/preset-react/lib/index.js", + ], + "sourceType": "unambiguous", + }, + }, + ], + }, + Object { + "test": "/\\\\.css$/", + "use": Array [ + "NODE_MODULES/style-loader/dist/cjs.js", + Object { + "loader": "NODE_MODULES/css-loader/dist/cjs.js", + "options": Object { + "importLoaders": 1, + }, + }, + ], + }, + Object { + "loader": "NODE_MODULES/file-loader/dist/cjs.js", + "options": Object { + "name": "static/media/[name].[contenthash:8].[ext]", + }, + "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/", + }, + Object { + "loader": "NODE_MODULES/url-loader/dist/cjs.js", + "options": Object { + "limit": 10000, + "name": "static/media/[name].[contenthash:8].[ext]", + }, + "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/", + }, + Object { + "include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/", + "test": "/\\\\.js$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "presets": Array [ + Array [ + "@babel/preset-env", + Object { + "targets": Object { + "ie": "11", + }, + }, + "storybook-addon-ie11", + ], + ], + "sourceType": "unambiguous", + }, + }, + ], + }, + ], + }, + "plugins": Array [ + "VirtualModulesPlugin", + "HtmlWebpackPlugin", + "CaseSensitivePathsPlugin", + "DefinePlugin", + ], +} +`; + +exports[`cra-ts-essentials manager prod 1`] = ` Object { "entry": Array [ "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod index f0b51e148bc0..4237af66e6f3 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod @@ -1,6 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`cra-ts-essentials preview production mode 1`] = ` +exports[`cra-ts-essentials preview dev 1`] = `null`; + +exports[`cra-ts-essentials preview prod 1`] = ` Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", diff --git a/lib/core-server/src/utils/server-statics.ts b/lib/core-server/src/utils/server-statics.ts index d9fbfb46812a..077b9c896d22 100644 --- a/lib/core-server/src/utils/server-statics.ts +++ b/lib/core-server/src/utils/server-statics.ts @@ -25,27 +25,22 @@ export async function useStatics(router: any, options: Options) { `); } - if (staticDirs) { - staticDirs.forEach(async (dir) => { - const staticDirAndTarget = typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`; - const { staticPath: from, targetEndpoint: to } = await parseStaticDir( - getDirectoryFromWorkingDir({ - configDir: options.configDir, - workingDir: process.cwd(), - directory: staticDirAndTarget, - }) - ); + const statics = staticDirs + ? staticDirs.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`)) + : options.staticDir; - logger.info(chalk`=> Serving static files from {cyan ${from}} at {cyan ${to}}`); - router.use(to, express.static(from, { index: false })); - }); - } - - if (options.staticDir && options.staticDir.length > 0) { + if (statics && statics.length > 0) { await Promise.all( - options.staticDir.map(async (dir) => { + statics.map(async (dir) => { try { - const { staticDir, staticPath, targetEndpoint } = await parseStaticDir(dir); + const relativeDir = staticDirs + ? getDirectoryFromWorkingDir({ + configDir: options.configDir, + workingDir: process.cwd(), + directory: dir, + }) + : dir; + const { staticDir, staticPath, targetEndpoint } = await parseStaticDir(relativeDir); logger.info( chalk`=> Serving static files from {cyan ${staticDir}} at {cyan ${targetEndpoint}}` ); From a5335736c79721332a22c5c52daed76daec70092 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 15 Jan 2022 11:08:33 +0800 Subject: [PATCH 7/8] Fix prettier 2.3 formatting on main --- addons/a11y/src/components/A11YPanel.tsx | 7 +- .../actions/src/preset/addArgsHelpers.test.ts | 40 ++-- .../react/lib/inspection/acornParser.ts | 2 +- .../react/propTypes/handleProp.test.tsx | 18 +- .../react/react-argtypes.stories.tsx | 2 +- .../frameworks/react/react-properties.test.ts | 4 +- .../web-components/prepareForInline.ts | 2 +- .../src/lib/docgen/flow/createPropDef.test.ts | 3 +- addons/links/src/preview.test.ts | 2 +- addons/links/src/preview.ts | 24 +-- .../links/src/react/components/link.test.tsx | 2 +- .../storyshots-core/src/frameworks/Loader.ts | 4 +- .../src/frameworks/configure.ts | 19 +- .../storyshots-puppeteer/src/axeTest.ts | 9 +- .../angular/components/app.component.ts | 5 +- .../src/client/preview/decorateStory.ts | 21 +-- app/angular/src/client/preview/decorators.ts | 82 ++++---- .../server/angular-devkit-build-webpack.ts | 35 ++-- .../server/framework-preset-angular-cli.ts | 8 +- .../src/server/framework-preset-angular.ts | 2 +- app/ember/src/client/preview/index.ts | 10 +- app/preact/src/client/preview/render.tsx | 2 +- app/react/src/client/preview/types-6-3.ts | 20 +- app/react/src/client/preview/types-7-0.ts | 5 +- app/react/src/server/cra-config.test.ts | 8 +- app/server/src/client/preview/index.ts | 10 +- app/svelte/src/client/preview/decorators.ts | 39 ++-- app/svelte/src/client/preview/index.ts | 16 +- app/vue/src/client/preview/decorateStory.ts | 4 +- app/vue3/src/client/preview/decorateStory.ts | 4 +- lib/addons/src/hooks.ts | 59 +++--- lib/api/src/index.tsx | 16 +- lib/api/src/lib/stories.ts | 2 +- lib/api/src/modules/refs.ts | 2 +- lib/api/src/modules/release-notes.ts | 14 +- lib/api/src/modules/versions.ts | 14 +- lib/api/src/tests/events.test.ts | 2 +- lib/api/src/tests/globals.test.ts | 16 +- lib/api/src/tests/shortcuts.test.js | 33 ++-- lib/api/src/tests/versions.test.js | 78 ++++++-- lib/builder-webpack5/src/index.ts | 4 +- lib/cli/src/initiate.ts | 23 +-- .../JsPackageManagerFactory.test.ts | 2 +- lib/client-api/src/ClientApi.test.ts | 6 +- lib/client-logger/src/index.ts | 54 +++--- lib/components/scripts/writeCssScript.js | 54 +++--- lib/components/src/Loader/Loader.tsx | 83 ++++---- .../src/ScrollArea/GlobalScrollAreaStyles.tsx | 178 +++++++++--------- lib/components/src/controls/Color.tsx | 9 +- lib/components/src/controls/Object.tsx | 41 ++-- lib/components/src/icon/icons.tsx | 96 ++++------ .../src/typography/DocumentWrapper.tsx | 18 +- lib/core-common/src/config.test.ts | 6 +- lib/core-common/src/presets.ts | 46 ++--- .../__tests__/to-require-context.test.ts | 6 +- lib/core-common/src/utils/envs.ts | 7 +- .../src/utils/progress-reporting.ts | 7 +- lib/core-server/src/build-dev.ts | 6 +- .../src/utils/output-startup-information.ts | 11 +- .../src/utils/stories-json.test.ts | 8 +- lib/csf-tools/src/mdx/sb-mdx-plugin.ts | 7 +- lib/manager-webpack4/src/index.ts | 4 +- .../src/presets/manager-preset.ts | 10 +- lib/manager-webpack5/src/index.ts | 4 +- .../src/presets/manager-preset.ts | 10 +- lib/preview-web/src/PreviewWeb.tsx | 6 +- lib/preview-web/src/parseArgsParam.ts | 3 +- lib/preview-web/src/types.ts | 9 +- lib/router/src/utils.ts | 3 +- .../abstract-syntax-tree/generate-helpers.js | 8 +- .../abstract-syntax-tree/inject-decorator.js | 12 +- lib/store/src/decorators.ts | 16 +- lib/store/src/storySort.ts | 149 ++++++++------- lib/store/src/types.ts | 66 ++++--- lib/ui/src/components/layout/mobile.tsx | 12 +- .../components/preview/preview.mockdata.tsx | 6 +- lib/ui/src/components/preview/preview.tsx | 8 +- lib/ui/src/components/preview/toolbar.tsx | 16 +- lib/ui/src/components/sidebar/Refs.tsx | 7 +- lib/ui/src/components/sidebar/Search.tsx | 7 +- .../src/components/sidebar/mockdata.large.ts | 88 ++++----- scripts/build-package.js | 3 +- scripts/build-storybooks.js | 3 +- scripts/run-e2e.ts | 3 +- 84 files changed, 881 insertions(+), 889 deletions(-) diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx index a00d6178440a..41173cb2afa9 100644 --- a/addons/a11y/src/components/A11YPanel.tsx +++ b/addons/a11y/src/components/A11YPanel.tsx @@ -94,9 +94,10 @@ export const A11YPanel: React.FC = () => { emit(EVENTS.MANUAL, storyId); }, [storyId]); - const manualActionItems = useMemo(() => [{ title: 'Run test', onClick: handleManual }], [ - handleManual, - ]); + const manualActionItems = useMemo( + () => [{ title: 'Run test', onClick: handleManual }], + [handleManual] + ); const readyActionItems = useMemo( () => [ { diff --git a/addons/actions/src/preset/addArgsHelpers.test.ts b/addons/actions/src/preset/addArgsHelpers.test.ts index dd388ef3d665..0cdd4bd8d768 100644 --- a/addons/actions/src/preset/addArgsHelpers.test.ts +++ b/addons/actions/src/preset/addArgsHelpers.test.ts @@ -7,11 +7,11 @@ describe('actions parameter enhancers', () => { const argTypes = { onClick: {}, onFocus: {}, somethingElse: {} }; it('should add actions that match a pattern', () => { - const args = inferActionsFromArgTypesRegex(({ + const args = inferActionsFromArgTypesRegex({ initialArgs: {}, argTypes, parameters, - } as unknown) as StoryContext); + } as unknown as StoryContext); expect(args).toEqual({ onClick: expect.any(Function), onFocus: expect.any(Function), @@ -19,41 +19,41 @@ describe('actions parameter enhancers', () => { }); it('should NOT override pre-existing args', () => { - const args = inferActionsFromArgTypesRegex(({ + const args = inferActionsFromArgTypesRegex({ initialArgs: { onClick: 'pre-existing value' }, argTypes, parameters, - } as unknown) as StoryContext); + } as unknown as StoryContext); expect(args).toEqual({ onFocus: expect.any(Function) }); }); it('should NOT override pre-existing args, if null', () => { - const args = inferActionsFromArgTypesRegex(({ + const args = inferActionsFromArgTypesRegex({ initialArgs: { onClick: null }, argTypes, parameters, - } as unknown) as StoryContext); + } as unknown as StoryContext); expect(args).toEqual({ onFocus: expect.any(Function) }); }); it('should override pre-existing args, if undefined', () => { - const args = inferActionsFromArgTypesRegex(({ + const args = inferActionsFromArgTypesRegex({ initialArgs: { onClick: undefined }, argTypes, parameters, - } as unknown) as StoryContext); + } as unknown as StoryContext); expect(args).toEqual({ onClick: expect.any(Function), onFocus: expect.any(Function) }); }); it('should do nothing if actions are disabled', () => { - const args = inferActionsFromArgTypesRegex(({ + const args = inferActionsFromArgTypesRegex({ initialArgs: {}, argTypes, parameters: { ...parameters, actions: { ...parameters.actions, disable: true }, }, - } as unknown) as StoryContext); + } as unknown as StoryContext); expect(args).toEqual({}); }); }); @@ -65,11 +65,11 @@ describe('actions parameter enhancers', () => { }; it('should add actions based on action.args', () => { expect( - addActionsFromArgTypes(({ + addActionsFromArgTypes({ initialArgs: {}, argTypes, parameters: {}, - } as unknown) as StoryContext) + } as unknown as StoryContext) ).toEqual({ onClick: expect.any(Function), onBlur: expect.any(Function), @@ -78,41 +78,41 @@ describe('actions parameter enhancers', () => { it('should NOT override pre-existing args', () => { expect( - addActionsFromArgTypes(({ + addActionsFromArgTypes({ argTypes: { onClick: { action: 'clicked!' } }, initialArgs: { onClick: 'pre-existing value' }, parameters: {}, - } as unknown) as StoryContext) + } as unknown as StoryContext) ).toEqual({}); }); it('should NOT override pre-existing args, if null', () => { expect( - addActionsFromArgTypes(({ + addActionsFromArgTypes({ argTypes: { onClick: { action: 'clicked!' } }, initialArgs: { onClick: null }, parameters: {}, - } as unknown) as StoryContext) + } as unknown as StoryContext) ).toEqual({}); }); it('should override pre-existing args, if undefined', () => { expect( - addActionsFromArgTypes(({ + addActionsFromArgTypes({ argTypes: { onClick: { action: 'clicked!' } }, initialArgs: { onClick: undefined }, parameters: {}, - } as unknown) as StoryContext) + } as unknown as StoryContext) ).toEqual({ onClick: expect.any(Function) }); }); it('should do nothing if actions are disabled', () => { expect( - addActionsFromArgTypes(({ + addActionsFromArgTypes({ initialArgs: {}, argTypes, parameters: { actions: { disable: true } }, - } as unknown) as StoryContext) + } as unknown as StoryContext) ).toEqual({}); }); }); diff --git a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts index 28a5a7ad2267..0d82841057ed 100644 --- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts +++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts @@ -207,7 +207,7 @@ function parseExpression(expression: any): ParsingResult } export function parse(value: string): ParsingResult { - const ast = (acornParser.parse(`(${value})`) as unknown) as estree.Program; + const ast = acornParser.parse(`(${value})`) as unknown as estree.Program; let parsingResult: ParsingResult = { inferredType: { type: InspectionType.UNKNOWN }, diff --git a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx index dcbcecb5e16d..4483a6a1f754 100644 --- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx +++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx @@ -107,8 +107,7 @@ describe('enhancePropTypesProp', () => { const component = createTestComponent({ type: { name: 'custom', - raw: - '{\n text: PropTypes.string.isRequired,\n value1: PropTypes.string.isRequired,\n value2: PropTypes.string.isRequired,\n value3: PropTypes.string.isRequired,\n value4: PropTypes.string.isRequired,\n}', + raw: '{\n text: PropTypes.string.isRequired,\n value1: PropTypes.string.isRequired,\n value2: PropTypes.string.isRequired,\n value3: PropTypes.string.isRequired,\n value4: PropTypes.string.isRequired,\n}', }, }); @@ -144,8 +143,7 @@ describe('enhancePropTypesProp', () => { const component = createTestComponent({ type: { name: 'custom', - raw: - 'function InlinedFunctionalComponent() {\n return
Inlined FunctionalComponent!
;\n}', + raw: 'function InlinedFunctionalComponent() {\n return
Inlined FunctionalComponent!
;\n}', }, }); @@ -164,8 +162,7 @@ describe('enhancePropTypesProp', () => { const component = createTestComponent({ type: { name: 'custom', - raw: - '
Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
', + raw: '
Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
', }, }); @@ -203,8 +200,7 @@ describe('enhancePropTypesProp', () => { const component = createTestComponent({ type: { name: 'custom', - raw: - 'Symbol("A very very very very very very lonnnngggggggggggggggggggggggggggggggggggg symbol")', + raw: 'Symbol("A very very very very very very lonnnngggggggggggggggggggggggggggggggggggg symbol")', }, }); @@ -608,8 +604,7 @@ describe('enhancePropTypesProp', () => { name: 'objectOf', value: { name: 'custom', - raw: - '{\n foo: PropTypes.string,\n bar: PropTypes.string,\n another: PropTypes.string,\n anotherAnother: PropTypes.string,\n}', + raw: '{\n foo: PropTypes.string,\n bar: PropTypes.string,\n another: PropTypes.string,\n anotherAnother: PropTypes.string,\n}', }, }, }); @@ -815,8 +810,7 @@ describe('enhancePropTypesProp', () => { name: 'arrayOf', value: { name: 'custom', - raw: - '{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n another: PropTypes.string.isRequired,\n another2: PropTypes.string.isRequired,\n another3: PropTypes.string.isRequired,\n another4: PropTypes.string.isRequired,\n}', + raw: '{\n text: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n another: PropTypes.string.isRequired,\n another2: PropTypes.string.isRequired,\n another3: PropTypes.string.isRequired,\n another4: PropTypes.string.isRequired,\n}', }, }, }); diff --git a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx index 0f6594721eb4..5f98016d96a3 100644 --- a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx +++ b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx @@ -11,7 +11,7 @@ import { Component } from '../../blocks'; const argsTableProps = (component: Component) => { const argTypes = extractArgTypes(component); const parameters = { __isArgsStory: true }; - const rows = inferControls(({ argTypes, parameters } as unknown) as StoryContext); + const rows = inferControls({ argTypes, parameters } as unknown as StoryContext); return { rows }; }; diff --git a/addons/docs/src/frameworks/react/react-properties.test.ts b/addons/docs/src/frameworks/react/react-properties.test.ts index 30bdc5aa69c1..bf6e9b4e967f 100644 --- a/addons/docs/src/frameworks/react/react-properties.test.ts +++ b/addons/docs/src/frameworks/react/react-properties.test.ts @@ -71,10 +71,10 @@ describe('react component properties', () => { // snapshot the output of `extractArgTypes` const argTypes = extractArgTypes(component); const parameters = { __isArgsStory: true }; - const rows = inferControls(({ + const rows = inferControls({ argTypes, parameters, - } as unknown) as StoryContext); + } as unknown as StoryContext); expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot')); }); } diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/addons/docs/src/frameworks/web-components/prepareForInline.ts index dcdb86c3432b..75f7cc5a4304 100644 --- a/addons/docs/src/frameworks/web-components/prepareForInline.ts +++ b/addons/docs/src/frameworks/web-components/prepareForInline.ts @@ -17,5 +17,5 @@ export const prepareForInline = (storyFn: PartialStoryFn } } - return (React.createElement(Story) as unknown) as React.CElement<{}, React.Component>; + return React.createElement(Story) as unknown as React.CElement<{}, React.Component>; }; diff --git a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts index 4b563e3f86db..be5dc82fa69b 100644 --- a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts +++ b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts @@ -97,8 +97,7 @@ describe('type', () => { flowType: { name: 'signature', type: 'object', - raw: - '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }', + raw: '{ (x: string): void, prop1: string, prop2: string, prop3: string, prop4: string, prop5: string, prop6: string, prop7: string, prop8: string }', signature: { properties: [ { diff --git a/addons/links/src/preview.test.ts b/addons/links/src/preview.test.ts index e0013cf8545f..f5dd3af355f1 100644 --- a/addons/links/src/preview.test.ts +++ b/addons/links/src/preview.test.ts @@ -11,7 +11,7 @@ jest.mock('global', () => ({ window: global, })); -const mockAddons = (addons as unknown) as jest.Mocked; +const mockAddons = addons as unknown as jest.Mocked; describe('preview', () => { const channel = { emit: jest.fn() }; diff --git a/addons/links/src/preview.ts b/addons/links/src/preview.ts index aaf4b84e6ecc..0a49eff5a878 100644 --- a/addons/links/src/preview.ts +++ b/addons/links/src/preview.ts @@ -37,19 +37,19 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) => typeof value === 'function' ? value(...args) : value; -export const linkTo = (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) => ( - ...args: any[] -) => { - const resolver = valueOrCall(args); - const title = resolver(idOrTitle); - const name = resolver(nameInput); +export const linkTo = + (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) => + (...args: any[]) => { + const resolver = valueOrCall(args); + const title = resolver(idOrTitle); + const name = resolver(nameInput); - if (title?.match(/--/) && !name) { - navigate({ storyId: title }); - } else { - navigate({ kind: title, story: name }); - } -}; + if (title?.match(/--/) && !name) { + navigate({ storyId: title }); + } else { + navigate({ kind: title, story: name }); + } + }; const linksListener = (e: Event) => { const { target } = e; diff --git a/addons/links/src/react/components/link.test.tsx b/addons/links/src/react/components/link.test.tsx index ebef61478bdf..b2e75887549b 100644 --- a/addons/links/src/react/components/link.test.tsx +++ b/addons/links/src/react/components/link.test.tsx @@ -29,7 +29,7 @@ const mockChannel = () => { once: jest.fn(), }; }; -const mockAddons = (addons as unknown) as jest.Mocked; +const mockAddons = addons as unknown as jest.Mocked; describe('LinkTo', () => { describe('render', () => { diff --git a/addons/storyshots/storyshots-core/src/frameworks/Loader.ts b/addons/storyshots/storyshots-core/src/frameworks/Loader.ts index 0d15defea34f..43e0adbaf5b1 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/Loader.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/Loader.ts @@ -19,9 +19,7 @@ export interface ClientApi } export interface Loader { - load: ( - options: StoryshotsOptions - ) => { + load: (options: StoryshotsOptions) => { framework: SupportedFramework; renderTree: RenderTree; renderShallowTree: any; diff --git a/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/addons/storyshots/storyshots-core/src/frameworks/configure.ts index 37dd0d570834..8561768010b5 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/configure.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/configure.ts @@ -96,9 +96,12 @@ function configure( return; } - const { preview, features = {}, stories = [], requireContexts = [] } = getConfigPathParts( - configPath - ); + const { + preview, + features = {}, + stories = [], + requireContexts = [], + } = getConfigPathParts(configPath); global.FEATURES = features; global.STORIES = stories.map((specifier) => ({ @@ -108,14 +111,8 @@ function configure( if (preview) { // This is essentially the same code as lib/core/src/server/preview/virtualModuleEntry.template - const { - parameters, - decorators, - globals, - globalTypes, - argsEnhancers, - argTypesEnhancers, - } = jest.requireActual(preview); + const { parameters, decorators, globals, globalTypes, argsEnhancers, argTypesEnhancers } = + jest.requireActual(preview); if (decorators) { decorators.forEach((decorator: DecoratorFunction) => diff --git a/addons/storyshots/storyshots-puppeteer/src/axeTest.ts b/addons/storyshots/storyshots-puppeteer/src/axeTest.ts index d9db81952450..21548a4a0e0a 100644 --- a/addons/storyshots/storyshots-puppeteer/src/axeTest.ts +++ b/addons/storyshots/storyshots-puppeteer/src/axeTest.ts @@ -9,8 +9,13 @@ export const axeTest = (customConfig: Partial = {}) => { return puppeteerTest({ ...extendedConfig, async testBody(page, testOptions) { - const { element = '#root', exclude, disabledRules, options, config } = - testOptions.context.parameters.a11y || {}; + const { + element = '#root', + exclude, + disabledRules, + options, + config, + } = testOptions.context.parameters.a11y || {}; await beforeAxeTest(page, options); const axe = new AxePuppeteer(page); axe.include(element); diff --git a/app/angular/src/client/preview/angular/components/app.component.ts b/app/angular/src/client/preview/angular/components/app.component.ts index 57bd79442abc..f4e6c0f60d66 100644 --- a/app/angular/src/client/preview/angular/components/app.component.ts +++ b/app/angular/src/client/preview/angular/components/app.component.ts @@ -48,9 +48,8 @@ export class AppComponent implements OnInit, OnDestroy { const componentRef = this.target.createComponent(compFactory); const { instance } = componentRef; // For some reason, manual change detection ref is only working when getting the ref from the injector (rather than componentRef.changeDetectorRef) - const childChangeDetectorRef: ChangeDetectorRef = componentRef.injector.get( - ChangeDetectorRef - ); + const childChangeDetectorRef: ChangeDetectorRef = + componentRef.injector.get(ChangeDetectorRef); this.subscription = this.data.subscribe((newData) => { this.setProps(instance, newData); diff --git a/app/angular/src/client/preview/decorateStory.ts b/app/angular/src/client/preview/decorateStory.ts index 85ee8da7bf37..1f0643933a0d 100644 --- a/app/angular/src/client/preview/decorateStory.ts +++ b/app/angular/src/client/preview/decorateStory.ts @@ -9,18 +9,17 @@ export default function decorateStory( decorators: DecoratorFunction[] ): LegacyStoryFn { const returnDecorators = [cleanArgsDecorator, ...decorators].reduce( - (previousStoryFn: LegacyStoryFn, decorator) => ( - context: StoryContext - ) => { - const decoratedStory = decorator((update) => { - return previousStoryFn({ - ...context, - ...sanitizeStoryContextUpdate(update), - }); - }, context); + (previousStoryFn: LegacyStoryFn, decorator) => + (context: StoryContext) => { + const decoratedStory = decorator((update) => { + return previousStoryFn({ + ...context, + ...sanitizeStoryContextUpdate(update), + }); + }, context); - return decoratedStory; - }, + return decoratedStory; + }, (context) => prepareMain(mainStoryFn(context), context) ); diff --git a/app/angular/src/client/preview/decorators.ts b/app/angular/src/client/preview/decorators.ts index 8b2b3824c5a7..c74dcff99461 100644 --- a/app/angular/src/client/preview/decorators.ts +++ b/app/angular/src/client/preview/decorators.ts @@ -8,49 +8,51 @@ import { AngularFramework } from './types-6-0'; // We use `any` here as the default type rather than `Args` because we need something that is // castable to any component-specific args type when the user is being careful. -export const moduleMetadata = ( - metadata: Partial -): DecoratorFunction => (storyFn) => { - const story = storyFn(); - const storyMetadata = story.moduleMetadata || {}; - metadata = metadata || {}; +export const moduleMetadata = + (metadata: Partial): DecoratorFunction => + (storyFn) => { + const story = storyFn(); + const storyMetadata = story.moduleMetadata || {}; + metadata = metadata || {}; - return { - ...story, - moduleMetadata: { - declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])], - entryComponents: [ - ...(metadata.entryComponents || []), - ...(storyMetadata.entryComponents || []), - ], - imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])], - schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])], - providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])], - }, + return { + ...story, + moduleMetadata: { + declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])], + entryComponents: [ + ...(metadata.entryComponents || []), + ...(storyMetadata.entryComponents || []), + ], + imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])], + schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])], + providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])], + }, + }; }; -}; -export const componentWrapperDecorator = ( - element: Type | ((story: string) => string), - props?: ICollection | ((storyContext: StoryContext) => ICollection) -): DecoratorFunction => (storyFn, storyContext) => { - const story = storyFn(); - const currentProps = typeof props === 'function' ? (props(storyContext) as ICollection) : props; +export const componentWrapperDecorator = + ( + element: Type | ((story: string) => string), + props?: ICollection | ((storyContext: StoryContext) => ICollection) + ): DecoratorFunction => + (storyFn, storyContext) => { + const story = storyFn(); + const currentProps = typeof props === 'function' ? (props(storyContext) as ICollection) : props; - const template = isComponent(element) - ? computesTemplateFromComponent(element, currentProps ?? {}, story.template) - : element(story.template); + const template = isComponent(element) + ? computesTemplateFromComponent(element, currentProps ?? {}, story.template) + : element(story.template); - return { - ...story, - template, - ...(currentProps || story.props - ? { - props: { - ...currentProps, - ...story.props, - }, - } - : {}), + return { + ...story, + template, + ...(currentProps || story.props + ? { + props: { + ...currentProps, + ...story.props, + }, + } + : {}), + }; }; -}; diff --git a/app/angular/src/server/angular-devkit-build-webpack.ts b/app/angular/src/server/angular-devkit-build-webpack.ts index 9d9ed78cbd0b..cace158b8e06 100644 --- a/app/angular/src/server/angular-devkit-build-webpack.ts +++ b/app/angular/src/server/angular-devkit-build-webpack.ts @@ -47,21 +47,24 @@ const importAngularCliWebpackConfigGenerator = (): { }; }; -const importAngularCliReadTsconfigUtil = (): typeof import('@angular-devkit/build-angular/src/utils/read-tsconfig') => { - // First we look for webpack config according to directory structure of Angular 11 - if (moduleIsAvailable('@angular-devkit/build-angular/src/utils/read-tsconfig')) { - // eslint-disable-next-line global-require - return require('@angular-devkit/build-angular/src/utils/read-tsconfig'); - } - // We fallback on directory structure of Angular 10 (and below) - if ( - moduleIsAvailable('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig') - ) { - // eslint-disable-next-line global-require - return require('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig'); - } - throw new Error('ReadTsconfig not found in "@angular-devkit/build-angular"'); -}; +const importAngularCliReadTsconfigUtil = + (): typeof import('@angular-devkit/build-angular/src/utils/read-tsconfig') => { + // First we look for webpack config according to directory structure of Angular 11 + if (moduleIsAvailable('@angular-devkit/build-angular/src/utils/read-tsconfig')) { + // eslint-disable-next-line global-require + return require('@angular-devkit/build-angular/src/utils/read-tsconfig'); + } + // We fallback on directory structure of Angular 10 (and below) + if ( + moduleIsAvailable( + '@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig' + ) + ) { + // eslint-disable-next-line global-require + return require('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig'); + } + throw new Error('ReadTsconfig not found in "@angular-devkit/build-angular"'); + }; const buildWebpackConfigOptions = async ( dirToSearch: string, @@ -137,7 +140,7 @@ const buildWebpackConfigOptions = async ( return { root: getSystemPath(workspaceRootNormalized), // The dependency of `@angular-devkit/build-angular` to `@angular-devkit/core` is not exactly the same version as the one for storybook (node modules of node modules ^^) - logger: (createConsoleLogger() as unknown) as WebpackConfigOptions['logger'], + logger: createConsoleLogger() as unknown as WebpackConfigOptions['logger'], projectRoot: getSystemPath(projectRootNormalized), sourceRoot: sourceRootNormalized ? getSystemPath(sourceRootNormalized) : undefined, buildOptions, diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index ba559c1e5b5d..2d7d6da3eb1c 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -87,13 +87,13 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P function getBuilderContext(options: PresetOptions): BuilderContext { return ( options.angularBuilderContext ?? - (({ + ({ target: { project: 'noop-project', builder: '', options: {} }, workspaceRoot: process.cwd(), getProjectMetadata: () => ({}), getTargetOptions: () => ({}), logger: new logging.Logger('Storybook'), - } as unknown) as BuilderContext) + } as unknown as BuilderContext) ); } @@ -181,7 +181,9 @@ async function getLegacyDefaultBuildOptions(options: PresetOptions) { browserTarget.target ); - logger.info(`=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`); + logger.info( + `=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook` + ); return { ...target.options }; } catch (error) { logger.error(`=> Could not find angular project: ${error.message}`); diff --git a/app/angular/src/server/framework-preset-angular.ts b/app/angular/src/server/framework-preset-angular.ts index 8c15a333f235..1538f901c763 100644 --- a/app/angular/src/server/framework-preset-angular.ts +++ b/app/angular/src/server/framework-preset-angular.ts @@ -78,7 +78,7 @@ export async function webpack( /@angular(\\|\/)core(\\|\/)(fesm5|bundles)/, path.resolve(__dirname, '..') ), - (createForkTsCheckerInstance(tsLoaderOptions) as any) as Configuration['plugins'][0], + createForkTsCheckerInstance(tsLoaderOptions) as any as Configuration['plugins'][0], ], }; } diff --git a/app/ember/src/client/preview/index.ts b/app/ember/src/client/preview/index.ts index 78bc0f24d3bf..b2642044a9f8 100644 --- a/app/ember/src/client/preview/index.ts +++ b/app/ember/src/client/preview/index.ts @@ -5,14 +5,8 @@ import { renderToDOM } from './render'; const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM); -export const { - setAddon, - addDecorator, - addParameters, - clearDecorators, - getStorybook, - raw, -} = clientApi; +export const { setAddon, addDecorator, addParameters, clearDecorators, getStorybook, raw } = + clientApi; const framework = 'ember'; export const storiesOf = (kind: string, m: any) => diff --git a/app/preact/src/client/preview/render.tsx b/app/preact/src/client/preview/render.tsx index 095e2ebea50f..d78cfe699c8b 100644 --- a/app/preact/src/client/preview/render.tsx +++ b/app/preact/src/client/preview/render.tsx @@ -11,7 +11,7 @@ function preactRender(story: StoryFnPreactReturnType, domElement: HTMLElement): // Preact 10 only: preact.render(story, domElement); } else { - renderedStory = (preact.render(story, domElement, renderedStory) as unknown) as Element; + renderedStory = preact.render(story, domElement, renderedStory) as unknown as Element; } } diff --git a/app/react/src/client/preview/types-6-3.ts b/app/react/src/client/preview/types-6-3.ts index cb1025b975b4..85c72920bee1 100644 --- a/app/react/src/client/preview/types-6-3.ts +++ b/app/react/src/client/preview/types-6-3.ts @@ -10,9 +10,8 @@ export * from './types-6-0'; * export default { ... } as ComponentMeta; * ``` */ -export type ComponentMeta< - T extends keyof JSX.IntrinsicElements | JSXElementConstructor -> = Meta>; +export type ComponentMeta> = + Meta>; /** * For the common case where a (CSFv2) story is a simple component that receives args as props: @@ -21,9 +20,8 @@ export type ComponentMeta< * const Template: ComponentStory = (args) =>