@nxext/stencil
Version:
Nx plugin for stenciljs
180 lines (178 loc) • 7.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.storybookConfigurationSchematic = exports.createRootStorybookDir = exports.createProjectStorybookDir = exports.storybookConfigurationGenerator = void 0;
const tslib_1 = require("tslib");
const devkit_1 = require("@nrwl/devkit");
const run_tasks_in_serial_1 = require("@nrwl/workspace/src/utilities/run-tasks-in-serial");
const linter_1 = require("@nrwl/linter");
const path_1 = require("path");
const storybook_1 = require("@nrwl/storybook");
const init_1 = require("@nrwl/storybook/src/generators/init/init");
const update_lint_config_1 = require("./lib/update-lint-config");
const utillities_1 = require("../../utils/utillities");
function storybookConfigurationGenerator(tree, rawSchema) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
const tasks = [];
const uiFramework = '@storybook/html';
const options = normalizeSchema(rawSchema);
const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.name);
if (!(0, utillities_1.isBuildableStencilProject)(projectConfig)) {
devkit_1.logger.info((0, devkit_1.stripIndents) `
Please use a buildable library for storybook. Storybook needs a generated
Stencil loader to work (yet). They're working on native Stencil support, but
it's not ready yet.
You could make this library buildable with:
nx generate @nxext/stencil:make-lib-buildable ${options.name}
or
ng generate @nxext/stencil:make-lib-buildable ${options.name}
`);
return;
}
const initTask = yield (0, init_1.initGenerator)(tree, {
uiFramework: uiFramework
});
tasks.push(initTask);
createRootStorybookDir(tree);
createProjectStorybookDir(tree, options.name, uiFramework);
configureTsProjectConfig(tree, options);
configureTsSolutionConfig(tree, options);
(0, update_lint_config_1.updateLintConfig)(tree, options);
addStorybookTask(tree, options.name, uiFramework);
if (options.configureCypress) {
if (projectConfig.projectType !== 'application') {
const cypressTask = yield (0, storybook_1.cypressProjectGenerator)(tree, {
name: options.name,
js: false,
linter: options.linter,
directory: options.cypressDirectory,
standaloneConfig: options.standaloneConfig
});
tasks.push(cypressTask);
}
else {
devkit_1.logger.warn('There is already an e2e project setup');
}
}
yield (0, devkit_1.formatFiles)(tree);
return (0, run_tasks_in_serial_1.runTasksInSerial)(...tasks);
});
}
exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
function normalizeSchema(schema) {
const defaults = {
configureCypress: true,
linter: linter_1.Linter.EsLint
};
return Object.assign(Object.assign({}, defaults), schema);
}
function getTsConfigPath(tree, projectName, path) {
const { root, projectType } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
return (0, path_1.join)(root, path && path.length > 0
? path
: projectType === 'application'
? 'tsconfig.app.json'
: 'tsconfig.lib.json');
}
function createProjectStorybookDir(tree, projectName, uiFramework) {
const { root, projectType } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
const projectDirectory = projectType === 'application' ? 'app' : 'lib';
if (tree.exists((0, path_1.join)(root, '.storybook'))) {
return;
}
const templatePath = (0, path_1.join)(__dirname, './project-files');
const offset = (0, devkit_1.offsetFromRoot)(root);
(0, devkit_1.generateFiles)(tree, templatePath, root, {
tmpl: '',
dot: '.',
uiFramework,
offsetFromRoot: offset,
projectType: projectDirectory,
loaderDir: `${offset}../dist/${root}/loader`
});
}
exports.createProjectStorybookDir = createProjectStorybookDir;
function createRootStorybookDir(tree) {
if (tree.exists('.storybook')) {
return;
}
const templatePath = (0, path_1.join)(__dirname, './root-files');
(0, devkit_1.generateFiles)(tree, templatePath, '', { dot: '.' });
}
exports.createRootStorybookDir = createRootStorybookDir;
function configureTsProjectConfig(tree, schema) {
const { name: projectName } = schema;
let tsConfigPath;
let tsConfigContent;
try {
tsConfigPath = getTsConfigPath(tree, projectName);
tsConfigContent = (0, devkit_1.readJson)(tree, tsConfigPath);
}
catch (_a) {
/**
* Custom app configurations
* may contain a tsconfig.json
* instead of a tsconfig.app.json.
*/
tsConfigPath = getTsConfigPath(tree, projectName, 'tsconfig.json');
tsConfigContent = (0, devkit_1.readJson)(tree, tsConfigPath);
}
tsConfigContent.exclude = [
...(tsConfigContent.exclude || []),
'**/*.stories.ts',
'**/*.stories.js',
'**/*.stories.jsx',
'**/*.stories.tsx'
];
(0, devkit_1.writeJson)(tree, tsConfigPath, tsConfigContent);
}
function configureTsSolutionConfig(tree, schema) {
const { name: projectName } = schema;
const { root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
const tsConfigPath = (0, path_1.join)(root, 'tsconfig.json');
const tsConfigContent = (0, devkit_1.readJson)(tree, tsConfigPath);
tsConfigContent.references = [
...(tsConfigContent.references || []),
{
path: './.storybook/tsconfig.json'
}
];
(0, devkit_1.writeJson)(tree, tsConfigPath, tsConfigContent);
}
function addStorybookTask(tree, projectName, uiFramework) {
const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
projectConfig.targets['storybook'] = {
executor: '@nrwl/storybook:storybook',
options: {
uiFramework,
port: 4400,
config: {
configFolder: `${projectConfig.root}/.storybook`
}
},
configurations: {
ci: {
quiet: true
}
}
};
projectConfig.targets['build-storybook'] = {
executor: '@nrwl/storybook:build',
outputs: ['{options.outputPath}'],
options: {
uiFramework,
outputPath: (0, devkit_1.joinPathFragments)('dist/storybook', projectName),
config: {
configFolder: `${projectConfig.root}/.storybook`
}
},
configurations: {
ci: {
quiet: true
}
}
};
(0, devkit_1.updateProjectConfiguration)(tree, projectName, projectConfig);
}
exports.default = storybookConfigurationGenerator;
exports.storybookConfigurationSchematic = (0, devkit_1.convertNxGenerator)(storybookConfigurationGenerator);
//# sourceMappingURL=generator.js.map