Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(storybook): add vite-tsconfig-paths to storybook #14161

Merged
merged 1 commit into from
Jan 5, 2023
Merged

fix(storybook): add vite-tsconfig-paths to storybook #14161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ...src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ exports[`StorybookConfiguration generator should configure storybook to use webp





module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
Expand Down
15 changes: 14 additions & 1 deletion ...es/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -17,7 +19,16 @@ const config: StorybookConfig = {
addons: [...(rootMain.addons || [])


]
],
async viteFinal(config: any) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: './../',
}),
],
});
},
};

module.exports = config;
Expand Down Expand Up @@ -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' },
Expand Down
106 changes: 100 additions & 6 deletions packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ exports[`@nrwl/storybook:configuration basic functionalities should generate a w





module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
Expand Down Expand Up @@ -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');


Expand Down Expand Up @@ -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,
Expand All @@ -157,7 +163,16 @@ const config: StorybookConfig = {
addons: [...(rootMain.addons || [])


]
],
async viteFinal(config: any) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
};

module.exports = config;
Expand Down Expand Up @@ -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,
Expand All @@ -206,7 +223,16 @@ const config: StorybookConfig = {
addons: [...(rootMain.addons || [])


]
],
async viteFinal(config: any) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
};

module.exports = config;
Expand Down Expand Up @@ -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,
Expand All @@ -262,7 +290,16 @@ const config: StorybookConfig = {
},
}

]
],
async viteFinal(config: any) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
};

module.exports = config;
Expand Down Expand Up @@ -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,
Expand All @@ -311,7 +350,16 @@ const config: StorybookConfig = {
addons: [...(rootMain.addons || [])


]
],
async viteFinal(config: any) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
};

module.exports = config;
Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -409,7 +470,16 @@ const config: StorybookConfig = {
addons: [...(rootMain.addons || [])


]
],
async viteFinal(config: any) {
return mergeConfig(config, {
plugins: [
viteTsConfigPaths({
root: '../../../',
}),
],
});
},
};

module.exports = config;
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -808,6 +890,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and





module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
Expand Down Expand Up @@ -866,6 +950,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and





module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -989,6 +1077,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and





module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
Expand Down Expand Up @@ -1047,6 +1137,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and





module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
Expand Down Expand Up @@ -1105,6 +1197,8 @@ exports[`@nrwl/storybook:configuration for other types of projects - Next.js and





module.exports = {
...rootMain,
core: { ...rootMain.core, builder: 'webpack5' },
Expand Down
13 changes: 12 additions & 1 deletion packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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) {
Expand Down
13 changes: 12 additions & 1 deletion packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');<% } %>

Expand All @@ -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) {
Expand Down