@nx/storybook
Version:
141 lines (140 loc) • 6.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.configurationGenerator = configurationGenerator;
exports.configurationGeneratorInternal = configurationGeneratorInternal;
const devkit_1 = require("@nx/devkit");
const js_1 = require("@nx/js");
const init_1 = require("../init/init");
const util_functions_1 = require("./lib/util-functions");
const utilities_1 = require("../../utils/utilities");
const versions_1 = require("../../utils/versions");
const ensure_dependencies_1 = require("./lib/ensure-dependencies");
const edit_root_tsconfig_1 = require("./lib/edit-root-tsconfig");
const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
function configurationGenerator(tree, schema) {
return configurationGeneratorInternal(tree, { addPlugin: false, ...schema });
}
async function configurationGeneratorInternal(tree, rawSchema) {
const storybookMajor = (0, utilities_1.storybookMajorVersion)(tree);
if (storybookMajor > 0 && storybookMajor === 7) {
throw new Error((0, utilities_1.pleaseUpgrade)());
}
else if (storybookMajor === 8) {
devkit_1.logger.warn(`Support for Storybook 8 is deprecated. Please upgrade to Storybook 9. See https://nx.dev/nx-api/storybook/generators/migrate-9 for more details.`);
}
const schema = normalizeSchema(tree, rawSchema);
const tasks = [];
const { projectType, targets, root } = (0, devkit_1.readProjectConfiguration)(tree, schema.project);
const { compiler } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets);
const viteConfig = (0, util_functions_1.findViteConfig)(tree, root);
const viteConfigFilePath = viteConfig?.fullConfigPath;
const viteConfigFileName = viteConfig?.viteConfigFileName;
const nextConfigFilePath = (0, util_functions_1.findNextConfig)(tree, root);
if (viteConfigFilePath) {
if (schema.uiFramework === '@storybook/react-webpack5') {
devkit_1.logger.info(`Your project ${schema.project} uses Vite as a bundler.
Nx will configure Storybook for this project to use Vite as well.`);
schema.uiFramework = '@storybook/react-vite';
}
if (schema.uiFramework === '@storybook/web-components-webpack5') {
devkit_1.logger.info(`Your project ${schema.project} uses Vite as a bundler.
Nx will configure Storybook for this project to use Vite as well.`);
schema.uiFramework = '@storybook/web-components-vite';
}
}
if (nextConfigFilePath) {
schema.uiFramework = '@storybook/nextjs';
}
const jsInitTask = await (0, js_1.initGenerator)(tree, {
...schema,
skipFormat: true,
});
tasks.push(jsInitTask);
const initTask = await (0, init_1.initGenerator)(tree, {
skipFormat: true,
addPlugin: schema.addPlugin,
});
tasks.push(initTask);
tasks.push((0, ensure_dependencies_1.ensureDependencies)(tree, { uiFramework: schema.uiFramework }));
(0, edit_root_tsconfig_1.editRootTsConfig)(tree);
const nxJson = (0, devkit_1.readNxJson)(tree);
const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
? p === '@nx/storybook/plugin'
: p.plugin === '@nx/storybook/plugin');
const mainDir = !!nextConfigFilePath &&
(0, ts_solution_setup_1.getProjectType)(tree, root, projectType) === 'application'
? 'components'
: 'src';
const usesVite = !!viteConfigFilePath || schema.uiFramework?.endsWith('-vite');
const usesReactNative = (0, util_functions_1.isUsingReactNative)(schema.project);
(0, util_functions_1.createProjectStorybookDir)(tree, schema.project, schema.uiFramework, schema.js, schema.tsConfiguration, root, projectType, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), schema.interactionTests, mainDir, !!nextConfigFilePath, compiler === 'swc', usesVite, viteConfigFilePath, hasPlugin, viteConfigFileName, usesReactNative);
if (schema.uiFramework !== '@storybook/angular') {
(0, util_functions_1.createStorybookTsconfigFile)(tree, root, schema.uiFramework, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir);
}
(0, util_functions_1.configureTsProjectConfig)(tree, schema);
(0, util_functions_1.editTsconfigBaseJson)(tree);
(0, util_functions_1.configureTsSolutionConfig)(tree, schema);
(0, util_functions_1.updateLintConfig)(tree, schema);
(0, util_functions_1.addBuildStorybookToCacheableOperations)(tree);
(0, util_functions_1.addStorybookToNamedInputs)(tree);
if (!hasPlugin) {
(0, util_functions_1.addStorybookToTargetDefaults)(tree);
}
let devDeps = {};
if (!hasPlugin || schema.addExplicitTargets) {
if (schema.uiFramework === '@storybook/angular') {
(0, util_functions_1.addAngularStorybookTarget)(tree, schema.project, schema.interactionTests);
}
else {
(0, util_functions_1.addStorybookTarget)(tree, schema.project, schema.uiFramework, schema.interactionTests);
}
if (schema.configureStaticServe) {
await (0, util_functions_1.addStaticTarget)(tree, schema);
}
}
else {
devDeps['storybook'] = (0, utilities_1.getStorybookVersionToInstall)(tree);
}
if (schema.tsConfiguration) {
devDeps['ts-node'] = versions_1.tsNodeVersion;
}
if (usesVite && !viteConfigFilePath) {
devDeps['tslib'] = versions_1.tsLibVersion;
}
if (schema.configureStaticServe) {
devDeps['@nx/web'] = versions_1.nxVersion;
}
if (projectType !== 'application' &&
schema.uiFramework === '@storybook/react-webpack5') {
devDeps['core-js'] = versions_1.coreJsVersion;
}
if (schema.uiFramework?.endsWith('-vite') && !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'] = versions_1.nxVersion;
}
tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDeps));
if (!schema.skipFormat) {
await (0, devkit_1.formatFiles)(tree);
}
return (0, devkit_1.runTasksInSerial)(...tasks);
}
function normalizeSchema(tree, schema) {
const nxJson = (0, devkit_1.readNxJson)(tree);
const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
nxJson.useInferencePlugins !== false;
const defaults = {
interactionTests: true,
linter: 'eslint',
js: false,
tsConfiguration: true,
addPlugin,
};
return {
...defaults,
...schema,
};
}
exports.default = configurationGenerator;