From c8fecf0ad5c7bd333aa4f76a3a189f3713bb9d35 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 14 May 2021 12:32:54 +0800 Subject: [PATCH 1/3] CLI/Angular: Add ng12 + docs inline rendering support --- lib/cli/src/generators/ANGULAR/index.ts | 10 ++++-- lib/cli/src/generators/configure.ts | 45 +++++++++++++++---------- 2 files changed, 35 insertions(+), 20 deletions(-) diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts index 57a4758a41ad..5b6481a9279b 100644 --- a/lib/cli/src/generators/ANGULAR/index.ts +++ b/lib/cli/src/generators/ANGULAR/index.ts @@ -1,4 +1,5 @@ import path from 'path'; +import semver from '@storybook/semver'; import { isDefaultProjectSet, editStorybookTsConfig, @@ -8,6 +9,7 @@ import { } from './angular-helpers'; import { writeFileAsJson, copyTemplate } from '../../helpers'; import { baseGenerator, Generator } from '../baseGenerator'; +import { CoreBuilder } from '../../project_types'; function editAngularAppTsConfig() { const tsConfigJson = getAngularAppTsConfigJson(); @@ -31,8 +33,12 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.' ); } - baseGenerator(packageManager, npmOptions, options, 'angular', { - extraPackages: ['@compodoc/compodoc'], + const angularVersion = semver.coerce(await packageManager.getVersion('@angular/core'))?.version; + const isWebpack5 = semver.gte(angularVersion, '12.0.0'); + const updatedOptions = isWebpack5 ? { ...options, builder: CoreBuilder.Webpack5 } : options; + + baseGenerator(packageManager, npmOptions, updatedOptions, 'angular', { + extraPackages: ['@compodoc/compodoc', '@angular/elements', '@webcomponents/custom-elements'], addScripts: false, }); copyTemplate(__dirname, options.storyFormat); diff --git a/lib/cli/src/generators/configure.ts b/lib/cli/src/generators/configure.ts index 030605221ec8..2f1d6c3cd87e 100644 --- a/lib/cli/src/generators/configure.ts +++ b/lib/cli/src/generators/configure.ts @@ -1,4 +1,5 @@ import fse from 'fs-extra'; +import dedent from 'ts-dedent'; import { SupportedFrameworks } from '../project_types'; interface ConfigureMainOptions { @@ -43,27 +44,35 @@ function configureMain({ }); } -function configurePreview(framework: SupportedFrameworks, commonJs: boolean) { - const parameters = ` -export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, +const frameworkToPreviewParts: Partial> = { + angular: { + prefix: dedent` + import { setCompodocJson } from "@storybook/addon-docs/angular"; + import docJson from "../documentation.json"; + setCompodocJson(docJson); + + `.trimStart(), + extraParameters: 'docs: { inlineStories: true },', }, -}`; +}; - const preview = - framework === 'angular' - ? ` -import { setCompodocJson } from "@storybook/addon-docs/angular"; -import docJson from "../documentation.json"; -setCompodocJson(docJson); +function configurePreview(framework: SupportedFrameworks, commonJs: boolean) { + const { prefix = '', extraParameters = '' } = frameworkToPreviewParts[framework] || {}; -${parameters}` - : parameters; + const preview = dedent` + ${prefix} + export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + ${extraParameters} + }` + .replace(' \n', '') + .trim(); fse.writeFileSync(`./.storybook/preview.${commonJs ? 'cjs' : 'js'}`, preview, { encoding: 'utf8', From e6b3c9692b00390b7c736b0343bba74972b25e81 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 14 May 2021 14:34:18 +0800 Subject: [PATCH 2/3] Fix webpack5 IgnorePlugin --- addons/docs/src/frameworks/angular/preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/docs/src/frameworks/angular/preset.ts b/addons/docs/src/frameworks/angular/preset.ts index 919a2f44775f..b43999f72588 100644 --- a/addons/docs/src/frameworks/angular/preset.ts +++ b/addons/docs/src/frameworks/angular/preset.ts @@ -16,7 +16,7 @@ function makeAngularElementRendererOptional(): Plugin[] { ) { return []; } - return [new IgnorePlugin(/@storybook(\\|\/)angular(\\|\/)element-renderer/)]; + return [new IgnorePlugin({ resourceRegExp: /@storybook(\\|\/)angular(\\|\/)element-renderer/ })]; } function moduleIsAvailable(moduleName: string): boolean { From 34106a55288054fb7541d963f5c01496cfd15524 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 14 May 2021 15:34:01 +0800 Subject: [PATCH 3/3] Add angular 12 migration instructions --- MIGRATION.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 291e0008cb84..a4a8f4fba6a4 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 6.2.x to 6.3.0](#from-version-62x-to-630) + - [Angular 12 upgrade](#angular-12-upgrade) - [6.3 deprecations](#63-deprecations) - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports) - [From version 6.1.x to 6.2.0](#from-version-61x-to-620) @@ -9,6 +10,7 @@ - [New Angular storyshots format](#new-angular-storyshots-format) - [Deprecated Angular story component](#deprecated-angular-story-component) - [New Angular renderer](#new-angular-renderer) + - [Components without selectors](#components-without-selectors) - [Packages now available as ESModules](#packages-now-available-as-esmodules) - [6.2 Deprecations](#62-deprecations) - [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader) @@ -157,6 +159,24 @@ ## From version 6.2.x to 6.3.0 +### Angular 12 upgrade + +Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to do the following steps to force Storybook to use webpack 5 for building your project: + +```js +npm install @storybook/builder-webpack5 --save-dev # or yarn +``` + +The edit your `.storybook/main.js` config: + +```js +module.exports = { + core: { + builder: 'webpack5', + }, +}; +``` + ### 6.3 deprecations #### Deprecated scoped blocks imports @@ -224,7 +244,8 @@ export const parameters = { Please also file an issue if you need to opt out. We plan to remove the legacy renderer in 7.0. -#### Components Without Selectors +#### Components without selectors + When the new Angular renderer is used, all Angular Story components must either have a selector, or be added to the `entryComponents` array of the story's `moduleMetadata`. If the component has any `Input`s or `Output`s to be controlled with `args`, a selector should be added. ### Packages now available as ESModules