mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Merge pull request #14358 from storybookjs/angular/refactor-server-test
Angular: Refactor angular server
This commit is contained in:
Michael Shilman
GitHub
commit
7eb9f89afb
@ -0,0 +1,4 @@
|
||||
{
|
||||
"version": 1,
|
||||
"projects": {}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
{
|
||||
"version": 1,
|
||||
"projects": {
|
||||
"foo-project": {
|
||||
"root": "",
|
||||
"architect": {
|
||||
"build": {
|
||||
"options": {
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"assets": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "foo-project"
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
// To avoid "No inputs were found in config file" tsc error
|
||||
export const not = 'empty';
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"module": "es2015",
|
||||
"types": ["node"]
|
||||
},
|
||||
"exclude": ["karma.ts", "**/*.spec.ts"]
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": ["es2017", "dom"]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
{
|
||||
"version": 1,
|
||||
"projects": {
|
||||
"foo-project": {
|
||||
"root": "",
|
||||
"architect": {
|
||||
"build": {
|
||||
"options": {
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"styles": ["src/styles.css", "src/styles.scss"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "foo-project"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"npmScope": "nx-example"
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
// To avoid "No inputs were found in config file" tsc error
|
||||
export const not = 'empty';
|
||||
@ -0,0 +1,2 @@
|
||||
.class {
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
.class {
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"module": "es2015",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"include": ["./src"],
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": ["es2017", "dom"]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
{
|
||||
"version": 1,
|
||||
"projects": {
|
||||
"foo-project": {
|
||||
"root": "",
|
||||
"architect": {
|
||||
"build": {
|
||||
"options": {
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"styles": ["src/styles.css", "src/styles.scss"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "foo-project"
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
// To avoid "No inputs were found in config file" tsc error
|
||||
export const not = 'empty';
|
||||
@ -0,0 +1,2 @@
|
||||
.class {
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
.class {
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"module": "es2015",
|
||||
"types": ["node"]
|
||||
},
|
||||
"exclude": ["karma.ts", "**/*.spec.ts"]
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es5",
|
||||
"lib": ["es2017", "dom"]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": 1,
|
||||
"projects": {
|
||||
"foo-project": {
|
||||
"architect": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "foo-project"
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"version": 1,
|
||||
"projects": { "foo-project": {} },
|
||||
"defaultProject": "foo-project"
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 1,
|
||||
"projects": {
|
||||
"noop-project": {}
|
||||
},
|
||||
"defaultProject": "missing-project"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"version": 1
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
import stripJsonComments from 'strip-json-comments';
|
||||
import { Path } from '@angular-devkit/core';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import {
|
||||
applyAngularCliWebpackConfig,
|
||||
getAngularCliWebpackConfigOptions,
|
||||
getLeadingAngularCliProject,
|
||||
} from '../angular-cli_config';
|
||||
|
||||
describe('angular-cli_config', () => {
|
||||
it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => {
|
||||
const config = getAngularCliWebpackConfigOptions(__dirname as Path);
|
||||
expect(config).toMatchObject({
|
||||
buildOptions: {
|
||||
sourceMap: {},
|
||||
optimization: {},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should use `storybook` project by default when `storybook` project is defined', () => {
|
||||
// Lazy clone example angular json
|
||||
const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8');
|
||||
const angularJsonWithStorybookProject = JSON.parse(stripJsonComments(angularJson));
|
||||
|
||||
// Add storybook project
|
||||
angularJsonWithStorybookProject.projects.storybook = {
|
||||
architect: {
|
||||
build: {
|
||||
options: {
|
||||
assets: [],
|
||||
styles: ['custom/styles'],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const projectConfig = getLeadingAngularCliProject(angularJsonWithStorybookProject);
|
||||
|
||||
// Assure configuration matches values from `storybook` project
|
||||
expect(projectConfig).toMatchObject({
|
||||
architect: {
|
||||
build: {
|
||||
options: {
|
||||
assets: [],
|
||||
styles: ['custom/styles'],
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should return null if `architect.build` option are not exists.', () => {
|
||||
const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8');
|
||||
const angularJsonWithNoBuildOptions = JSON.parse(stripJsonComments(angularJson));
|
||||
angularJsonWithNoBuildOptions.projects['angular-cli'].architect.build = undefined;
|
||||
|
||||
getLeadingAngularCliProject(angularJsonWithNoBuildOptions);
|
||||
|
||||
const config = getAngularCliWebpackConfigOptions('/' as Path);
|
||||
expect(config).toBeNull();
|
||||
});
|
||||
|
||||
it('should return baseConfig if no angular.json was found', () => {
|
||||
const baseConfig = { test: 'config' };
|
||||
const projectConfig = getAngularCliWebpackConfigOptions('test-path' as Path);
|
||||
const config = applyAngularCliWebpackConfig(baseConfig, projectConfig);
|
||||
|
||||
expect(projectConfig).toBe(null);
|
||||
expect(config).toBe(baseConfig);
|
||||
});
|
||||
|
||||
it('should return empty `buildOptions.budgets` by default', () => {
|
||||
const config = getAngularCliWebpackConfigOptions(__dirname as Path);
|
||||
expect(config).toMatchObject({
|
||||
buildOptions: {
|
||||
budgets: [],
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,227 +0,0 @@
|
||||
import { CompilerOptions } from 'typescript';
|
||||
import { Path } from '@angular-devkit/core';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
|
||||
import stripJsonComments from 'strip-json-comments';
|
||||
import {
|
||||
isBuildAngularInstalled,
|
||||
normalizeAssetPatterns,
|
||||
filterOutStylingRules,
|
||||
getAngularCliParts,
|
||||
} from './angular-cli_utils';
|
||||
|
||||
// todo add more accurate typings
|
||||
interface BasicOptions {
|
||||
options: {
|
||||
baseUrl?: string | undefined;
|
||||
};
|
||||
raw: object;
|
||||
fileNames: string[];
|
||||
errors: any[];
|
||||
}
|
||||
|
||||
function getTsConfigOptions(tsConfigPath: Path) {
|
||||
const basicOptions: BasicOptions = {
|
||||
options: {},
|
||||
raw: {},
|
||||
fileNames: [],
|
||||
errors: [],
|
||||
};
|
||||
|
||||
if (!fs.existsSync(tsConfigPath)) {
|
||||
return basicOptions;
|
||||
}
|
||||
|
||||
const tsConfig = JSON.parse(stripJsonComments(fs.readFileSync(tsConfigPath, 'utf8')));
|
||||
|
||||
if (tsConfig.compilerOptions && tsConfig.compilerOptions.baseUrl) {
|
||||
const { baseUrl } = tsConfig.compilerOptions as CompilerOptions;
|
||||
const tsConfigDirName = path.dirname(tsConfigPath);
|
||||
basicOptions.options.baseUrl = path.resolve(tsConfigDirName, baseUrl);
|
||||
}
|
||||
|
||||
return basicOptions;
|
||||
}
|
||||
|
||||
export function getAngularCliConfig(dirToSearch: string) {
|
||||
let angularCliConfig;
|
||||
try {
|
||||
/**
|
||||
* Apologies for the following line
|
||||
* If there's a better way to do it, let's do it
|
||||
*/
|
||||
/* eslint-disable global-require */
|
||||
angularCliConfig = require('@nrwl/workspace').readWorkspaceConfig({
|
||||
format: 'angularCli',
|
||||
});
|
||||
} catch (e) {
|
||||
const possibleConfigNames = ['angular.json', 'workspace.json'];
|
||||
const possibleConfigPaths = possibleConfigNames.map((name) => path.join(dirToSearch, name));
|
||||
|
||||
const validIndex = possibleConfigPaths.findIndex((configPath) => fs.existsSync(configPath));
|
||||
|
||||
if (validIndex === -1) {
|
||||
logger.error(`Could not find angular.json using ${possibleConfigPaths[0]}`);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
angularCliConfig = JSON.parse(
|
||||
stripJsonComments(fs.readFileSync(possibleConfigPaths[validIndex], 'utf8'))
|
||||
);
|
||||
}
|
||||
return angularCliConfig;
|
||||
}
|
||||
|
||||
export function getLeadingAngularCliProject(ngCliConfig: any) {
|
||||
if (!ngCliConfig) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { defaultProject } = ngCliConfig;
|
||||
const { projects } = ngCliConfig;
|
||||
if (!projects || !Object.keys(projects).length) {
|
||||
throw new Error('angular.json must have projects entry.');
|
||||
}
|
||||
|
||||
let projectName;
|
||||
const firstProjectName = Object.keys(projects)[0];
|
||||
const environmentProjectName = process.env.STORYBOOK_ANGULAR_PROJECT;
|
||||
if (environmentProjectName) {
|
||||
projectName = environmentProjectName;
|
||||
} else if (projects.storybook) {
|
||||
projectName = 'storybook';
|
||||
} else if (defaultProject && projects[defaultProject]) {
|
||||
projectName = defaultProject;
|
||||
} else if (projects[firstProjectName]) {
|
||||
projectName = firstProjectName;
|
||||
}
|
||||
|
||||
const project = projects[projectName];
|
||||
if (!project) {
|
||||
logger.error(`Could not find angular project '${projectName}' in angular.json.`);
|
||||
} else {
|
||||
logger.info(`=> Using angular project '${projectName}' for configuring Storybook.`);
|
||||
}
|
||||
if (project && !project.architect.build) {
|
||||
logger.error(`architect.build is not defined for project '${projectName}'.`);
|
||||
}
|
||||
return project;
|
||||
}
|
||||
|
||||
export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
|
||||
const angularCliConfig = getAngularCliConfig(dirToSearch);
|
||||
const project = getLeadingAngularCliProject(angularCliConfig);
|
||||
|
||||
if (!angularCliConfig || !project.architect.build) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { options: projectOptions } = project.architect.build;
|
||||
const normalizedAssets = normalizeAssetPatterns(
|
||||
projectOptions.assets,
|
||||
dirToSearch,
|
||||
project.sourceRoot
|
||||
);
|
||||
const projectRoot = path.resolve(dirToSearch, project.root);
|
||||
const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig) as Path;
|
||||
const tsConfig = getTsConfigOptions(tsConfigPath);
|
||||
const budgets = projectOptions.budgets || [];
|
||||
const scripts = projectOptions.scripts || [];
|
||||
const outputPath = projectOptions.outputPath || 'dist/storybook-angular';
|
||||
const styles = projectOptions.styles || [];
|
||||
|
||||
return {
|
||||
root: dirToSearch,
|
||||
projectRoot,
|
||||
tsConfigPath,
|
||||
tsConfig,
|
||||
supportES2015: false,
|
||||
buildOptions: {
|
||||
sourceMap: false,
|
||||
optimization: {
|
||||
styles: true,
|
||||
scripts: true,
|
||||
},
|
||||
...projectOptions,
|
||||
assets: normalizedAssets,
|
||||
budgets,
|
||||
scripts,
|
||||
styles,
|
||||
outputPath,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// todo add types
|
||||
export function applyAngularCliWebpackConfig(baseConfig: any, cliWebpackConfigOptions: any) {
|
||||
if (!cliWebpackConfigOptions) {
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
if (!isBuildAngularInstalled()) {
|
||||
logger.info('=> Using base config because @angular-devkit/build-angular is not installed.');
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
const cliParts = getAngularCliParts(cliWebpackConfigOptions);
|
||||
|
||||
if (!cliParts) {
|
||||
logger.warn('=> Failed to get angular-cli webpack config.');
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
logger.info('=> Get angular-cli webpack config.');
|
||||
|
||||
const { cliCommonConfig, cliStyleConfig } = cliParts;
|
||||
|
||||
// Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
|
||||
// because @angular-devkit/build-angular created rules have include/exclude for global style files.
|
||||
const rulesExcludingStyles = filterOutStylingRules(baseConfig);
|
||||
|
||||
// cliStyleConfig.entry adds global style files to the webpack context
|
||||
// todo add type for acc
|
||||
const entry = [
|
||||
...baseConfig.entry,
|
||||
...Object.values(cliStyleConfig.entry).reduce((acc: any, item) => acc.concat(item), []),
|
||||
];
|
||||
|
||||
const module = {
|
||||
...baseConfig.module,
|
||||
rules: [...cliStyleConfig.module.rules, ...rulesExcludingStyles],
|
||||
};
|
||||
|
||||
// We use cliCommonConfig plugins to serve static assets files.
|
||||
const plugins = [...cliStyleConfig.plugins, ...cliCommonConfig.plugins, ...baseConfig.plugins];
|
||||
|
||||
const resolve = {
|
||||
...baseConfig.resolve,
|
||||
modules: Array.from(
|
||||
new Set([...baseConfig.resolve.modules, ...cliCommonConfig.resolve.modules])
|
||||
),
|
||||
plugins: [
|
||||
new TsconfigPathsPlugin({
|
||||
configFile: cliWebpackConfigOptions.buildOptions.tsConfig,
|
||||
// After ng build my-lib the default value of 'main' in the package.json is 'umd'
|
||||
// This causes that you cannot import components directly from dist
|
||||
// https://github.com/angular/angular-cli/blob/9f114aee1e009c3580784dd3bb7299bdf4a5918c/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L68
|
||||
mainFields: [
|
||||
...(cliWebpackConfigOptions.supportES2015 ? ['es2015'] : []),
|
||||
'browser',
|
||||
'module',
|
||||
'main',
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
entry,
|
||||
module,
|
||||
plugins,
|
||||
resolve,
|
||||
resolveLoader: cliCommonConfig.resolveLoader,
|
||||
};
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
import fs from 'fs';
|
||||
import {
|
||||
basename,
|
||||
dirname,
|
||||
normalize,
|
||||
relative,
|
||||
resolve,
|
||||
Path,
|
||||
getSystemPath,
|
||||
} from '@angular-devkit/core';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
|
||||
import { RuleSetRule, Configuration } from 'webpack';
|
||||
|
||||
// We need to dynamically require theses functions as they are not part of the public api and so their paths
|
||||
// aren't the same in all versions of Angular
|
||||
let angularWebpackConfig: {
|
||||
getCommonConfig: (config: unknown) => Configuration;
|
||||
getStylesConfig: (config: unknown) => Configuration;
|
||||
};
|
||||
try {
|
||||
// First we look for webpack config according to directory structure of Angular 11
|
||||
// eslint-disable-next-line global-require
|
||||
angularWebpackConfig = require('@angular-devkit/build-angular/src/webpack/configs');
|
||||
} catch (e) {
|
||||
// We fallback on directory structure of Angular 10 (and below)
|
||||
// eslint-disable-next-line global-require
|
||||
angularWebpackConfig = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
|
||||
}
|
||||
|
||||
const { getCommonConfig, getStylesConfig } = angularWebpackConfig;
|
||||
|
||||
function isDirectory(assetPath: string) {
|
||||
try {
|
||||
return fs.statSync(assetPath).isDirectory();
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function getAssetsParts(resolvedAssetPath: Path, assetPath: Path) {
|
||||
if (isDirectory(getSystemPath(resolvedAssetPath))) {
|
||||
return {
|
||||
glob: '**/*', // Folders get a recursive star glob.
|
||||
input: assetPath, // Input directory is their original path.
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
glob: basename(assetPath), // Files are their own glob.
|
||||
input: dirname(assetPath), // Input directory is their original dirname.
|
||||
};
|
||||
}
|
||||
|
||||
function isStylingRule(rule: RuleSetRule) {
|
||||
const { test } = rule;
|
||||
|
||||
if (!test) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!(test instanceof RegExp)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return test.test('.css') || test.test('.scss') || test.test('.sass');
|
||||
}
|
||||
|
||||
export function filterOutStylingRules(config: Configuration) {
|
||||
// @ts-ignore
|
||||
return config.module.rules.filter((rule) => !isStylingRule(rule));
|
||||
}
|
||||
|
||||
export function isBuildAngularInstalled() {
|
||||
try {
|
||||
require.resolve('@angular-devkit/build-angular');
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// todo add type
|
||||
export function getAngularCliParts(cliWebpackConfigOptions: any) {
|
||||
try {
|
||||
return {
|
||||
cliCommonConfig: getCommonConfig(cliWebpackConfigOptions),
|
||||
cliStyleConfig: getStylesConfig(cliWebpackConfigOptions),
|
||||
};
|
||||
} catch (e) {
|
||||
logger.warn("Failed to load the Angular CLI config. Using Storybook's default config instead.");
|
||||
logger.warn(e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// todo fix any
|
||||
export function normalizeAssetPatterns(assetPatterns: any, dirToSearch: Path, sourceRoot: Path) {
|
||||
if (!assetPatterns || !assetPatterns.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// todo fix any
|
||||
return assetPatterns.map((assetPattern: any) => {
|
||||
if (typeof assetPattern === 'object') {
|
||||
return assetPattern;
|
||||
}
|
||||
|
||||
const assetPath = normalize(assetPattern);
|
||||
const resolvedSourceRoot = resolve(dirToSearch, sourceRoot);
|
||||
const resolvedAssetPath = resolve(dirToSearch, assetPath);
|
||||
const parts = getAssetsParts(resolvedAssetPath, assetPath);
|
||||
|
||||
// Output directory for both is the relative path from source root to input.
|
||||
const output = relative(resolvedSourceRoot, resolve(dirToSearch, parts.input));
|
||||
|
||||
// Return the asset pattern in object format.
|
||||
return {
|
||||
...parts,
|
||||
output,
|
||||
};
|
||||
});
|
||||
}
|
||||
199
app/angular/src/server/angular-devkit-build-webpack.ts
Normal file
199
app/angular/src/server/angular-devkit-build-webpack.ts
Normal file
@ -0,0 +1,199 @@
|
||||
/**
|
||||
* This file is to be watched !
|
||||
* The code must be compatible from @angular-devkit version 6.1.0 to the latest supported
|
||||
*
|
||||
* It uses code block of angular cli to extract parts of webpack configuration
|
||||
*/
|
||||
|
||||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import { normalize, resolve, workspaces } from '@angular-devkit/core';
|
||||
import { createConsoleLogger } from '@angular-devkit/core/node';
|
||||
|
||||
// Only type, so not dependent on the client version
|
||||
import {
|
||||
WebpackConfigOptions,
|
||||
BuildOptions,
|
||||
} from '@angular-devkit/build-angular/src/utils/build-options';
|
||||
|
||||
import { moduleIsAvailable } from './utils/module-is-available';
|
||||
import { normalizeAssetPatterns } from './utils/normalize-asset-patterns';
|
||||
|
||||
const importAngularCliWebpackConfigGenerator = (): {
|
||||
getCommonConfig: (config: unknown) => webpack.Configuration;
|
||||
getStylesConfig: (config: unknown) => webpack.Configuration;
|
||||
} => {
|
||||
let angularWebpackConfig;
|
||||
|
||||
// First we look for webpack config according to directory structure of Angular 11
|
||||
if (moduleIsAvailable('@angular-devkit/build-angular/src/webpack/configs')) {
|
||||
// eslint-disable-next-line global-require
|
||||
angularWebpackConfig = require('@angular-devkit/build-angular/src/webpack/configs');
|
||||
}
|
||||
// We fallback on directory structure of Angular 10 (and below)
|
||||
else if (
|
||||
moduleIsAvailable('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs')
|
||||
) {
|
||||
// eslint-disable-next-line global-require
|
||||
angularWebpackConfig = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
|
||||
} else {
|
||||
throw new Error('Webpack config not found in "@angular-devkit/build-angular"');
|
||||
}
|
||||
|
||||
return {
|
||||
getCommonConfig: angularWebpackConfig.getCommonConfig,
|
||||
getStylesConfig: angularWebpackConfig.getStylesConfig,
|
||||
};
|
||||
};
|
||||
|
||||
const importAngularCliReadTsconfigUtil = (): typeof import('@angular-devkit/build-angular/src/utils/read-tsconfig') => {
|
||||
// First we look for webpack config according to directory structure of Angular 11
|
||||
if (moduleIsAvailable('@angular-devkit/build-angular/src/utils/read-tsconfig')) {
|
||||
// eslint-disable-next-line global-require
|
||||
return require('@angular-devkit/build-angular/src/utils/read-tsconfig');
|
||||
}
|
||||
// We fallback on directory structure of Angular 10 (and below)
|
||||
if (
|
||||
moduleIsAvailable('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig')
|
||||
) {
|
||||
// eslint-disable-next-line global-require
|
||||
return require('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig');
|
||||
}
|
||||
throw new Error('ReadTsconfig not found in "@angular-devkit/build-angular"');
|
||||
};
|
||||
|
||||
export class ProjectTargetNotFoundError implements Error {
|
||||
name = 'ProjectTargetNotFoundError';
|
||||
|
||||
message: string;
|
||||
|
||||
constructor(public projectTarget: string) {
|
||||
this.message = `No project target "${projectTarget}" fond.`;
|
||||
}
|
||||
}
|
||||
|
||||
const buildWebpackConfigOptions = async (
|
||||
dirToSearch: string,
|
||||
project: workspaces.ProjectDefinition,
|
||||
projectTarget = 'build'
|
||||
): Promise<WebpackConfigOptions> => {
|
||||
if (!project.targets.has(projectTarget)) {
|
||||
throw new ProjectTargetNotFoundError(projectTarget);
|
||||
}
|
||||
|
||||
const { options: projectBuildOptions = {} } = project.targets.get(projectTarget);
|
||||
|
||||
const requiredOptions = ['tsConfig', 'assets', 'optimization'];
|
||||
|
||||
if (!requiredOptions.every((key) => key in projectBuildOptions)) {
|
||||
throw new Error(
|
||||
`Missing required options in project target. Check "${requiredOptions.join(', ')}"`
|
||||
);
|
||||
}
|
||||
|
||||
const workspaceRoot = normalize(dirToSearch);
|
||||
const projectRoot = resolve(workspaceRoot, normalize((project.root as string) || ''));
|
||||
const sourceRoot = project.sourceRoot
|
||||
? resolve(workspaceRoot, normalize(project.sourceRoot))
|
||||
: undefined;
|
||||
|
||||
const tsConfigPath = path.resolve(workspaceRoot, projectBuildOptions.tsConfig as string);
|
||||
const tsConfig = importAngularCliReadTsconfigUtil().readTsconfig(tsConfigPath);
|
||||
|
||||
const ts = await import('typescript');
|
||||
const scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5;
|
||||
|
||||
const buildOptions: BuildOptions = {
|
||||
// Default options
|
||||
budgets: [],
|
||||
fileReplacements: [],
|
||||
main: '',
|
||||
outputPath: 'dist/storybook-angular',
|
||||
scripts: [],
|
||||
sourceMap: {},
|
||||
styles: [],
|
||||
lazyModules: [],
|
||||
|
||||
// Project Options
|
||||
...projectBuildOptions,
|
||||
assets: normalizeAssetPatterns(
|
||||
(projectBuildOptions.assets as any[]) || [],
|
||||
workspaceRoot,
|
||||
projectRoot,
|
||||
sourceRoot
|
||||
),
|
||||
optimization: (projectBuildOptions.optimization as any) ?? {
|
||||
styles: {},
|
||||
scripts: true,
|
||||
fonts: {},
|
||||
},
|
||||
|
||||
// Forced options
|
||||
statsJson: false,
|
||||
forkTypeChecker: false,
|
||||
};
|
||||
|
||||
return {
|
||||
root: workspaceRoot,
|
||||
// The dependency of `@angular-devkit/build-angular` to `@angular-devkit/core` is not exactly the same version as the one for storybook (node modules of node modules ^^)
|
||||
logger: (createConsoleLogger() as unknown) as WebpackConfigOptions['logger'],
|
||||
projectRoot,
|
||||
sourceRoot,
|
||||
buildOptions,
|
||||
tsConfig,
|
||||
tsConfigPath,
|
||||
scriptTarget,
|
||||
};
|
||||
};
|
||||
|
||||
export type AngularCliWebpackConfig = {
|
||||
cliCommonWebpackConfig: {
|
||||
plugins: webpack.Plugin[];
|
||||
resolve: {
|
||||
modules: string[];
|
||||
};
|
||||
resolveLoader: webpack.ResolveLoader;
|
||||
};
|
||||
cliStyleWebpackConfig: {
|
||||
entry: string | string[] | webpack.Entry | webpack.EntryFunc;
|
||||
module: {
|
||||
rules: webpack.RuleSetRule[];
|
||||
};
|
||||
plugins: webpack.Plugin[];
|
||||
};
|
||||
tsConfigPath: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Uses angular cli to extract webpack configuration.
|
||||
* The `AngularCliWebpackConfig` type lists the parts used by storybook
|
||||
*/
|
||||
export async function extractAngularCliWebpackConfig(
|
||||
dirToSearch: string,
|
||||
project: workspaces.ProjectDefinition
|
||||
): Promise<AngularCliWebpackConfig> {
|
||||
const { getCommonConfig, getStylesConfig } = importAngularCliWebpackConfigGenerator();
|
||||
|
||||
const webpackConfigOptions = await buildWebpackConfigOptions(dirToSearch, project);
|
||||
|
||||
const cliCommonConfig = getCommonConfig(webpackConfigOptions);
|
||||
const cliStyleConfig = getStylesConfig(webpackConfigOptions);
|
||||
|
||||
return {
|
||||
cliCommonWebpackConfig: {
|
||||
plugins: cliCommonConfig.plugins,
|
||||
resolve: {
|
||||
modules: cliCommonConfig.resolve?.modules,
|
||||
},
|
||||
resolveLoader: cliCommonConfig.resolveLoader,
|
||||
},
|
||||
cliStyleWebpackConfig: {
|
||||
entry: cliStyleConfig.entry,
|
||||
module: {
|
||||
rules: [...cliStyleConfig.module.rules],
|
||||
},
|
||||
plugins: cliStyleConfig.plugins,
|
||||
},
|
||||
tsConfigPath: webpackConfigOptions.tsConfigPath,
|
||||
};
|
||||
}
|
||||
81
app/angular/src/server/angular-read-workspace.ts
Normal file
81
app/angular/src/server/angular-read-workspace.ts
Normal file
@ -0,0 +1,81 @@
|
||||
import { NodeJsSyncHost } from '@angular-devkit/core/node';
|
||||
import { workspaces } from '@angular-devkit/core';
|
||||
|
||||
/**
|
||||
* Returns the workspace definition
|
||||
*
|
||||
* - Either from NX if it is present
|
||||
* - Either from `@angular-devkit/core` -> https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/core
|
||||
*/
|
||||
export const readAngularWorkspaceConfig = async (
|
||||
dirToSearch: string
|
||||
): Promise<workspaces.WorkspaceDefinition> => {
|
||||
const host = workspaces.createWorkspaceHost(new NodeJsSyncHost());
|
||||
|
||||
try {
|
||||
/**
|
||||
* Apologies for the following line
|
||||
* If there's a better way to do it, let's do it
|
||||
*/
|
||||
/* eslint-disable global-require */
|
||||
|
||||
// catch if nx.json does not exist
|
||||
require('@nrwl/workspace').readNxJson();
|
||||
|
||||
const nxWorkspace = require('@nrwl/workspace').readWorkspaceConfig({
|
||||
format: 'angularCli',
|
||||
});
|
||||
|
||||
// Use the workspace version of nx when angular looks for the angular.json file
|
||||
host.readFile = (path) => {
|
||||
if (typeof path === 'string' && path.endsWith('angular.json')) {
|
||||
return Promise.resolve(JSON.stringify(nxWorkspace));
|
||||
}
|
||||
return host.readFile(path);
|
||||
};
|
||||
} catch (e) {
|
||||
// Ignore if the client does not use NX
|
||||
}
|
||||
|
||||
return (await workspaces.readWorkspace(dirToSearch, host)).workspace;
|
||||
};
|
||||
|
||||
export const getProjectName = (workspace: workspaces.WorkspaceDefinition): string => {
|
||||
const environmentProjectName = process.env.STORYBOOK_ANGULAR_PROJECT;
|
||||
if (environmentProjectName) {
|
||||
return environmentProjectName;
|
||||
}
|
||||
|
||||
if (workspace.projects.has('storybook')) {
|
||||
return 'storybook';
|
||||
}
|
||||
if (workspace.extensions.defaultProject) {
|
||||
return workspace.extensions.defaultProject as string;
|
||||
}
|
||||
|
||||
const firstProjectName = workspace.projects.keys().next().value;
|
||||
if (firstProjectName) {
|
||||
return firstProjectName;
|
||||
}
|
||||
throw new Error('No angular projects found.');
|
||||
};
|
||||
|
||||
export const findAngularProject = (
|
||||
workspace: workspaces.WorkspaceDefinition
|
||||
): {
|
||||
projectName: string;
|
||||
project: workspaces.ProjectDefinition;
|
||||
} => {
|
||||
if (!workspace.projects || !Object.keys(workspace.projects).length) {
|
||||
throw new Error('No angular projects found.');
|
||||
}
|
||||
|
||||
const projectName = getProjectName(workspace);
|
||||
|
||||
const project = workspace.projects.get(projectName);
|
||||
|
||||
if (!project) {
|
||||
throw new Error(`Could not find angular project '${projectName}' in angular.json.`);
|
||||
}
|
||||
return { projectName, project };
|
||||
};
|
||||
493
app/angular/src/server/framework-preset-angular-cli.test.ts
Normal file
493
app/angular/src/server/framework-preset-angular-cli.test.ts
Normal file
@ -0,0 +1,493 @@
|
||||
/* eslint-disable jest/no-interpolation-in-snapshots */
|
||||
import { Configuration } from 'webpack';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { webpackFinal } from './framework-preset-angular-cli';
|
||||
|
||||
const testPath = __dirname;
|
||||
|
||||
let workspaceRoot = testPath;
|
||||
let cwdSpy: jest.SpyInstance;
|
||||
|
||||
beforeEach(() => {
|
||||
cwdSpy = jest.spyOn(process, 'cwd');
|
||||
jest.spyOn(logger, 'error').mockImplementation();
|
||||
jest.spyOn(logger, 'info').mockImplementation();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
function initMockWorkspace(name: string) {
|
||||
workspaceRoot = `${testPath}/__mocks-ng-workspace__/${name}`;
|
||||
cwdSpy.mockReturnValue(workspaceRoot);
|
||||
}
|
||||
|
||||
describe('framework-preset-angular-cli', () => {
|
||||
describe('without angular.json', () => {
|
||||
let consoleErrorSpy: jest.SpyInstance;
|
||||
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('');
|
||||
consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
|
||||
});
|
||||
it('should return webpack base config and display log error', async () => {
|
||||
const webpackBaseConfig = newWebpackConfiguration();
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.error).toHaveBeenCalledWith(
|
||||
`=> Could not find angular workspace config (angular.json) on this path "${workspaceRoot}"`
|
||||
);
|
||||
|
||||
expect(config).toEqual(webpackBaseConfig);
|
||||
});
|
||||
});
|
||||
|
||||
describe("when angular.json haven't projects entry", () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('without-projects-entry');
|
||||
});
|
||||
it('should return webpack base config and display log error', async () => {
|
||||
const webpackBaseConfig = newWebpackConfiguration();
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project');
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Fail to load angular-cli config. Using base config'
|
||||
);
|
||||
|
||||
expect(config).toEqual(webpackBaseConfig);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when angular.json have empty projects entry', () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('empty-projects-entry');
|
||||
});
|
||||
it('should return webpack base config and display log error', async () => {
|
||||
const webpackBaseConfig = newWebpackConfiguration();
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project');
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Fail to load angular-cli config. Using base config'
|
||||
);
|
||||
|
||||
expect(config).toEqual(webpackBaseConfig);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when angular.json does not have a compatible project', () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('without-compatible-projects');
|
||||
});
|
||||
it('should return webpack base config and display log error', async () => {
|
||||
const webpackBaseConfig = newWebpackConfiguration();
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project');
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Fail to load angular-cli config. Using base config'
|
||||
);
|
||||
|
||||
expect(config).toEqual(webpackBaseConfig);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when angular.json have projects without architect.build', () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('without-architect-build');
|
||||
});
|
||||
it('should return webpack base config and display log error', async () => {
|
||||
const webpackBaseConfig = newWebpackConfiguration();
|
||||
|
||||
const config = await webpackFinal(webpackBaseConfig);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
|
||||
expect(logger.error).toHaveBeenCalledWith(
|
||||
'=> "build" target is not defined in project "foo-project"'
|
||||
);
|
||||
expect(logger.info).toHaveBeenCalledWith(
|
||||
'=> Fail to load angular-cli config. Using base config'
|
||||
);
|
||||
|
||||
expect(config).toEqual(webpackBaseConfig);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when angular.json have projects without architect.build.options', () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('without-architect-build-options');
|
||||
});
|
||||
it('throws error', async () => {
|
||||
await expect(() => webpackFinal(newWebpackConfiguration())).rejects.toThrowError(
|
||||
'Missing required options in project target. Check "tsConfig, assets, optimization"'
|
||||
);
|
||||
expect(logger.error).toHaveBeenCalledWith(`=> Could not get angular cli webpack config`);
|
||||
});
|
||||
});
|
||||
describe('when angular.json have minimal config', () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('minimal-config');
|
||||
});
|
||||
it('should log', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(logger.info).toHaveBeenCalledTimes(3);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(1, '=> Loading angular-cli config');
|
||||
expect(logger.info).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
'=> Using angular project "foo-project" for configuring Storybook'
|
||||
);
|
||||
expect(logger.info).toHaveBeenNthCalledWith(3, '=> Using angular-cli webpack config');
|
||||
});
|
||||
|
||||
it('should extends webpack base config', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig).toEqual({
|
||||
...baseWebpackConfig,
|
||||
module: { ...baseWebpackConfig.module, rules: expect.anything() },
|
||||
plugins: expect.anything(),
|
||||
resolve: {
|
||||
...baseWebpackConfig.resolve,
|
||||
modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),
|
||||
// the base resolve.plugins are not kept 🤷♂️
|
||||
plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),
|
||||
},
|
||||
resolveLoader: expect.anything(),
|
||||
});
|
||||
});
|
||||
|
||||
it('should set webpack "module.rules"', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig.module.rules).toEqual([
|
||||
{
|
||||
exclude: [],
|
||||
test: /\.css$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [],
|
||||
test: /\.scss$|\.sass$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [],
|
||||
test: /\.less$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [],
|
||||
test: /\.styl$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
...baseWebpackConfig.module.rules,
|
||||
]);
|
||||
});
|
||||
|
||||
it('should set webpack "plugins"', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig.plugins).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
AnyComponentStyleBudgetChecker {
|
||||
"budgets": Array [],
|
||||
},
|
||||
ContextReplacementPlugin {
|
||||
"newContentRecursive": undefined,
|
||||
"newContentRegExp": undefined,
|
||||
"newContentResource": undefined,
|
||||
"resourceRegExp": /\\\\@angular\\(\\\\\\\\\\|\\\\/\\)core\\(\\\\\\\\\\|\\\\/\\)/,
|
||||
},
|
||||
DedupeModuleResolvePlugin {
|
||||
"modules": Map {},
|
||||
"options": Object {
|
||||
"verbose": undefined,
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"keepBasePlugin": true,
|
||||
},
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('should set webpack "resolve.modules"', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig.resolve.modules).toEqual([
|
||||
...baseWebpackConfig.resolve.modules,
|
||||
`${workspaceRoot}/src`,
|
||||
]);
|
||||
});
|
||||
|
||||
it('should replace webpack "resolve.plugins"', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig.resolve.plugins).toMatchInlineSnapshot(`
|
||||
Array [
|
||||
TsconfigPathsPlugin {
|
||||
"absoluteBaseUrl": "${workspaceRoot}/src/",
|
||||
"baseUrl": "./",
|
||||
"extensions": Array [
|
||||
".ts",
|
||||
".tsx",
|
||||
],
|
||||
"log": Object {
|
||||
"log": [Function],
|
||||
"logError": [Function],
|
||||
"logInfo": [Function],
|
||||
"logWarning": [Function],
|
||||
},
|
||||
"matchPath": [Function],
|
||||
"source": "described-resolve",
|
||||
"target": "resolve",
|
||||
},
|
||||
]
|
||||
`);
|
||||
});
|
||||
});
|
||||
describe('when angular.json have "options.styles" config', () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('with-options-styles');
|
||||
});
|
||||
|
||||
it('should extends webpack base config', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig).toEqual({
|
||||
...baseWebpackConfig,
|
||||
entry: [
|
||||
...(baseWebpackConfig.entry as any[]),
|
||||
`${workspaceRoot}/src/styles.css`,
|
||||
`${workspaceRoot}/src/styles.scss`,
|
||||
],
|
||||
module: { ...baseWebpackConfig.module, rules: expect.anything() },
|
||||
plugins: expect.anything(),
|
||||
resolve: {
|
||||
...baseWebpackConfig.resolve,
|
||||
modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),
|
||||
// the base resolve.plugins are not kept 🤷♂️
|
||||
plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),
|
||||
},
|
||||
resolveLoader: expect.anything(),
|
||||
});
|
||||
});
|
||||
|
||||
it('should set webpack "module.rules"', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig.module.rules).toEqual([
|
||||
{
|
||||
exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.css$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.scss$|\.sass$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.less$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.styl$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.css$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.scss$|\.sass$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.less$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.styl$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
...baseWebpackConfig.module.rules,
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when is a nx workspace', () => {
|
||||
beforeEach(() => {
|
||||
initMockWorkspace('with-nx');
|
||||
});
|
||||
|
||||
it('should extends webpack base config', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig).toEqual({
|
||||
...baseWebpackConfig,
|
||||
entry: [
|
||||
...(baseWebpackConfig.entry as any[]),
|
||||
`${workspaceRoot}/src/styles.css`,
|
||||
`${workspaceRoot}/src/styles.scss`,
|
||||
],
|
||||
module: { ...baseWebpackConfig.module, rules: expect.anything() },
|
||||
plugins: expect.anything(),
|
||||
resolve: {
|
||||
...baseWebpackConfig.resolve,
|
||||
modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),
|
||||
// the base resolve.plugins are not kept 🤷♂️
|
||||
plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),
|
||||
},
|
||||
resolveLoader: expect.anything(),
|
||||
});
|
||||
});
|
||||
|
||||
it('should set webpack "module.rules"', async () => {
|
||||
const baseWebpackConfig = newWebpackConfiguration();
|
||||
const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
|
||||
|
||||
expect(webpackFinalConfig.module.rules).toEqual([
|
||||
{
|
||||
exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.css$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.scss$|\.sass$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.less$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.styl$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.css$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.scss$|\.sass$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.less$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
{
|
||||
include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
|
||||
test: /\.styl$/,
|
||||
use: expect.anything(),
|
||||
},
|
||||
...baseWebpackConfig.module.rules,
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const newWebpackConfiguration = (
|
||||
transformer: (c: Configuration) => Configuration = (c) => c
|
||||
): Configuration => {
|
||||
return transformer({
|
||||
name: 'preview',
|
||||
mode: 'development',
|
||||
bail: false,
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: [
|
||||
'/Users/joe/storybook/lib/core-server/dist/cjs/globals/polyfills.js',
|
||||
'/Users/joe/storybook/lib/core-server/dist/cjs/globals/globals.js',
|
||||
'/Users/joe/storybook/examples/angular-cli/.storybook/storybook-init-framework-entry.js',
|
||||
'/Users/joe/storybook/addons/docs/dist/esm/frameworks/common/config.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/docs/dist/esm/frameworks/angular/config.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/actions/dist/esm/preset/addDecorator.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/actions/dist/esm/preset/addArgs.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/links/dist/esm/preset/addDecorator.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/knobs/dist/esm/preset/addDecorator.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/a11y/dist/esm/a11yRunner.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/addons/a11y/dist/esm/a11yHighlight.js-generated-other-entry.js',
|
||||
'/Users/joe/storybook/examples/angular-cli/.storybook/preview.ts-generated-config-entry.js',
|
||||
'/Users/joe/storybook/examples/angular-cli/.storybook/generated-stories-entry.js',
|
||||
'/Users/joe/storybook/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined',
|
||||
],
|
||||
output: {
|
||||
path: '/Users/joe/storybook/examples/angular-cli/node_modules/.cache/storybook/public',
|
||||
filename: '[name].[hash].bundle.js',
|
||||
publicPath: '',
|
||||
},
|
||||
plugins: [{ keepBasePlugin: true } as any],
|
||||
module: {
|
||||
rules: [{ keepBaseRule: true } as any],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
|
||||
modules: ['node_modules'],
|
||||
mainFields: ['browser', 'main'],
|
||||
alias: {
|
||||
'@emotion/core': '/Users/joe/storybook/node_modules/@emotion/core',
|
||||
'@emotion/styled': '/Users/joe/storybook/node_modules/@emotion/styled',
|
||||
'emotion-theming': '/Users/joe/storybook/node_modules/emotion-theming',
|
||||
'@storybook/addons': '/Users/joe/storybook/lib/addons',
|
||||
'@storybook/api': '/Users/joe/storybook/lib/api',
|
||||
'@storybook/channels': '/Users/joe/storybook/lib/channels',
|
||||
'@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage',
|
||||
'@storybook/components': '/Users/joe/storybook/lib/components',
|
||||
'@storybook/core-events': '/Users/joe/storybook/lib/core-events',
|
||||
'@storybook/router': '/Users/joe/storybook/lib/router',
|
||||
'@storybook/theming': '/Users/joe/storybook/lib/theming',
|
||||
'@storybook/semver': '/Users/joe/storybook/node_modules/@storybook/semver',
|
||||
'@storybook/client-api': '/Users/joe/storybook/lib/client-api',
|
||||
'@storybook/client-logger': '/Users/joe/storybook/lib/client-logger',
|
||||
react: '/Users/joe/storybook/node_modules/react',
|
||||
'react-dom': '/Users/joe/storybook/node_modules/react-dom',
|
||||
},
|
||||
plugins: [{ keepBasePlugin: true } as any],
|
||||
},
|
||||
resolveLoader: { plugins: [] },
|
||||
optimization: {
|
||||
splitChunks: { chunks: 'all' },
|
||||
runtimeChunk: true,
|
||||
sideEffects: true,
|
||||
usedExports: true,
|
||||
concatenateModules: true,
|
||||
minimizer: [],
|
||||
},
|
||||
performance: { hints: false },
|
||||
});
|
||||
};
|
||||
@ -1,16 +1,114 @@
|
||||
import { Configuration } from 'webpack';
|
||||
import { Path } from '@angular-devkit/core';
|
||||
import webpack from 'webpack';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
|
||||
|
||||
import { findAngularProject, readAngularWorkspaceConfig } from './angular-read-workspace';
|
||||
import {
|
||||
getAngularCliWebpackConfigOptions,
|
||||
applyAngularCliWebpackConfig,
|
||||
} from './angular-cli_config';
|
||||
AngularCliWebpackConfig,
|
||||
extractAngularCliWebpackConfig,
|
||||
ProjectTargetNotFoundError,
|
||||
} from './angular-devkit-build-webpack';
|
||||
import { moduleIsAvailable } from './utils/module-is-available';
|
||||
import { filterOutStylingRules } from './utils/filter-out-styling-rules';
|
||||
|
||||
export function webpackFinal(config: Configuration) {
|
||||
const cwd = process.cwd() as Path;
|
||||
const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd);
|
||||
logger.info('=> Loading angular-cli config.');
|
||||
export async function webpackFinal(baseConfig: webpack.Configuration) {
|
||||
const dirToSearch = process.cwd();
|
||||
|
||||
return applyAngularCliWebpackConfig(config, cliWebpackConfigOptions);
|
||||
if (!moduleIsAvailable('@angular-devkit/build-angular')) {
|
||||
logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed');
|
||||
return baseConfig;
|
||||
}
|
||||
logger.info('=> Loading angular-cli config');
|
||||
|
||||
// Read angular workspace
|
||||
let workspaceConfig;
|
||||
try {
|
||||
workspaceConfig = await readAngularWorkspaceConfig(dirToSearch);
|
||||
} catch (error) {
|
||||
logger.error(
|
||||
`=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"`
|
||||
);
|
||||
logger.info(`=> Fail to load angular-cli config. Using base config`);
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
// Find angular project
|
||||
let project;
|
||||
let projectName;
|
||||
try {
|
||||
const fondProject = findAngularProject(workspaceConfig);
|
||||
project = fondProject.project;
|
||||
projectName = fondProject.projectName;
|
||||
logger.info(`=> Using angular project "${projectName}" for configuring Storybook`);
|
||||
} catch (error) {
|
||||
logger.error(`=> Could not find angular project`);
|
||||
logger.info(`=> Fail to load angular-cli config. Using base config`);
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
// Use angular-cli to get some webpack config
|
||||
let angularCliWebpackConfig;
|
||||
try {
|
||||
angularCliWebpackConfig = await extractAngularCliWebpackConfig(dirToSearch, project);
|
||||
logger.info(`=> Using angular-cli webpack config`);
|
||||
} catch (error) {
|
||||
if (error instanceof ProjectTargetNotFoundError) {
|
||||
logger.error(`=> "${error.projectTarget}" target is not defined in project "${projectName}"`);
|
||||
logger.info(`=> Fail to load angular-cli config. Using base config`);
|
||||
return baseConfig;
|
||||
}
|
||||
logger.error(`=> Could not get angular cli webpack config`);
|
||||
throw error;
|
||||
}
|
||||
|
||||
return mergeAngularCliWebpackConfig(angularCliWebpackConfig, baseConfig);
|
||||
}
|
||||
|
||||
function mergeAngularCliWebpackConfig(
|
||||
{ cliCommonWebpackConfig, cliStyleWebpackConfig, tsConfigPath }: AngularCliWebpackConfig,
|
||||
baseConfig: webpack.Configuration
|
||||
) {
|
||||
// Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
|
||||
// because @angular-devkit/build-angular created rules have include/exclude for global style files.
|
||||
const rulesExcludingStyles = filterOutStylingRules(baseConfig);
|
||||
|
||||
// styleWebpackConfig.entry adds global style files to the webpack context
|
||||
const entry = [
|
||||
...(baseConfig.entry as string[]),
|
||||
...Object.values(cliStyleWebpackConfig.entry).reduce((acc, item) => acc.concat(item), []),
|
||||
];
|
||||
|
||||
const module = {
|
||||
...baseConfig.module,
|
||||
rules: [...cliStyleWebpackConfig.module.rules, ...rulesExcludingStyles],
|
||||
};
|
||||
|
||||
// We use cliCommonConfig plugins to serve static assets files.
|
||||
const plugins = [
|
||||
...cliStyleWebpackConfig.plugins,
|
||||
...cliCommonWebpackConfig.plugins,
|
||||
...baseConfig.plugins,
|
||||
];
|
||||
|
||||
const resolve = {
|
||||
...baseConfig.resolve,
|
||||
modules: Array.from(
|
||||
new Set([...baseConfig.resolve.modules, ...cliCommonWebpackConfig.resolve.modules])
|
||||
),
|
||||
plugins: [
|
||||
new TsconfigPathsPlugin({
|
||||
configFile: tsConfigPath,
|
||||
mainFields: ['browser', 'module', 'main'],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
entry,
|
||||
module,
|
||||
plugins,
|
||||
resolve,
|
||||
resolveLoader: cliCommonWebpackConfig.resolveLoader,
|
||||
};
|
||||
}
|
||||
|
||||
19
app/angular/src/server/utils/filter-out-styling-rules.ts
Normal file
19
app/angular/src/server/utils/filter-out-styling-rules.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { Configuration, RuleSetRule } from 'webpack';
|
||||
|
||||
const isStylingRule = (rule: RuleSetRule) => {
|
||||
const { test } = rule;
|
||||
|
||||
if (!test) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!(test instanceof RegExp)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return test.test('.css') || test.test('.scss') || test.test('.sass');
|
||||
};
|
||||
|
||||
export const filterOutStylingRules = (config: Configuration) => {
|
||||
return config.module.rules.filter((rule) => !isStylingRule(rule));
|
||||
};
|
||||
8
app/angular/src/server/utils/module-is-available.ts
Normal file
8
app/angular/src/server/utils/module-is-available.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export const moduleIsAvailable = (moduleName: string): boolean => {
|
||||
try {
|
||||
require.resolve(moduleName);
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
84
app/angular/src/server/utils/normalize-asset-patterns.ts
Normal file
84
app/angular/src/server/utils/normalize-asset-patterns.ts
Normal file
@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Clone of `normalizeAssetPatterns` function from angular-cli v11.2.*
|
||||
* > https://github.com/angular/angular-cli/blob/de63f41d669e42ada84f94ca1795d2791b9b45cc/packages/angular_devkit/build_angular/src/utils/normalize-asset-patterns.ts
|
||||
*
|
||||
* It is not possible to use the original because arguments have changed between version 6.1.* and 11.*.* of angular-cli
|
||||
*/
|
||||
import { statSync } from 'fs';
|
||||
import {
|
||||
BaseException,
|
||||
basename,
|
||||
dirname,
|
||||
getSystemPath,
|
||||
join,
|
||||
normalize,
|
||||
Path,
|
||||
relative,
|
||||
resolve,
|
||||
} from '@angular-devkit/core';
|
||||
|
||||
import { AssetPattern, AssetPatternClass } from '@angular-devkit/build-angular/src/browser/schema';
|
||||
|
||||
export class MissingAssetSourceRootException extends BaseException {
|
||||
constructor(path: string) {
|
||||
super(`The ${path} asset path must start with the project source root.`);
|
||||
}
|
||||
}
|
||||
|
||||
export function normalizeAssetPatterns(
|
||||
assetPatterns: AssetPattern[],
|
||||
root: Path,
|
||||
projectRoot: Path,
|
||||
maybeSourceRoot: Path | undefined
|
||||
): AssetPatternClass[] {
|
||||
// When sourceRoot is not available, we default to ${projectRoot}/src.
|
||||
const sourceRoot = maybeSourceRoot || join(projectRoot, 'src');
|
||||
const resolvedSourceRoot = resolve(root, sourceRoot);
|
||||
|
||||
if (assetPatterns.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return assetPatterns.map((assetPattern) => {
|
||||
// Normalize string asset patterns to objects.
|
||||
if (typeof assetPattern === 'string') {
|
||||
const assetPath = normalize(assetPattern);
|
||||
const resolvedAssetPath = resolve(root, assetPath);
|
||||
|
||||
// Check if the string asset is within sourceRoot.
|
||||
if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) {
|
||||
throw new MissingAssetSourceRootException(assetPattern);
|
||||
}
|
||||
|
||||
let glob: string;
|
||||
let input: Path;
|
||||
let isDirectory = false;
|
||||
|
||||
try {
|
||||
isDirectory = statSync(getSystemPath(resolvedAssetPath)).isDirectory();
|
||||
} catch {
|
||||
isDirectory = true;
|
||||
}
|
||||
|
||||
if (isDirectory) {
|
||||
// Folders get a recursive star glob.
|
||||
glob = '**/*';
|
||||
// Input directory is their original path.
|
||||
input = assetPath;
|
||||
} else {
|
||||
// Files are their own glob.
|
||||
glob = basename(assetPath);
|
||||
// Input directory is their original dirname.
|
||||
input = dirname(assetPath);
|
||||
}
|
||||
|
||||
// Output directory for both is the relative path from source root to input.
|
||||
const output = relative(resolvedSourceRoot, resolve(root, input));
|
||||
|
||||
// Return the asset pattern in object format.
|
||||
return { glob, input, output };
|
||||
}
|
||||
// It's already an AssetPatternObject, no need to convert.
|
||||
return assetPattern;
|
||||
});
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user