miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(storybook): install nx/vite for non-buildable libs (#18778)

Browse Source
This commit is contained in:
Katerina Skroumpelou 2023-08-22 19:46:50 +03:00 committed by GitHub
parent 016c89fed6
commit 57463ed25a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 52 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap
View File

@ -3,17 +3,21 @@
exports[`react:storybook-configuration should configure everything and install correct dependencies 1`] = `
"import type { StorybookConfig } from '@storybook/react-vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';
const config: StorybookConfig = {
stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
framework: {
name: '@storybook/react-vite',
options: {
builder: {
viteConfigPath: '',
},
},
options: {},
},
viteFinal: async (config) =>
mergeConfig(config, {
plugins: [nxViteTsPaths()],
}),
};
export default config;

14
packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap
View File

@ -3,17 +3,21 @@
exports[`@nx/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested project only 1`] = `
"import type { StorybookConfig } from '@storybook/react-vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';
const config: StorybookConfig = {
stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
framework: {
name: '@storybook/react-vite',
options: {
builder: {
viteConfigPath: '',
},
},
options: {},
},
viteFinal: async (config) =>
mergeConfig(config, {
plugins: [nxViteTsPaths()],
}),
};
export default config;

1
packages/storybook/src/generators/configuration/configuration.spec.ts
View File

@ -98,7 +98,6 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
await configurationGenerator(tree, {
name: 'test-ui-lib',
standaloneConfig: false,
uiFramework: '@storybook/react-webpack5',
});
const tsconfigJson = readJson<TsConfig>(

11
packages/storybook/src/generators/configuration/configuration.ts
View File

@ -198,6 +198,17 @@ export async function configurationGenerator(
devDeps['core-js'] = coreJsVersion;
}
if (
schema.uiFramework.endsWith('-vite') &&
(!viteBuildTarget || !viteConfigFilePath)
) {
// This means that the user has selected a Vite framework
// but the project does not have Vite configuration.
// We need to install the @nx/vite plugin in order to be able to use
// the nxViteTsPaths plugin to register the tsconfig paths in Vite.
devDeps['@nx/vite'] = nxVersion;
}
tasks.push(addDependenciesToPackageJson(tree, {}, devDeps));
if (!schema.skipFormat) {

12
packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__
View File

@ -1,4 +1,8 @@
import type { StorybookConfig } from '<%= uiFramework %>';
<% if (usesVite && !viteConfigFilePath) { %>
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';
<% } %>
const config: StorybookConfig = {
stories: [
@ -10,13 +14,19 @@ const config: StorybookConfig = {
framework: {
name: '<%= uiFramework %>',
options: {
<% if (usesVite) { %>
<% if (usesVite && viteConfigFilePath) { %>
builder: {
viteConfigPath: '<%= viteConfigFilePath %>',
},
<% } %>
},
},
<% if (usesVite && !viteConfigFilePath) { %>
viteFinal: async (config) =>
mergeConfig(config, {
plugins: [nxViteTsPaths()],
}),
<% } %>
};
export default config;

13
packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__
View File

@ -1,3 +1,8 @@
<% if (usesVite && !viteConfigFilePath) { %>
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';
<% } %>
const config = {
stories: [
<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
@ -8,13 +13,19 @@ const config = {
framework: {
name: '<%= uiFramework %>',
options: {
<% if (usesVite) { %>
<% if (usesVite && viteConfigFilePath) { %>
builder: {
viteConfigPath: '<%= viteConfigFilePath %>',
},
<% } %>
},
},
<% if (usesVite && !viteConfigFilePath) { %>
viteFinal: async (config) =>
mergeConfig(config, {
plugins: [nxViteTsPaths()],
}),
<% } %>
};
export default config;