From a2af57b572b8ca1dc072d114adabab1805c3a396 Mon Sep 17 00:00:00 2001 From: Katerina Skroumpelou Date: Thu, 5 Jan 2023 14:58:55 +0200 Subject: [PATCH] fix(storybook): add vite-tsconfig-paths to storybook --- .../storybook-configuration.spec.ts.snap | 2 + .../configuration-nested.spec.ts.snap | 15 ++- .../__snapshots__/configuration.spec.ts.snap | 106 +++++++++++++++++- .../.storybook/main.ts__tmpl__ | 13 ++- .../project-files/.storybook/main.js__tmpl__ | 13 ++- 5 files changed, 140 insertions(+), 9 deletions(-) diff --git a/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap b/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap index df1455256322e..1fedb7f0417e5 100644 --- a/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap +++ b/packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap @@ -6,6 +6,8 @@ exports[`StorybookConfiguration generator should configure storybook to use webp + + module.exports = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap index 8fe29372b7a8e..3d512dd68b36e 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap @@ -5,6 +5,8 @@ exports[`@nrwl/storybook:configuration for workspaces with Root project basic fu import { rootMain } from './main.root'; import type { StorybookConfig, Options } from '@storybook/core-common'; +import { mergeConfig } from 'vite'; +import viteTsConfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { ...rootMain, @@ -17,7 +19,16 @@ const config: StorybookConfig = { addons: [...(rootMain.addons || []) - ] + ], + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: './../', + }), + ], + }); + }, }; module.exports = config; @@ -73,6 +84,8 @@ exports[`@nrwl/storybook:configuration for workspaces with Root project basic fu import type { StorybookConfig, Options } from '@storybook/core-common'; + + const config: StorybookConfig = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap index 80b056b975bb2..24ef06ed43c7c 100644 --- a/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap @@ -6,6 +6,8 @@ exports[`@nrwl/storybook:configuration basic functionalities should generate a w + + module.exports = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -106,6 +108,8 @@ Array [ exports[`@nrwl/storybook:configuration basic functionalities should reference the "old" webpack.config.js if there - for backwards compatibility 1`] = ` "const rootMain = require('../../../.storybook/main'); + + const rootWebpackConfig = require('../../../.storybook/webpack.config'); @@ -145,6 +149,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; +import { mergeConfig } from 'vite'; +import viteTsConfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { ...rootMain, @@ -157,7 +163,16 @@ const config: StorybookConfig = { addons: [...(rootMain.addons || []) - ] + ], + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, }; module.exports = config; @@ -194,6 +209,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; +import { mergeConfig } from 'vite'; +import viteTsConfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { ...rootMain, @@ -206,7 +223,16 @@ const config: StorybookConfig = { addons: [...(rootMain.addons || []) - ] + ], + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, }; module.exports = config; @@ -243,6 +269,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; import path from 'path'; +import { mergeConfig } from 'vite'; +import viteTsConfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { ...rootMain, @@ -262,7 +290,16 @@ const config: StorybookConfig = { }, } - ] + ], + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, }; module.exports = config; @@ -299,6 +336,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; +import { mergeConfig } from 'vite'; +import viteTsConfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { ...rootMain, @@ -311,7 +350,16 @@ const config: StorybookConfig = { addons: [...(rootMain.addons || []) - ] + ], + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, }; module.exports = config; @@ -348,6 +396,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; +import { mergeConfig } from 'vite'; +import viteTsConfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { ...rootMain, @@ -360,7 +410,16 @@ const config: StorybookConfig = { addons: [...(rootMain.addons || []) , 'storybook-addon-swc' - ] + ], + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, }; module.exports = config; @@ -397,6 +456,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; +import { mergeConfig } from 'vite'; +import viteTsConfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { ...rootMain, @@ -409,7 +470,16 @@ const config: StorybookConfig = { addons: [...(rootMain.addons || []) - ] + ], + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '../../../', + }), + ], + }); + }, }; module.exports = config; @@ -447,6 +517,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; + + const config: StorybookConfig = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -506,6 +578,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; + + const config: StorybookConfig = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -565,6 +639,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; import path from 'path'; + + const config: StorybookConfig = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -631,6 +707,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; + + const config: StorybookConfig = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -690,6 +768,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; + + const config: StorybookConfig = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -749,6 +829,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and import type { StorybookConfig, Options } from '@storybook/core-common'; + + const config: StorybookConfig = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -808,6 +890,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and + + module.exports = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -866,6 +950,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and + + module.exports = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -922,6 +1008,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and "const rootMain = require('../../../.storybook/main'); + + const path = require('path'); module.exports = { @@ -989,6 +1077,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and + + module.exports = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -1047,6 +1137,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and + + module.exports = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, @@ -1105,6 +1197,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and + + module.exports = { ...rootMain, core: { ...rootMain.core, builder: 'webpack5' }, diff --git a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ index ba2ddd8d16345..1dc7274d1743c 100644 --- a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ @@ -2,6 +2,8 @@ <% if (isRootProject){ %>import { rootMain } from './main.root';<% } %> import type { StorybookConfig, Options } from '@storybook/core-common'; <% if (isNextJs){ %>import path from 'path';<% } %> +<% if (usesVite){ %>import { mergeConfig } from 'vite';<% } %> +<% if (usesVite){ %>import viteTsConfigPaths from 'vite-tsconfig-paths';<% } %> const config: StorybookConfig = { ...rootMain, @@ -23,7 +25,16 @@ const config: StorybookConfig = { }, } <% } %> - ]<% if (!usesVite) { %>, + ]<% if (usesVite) { %>, + async viteFinal(config: any) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '<%= offsetFromRoot %>../', + }), + ], + }); + },<% } %><% if (!usesVite) { %>, webpackFinal: async (config, { configType }: Options) => { // apply any global webpack configs that might have been specified in .storybook/main.ts if (rootMain.webpackFinal) { diff --git a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ index 97dd2edbf5881..1e22cbdecbf84 100644 --- a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ +++ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ @@ -1,5 +1,7 @@ <% if (!isRootProject){ %>const rootMain = require('<%= offsetFromRoot %>../.storybook/<%= rootMainName %>');<% } %> <% if (isRootProject){ %>const rootMain = require('./main.root');<% } %> +<% if (usesVite){ %>const { mergeConfig } = require('vite');<% } %> +<% if (usesVite){ %>const viteTsConfigPaths = require('vite-tsconfig-paths').default;<% } %> <% if (existsRootWebpackConfig && !usesVite){ %>const rootWebpackConfig = require('<%= offsetFromRoot %>../.storybook/webpack.config'); <% } %> <% if (isNextJs){ %>const path = require('path');<% } %> @@ -23,7 +25,16 @@ module.exports = { }, } <% } %> - ]<% if (!usesVite) { %>, + ]<% if (usesVite) { %>, + async viteFinal(config, { configType }) { + return mergeConfig(config, { + plugins: [ + viteTsConfigPaths({ + root: '<%= offsetFromRoot %>../', + }), + ], + }); + },<% } %><% if (!usesVite) { %>, webpackFinal: async (config, { configType }) => { // apply any global webpack configs that might have been specified in .storybook/main.js if (rootMain.webpackFinal) {