From 82ae93d829895c8dd4637c9cb229b5f07f779bff Mon Sep 17 00:00:00 2001 From: ThibaudAv Date: Fri, 2 Apr 2021 16:37:44 +0200 Subject: [PATCH 1/3] refactor(angular): use the full path to set configFile of TsconfigPathsPlugin with tsConfig --- app/angular/src/server/angular-cli_config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/src/server/angular-cli_config.ts b/app/angular/src/server/angular-cli_config.ts index e01dd2d047e..ff632c6f3cb 100644 --- a/app/angular/src/server/angular-cli_config.ts +++ b/app/angular/src/server/angular-cli_config.ts @@ -202,7 +202,7 @@ export function applyAngularCliWebpackConfig(baseConfig: any, cliWebpackConfigOp ), plugins: [ new TsconfigPathsPlugin({ - configFile: cliWebpackConfigOptions.buildOptions.tsConfig, + configFile: cliWebpackConfigOptions.tsConfigPath, // After ng build my-lib the default value of 'main' in the package.json is 'umd' // This causes that you cannot import components directly from dist // https://github.com/angular/angular-cli/blob/9f114aee1e009c3580784dd3bb7299bdf4a5918c/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L68 From 62c344e4c41fb2d199187e96da20f2c151156941 Mon Sep 17 00:00:00 2001 From: ThibaudAv Date: Fri, 26 Mar 2021 21:33:34 +0100 Subject: [PATCH 2/3] test(angular): add more test for framework-preset-angular-cli Adds tests in order to rework the code in next commit without changing the angular preset behavior --- .../empty-projects-entry/angular.json | 1 + .../minimal-config/angular.json | 17 + .../minimal-config/src/tsconfig.app.json | 9 + .../minimal-config/src/tsconfig.json | 13 + .../with-options-styles/angular.json | 16 + .../with-options-styles/src/styles.css | 2 + .../with-options-styles/src/styles.scss | 2 + .../with-options-styles/src/tsconfig.app.json | 9 + .../with-options-styles/src/tsconfig.json | 13 + .../angular.json | 10 + .../without-architect-build/angular.json | 4 + .../without-projects-entry/angular.json | 1 + .../framework-preset-angular-cli.test.ts | 361 ++++++++++++++++++ 13 files changed, 458 insertions(+) create mode 100644 app/angular/src/server/__mocks-ng-workspace__/empty-projects-entry/angular.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/styles.css create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/styles.scss create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options-assets/angular.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/without-architect-build/angular.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/angular.json create mode 100644 app/angular/src/server/framework-preset-angular-cli.test.ts diff --git a/app/angular/src/server/__mocks-ng-workspace__/empty-projects-entry/angular.json b/app/angular/src/server/__mocks-ng-workspace__/empty-projects-entry/angular.json new file mode 100644 index 00000000000..81b7da13537 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/empty-projects-entry/angular.json @@ -0,0 +1 @@ +{ "projects": {} } diff --git a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json new file mode 100644 index 00000000000..ac7d21f9eb2 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/angular.json @@ -0,0 +1,17 @@ +{ + "version": 1, + "projects": { + "foo-project": { + "root": "", + "architect": { + "build": { + "options": { + "tsConfig": "src/tsconfig.app.json", + "assets": [] + } + } + } + } + }, + "defaultProject": "foo-project" +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json new file mode 100644 index 00000000000..f04cfb481c9 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json @@ -0,0 +1,9 @@ +{ + "extends": "tsconfig.json", + "compilerOptions": { + "baseUrl": "./", + "module": "es2015", + "types": ["node"] + }, + "exclude": ["karma.ts", "**/*.spec.ts"] +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.json b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.json new file mode 100644 index 00000000000..ed46a09da32 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "sourceMap": true, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "skipLibCheck": true, + "target": "es5", + "lib": ["es2017", "dom"] + } +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json new file mode 100644 index 00000000000..9e43a066b85 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json @@ -0,0 +1,16 @@ +{ + "projects": { + "foo-project": { + "root": "", + "architect": { + "build": { + "options": { + "tsConfig": "src/tsconfig.app.json", + "styles": ["src/styles.css", "src/styles.scss"] + } + } + } + } + }, + "defaultProject": "foo-project" +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/styles.css b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/styles.css new file mode 100644 index 00000000000..25357ee7cc9 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/styles.css @@ -0,0 +1,2 @@ +.class { +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/styles.scss b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/styles.scss new file mode 100644 index 00000000000..25357ee7cc9 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/styles.scss @@ -0,0 +1,2 @@ +.class { +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json new file mode 100644 index 00000000000..f04cfb481c9 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json @@ -0,0 +1,9 @@ +{ + "extends": "tsconfig.json", + "compilerOptions": { + "baseUrl": "./", + "module": "es2015", + "types": ["node"] + }, + "exclude": ["karma.ts", "**/*.spec.ts"] +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.json b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.json new file mode 100644 index 00000000000..ed46a09da32 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "sourceMap": true, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "skipLibCheck": true, + "target": "es5", + "lib": ["es2017", "dom"] + } +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options-assets/angular.json b/app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options-assets/angular.json new file mode 100644 index 00000000000..4c0e02f10e4 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options-assets/angular.json @@ -0,0 +1,10 @@ +{ + "projects": { + "foo-project": { + "architect": { + "build": {} + } + } + }, + "defaultProject": "foo-project" +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/without-architect-build/angular.json b/app/angular/src/server/__mocks-ng-workspace__/without-architect-build/angular.json new file mode 100644 index 00000000000..2378b58eb71 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/without-architect-build/angular.json @@ -0,0 +1,4 @@ +{ + "projects": { "foo-project": {} }, + "defaultProject": "foo-project" +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/angular.json b/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/angular.json new file mode 100644 index 00000000000..0967ef424bc --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/angular.json @@ -0,0 +1 @@ +{} diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts new file mode 100644 index 00000000000..8626756bd97 --- /dev/null +++ b/app/angular/src/server/framework-preset-angular-cli.test.ts @@ -0,0 +1,361 @@ +/* eslint-disable jest/no-interpolation-in-snapshots */ +import { Configuration } from 'webpack'; +import { logger } from '@storybook/node-logger'; +import { webpackFinal } from './framework-preset-angular-cli'; + +// eslint-disable-next-line global-require, jest/no-mocks-import +jest.spyOn(logger, 'error').mockImplementation(); +jest.spyOn(logger, 'info').mockImplementation(); + +const testCwd = process.cwd(); +const cwdSpy = jest.spyOn(process, 'cwd'); + +let cwd = process.cwd(); + +const initMockWorkspace = (name: string) => { + cwdSpy.mockReturnValue(`${testCwd}/src/server/__mocks-ng-workspace__/${name}`); + cwd = process.cwd(); +}; + +beforeEach(() => { + jest.clearAllMocks(); +}); + +describe('framework-preset-angular-cli', () => { + describe('without angular.json', () => { + it('should return webpack base config and display log error', () => { + const webpackBaseConfig = newWebpackConfiguration(); + + const config = webpackFinal(webpackBaseConfig); + + expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config.'); + expect(logger.error).toHaveBeenCalledWith( + `Could not find angular.json using ${cwd}/angular.json` + ); + + expect(config).toEqual(webpackBaseConfig); + }); + }); + + describe("when angular.json haven't projects entry", () => { + beforeEach(() => { + initMockWorkspace('without-projects-entry'); + }); + it('throws error', () => { + expect(() => webpackFinal(newWebpackConfiguration())).toThrowError( + 'angular.json must have projects entry.' + ); + }); + }); + + describe('when angular.json have empty projects entry', () => { + beforeEach(() => { + initMockWorkspace('empty-projects-entry'); + }); + it('throws error', () => { + expect(() => webpackFinal(newWebpackConfiguration())).toThrowError( + 'angular.json must have projects entry.' + ); + }); + }); + + describe('when angular.json have projects without architect.build', () => { + beforeEach(() => { + initMockWorkspace('without-architect-build'); + }); + + it('throws error', () => { + expect(() => webpackFinal(newWebpackConfiguration())).toThrowError( + "Cannot read property 'build' of undefined" + ); + }); + }); + describe('when angular.json have projects without architect.build.options.assets', () => { + beforeEach(() => { + initMockWorkspace('without-architect-build-options-assets'); + }); + it('throws error', () => { + expect(() => webpackFinal(newWebpackConfiguration())).toThrowError( + "Cannot read property 'assets' of undefined" + ); + }); + }); + describe('when angular.json have minimal config', () => { + beforeEach(() => { + initMockWorkspace('minimal-config'); + }); + it('should log', () => { + const baseWebpackConfig = newWebpackConfiguration(); + webpackFinal(baseWebpackConfig); + + expect(logger.info).toHaveBeenCalledTimes(3); + expect(logger.info).toHaveBeenNthCalledWith( + 1, + "=> Using angular project 'foo-project' for configuring Storybook." + ); + expect(logger.info).toHaveBeenNthCalledWith(2, '=> Loading angular-cli config.'); + expect(logger.info).toHaveBeenNthCalledWith(3, '=> Get angular-cli webpack config.'); + }); + + it('should extends webpack base config', () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig).toEqual({ + ...baseWebpackConfig, + module: { ...baseWebpackConfig.module, rules: expect.anything() }, + plugins: expect.anything(), + resolve: { + ...baseWebpackConfig.resolve, + modules: expect.arrayContaining(baseWebpackConfig.resolve.modules), + // the base resolve.plugins are not kept 🤷‍♂️ + plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins), + }, + resolveLoader: expect.anything(), + }); + }); + + it('should set webpack "module.rules"', () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig.module.rules).toEqual([ + { + exclude: [], + test: /\.css$/, + use: expect.anything(), + }, + { + exclude: [], + test: /\.scss$|\.sass$/, + use: expect.anything(), + }, + { + exclude: [], + test: /\.less$/, + use: expect.anything(), + }, + { + exclude: [], + test: /\.styl$/, + use: expect.anything(), + }, + ...baseWebpackConfig.module.rules, + ]); + }); + + it('should set webpack "plugins"', () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig.plugins).toMatchInlineSnapshot(` + Array [ + AnyComponentStyleBudgetChecker { + "budgets": Array [], + }, + ContextReplacementPlugin { + "newContentRecursive": undefined, + "newContentRegExp": undefined, + "newContentResource": undefined, + "resourceRegExp": /\\\\@angular\\(\\\\\\\\\\|\\\\/\\)core\\(\\\\\\\\\\|\\\\/\\)/, + }, + DedupeModuleResolvePlugin { + "modules": Map {}, + "options": Object { + "verbose": undefined, + }, + }, + Object { + "keepBasePlugin": true, + }, + ] + `); + }); + + it('should set webpack "resolve.modules"', () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig.resolve.modules).toEqual([ + ...baseWebpackConfig.resolve.modules, + `${cwd}/src`, + ]); + }); + + it('should replace webpack "resolve.plugins"', () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig.resolve.plugins).toMatchInlineSnapshot(` + Array [ + TsconfigPathsPlugin { + "absoluteBaseUrl": "${cwd}/src/", + "baseUrl": "./", + "extensions": Array [ + ".ts", + ".tsx", + ], + "log": Object { + "log": [Function], + "logError": [Function], + "logInfo": [Function], + "logWarning": [Function], + }, + "matchPath": [Function], + "source": "described-resolve", + "target": "resolve", + }, + ] + `); + }); + }); + describe('when angular.json have "options.styles" config', () => { + beforeEach(() => { + initMockWorkspace('with-options-styles'); + }); + + it('should extends webpack base config', () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig).toEqual({ + ...baseWebpackConfig, + entry: [ + ...(baseWebpackConfig.entry as any[]), + `${cwd}/src/styles.css`, + `${cwd}/src/styles.scss`, + ], + module: { ...baseWebpackConfig.module, rules: expect.anything() }, + plugins: expect.anything(), + resolve: { + ...baseWebpackConfig.resolve, + modules: expect.arrayContaining(baseWebpackConfig.resolve.modules), + // the base resolve.plugins are not kept 🤷‍♂️ + plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins), + }, + resolveLoader: expect.anything(), + }); + }); + + it('should set webpack "module.rules"', () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig.module.rules).toEqual([ + { + exclude: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + test: /\.css$/, + use: expect.anything(), + }, + { + exclude: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + test: /\.scss$|\.sass$/, + use: expect.anything(), + }, + { + exclude: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + test: /\.less$/, + use: expect.anything(), + }, + { + exclude: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + test: /\.styl$/, + use: expect.anything(), + }, + { + include: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + test: /\.css$/, + use: expect.anything(), + }, + { + include: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + test: /\.scss$|\.sass$/, + use: expect.anything(), + }, + { + include: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + test: /\.less$/, + use: expect.anything(), + }, + { + include: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + test: /\.styl$/, + use: expect.anything(), + }, + ...baseWebpackConfig.module.rules, + ]); + }); + }); +}); + +const newWebpackConfiguration = ( + transformer: (c: Configuration) => Configuration = (c) => c +): Configuration => { + return transformer({ + name: 'preview', + mode: 'development', + bail: false, + devtool: 'cheap-module-source-map', + entry: [ + '/Users/joe/storybook/lib/core-server/dist/cjs/globals/polyfills.js', + '/Users/joe/storybook/lib/core-server/dist/cjs/globals/globals.js', + '/Users/joe/storybook/examples/angular-cli/.storybook/storybook-init-framework-entry.js', + '/Users/joe/storybook/addons/docs/dist/esm/frameworks/common/config.js-generated-other-entry.js', + '/Users/joe/storybook/addons/docs/dist/esm/frameworks/angular/config.js-generated-other-entry.js', + '/Users/joe/storybook/addons/actions/dist/esm/preset/addDecorator.js-generated-other-entry.js', + '/Users/joe/storybook/addons/actions/dist/esm/preset/addArgs.js-generated-other-entry.js', + '/Users/joe/storybook/addons/links/dist/esm/preset/addDecorator.js-generated-other-entry.js', + '/Users/joe/storybook/addons/knobs/dist/esm/preset/addDecorator.js-generated-other-entry.js', + '/Users/joe/storybook/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js', + '/Users/joe/storybook/addons/backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js', + '/Users/joe/storybook/addons/a11y/dist/esm/a11yRunner.js-generated-other-entry.js', + '/Users/joe/storybook/addons/a11y/dist/esm/a11yHighlight.js-generated-other-entry.js', + '/Users/joe/storybook/examples/angular-cli/.storybook/preview.ts-generated-config-entry.js', + '/Users/joe/storybook/examples/angular-cli/.storybook/generated-stories-entry.js', + '/Users/joe/storybook/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined', + ], + output: { + path: '/Users/joe/storybook/examples/angular-cli/node_modules/.cache/storybook/public', + filename: '[name].[hash].bundle.js', + publicPath: '', + }, + plugins: [{ keepBasePlugin: true } as any], + module: { + rules: [{ keepBaseRule: true } as any], + }, + resolve: { + extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'], + modules: ['node_modules'], + mainFields: ['browser', 'main'], + alias: { + '@emotion/core': '/Users/joe/storybook/node_modules/@emotion/core', + '@emotion/styled': '/Users/joe/storybook/node_modules/@emotion/styled', + 'emotion-theming': '/Users/joe/storybook/node_modules/emotion-theming', + '@storybook/addons': '/Users/joe/storybook/lib/addons', + '@storybook/api': '/Users/joe/storybook/lib/api', + '@storybook/channels': '/Users/joe/storybook/lib/channels', + '@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage', + '@storybook/components': '/Users/joe/storybook/lib/components', + '@storybook/core-events': '/Users/joe/storybook/lib/core-events', + '@storybook/router': '/Users/joe/storybook/lib/router', + '@storybook/theming': '/Users/joe/storybook/lib/theming', + '@storybook/semver': '/Users/joe/storybook/node_modules/@storybook/semver', + '@storybook/client-api': '/Users/joe/storybook/lib/client-api', + '@storybook/client-logger': '/Users/joe/storybook/lib/client-logger', + react: '/Users/joe/storybook/node_modules/react', + 'react-dom': '/Users/joe/storybook/node_modules/react-dom', + }, + plugins: [{ keepBasePlugin: true } as any], + }, + resolveLoader: { plugins: [] }, + optimization: { + splitChunks: { chunks: 'all' }, + runtimeChunk: true, + sideEffects: true, + usedExports: true, + concatenateModules: true, + minimizer: [], + }, + performance: { hints: false }, + }); +}; From 4f004183eafc9be7cf404b6dc2b1a22801e86201 Mon Sep 17 00:00:00 2001 From: ThibaudAv Date: Fri, 9 Apr 2021 16:01:37 +0200 Subject: [PATCH 3/3] refactor(angular): rework angular-cli preset Rework the code of angular-cli_config and angular-cli_utils to add future features Improvement: - Add test for NX - Use angular core to read the workspace instead of doing it by hand - Use angular-cli to read the tsconfig - Redesigned the code to get out the main steps + added error handling - Express more clearly the webpack config from angular-cli - Clarification of the logs - Improvement of the types with those of angular-cli --- .../empty-projects-entry/angular.json | 5 +- .../minimal-config/src/main.ts | 2 + .../minimal-config/src/tsconfig.app.json | 2 +- .../minimal-config/{src => }/tsconfig.json | 0 .../with-nx/angular.json | 17 ++ .../__mocks-ng-workspace__/with-nx/nx.json | 3 + .../with-nx/src/main.ts | 2 + .../with-nx/src/styles.css | 2 + .../with-nx/src/styles.scss | 2 + .../with-nx/src/tsconfig.app.json | 8 + .../with-nx/tsconfig.json | 14 + .../with-options-styles/angular.json | 1 + .../with-options-styles/src/main.ts | 2 + .../with-options-styles/src/tsconfig.app.json | 2 +- .../{src => }/tsconfig.json | 0 .../angular.json | 1 + .../without-architect-build/angular.json | 1 + .../without-compatible-projects/angular.json | 7 + .../without-projects-entry/angular.json | 4 +- .../__tests__/angular-cli_config.test.ts | 82 ------ app/angular/src/server/angular-cli_config.ts | 227 ---------------- app/angular/src/server/angular-cli_utils.ts | 123 --------- .../server/angular-devkit-build-webpack.ts | 199 ++++++++++++++ .../src/server/angular-read-workspace.ts | 81 ++++++ .../framework-preset-angular-cli.test.ts | 256 +++++++++++++----- .../server/framework-preset-angular-cli.ts | 118 +++++++- .../server/utils/filter-out-styling-rules.ts | 19 ++ .../src/server/utils/module-is-available.ts | 8 + .../server/utils/normalize-asset-patterns.ts | 84 ++++++ 29 files changed, 764 insertions(+), 508 deletions(-) create mode 100644 app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/main.ts rename app/angular/src/server/__mocks-ng-workspace__/minimal-config/{src => }/tsconfig.json (100%) create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-nx/nx.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-nx/src/main.ts create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-nx/src/styles.css create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-nx/src/styles.scss create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-nx/src/tsconfig.app.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-nx/tsconfig.json create mode 100644 app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/main.ts rename app/angular/src/server/__mocks-ng-workspace__/with-options-styles/{src => }/tsconfig.json (100%) rename app/angular/src/server/__mocks-ng-workspace__/{without-architect-build-options-assets => without-architect-build-options}/angular.json (89%) create mode 100644 app/angular/src/server/__mocks-ng-workspace__/without-compatible-projects/angular.json delete mode 100644 app/angular/src/server/__tests__/angular-cli_config.test.ts delete mode 100644 app/angular/src/server/angular-cli_config.ts delete mode 100644 app/angular/src/server/angular-cli_utils.ts create mode 100644 app/angular/src/server/angular-devkit-build-webpack.ts create mode 100644 app/angular/src/server/angular-read-workspace.ts create mode 100644 app/angular/src/server/utils/filter-out-styling-rules.ts create mode 100644 app/angular/src/server/utils/module-is-available.ts create mode 100644 app/angular/src/server/utils/normalize-asset-patterns.ts diff --git a/app/angular/src/server/__mocks-ng-workspace__/empty-projects-entry/angular.json b/app/angular/src/server/__mocks-ng-workspace__/empty-projects-entry/angular.json index 81b7da13537..98cc50ef4b9 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/empty-projects-entry/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/empty-projects-entry/angular.json @@ -1 +1,4 @@ -{ "projects": {} } +{ + "version": 1, + "projects": {} +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/main.ts b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/main.ts new file mode 100644 index 00000000000..63b661e3bd7 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/main.ts @@ -0,0 +1,2 @@ +// To avoid "No inputs were found in config file" tsc error +export const not = 'empty'; diff --git a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json index f04cfb481c9..644f410d7fb 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json +++ b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json @@ -1,5 +1,5 @@ { - "extends": "tsconfig.json", + "extends": "../tsconfig.json", "compilerOptions": { "baseUrl": "./", "module": "es2015", diff --git a/app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.json b/app/angular/src/server/__mocks-ng-workspace__/minimal-config/tsconfig.json similarity index 100% rename from app/angular/src/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.json rename to app/angular/src/server/__mocks-ng-workspace__/minimal-config/tsconfig.json diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json new file mode 100644 index 00000000000..39f1562a36a --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/angular.json @@ -0,0 +1,17 @@ +{ + "version": 1, + "projects": { + "foo-project": { + "root": "", + "architect": { + "build": { + "options": { + "tsConfig": "src/tsconfig.app.json", + "styles": ["src/styles.css", "src/styles.scss"] + } + } + } + } + }, + "defaultProject": "foo-project" +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/nx.json b/app/angular/src/server/__mocks-ng-workspace__/with-nx/nx.json new file mode 100644 index 00000000000..1e0f6b56902 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/nx.json @@ -0,0 +1,3 @@ +{ + "npmScope": "nx-example" +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/main.ts b/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/main.ts new file mode 100644 index 00000000000..63b661e3bd7 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/main.ts @@ -0,0 +1,2 @@ +// To avoid "No inputs were found in config file" tsc error +export const not = 'empty'; diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/styles.css b/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/styles.css new file mode 100644 index 00000000000..25357ee7cc9 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/styles.css @@ -0,0 +1,2 @@ +.class { +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/styles.scss b/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/styles.scss new file mode 100644 index 00000000000..25357ee7cc9 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/styles.scss @@ -0,0 +1,2 @@ +.class { +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/tsconfig.app.json b/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/tsconfig.app.json new file mode 100644 index 00000000000..e5a395ac067 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/src/tsconfig.app.json @@ -0,0 +1,8 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "baseUrl": "./", + "module": "es2015", + "types": ["node"] + } +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-nx/tsconfig.json b/app/angular/src/server/__mocks-ng-workspace__/with-nx/tsconfig.json new file mode 100644 index 00000000000..4c19c82b6ba --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-nx/tsconfig.json @@ -0,0 +1,14 @@ +{ + "include": ["./src"], + "compilerOptions": { + "sourceMap": true, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "skipLibCheck": true, + "target": "es5", + "lib": ["es2017", "dom"] + } +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json index 9e43a066b85..39f1562a36a 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/angular.json @@ -1,4 +1,5 @@ { + "version": 1, "projects": { "foo-project": { "root": "", diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/main.ts b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/main.ts new file mode 100644 index 00000000000..63b661e3bd7 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/main.ts @@ -0,0 +1,2 @@ +// To avoid "No inputs were found in config file" tsc error +export const not = 'empty'; diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json index f04cfb481c9..644f410d7fb 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json +++ b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json @@ -1,5 +1,5 @@ { - "extends": "tsconfig.json", + "extends": "../tsconfig.json", "compilerOptions": { "baseUrl": "./", "module": "es2015", diff --git a/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.json b/app/angular/src/server/__mocks-ng-workspace__/with-options-styles/tsconfig.json similarity index 100% rename from app/angular/src/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.json rename to app/angular/src/server/__mocks-ng-workspace__/with-options-styles/tsconfig.json diff --git a/app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options-assets/angular.json b/app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options/angular.json similarity index 89% rename from app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options-assets/angular.json rename to app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options/angular.json index 4c0e02f10e4..f734ee08896 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options-assets/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/without-architect-build-options/angular.json @@ -1,4 +1,5 @@ { + "version": 1, "projects": { "foo-project": { "architect": { diff --git a/app/angular/src/server/__mocks-ng-workspace__/without-architect-build/angular.json b/app/angular/src/server/__mocks-ng-workspace__/without-architect-build/angular.json index 2378b58eb71..8eead199dff 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/without-architect-build/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/without-architect-build/angular.json @@ -1,4 +1,5 @@ { + "version": 1, "projects": { "foo-project": {} }, "defaultProject": "foo-project" } diff --git a/app/angular/src/server/__mocks-ng-workspace__/without-compatible-projects/angular.json b/app/angular/src/server/__mocks-ng-workspace__/without-compatible-projects/angular.json new file mode 100644 index 00000000000..2e3757eb833 --- /dev/null +++ b/app/angular/src/server/__mocks-ng-workspace__/without-compatible-projects/angular.json @@ -0,0 +1,7 @@ +{ + "version": 1, + "projects": { + "noop-project": {} + }, + "defaultProject": "missing-project" +} diff --git a/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/angular.json b/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/angular.json index 0967ef424bc..61a2092b1b7 100644 --- a/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/angular.json +++ b/app/angular/src/server/__mocks-ng-workspace__/without-projects-entry/angular.json @@ -1 +1,3 @@ -{} +{ + "version": 1 +} diff --git a/app/angular/src/server/__tests__/angular-cli_config.test.ts b/app/angular/src/server/__tests__/angular-cli_config.test.ts deleted file mode 100644 index ae09891c020..00000000000 --- a/app/angular/src/server/__tests__/angular-cli_config.test.ts +++ /dev/null @@ -1,82 +0,0 @@ -import stripJsonComments from 'strip-json-comments'; -import { Path } from '@angular-devkit/core'; -import * as fs from 'fs'; -import * as path from 'path'; -import { - applyAngularCliWebpackConfig, - getAngularCliWebpackConfigOptions, - getLeadingAngularCliProject, -} from '../angular-cli_config'; - -describe('angular-cli_config', () => { - it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => { - const config = getAngularCliWebpackConfigOptions(__dirname as Path); - expect(config).toMatchObject({ - buildOptions: { - sourceMap: {}, - optimization: {}, - }, - }); - }); - - it('should use `storybook` project by default when `storybook` project is defined', () => { - // Lazy clone example angular json - const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8'); - const angularJsonWithStorybookProject = JSON.parse(stripJsonComments(angularJson)); - - // Add storybook project - angularJsonWithStorybookProject.projects.storybook = { - architect: { - build: { - options: { - assets: [], - styles: ['custom/styles'], - }, - }, - }, - }; - - const projectConfig = getLeadingAngularCliProject(angularJsonWithStorybookProject); - - // Assure configuration matches values from `storybook` project - expect(projectConfig).toMatchObject({ - architect: { - build: { - options: { - assets: [], - styles: ['custom/styles'], - }, - }, - }, - }); - }); - - it('should return null if `architect.build` option are not exists.', () => { - const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8'); - const angularJsonWithNoBuildOptions = JSON.parse(stripJsonComments(angularJson)); - angularJsonWithNoBuildOptions.projects['angular-cli'].architect.build = undefined; - - getLeadingAngularCliProject(angularJsonWithNoBuildOptions); - - const config = getAngularCliWebpackConfigOptions('/' as Path); - expect(config).toBeNull(); - }); - - it('should return baseConfig if no angular.json was found', () => { - const baseConfig = { test: 'config' }; - const projectConfig = getAngularCliWebpackConfigOptions('test-path' as Path); - const config = applyAngularCliWebpackConfig(baseConfig, projectConfig); - - expect(projectConfig).toBe(null); - expect(config).toBe(baseConfig); - }); - - it('should return empty `buildOptions.budgets` by default', () => { - const config = getAngularCliWebpackConfigOptions(__dirname as Path); - expect(config).toMatchObject({ - buildOptions: { - budgets: [], - }, - }); - }); -}); diff --git a/app/angular/src/server/angular-cli_config.ts b/app/angular/src/server/angular-cli_config.ts deleted file mode 100644 index ff632c6f3cb..00000000000 --- a/app/angular/src/server/angular-cli_config.ts +++ /dev/null @@ -1,227 +0,0 @@ -import { CompilerOptions } from 'typescript'; -import { Path } from '@angular-devkit/core'; -import path from 'path'; -import fs from 'fs'; -import { logger } from '@storybook/node-logger'; -import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'; -import stripJsonComments from 'strip-json-comments'; -import { - isBuildAngularInstalled, - normalizeAssetPatterns, - filterOutStylingRules, - getAngularCliParts, -} from './angular-cli_utils'; - -// todo add more accurate typings -interface BasicOptions { - options: { - baseUrl?: string | undefined; - }; - raw: object; - fileNames: string[]; - errors: any[]; -} - -function getTsConfigOptions(tsConfigPath: Path) { - const basicOptions: BasicOptions = { - options: {}, - raw: {}, - fileNames: [], - errors: [], - }; - - if (!fs.existsSync(tsConfigPath)) { - return basicOptions; - } - - const tsConfig = JSON.parse(stripJsonComments(fs.readFileSync(tsConfigPath, 'utf8'))); - - if (tsConfig.compilerOptions && tsConfig.compilerOptions.baseUrl) { - const { baseUrl } = tsConfig.compilerOptions as CompilerOptions; - const tsConfigDirName = path.dirname(tsConfigPath); - basicOptions.options.baseUrl = path.resolve(tsConfigDirName, baseUrl); - } - - return basicOptions; -} - -export function getAngularCliConfig(dirToSearch: string) { - let angularCliConfig; - try { - /** - * Apologies for the following line - * If there's a better way to do it, let's do it - */ - /* eslint-disable global-require */ - angularCliConfig = require('@nrwl/workspace').readWorkspaceConfig({ - format: 'angularCli', - }); - } catch (e) { - const possibleConfigNames = ['angular.json', 'workspace.json']; - const possibleConfigPaths = possibleConfigNames.map((name) => path.join(dirToSearch, name)); - - const validIndex = possibleConfigPaths.findIndex((configPath) => fs.existsSync(configPath)); - - if (validIndex === -1) { - logger.error(`Could not find angular.json using ${possibleConfigPaths[0]}`); - return undefined; - } - - angularCliConfig = JSON.parse( - stripJsonComments(fs.readFileSync(possibleConfigPaths[validIndex], 'utf8')) - ); - } - return angularCliConfig; -} - -export function getLeadingAngularCliProject(ngCliConfig: any) { - if (!ngCliConfig) { - return null; - } - - const { defaultProject } = ngCliConfig; - const { projects } = ngCliConfig; - if (!projects || !Object.keys(projects).length) { - throw new Error('angular.json must have projects entry.'); - } - - let projectName; - const firstProjectName = Object.keys(projects)[0]; - const environmentProjectName = process.env.STORYBOOK_ANGULAR_PROJECT; - if (environmentProjectName) { - projectName = environmentProjectName; - } else if (projects.storybook) { - projectName = 'storybook'; - } else if (defaultProject && projects[defaultProject]) { - projectName = defaultProject; - } else if (projects[firstProjectName]) { - projectName = firstProjectName; - } - - const project = projects[projectName]; - if (!project) { - logger.error(`Could not find angular project '${projectName}' in angular.json.`); - } else { - logger.info(`=> Using angular project '${projectName}' for configuring Storybook.`); - } - if (project && !project.architect.build) { - logger.error(`architect.build is not defined for project '${projectName}'.`); - } - return project; -} - -export function getAngularCliWebpackConfigOptions(dirToSearch: Path) { - const angularCliConfig = getAngularCliConfig(dirToSearch); - const project = getLeadingAngularCliProject(angularCliConfig); - - if (!angularCliConfig || !project.architect.build) { - return null; - } - - const { options: projectOptions } = project.architect.build; - const normalizedAssets = normalizeAssetPatterns( - projectOptions.assets, - dirToSearch, - project.sourceRoot - ); - const projectRoot = path.resolve(dirToSearch, project.root); - const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig) as Path; - const tsConfig = getTsConfigOptions(tsConfigPath); - const budgets = projectOptions.budgets || []; - const scripts = projectOptions.scripts || []; - const outputPath = projectOptions.outputPath || 'dist/storybook-angular'; - const styles = projectOptions.styles || []; - - return { - root: dirToSearch, - projectRoot, - tsConfigPath, - tsConfig, - supportES2015: false, - buildOptions: { - sourceMap: false, - optimization: { - styles: true, - scripts: true, - }, - ...projectOptions, - assets: normalizedAssets, - budgets, - scripts, - styles, - outputPath, - }, - }; -} - -// todo add types -export function applyAngularCliWebpackConfig(baseConfig: any, cliWebpackConfigOptions: any) { - if (!cliWebpackConfigOptions) { - return baseConfig; - } - - if (!isBuildAngularInstalled()) { - logger.info('=> Using base config because @angular-devkit/build-angular is not installed.'); - return baseConfig; - } - - const cliParts = getAngularCliParts(cliWebpackConfigOptions); - - if (!cliParts) { - logger.warn('=> Failed to get angular-cli webpack config.'); - return baseConfig; - } - - logger.info('=> Get angular-cli webpack config.'); - - const { cliCommonConfig, cliStyleConfig } = cliParts; - - // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular - // because @angular-devkit/build-angular created rules have include/exclude for global style files. - const rulesExcludingStyles = filterOutStylingRules(baseConfig); - - // cliStyleConfig.entry adds global style files to the webpack context - // todo add type for acc - const entry = [ - ...baseConfig.entry, - ...Object.values(cliStyleConfig.entry).reduce((acc: any, item) => acc.concat(item), []), - ]; - - const module = { - ...baseConfig.module, - rules: [...cliStyleConfig.module.rules, ...rulesExcludingStyles], - }; - - // We use cliCommonConfig plugins to serve static assets files. - const plugins = [...cliStyleConfig.plugins, ...cliCommonConfig.plugins, ...baseConfig.plugins]; - - const resolve = { - ...baseConfig.resolve, - modules: Array.from( - new Set([...baseConfig.resolve.modules, ...cliCommonConfig.resolve.modules]) - ), - plugins: [ - new TsconfigPathsPlugin({ - configFile: cliWebpackConfigOptions.tsConfigPath, - // After ng build my-lib the default value of 'main' in the package.json is 'umd' - // This causes that you cannot import components directly from dist - // https://github.com/angular/angular-cli/blob/9f114aee1e009c3580784dd3bb7299bdf4a5918c/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L68 - mainFields: [ - ...(cliWebpackConfigOptions.supportES2015 ? ['es2015'] : []), - 'browser', - 'module', - 'main', - ], - }), - ], - }; - - return { - ...baseConfig, - entry, - module, - plugins, - resolve, - resolveLoader: cliCommonConfig.resolveLoader, - }; -} diff --git a/app/angular/src/server/angular-cli_utils.ts b/app/angular/src/server/angular-cli_utils.ts deleted file mode 100644 index e8797a3c489..00000000000 --- a/app/angular/src/server/angular-cli_utils.ts +++ /dev/null @@ -1,123 +0,0 @@ -import fs from 'fs'; -import { - basename, - dirname, - normalize, - relative, - resolve, - Path, - getSystemPath, -} from '@angular-devkit/core'; -import { logger } from '@storybook/node-logger'; - -import { RuleSetRule, Configuration } from 'webpack'; - -// We need to dynamically require theses functions as they are not part of the public api and so their paths -// aren't the same in all versions of Angular -let angularWebpackConfig: { - getCommonConfig: (config: unknown) => Configuration; - getStylesConfig: (config: unknown) => Configuration; -}; -try { - // First we look for webpack config according to directory structure of Angular 11 - // eslint-disable-next-line global-require - angularWebpackConfig = require('@angular-devkit/build-angular/src/webpack/configs'); -} catch (e) { - // We fallback on directory structure of Angular 10 (and below) - // eslint-disable-next-line global-require - angularWebpackConfig = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'); -} - -const { getCommonConfig, getStylesConfig } = angularWebpackConfig; - -function isDirectory(assetPath: string) { - try { - return fs.statSync(assetPath).isDirectory(); - } catch (e) { - return false; - } -} - -function getAssetsParts(resolvedAssetPath: Path, assetPath: Path) { - if (isDirectory(getSystemPath(resolvedAssetPath))) { - return { - glob: '**/*', // Folders get a recursive star glob. - input: assetPath, // Input directory is their original path. - }; - } - - return { - glob: basename(assetPath), // Files are their own glob. - input: dirname(assetPath), // Input directory is their original dirname. - }; -} - -function isStylingRule(rule: RuleSetRule) { - const { test } = rule; - - if (!test) { - return false; - } - - if (!(test instanceof RegExp)) { - return false; - } - - return test.test('.css') || test.test('.scss') || test.test('.sass'); -} - -export function filterOutStylingRules(config: Configuration) { - // @ts-ignore - return config.module.rules.filter((rule) => !isStylingRule(rule)); -} - -export function isBuildAngularInstalled() { - try { - require.resolve('@angular-devkit/build-angular'); - return true; - } catch (e) { - return false; - } -} - -// todo add type -export function getAngularCliParts(cliWebpackConfigOptions: any) { - try { - return { - cliCommonConfig: getCommonConfig(cliWebpackConfigOptions), - cliStyleConfig: getStylesConfig(cliWebpackConfigOptions), - }; - } catch (e) { - logger.warn("Failed to load the Angular CLI config. Using Storybook's default config instead."); - logger.warn(e); - return null; - } -} - -// todo fix any -export function normalizeAssetPatterns(assetPatterns: any, dirToSearch: Path, sourceRoot: Path) { - if (!assetPatterns || !assetPatterns.length) { - return []; - } - - // todo fix any - return assetPatterns.map((assetPattern: any) => { - if (typeof assetPattern === 'object') { - return assetPattern; - } - - const assetPath = normalize(assetPattern); - const resolvedSourceRoot = resolve(dirToSearch, sourceRoot); - const resolvedAssetPath = resolve(dirToSearch, assetPath); - const parts = getAssetsParts(resolvedAssetPath, assetPath); - - // Output directory for both is the relative path from source root to input. - const output = relative(resolvedSourceRoot, resolve(dirToSearch, parts.input)); - - // Return the asset pattern in object format. - return { - ...parts, - output, - }; - }); -} diff --git a/app/angular/src/server/angular-devkit-build-webpack.ts b/app/angular/src/server/angular-devkit-build-webpack.ts new file mode 100644 index 00000000000..7e1a097d8ee --- /dev/null +++ b/app/angular/src/server/angular-devkit-build-webpack.ts @@ -0,0 +1,199 @@ +/** + * This file is to be watched ! + * The code must be compatible from @angular-devkit version 6.1.0 to the latest supported + * + * It uses code block of angular cli to extract parts of webpack configuration + */ + +import path from 'path'; +import webpack from 'webpack'; +import { normalize, resolve, workspaces } from '@angular-devkit/core'; +import { createConsoleLogger } from '@angular-devkit/core/node'; + +// Only type, so not dependent on the client version +import { + WebpackConfigOptions, + BuildOptions, +} from '@angular-devkit/build-angular/src/utils/build-options'; + +import { moduleIsAvailable } from './utils/module-is-available'; +import { normalizeAssetPatterns } from './utils/normalize-asset-patterns'; + +const importAngularCliWebpackConfigGenerator = (): { + getCommonConfig: (config: unknown) => webpack.Configuration; + getStylesConfig: (config: unknown) => webpack.Configuration; +} => { + let angularWebpackConfig; + + // First we look for webpack config according to directory structure of Angular 11 + if (moduleIsAvailable('@angular-devkit/build-angular/src/webpack/configs')) { + // eslint-disable-next-line global-require + angularWebpackConfig = require('@angular-devkit/build-angular/src/webpack/configs'); + } + // We fallback on directory structure of Angular 10 (and below) + else if ( + moduleIsAvailable('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs') + ) { + // eslint-disable-next-line global-require + angularWebpackConfig = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'); + } else { + throw new Error('Webpack config not found in "@angular-devkit/build-angular"'); + } + + return { + getCommonConfig: angularWebpackConfig.getCommonConfig, + getStylesConfig: angularWebpackConfig.getStylesConfig, + }; +}; + +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"'); +}; + +export class ProjectTargetNotFoundError implements Error { + name = 'ProjectTargetNotFoundError'; + + message: string; + + constructor(public projectTarget: string) { + this.message = `No project target "${projectTarget}" fond.`; + } +} + +const buildWebpackConfigOptions = async ( + dirToSearch: string, + project: workspaces.ProjectDefinition, + projectTarget = 'build' +): Promise => { + if (!project.targets.has(projectTarget)) { + throw new ProjectTargetNotFoundError(projectTarget); + } + + const { options: projectBuildOptions = {} } = project.targets.get(projectTarget); + + const requiredOptions = ['tsConfig', 'assets', 'optimization']; + + if (!requiredOptions.every((key) => key in projectBuildOptions)) { + throw new Error( + `Missing required options in project target. Check "${requiredOptions.join(', ')}"` + ); + } + + const workspaceRoot = normalize(dirToSearch); + const projectRoot = resolve(workspaceRoot, normalize((project.root as string) || '')); + const sourceRoot = project.sourceRoot + ? resolve(workspaceRoot, normalize(project.sourceRoot)) + : undefined; + + const tsConfigPath = path.resolve(workspaceRoot, projectBuildOptions.tsConfig as string); + const tsConfig = importAngularCliReadTsconfigUtil().readTsconfig(tsConfigPath); + + const ts = await import('typescript'); + const scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5; + + const buildOptions: BuildOptions = { + // Default options + budgets: [], + fileReplacements: [], + main: '', + outputPath: 'dist/storybook-angular', + scripts: [], + sourceMap: {}, + styles: [], + lazyModules: [], + + // Project Options + ...projectBuildOptions, + assets: normalizeAssetPatterns( + (projectBuildOptions.assets as any[]) || [], + workspaceRoot, + projectRoot, + sourceRoot + ), + optimization: (projectBuildOptions.optimization as any) ?? { + styles: {}, + scripts: true, + fonts: {}, + }, + + // Forced options + statsJson: false, + forkTypeChecker: false, + }; + + return { + root: workspaceRoot, + // 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'], + projectRoot, + sourceRoot, + buildOptions, + tsConfig, + tsConfigPath, + scriptTarget, + }; +}; + +export type AngularCliWebpackConfig = { + cliCommonWebpackConfig: { + plugins: webpack.Plugin[]; + resolve: { + modules: string[]; + }; + resolveLoader: webpack.ResolveLoader; + }; + cliStyleWebpackConfig: { + entry: string | string[] | webpack.Entry | webpack.EntryFunc; + module: { + rules: webpack.RuleSetRule[]; + }; + plugins: webpack.Plugin[]; + }; + tsConfigPath: string; +}; + +/** + * Uses angular cli to extract webpack configuration. + * The `AngularCliWebpackConfig` type lists the parts used by storybook + */ +export async function extractAngularCliWebpackConfig( + dirToSearch: string, + project: workspaces.ProjectDefinition +): Promise { + const { getCommonConfig, getStylesConfig } = importAngularCliWebpackConfigGenerator(); + + const webpackConfigOptions = await buildWebpackConfigOptions(dirToSearch, project); + + const cliCommonConfig = getCommonConfig(webpackConfigOptions); + const cliStyleConfig = getStylesConfig(webpackConfigOptions); + + return { + cliCommonWebpackConfig: { + plugins: cliCommonConfig.plugins, + resolve: { + modules: cliCommonConfig.resolve?.modules, + }, + resolveLoader: cliCommonConfig.resolveLoader, + }, + cliStyleWebpackConfig: { + entry: cliStyleConfig.entry, + module: { + rules: [...cliStyleConfig.module.rules], + }, + plugins: cliStyleConfig.plugins, + }, + tsConfigPath: webpackConfigOptions.tsConfigPath, + }; +} diff --git a/app/angular/src/server/angular-read-workspace.ts b/app/angular/src/server/angular-read-workspace.ts new file mode 100644 index 00000000000..cf706ad6a7a --- /dev/null +++ b/app/angular/src/server/angular-read-workspace.ts @@ -0,0 +1,81 @@ +import { NodeJsSyncHost } from '@angular-devkit/core/node'; +import { workspaces } from '@angular-devkit/core'; + +/** + * Returns the workspace definition + * + * - Either from NX if it is present + * - Either from `@angular-devkit/core` -> https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/core + */ +export const readAngularWorkspaceConfig = async ( + dirToSearch: string +): Promise => { + const host = workspaces.createWorkspaceHost(new NodeJsSyncHost()); + + try { + /** + * Apologies for the following line + * If there's a better way to do it, let's do it + */ + /* eslint-disable global-require */ + + // catch if nx.json does not exist + require('@nrwl/workspace').readNxJson(); + + const nxWorkspace = require('@nrwl/workspace').readWorkspaceConfig({ + format: 'angularCli', + }); + + // Use the workspace version of nx when angular looks for the angular.json file + host.readFile = (path) => { + if (typeof path === 'string' && path.endsWith('angular.json')) { + return Promise.resolve(JSON.stringify(nxWorkspace)); + } + return host.readFile(path); + }; + } catch (e) { + // Ignore if the client does not use NX + } + + return (await workspaces.readWorkspace(dirToSearch, host)).workspace; +}; + +export const getProjectName = (workspace: workspaces.WorkspaceDefinition): string => { + const environmentProjectName = process.env.STORYBOOK_ANGULAR_PROJECT; + if (environmentProjectName) { + return environmentProjectName; + } + + if (workspace.projects.has('storybook')) { + return 'storybook'; + } + if (workspace.extensions.defaultProject) { + return workspace.extensions.defaultProject as string; + } + + const firstProjectName = workspace.projects.keys().next().value; + if (firstProjectName) { + return firstProjectName; + } + throw new Error('No angular projects found.'); +}; + +export const findAngularProject = ( + workspace: workspaces.WorkspaceDefinition +): { + projectName: string; + project: workspaces.ProjectDefinition; +} => { + if (!workspace.projects || !Object.keys(workspace.projects).length) { + throw new Error('No angular projects found.'); + } + + const projectName = getProjectName(workspace); + + const project = workspace.projects.get(projectName); + + if (!project) { + throw new Error(`Could not find angular project '${projectName}' in angular.json.`); + } + return { projectName, project }; +}; diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts index 8626756bd97..eb6af033ea0 100644 --- a/app/angular/src/server/framework-preset-angular-cli.test.ts +++ b/app/angular/src/server/framework-preset-angular-cli.test.ts @@ -3,34 +3,42 @@ import { Configuration } from 'webpack'; import { logger } from '@storybook/node-logger'; import { webpackFinal } from './framework-preset-angular-cli'; -// eslint-disable-next-line global-require, jest/no-mocks-import -jest.spyOn(logger, 'error').mockImplementation(); -jest.spyOn(logger, 'info').mockImplementation(); +const testPath = __dirname; -const testCwd = process.cwd(); -const cwdSpy = jest.spyOn(process, 'cwd'); - -let cwd = process.cwd(); - -const initMockWorkspace = (name: string) => { - cwdSpy.mockReturnValue(`${testCwd}/src/server/__mocks-ng-workspace__/${name}`); - cwd = process.cwd(); -}; +let workspaceRoot = testPath; +let cwdSpy: jest.SpyInstance; beforeEach(() => { + cwdSpy = jest.spyOn(process, 'cwd'); + jest.spyOn(logger, 'error').mockImplementation(); + jest.spyOn(logger, 'info').mockImplementation(); +}); + +afterEach(() => { jest.clearAllMocks(); }); +function initMockWorkspace(name: string) { + workspaceRoot = `${testPath}/__mocks-ng-workspace__/${name}`; + cwdSpy.mockReturnValue(workspaceRoot); +} + describe('framework-preset-angular-cli', () => { describe('without angular.json', () => { - it('should return webpack base config and display log error', () => { + let consoleErrorSpy: jest.SpyInstance; + + beforeEach(() => { + initMockWorkspace(''); + consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(); + }); + it('should return webpack base config and display log error', async () => { const webpackBaseConfig = newWebpackConfiguration(); - const config = webpackFinal(webpackBaseConfig); + const config = await webpackFinal(webpackBaseConfig); - expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config.'); + expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config'); expect(logger.error).toHaveBeenCalledWith( - `Could not find angular.json using ${cwd}/angular.json` + `=> Could not find angular workspace config (angular.json) on this path "${workspaceRoot}"` ); expect(config).toEqual(webpackBaseConfig); @@ -41,10 +49,18 @@ describe('framework-preset-angular-cli', () => { beforeEach(() => { initMockWorkspace('without-projects-entry'); }); - it('throws error', () => { - expect(() => webpackFinal(newWebpackConfiguration())).toThrowError( - 'angular.json must have projects entry.' + it('should return webpack base config and display log error', async () => { + const webpackBaseConfig = newWebpackConfiguration(); + + const config = await webpackFinal(webpackBaseConfig); + + expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config'); + expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project'); + expect(logger.info).toHaveBeenCalledWith( + '=> Fail to load angular-cli config. Using base config' ); + + expect(config).toEqual(webpackBaseConfig); }); }); @@ -52,10 +68,37 @@ describe('framework-preset-angular-cli', () => { beforeEach(() => { initMockWorkspace('empty-projects-entry'); }); - it('throws error', () => { - expect(() => webpackFinal(newWebpackConfiguration())).toThrowError( - 'angular.json must have projects entry.' + it('should return webpack base config and display log error', async () => { + const webpackBaseConfig = newWebpackConfiguration(); + + const config = await webpackFinal(webpackBaseConfig); + + expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config'); + expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project'); + expect(logger.info).toHaveBeenCalledWith( + '=> Fail to load angular-cli config. Using base config' ); + + expect(config).toEqual(webpackBaseConfig); + }); + }); + + describe('when angular.json does not have a compatible project', () => { + beforeEach(() => { + initMockWorkspace('without-compatible-projects'); + }); + it('should return webpack base config and display log error', async () => { + const webpackBaseConfig = newWebpackConfiguration(); + + const config = await webpackFinal(webpackBaseConfig); + + expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config'); + expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project'); + expect(logger.info).toHaveBeenCalledWith( + '=> Fail to load angular-cli config. Using base config' + ); + + expect(config).toEqual(webpackBaseConfig); }); }); @@ -63,43 +106,54 @@ describe('framework-preset-angular-cli', () => { beforeEach(() => { initMockWorkspace('without-architect-build'); }); + it('should return webpack base config and display log error', async () => { + const webpackBaseConfig = newWebpackConfiguration(); - it('throws error', () => { - expect(() => webpackFinal(newWebpackConfiguration())).toThrowError( - "Cannot read property 'build' of undefined" + const config = await webpackFinal(webpackBaseConfig); + + expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config'); + expect(logger.error).toHaveBeenCalledWith( + '=> "build" target is not defined in project "foo-project"' ); + expect(logger.info).toHaveBeenCalledWith( + '=> Fail to load angular-cli config. Using base config' + ); + + expect(config).toEqual(webpackBaseConfig); }); }); - describe('when angular.json have projects without architect.build.options.assets', () => { + + describe('when angular.json have projects without architect.build.options', () => { beforeEach(() => { - initMockWorkspace('without-architect-build-options-assets'); + initMockWorkspace('without-architect-build-options'); }); - it('throws error', () => { - expect(() => webpackFinal(newWebpackConfiguration())).toThrowError( - "Cannot read property 'assets' of undefined" + it('throws error', async () => { + await expect(() => webpackFinal(newWebpackConfiguration())).rejects.toThrowError( + 'Missing required options in project target. Check "tsConfig, assets, optimization"' ); + expect(logger.error).toHaveBeenCalledWith(`=> Could not get angular cli webpack config`); }); }); describe('when angular.json have minimal config', () => { beforeEach(() => { initMockWorkspace('minimal-config'); }); - it('should log', () => { + it('should log', async () => { const baseWebpackConfig = newWebpackConfiguration(); - webpackFinal(baseWebpackConfig); + await webpackFinal(baseWebpackConfig); expect(logger.info).toHaveBeenCalledTimes(3); + expect(logger.info).toHaveBeenNthCalledWith(1, '=> Loading angular-cli config'); expect(logger.info).toHaveBeenNthCalledWith( - 1, - "=> Using angular project 'foo-project' for configuring Storybook." + 2, + '=> Using angular project "foo-project" for configuring Storybook' ); - expect(logger.info).toHaveBeenNthCalledWith(2, '=> Loading angular-cli config.'); - expect(logger.info).toHaveBeenNthCalledWith(3, '=> Get angular-cli webpack config.'); + expect(logger.info).toHaveBeenNthCalledWith(3, '=> Using angular-cli webpack config'); }); - it('should extends webpack base config', () => { + it('should extends webpack base config', async () => { const baseWebpackConfig = newWebpackConfiguration(); - const webpackFinalConfig = webpackFinal(baseWebpackConfig); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); expect(webpackFinalConfig).toEqual({ ...baseWebpackConfig, @@ -115,9 +169,9 @@ describe('framework-preset-angular-cli', () => { }); }); - it('should set webpack "module.rules"', () => { + it('should set webpack "module.rules"', async () => { const baseWebpackConfig = newWebpackConfiguration(); - const webpackFinalConfig = webpackFinal(baseWebpackConfig); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); expect(webpackFinalConfig.module.rules).toEqual([ { @@ -144,9 +198,9 @@ describe('framework-preset-angular-cli', () => { ]); }); - it('should set webpack "plugins"', () => { + it('should set webpack "plugins"', async () => { const baseWebpackConfig = newWebpackConfiguration(); - const webpackFinalConfig = webpackFinal(baseWebpackConfig); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); expect(webpackFinalConfig.plugins).toMatchInlineSnapshot(` Array [ @@ -172,24 +226,24 @@ describe('framework-preset-angular-cli', () => { `); }); - it('should set webpack "resolve.modules"', () => { + it('should set webpack "resolve.modules"', async () => { const baseWebpackConfig = newWebpackConfiguration(); - const webpackFinalConfig = webpackFinal(baseWebpackConfig); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); expect(webpackFinalConfig.resolve.modules).toEqual([ ...baseWebpackConfig.resolve.modules, - `${cwd}/src`, + `${workspaceRoot}/src`, ]); }); - it('should replace webpack "resolve.plugins"', () => { + it('should replace webpack "resolve.plugins"', async () => { const baseWebpackConfig = newWebpackConfiguration(); - const webpackFinalConfig = webpackFinal(baseWebpackConfig); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); expect(webpackFinalConfig.resolve.plugins).toMatchInlineSnapshot(` Array [ TsconfigPathsPlugin { - "absoluteBaseUrl": "${cwd}/src/", + "absoluteBaseUrl": "${workspaceRoot}/src/", "baseUrl": "./", "extensions": Array [ ".ts", @@ -214,16 +268,16 @@ describe('framework-preset-angular-cli', () => { initMockWorkspace('with-options-styles'); }); - it('should extends webpack base config', () => { + it('should extends webpack base config', async () => { const baseWebpackConfig = newWebpackConfiguration(); - const webpackFinalConfig = webpackFinal(baseWebpackConfig); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); expect(webpackFinalConfig).toEqual({ ...baseWebpackConfig, entry: [ ...(baseWebpackConfig.entry as any[]), - `${cwd}/src/styles.css`, - `${cwd}/src/styles.scss`, + `${workspaceRoot}/src/styles.css`, + `${workspaceRoot}/src/styles.scss`, ], module: { ...baseWebpackConfig.module, rules: expect.anything() }, plugins: expect.anything(), @@ -237,48 +291,126 @@ describe('framework-preset-angular-cli', () => { }); }); - it('should set webpack "module.rules"', () => { + it('should set webpack "module.rules"', async () => { const baseWebpackConfig = newWebpackConfiguration(); - const webpackFinalConfig = webpackFinal(baseWebpackConfig); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); expect(webpackFinalConfig.module.rules).toEqual([ { - exclude: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], test: /\.css$/, use: expect.anything(), }, { - exclude: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], test: /\.scss$|\.sass$/, use: expect.anything(), }, { - exclude: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], test: /\.less$/, use: expect.anything(), }, { - exclude: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], test: /\.styl$/, use: expect.anything(), }, { - include: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], test: /\.css$/, use: expect.anything(), }, { - include: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], test: /\.scss$|\.sass$/, use: expect.anything(), }, { - include: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], test: /\.less$/, use: expect.anything(), }, { - include: [`${cwd}/src/styles.css`, `${cwd}/src/styles.scss`], + include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + test: /\.styl$/, + use: expect.anything(), + }, + ...baseWebpackConfig.module.rules, + ]); + }); + }); + + describe('when is a nx workspace', () => { + beforeEach(() => { + initMockWorkspace('with-nx'); + }); + + it('should extends webpack base config', async () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig).toEqual({ + ...baseWebpackConfig, + entry: [ + ...(baseWebpackConfig.entry as any[]), + `${workspaceRoot}/src/styles.css`, + `${workspaceRoot}/src/styles.scss`, + ], + module: { ...baseWebpackConfig.module, rules: expect.anything() }, + plugins: expect.anything(), + resolve: { + ...baseWebpackConfig.resolve, + modules: expect.arrayContaining(baseWebpackConfig.resolve.modules), + // the base resolve.plugins are not kept 🤷‍♂️ + plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins), + }, + resolveLoader: expect.anything(), + }); + }); + + it('should set webpack "module.rules"', async () => { + const baseWebpackConfig = newWebpackConfiguration(); + const webpackFinalConfig = await webpackFinal(baseWebpackConfig); + + expect(webpackFinalConfig.module.rules).toEqual([ + { + exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + test: /\.css$/, + use: expect.anything(), + }, + { + exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + test: /\.scss$|\.sass$/, + use: expect.anything(), + }, + { + exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + test: /\.less$/, + use: expect.anything(), + }, + { + exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + test: /\.styl$/, + use: expect.anything(), + }, + { + include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + test: /\.css$/, + use: expect.anything(), + }, + { + include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + test: /\.scss$|\.sass$/, + use: expect.anything(), + }, + { + include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], + test: /\.less$/, + use: expect.anything(), + }, + { + include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`], test: /\.styl$/, use: expect.anything(), }, diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index 3fac5aa5b67..43bff513931 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -1,16 +1,114 @@ -import { Configuration } from 'webpack'; -import { Path } from '@angular-devkit/core'; +import webpack from 'webpack'; import { logger } from '@storybook/node-logger'; +import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; +import { findAngularProject, readAngularWorkspaceConfig } from './angular-read-workspace'; import { - getAngularCliWebpackConfigOptions, - applyAngularCliWebpackConfig, -} from './angular-cli_config'; + AngularCliWebpackConfig, + extractAngularCliWebpackConfig, + ProjectTargetNotFoundError, +} from './angular-devkit-build-webpack'; +import { moduleIsAvailable } from './utils/module-is-available'; +import { filterOutStylingRules } from './utils/filter-out-styling-rules'; -export function webpackFinal(config: Configuration) { - const cwd = process.cwd() as Path; - const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd); - logger.info('=> Loading angular-cli config.'); +export async function webpackFinal(baseConfig: webpack.Configuration) { + const dirToSearch = process.cwd(); - return applyAngularCliWebpackConfig(config, cliWebpackConfigOptions); + if (!moduleIsAvailable('@angular-devkit/build-angular')) { + logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed'); + return baseConfig; + } + logger.info('=> Loading angular-cli config'); + + // Read angular workspace + let workspaceConfig; + try { + workspaceConfig = await readAngularWorkspaceConfig(dirToSearch); + } catch (error) { + logger.error( + `=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"` + ); + logger.info(`=> Fail to load angular-cli config. Using base config`); + return baseConfig; + } + + // Find angular project + let project; + let projectName; + try { + const fondProject = findAngularProject(workspaceConfig); + project = fondProject.project; + projectName = fondProject.projectName; + logger.info(`=> Using angular project "${projectName}" for configuring Storybook`); + } catch (error) { + logger.error(`=> Could not find angular project`); + logger.info(`=> Fail to load angular-cli config. Using base config`); + return baseConfig; + } + + // Use angular-cli to get some webpack config + let angularCliWebpackConfig; + try { + angularCliWebpackConfig = await extractAngularCliWebpackConfig(dirToSearch, project); + logger.info(`=> Using angular-cli webpack config`); + } catch (error) { + if (error instanceof ProjectTargetNotFoundError) { + logger.error(`=> "${error.projectTarget}" target is not defined in project "${projectName}"`); + logger.info(`=> Fail to load angular-cli config. Using base config`); + return baseConfig; + } + logger.error(`=> Could not get angular cli webpack config`); + throw error; + } + + return mergeAngularCliWebpackConfig(angularCliWebpackConfig, baseConfig); +} + +function mergeAngularCliWebpackConfig( + { cliCommonWebpackConfig, cliStyleWebpackConfig, tsConfigPath }: AngularCliWebpackConfig, + baseConfig: webpack.Configuration +) { + // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular + // because @angular-devkit/build-angular created rules have include/exclude for global style files. + const rulesExcludingStyles = filterOutStylingRules(baseConfig); + + // styleWebpackConfig.entry adds global style files to the webpack context + const entry = [ + ...(baseConfig.entry as string[]), + ...Object.values(cliStyleWebpackConfig.entry).reduce((acc, item) => acc.concat(item), []), + ]; + + const module = { + ...baseConfig.module, + rules: [...cliStyleWebpackConfig.module.rules, ...rulesExcludingStyles], + }; + + // We use cliCommonConfig plugins to serve static assets files. + const plugins = [ + ...cliStyleWebpackConfig.plugins, + ...cliCommonWebpackConfig.plugins, + ...baseConfig.plugins, + ]; + + const resolve = { + ...baseConfig.resolve, + modules: Array.from( + new Set([...baseConfig.resolve.modules, ...cliCommonWebpackConfig.resolve.modules]) + ), + plugins: [ + new TsconfigPathsPlugin({ + configFile: tsConfigPath, + mainFields: ['browser', 'module', 'main'], + }), + ], + }; + + return { + ...baseConfig, + entry, + module, + plugins, + resolve, + resolveLoader: cliCommonWebpackConfig.resolveLoader, + }; } diff --git a/app/angular/src/server/utils/filter-out-styling-rules.ts b/app/angular/src/server/utils/filter-out-styling-rules.ts new file mode 100644 index 00000000000..46591becee5 --- /dev/null +++ b/app/angular/src/server/utils/filter-out-styling-rules.ts @@ -0,0 +1,19 @@ +import { Configuration, RuleSetRule } from 'webpack'; + +const isStylingRule = (rule: RuleSetRule) => { + const { test } = rule; + + if (!test) { + return false; + } + + if (!(test instanceof RegExp)) { + return false; + } + + return test.test('.css') || test.test('.scss') || test.test('.sass'); +}; + +export const filterOutStylingRules = (config: Configuration) => { + return config.module.rules.filter((rule) => !isStylingRule(rule)); +}; diff --git a/app/angular/src/server/utils/module-is-available.ts b/app/angular/src/server/utils/module-is-available.ts new file mode 100644 index 00000000000..1cfd31ded6b --- /dev/null +++ b/app/angular/src/server/utils/module-is-available.ts @@ -0,0 +1,8 @@ +export const moduleIsAvailable = (moduleName: string): boolean => { + try { + require.resolve(moduleName); + return true; + } catch (e) { + return false; + } +}; diff --git a/app/angular/src/server/utils/normalize-asset-patterns.ts b/app/angular/src/server/utils/normalize-asset-patterns.ts new file mode 100644 index 00000000000..928ac8baf19 --- /dev/null +++ b/app/angular/src/server/utils/normalize-asset-patterns.ts @@ -0,0 +1,84 @@ +/** + * Clone of `normalizeAssetPatterns` function from angular-cli v11.2.* + * > https://github.com/angular/angular-cli/blob/de63f41d669e42ada84f94ca1795d2791b9b45cc/packages/angular_devkit/build_angular/src/utils/normalize-asset-patterns.ts + * + * It is not possible to use the original because arguments have changed between version 6.1.* and 11.*.* of angular-cli + */ +import { statSync } from 'fs'; +import { + BaseException, + basename, + dirname, + getSystemPath, + join, + normalize, + Path, + relative, + resolve, +} from '@angular-devkit/core'; + +import { AssetPattern, AssetPatternClass } from '@angular-devkit/build-angular/src/browser/schema'; + +export class MissingAssetSourceRootException extends BaseException { + constructor(path: string) { + super(`The ${path} asset path must start with the project source root.`); + } +} + +export function normalizeAssetPatterns( + assetPatterns: AssetPattern[], + root: Path, + projectRoot: Path, + maybeSourceRoot: Path | undefined +): AssetPatternClass[] { + // When sourceRoot is not available, we default to ${projectRoot}/src. + const sourceRoot = maybeSourceRoot || join(projectRoot, 'src'); + const resolvedSourceRoot = resolve(root, sourceRoot); + + if (assetPatterns.length === 0) { + return []; + } + + return assetPatterns.map((assetPattern) => { + // Normalize string asset patterns to objects. + if (typeof assetPattern === 'string') { + const assetPath = normalize(assetPattern); + const resolvedAssetPath = resolve(root, assetPath); + + // Check if the string asset is within sourceRoot. + if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) { + throw new MissingAssetSourceRootException(assetPattern); + } + + let glob: string; + let input: Path; + let isDirectory = false; + + try { + isDirectory = statSync(getSystemPath(resolvedAssetPath)).isDirectory(); + } catch { + isDirectory = true; + } + + if (isDirectory) { + // Folders get a recursive star glob. + glob = '**/*'; + // Input directory is their original path. + input = assetPath; + } else { + // Files are their own glob. + glob = basename(assetPath); + // Input directory is their original dirname. + input = dirname(assetPath); + } + + // Output directory for both is the relative path from source root to input. + const output = relative(resolvedSourceRoot, resolve(root, input)); + + // Return the asset pattern in object format. + return { glob, input, output }; + } + // It's already an AssetPatternObject, no need to convert. + return assetPattern; + }); +}