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): install nx/vite for non-buildable libs #18778

Merged
merged 1 commit into from
Aug 22, 2023
Merged

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

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 9 additions & 5 deletions ...ges/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
14 changes: 9 additions & 5 deletions ...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 @@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/storybook/src/generators/configuration/configuration.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand Down
11 changes: 11 additions & 0 deletions packages/storybook/src/generators/configuration/configuration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
12 changes: 11 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
@@ -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: [
Expand All @@ -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;
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,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') { %>
Expand All @@ -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;
Expand Down