mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 18:51:07 +08:00
Merge pull request #20559 from storybookjs/valentin/angular15-maintenance
Angular: Support multi-project setup in ng workspaces
This commit is contained in:
Michael Shilman
GitHub
commit
125361ead9
@ -599,23 +599,23 @@ workflows:
|
||||
requires:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 16
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build
|
||||
- build-sandboxes:
|
||||
parallelism: 16
|
||||
parallelism: 15
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-sandboxes:
|
||||
parallelism: 16
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 16
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-sandboxes:
|
||||
parallelism: 16
|
||||
parallelism: 15
|
||||
requires:
|
||||
- build-sandboxes
|
||||
daily:
|
||||
@ -630,25 +630,25 @@ workflows:
|
||||
requires:
|
||||
- build
|
||||
- create-sandboxes:
|
||||
parallelism: 28
|
||||
parallelism: 27
|
||||
requires:
|
||||
- build
|
||||
# - smoke-test-sandboxes: # disabled for now
|
||||
# requires:
|
||||
# - create-sandboxes
|
||||
- build-sandboxes:
|
||||
parallelism: 28
|
||||
parallelism: 27
|
||||
requires:
|
||||
- create-sandboxes
|
||||
- test-runner-sandboxes:
|
||||
parallelism: 28
|
||||
parallelism: 27
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- chromatic-sandboxes:
|
||||
parallelism: 28
|
||||
parallelism: 27
|
||||
requires:
|
||||
- build-sandboxes
|
||||
- e2e-sandboxes:
|
||||
parallelism: 28
|
||||
parallelism: 27
|
||||
requires:
|
||||
- build-sandboxes
|
||||
|
||||
15
MIGRATION.md
15
MIGRATION.md
@ -40,6 +40,9 @@
|
||||
- [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
|
||||
- [Add strict mode](#add-strict-mode)
|
||||
- [Removed DLL flags](#removed-dll-flags)
|
||||
- [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14)
|
||||
- [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
|
||||
- [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
|
||||
- [Docs Changes](#docs-changes)
|
||||
- [Standalone docs files](#standalone-docs-files)
|
||||
- [Referencing stories in docs files](#referencing-stories-in-docs-files)
|
||||
@ -765,6 +768,18 @@ If user code in `.storybook/preview.js` or stories relies on "sloppy" mode behav
|
||||
|
||||
Earlier versions of Storybook used Webpack DLLs as a performance crutch. In 6.1, we've removed Storybook's built-in DLLs and have deprecated the command-line parameters `--no-dll` and `--ui-dll`. In 7.0 those options are removed.
|
||||
|
||||
#### Angular: Drop support for Angular < 14
|
||||
|
||||
Starting in 7.0, we drop support for Angular < 14
|
||||
|
||||
#### Angular: Drop support for calling Storybook directly
|
||||
|
||||
In Storybook 6.4 we have deprecated calling Storybook directly (`npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook. Please visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular to set up Storybook for Angular correctly.
|
||||
|
||||
#### Angular: Removed legacy renderer
|
||||
|
||||
The `parameters.angularLegacyRendering` option is removed. You cannot use the old legacy renderer anymore.
|
||||
|
||||
### Docs Changes
|
||||
|
||||
The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.
|
||||
|
||||
@ -13,6 +13,8 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
|
||||
- [Installation](#installation)
|
||||
- [DocsPage](#docspage)
|
||||
- [Props tables](#props-tables)
|
||||
- [Automatic Compodoc setup](#automatic-compodoc-setup)
|
||||
- [Manual Compodoc setup](#manual-compodoc-setup)
|
||||
- [MDX](#mdx)
|
||||
- [IFrame height](#iframe-height)
|
||||
- [Inline Stories](#inline-stories)
|
||||
@ -42,35 +44,63 @@ When you [install docs](#installation) you should get basic [DocsPage](../docs/d
|
||||
|
||||
Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
|
||||
|
||||
To get this, you'll first need to install Compodoc:
|
||||
### Automatic Compodoc setup
|
||||
|
||||
During `sb init`, you will be asked, whether you want to setup Compodoc for your project. Just answer the question with Yes. Compodoc is then ready to use!
|
||||
|
||||
## Manual Compodoc setup
|
||||
|
||||
You'll need to register Compodoc's `documentation.json` file in `.storybook/preview.ts`:
|
||||
|
||||
```js
|
||||
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||
import docJson from '../documentation.json';
|
||||
|
||||
setCompodocJson(docJson);
|
||||
```
|
||||
|
||||
Finally, to set up compodoc, you'll first need to install Compodoc:
|
||||
|
||||
```sh
|
||||
yarn add -D @compodoc/compodoc
|
||||
```
|
||||
|
||||
Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `package.json` creates a metadata file `./documentation.json` each time you run storybook:
|
||||
Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `projects.<project>.architect.<storybook|build-storybook>` in the `angular.json` creates a metadata file `./documentation.json` each time you run storybook:
|
||||
|
||||
```json
|
||||
```jsonc
|
||||
// angular.json
|
||||
{
|
||||
...
|
||||
"scripts": {
|
||||
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
|
||||
"storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
|
||||
...
|
||||
},
|
||||
"projects": {
|
||||
"your-project": {
|
||||
"architect": {
|
||||
"storybook": {
|
||||
...,
|
||||
"compodoc": true,
|
||||
"compodocArgs": [
|
||||
"-e",
|
||||
"json",
|
||||
"-d",
|
||||
"." // the root folder of your project
|
||||
],
|
||||
},
|
||||
"build-storybook": {
|
||||
...,
|
||||
"compodoc": true,
|
||||
"compodocArgs": [
|
||||
"-e",
|
||||
"json",
|
||||
"-d",
|
||||
"." // the root folder of your project
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc.
|
||||
|
||||
Next, add the following to `.storybook/preview.ts` to load the Compodoc-generated file:
|
||||
|
||||
```js
|
||||
import { setCompodocJson } from '@storybook/addon-docs/angular';
|
||||
import docJson from '../documentation.json';
|
||||
setCompodocJson(docJson);
|
||||
```
|
||||
|
||||
Finally, be sure to fill in the `component` field in your story metadata:
|
||||
|
||||
```ts
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.5",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
"jest-preset-angular": "^8.3.2",
|
||||
"jest-preset-angular": "^12.2.3",
|
||||
"jest-vue-preprocessor": "^1.7.1",
|
||||
"react-test-renderer": "^16",
|
||||
"rimraf": "^3.0.2",
|
||||
@ -82,7 +82,7 @@
|
||||
"@storybook/vue": "*",
|
||||
"@storybook/vue3": "*",
|
||||
"jest": "*",
|
||||
"jest-preset-angular": "*",
|
||||
"jest-preset-angular": " >= 12.2.3",
|
||||
"jest-vue-preprocessor": "*",
|
||||
"preact": "^10.5.13",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
|
||||
@ -17,11 +17,7 @@ function setupAngularJestPreset() {
|
||||
// is running inside jest - one of the things that `jest-preset-angular/build/setupJest` does is
|
||||
// extending the `window.Reflect` with all the needed metadata functions, that are required
|
||||
// for emission of the TS decorations like 'design:paramtypes'
|
||||
try {
|
||||
jest.requireActual('jest-preset-angular/build/setupJest');
|
||||
} catch (e) {
|
||||
jest.requireActual('jest-preset-angular/build/setup-jest');
|
||||
}
|
||||
jest.requireActual('jest-preset-angular/setup-jest');
|
||||
}
|
||||
|
||||
function test(options: StoryshotsOptions): boolean {
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import AngularSnapshotSerializer from 'jest-preset-angular/build/AngularSnapshotSerializer';
|
||||
import HTMLCommentSerializer from 'jest-preset-angular/build/HTMLCommentSerializer';
|
||||
import AngularSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';
|
||||
import HTMLCommentSerializer from 'jest-preset-angular/build/serializers/html-comment';
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
|
||||
import { addSerializer } from 'jest-specific-snapshot';
|
||||
import { getStorybookModuleMetadata } from '@storybook/angular/renderer';
|
||||
import { getApplication, storyPropsProvider } from '@storybook/angular/renderer';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
addSerializer(HTMLCommentSerializer);
|
||||
@ -12,31 +11,20 @@ addSerializer(AngularSnapshotSerializer);
|
||||
function getRenderedTree(story: any) {
|
||||
const currentStory = story.render();
|
||||
|
||||
const moduleMeta = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: currentStory,
|
||||
component: story.component,
|
||||
// TODO : To change with the story Id in v7. Currently keep with static id to avoid changes in snapshots
|
||||
targetSelector: 'storybook-wrapper',
|
||||
},
|
||||
new BehaviorSubject(currentStory.props)
|
||||
);
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
imports: [...moduleMeta.imports],
|
||||
declarations: [...moduleMeta.declarations],
|
||||
providers: [...moduleMeta.providers],
|
||||
schemas: [...moduleMeta.schemas],
|
||||
const application = getApplication({
|
||||
storyFnAngular: currentStory,
|
||||
component: story.component,
|
||||
// TODO : To change with the story Id in v7. Currently keep with static id to avoid changes in snapshots
|
||||
targetSelector: 'storybook-wrapper',
|
||||
});
|
||||
|
||||
TestBed.overrideModule(BrowserDynamicTestingModule, {
|
||||
set: {
|
||||
entryComponents: [...moduleMeta.entryComponents],
|
||||
},
|
||||
TestBed.configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(new BehaviorSubject(currentStory.props))],
|
||||
});
|
||||
|
||||
return TestBed.compileComponents().then(() => {
|
||||
const tree = TestBed.createComponent(moduleMeta.bootstrap[0] as any);
|
||||
const tree = TestBed.createComponent(application);
|
||||
tree.detectChanges();
|
||||
|
||||
// Empty componentInstance remove attributes of the internal main component (<storybook-wrapper>) in snapshot
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# Storybook for Angular
|
||||
|
||||
- [Storybook for Angular](#storybook-for-angular)
|
||||
- [Getting Started](#getting-started)
|
||||
- [Setup Compodoc](#setup-compodoc)
|
||||
- [Support for multi-project workspace](#support-for-multi-project-workspace)
|
||||
- [Run Storybook](#run-storybook)
|
||||
|
||||
Storybook for Angular is a UI development environment for your Angular components.
|
||||
With it, you can visualize different states of your UI components and develop them interactively.
|
||||
|
||||
@ -15,6 +21,66 @@ cd my-angular-app
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
### Setup Compodoc
|
||||
|
||||
When installing, you will be given the option to set up Compodoc, which is a tool for creating documentation for Angular projects.
|
||||
|
||||
You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to generate documentation for your application. In Storybook, it is useful to add explanatory comments above @Inputs and @Outputs, since these are the main elements that Storybook displays in its user interface. The @Inputs and @Outputs are the elements that you can interact with in Storybook, such as controls.
|
||||
|
||||
## Support for multi-project workspace
|
||||
|
||||
Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
|
||||
|
||||
```json
|
||||
// angular.json
|
||||
{
|
||||
...
|
||||
"projects": {
|
||||
...
|
||||
"your-project": {
|
||||
...
|
||||
"architect": {
|
||||
...
|
||||
"storybook": {
|
||||
"builder": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"configDir": ".storybook",
|
||||
"browserTarget": "your-project:build",
|
||||
"compodoc": false,
|
||||
"port": 6006
|
||||
}
|
||||
},
|
||||
"build-storybook": {
|
||||
"builder": "@storybook/angular:build-storybook",
|
||||
"options": {
|
||||
"configDir": ".storybook",
|
||||
"browserTarget": "your-project:build",
|
||||
"compodoc": false,
|
||||
"outputDir": "dist/storybook/your-project"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Run Storybook
|
||||
|
||||
To run Storybook for a particular project, please run:
|
||||
|
||||
```sh
|
||||
ng run your-project:storybook
|
||||
```
|
||||
|
||||
To build Storybook, run:
|
||||
|
||||
```sh
|
||||
ng run your-project:build-storybook
|
||||
```
|
||||
|
||||
You will find the output in `dist/storybook/your-project`.
|
||||
|
||||
For more information visit: [storybook.js.org](https://storybook.js.org)
|
||||
|
||||
---
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "7.0.0-beta.29",
|
||||
"@storybook/cli": "7.0.0-beta.29",
|
||||
"@storybook/client-logger": "7.0.0-beta.29",
|
||||
"@storybook/core-client": "7.0.0-beta.29",
|
||||
"@storybook/core-common": "7.0.0-beta.29",
|
||||
@ -65,23 +66,22 @@
|
||||
"webpack": "5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/architect": "^0.1303.5",
|
||||
"@angular-devkit/build-angular": "^13.3.5",
|
||||
"@angular-devkit/core": "^13.3.5",
|
||||
"@angular/cli": "^13.3.5",
|
||||
"@angular/common": "^13.3.6",
|
||||
"@angular/compiler": "^13.3.6",
|
||||
"@angular/compiler-cli": "^13.3.6",
|
||||
"@angular/core": "^13.3.6",
|
||||
"@angular/forms": "^13.3.6",
|
||||
"@angular/platform-browser": "^13.3.6",
|
||||
"@angular/platform-browser-dynamic": "^13.3.6",
|
||||
"@nrwl/workspace": "14.6.1",
|
||||
"@angular-devkit/architect": "^0.1500.4",
|
||||
"@angular-devkit/build-angular": "^15.0.4",
|
||||
"@angular-devkit/core": "^15.0.4",
|
||||
"@angular/cli": "^15.0.4",
|
||||
"@angular/common": "^15.0.4",
|
||||
"@angular/compiler": "^15.0.4",
|
||||
"@angular/compiler-cli": "^15.0.4",
|
||||
"@angular/core": "^15.0.4",
|
||||
"@angular/forms": "^15.0.4",
|
||||
"@angular/platform-browser": "^15.0.4",
|
||||
"@angular/platform-browser-dynamic": "^15.0.4",
|
||||
"@types/rimraf": "^3.0.2",
|
||||
"@types/tmp": "^0.2.3",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"jest": "^29.3.1",
|
||||
"jest-preset-angular": "^12.0.0",
|
||||
"jest-preset-angular": "^12.2.3",
|
||||
"jest-specific-snapshot": "^7.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"tmp": "^0.2.1",
|
||||
@ -90,19 +90,18 @@
|
||||
"zone.js": "^0.12.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular-devkit/architect": ">=0.1300.0",
|
||||
"@angular-devkit/build-angular": ">=13.0.0",
|
||||
"@angular-devkit/core": ">=13.0.0",
|
||||
"@angular/cli": ">=13.0.0",
|
||||
"@angular/common": ">=13.0.0",
|
||||
"@angular/compiler": ">=13.0.0",
|
||||
"@angular/compiler-cli": ">=13.0.0",
|
||||
"@angular/core": ">=13.0.0",
|
||||
"@angular/forms": ">=13.0.0",
|
||||
"@angular/platform-browser": ">=13.0.0",
|
||||
"@angular/platform-browser-dynamic": ">=13.0.0",
|
||||
"@angular-devkit/architect": ">=0.1400.0",
|
||||
"@angular-devkit/build-angular": ">=14.0.0",
|
||||
"@angular-devkit/core": ">=14.0.0",
|
||||
"@angular/cli": ">=14.0.0",
|
||||
"@angular/common": ">=14.0.0",
|
||||
"@angular/compiler": ">=14.0.0",
|
||||
"@angular/compiler-cli": ">=14.0.0",
|
||||
"@angular/core": ">=14.0.0",
|
||||
"@angular/forms": ">=14.0.0",
|
||||
"@angular/platform-browser": ">=14.0.0",
|
||||
"@angular/platform-browser-dynamic": ">=14.0.0",
|
||||
"@babel/core": "*",
|
||||
"@nrwl/workspace": "14.6.1",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"rxjs": "^6.0.0 || ^7.4.0",
|
||||
@ -112,9 +111,6 @@
|
||||
"peerDependenciesMeta": {
|
||||
"@angular/cli": {
|
||||
"optional": true
|
||||
},
|
||||
"@nrwl/workspace": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@ -11,13 +11,10 @@ import { CLIOptions } from '@storybook/types';
|
||||
import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
|
||||
import { sync as findUpSync } from 'find-up';
|
||||
import { sync as readUpSync } from 'read-pkg-up';
|
||||
import {
|
||||
BrowserBuilderOptions,
|
||||
ExtraEntryPoint,
|
||||
StylePreprocessorOptions,
|
||||
} from '@angular-devkit/build-angular';
|
||||
import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular';
|
||||
|
||||
import { buildStaticStandalone } from '@storybook/core-server';
|
||||
import { buildStaticStandalone, withTelemetry } from '@storybook/core-server';
|
||||
import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
|
||||
import { StandaloneOptions } from '../utils/standalone-options';
|
||||
import { runCompodoc } from '../utils/run-compodoc';
|
||||
import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
|
||||
@ -28,16 +25,18 @@ export type StorybookBuilderOptions = JsonObject & {
|
||||
docsMode: boolean;
|
||||
compodoc: boolean;
|
||||
compodocArgs: string[];
|
||||
styles?: ExtraEntryPoint[];
|
||||
styles?: StyleElement[];
|
||||
stylePreprocessorOptions?: StylePreprocessorOptions;
|
||||
} & Pick<
|
||||
// makes sure the option exists
|
||||
CLIOptions,
|
||||
'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson'
|
||||
'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'
|
||||
>;
|
||||
|
||||
export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
|
||||
|
||||
type StandaloneBuildOptions = StandaloneOptions & { outputDir: string };
|
||||
|
||||
export default createBuilder<any, any>(commandBuilder);
|
||||
|
||||
function commandBuilder(
|
||||
@ -65,15 +64,17 @@ function commandBuilder(
|
||||
outputDir,
|
||||
quiet,
|
||||
webpackStatsJson,
|
||||
disableTelemetry,
|
||||
} = options;
|
||||
|
||||
const standaloneOptions: StandaloneOptions = {
|
||||
const standaloneOptions: StandaloneBuildOptions = {
|
||||
packageJson: readUpSync({ cwd: __dirname }).packageJson,
|
||||
configDir,
|
||||
docsMode,
|
||||
loglevel,
|
||||
outputDir,
|
||||
quiet,
|
||||
disableTelemetry,
|
||||
angularBrowserTarget: browserTarget,
|
||||
angularBuilderContext: context,
|
||||
angularBuilderOptions: {
|
||||
@ -83,6 +84,7 @@ function commandBuilder(
|
||||
tsConfig,
|
||||
webpackStatsJson,
|
||||
};
|
||||
|
||||
return standaloneOptions;
|
||||
}),
|
||||
switchMap((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })),
|
||||
@ -112,8 +114,15 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
|
||||
};
|
||||
}
|
||||
|
||||
function runInstance(options: StandaloneOptions) {
|
||||
return from(buildStaticStandalone(options as any)).pipe(
|
||||
catchError((error: any) => throwError(buildStandaloneErrorHandler(error)))
|
||||
);
|
||||
function runInstance(options: StandaloneBuildOptions) {
|
||||
return from(
|
||||
withTelemetry(
|
||||
'build',
|
||||
{
|
||||
cliOptions: options,
|
||||
presetOptions: { ...options, corePresets: [], overridePresets: [] },
|
||||
},
|
||||
() => buildStaticStandalone(options)
|
||||
)
|
||||
).pipe(catchError((error: any) => throwError(buildStandaloneErrorHandler(error))));
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
"type": "array",
|
||||
"description": "Global styles to be included in the build.",
|
||||
"items": {
|
||||
"$ref": "#/definitions/extraEntryPoint"
|
||||
"$ref": "#/definitions/styleElement"
|
||||
},
|
||||
"default": ""
|
||||
},
|
||||
@ -83,7 +83,7 @@
|
||||
},
|
||||
"additionalProperties": false,
|
||||
"definitions": {
|
||||
"extraEntryPoint": {
|
||||
"styleElement": {
|
||||
"oneOf": [
|
||||
{
|
||||
"type": "object",
|
||||
|
||||
@ -6,18 +6,15 @@ import {
|
||||
targetFromTargetString,
|
||||
} from '@angular-devkit/architect';
|
||||
import { JsonObject } from '@angular-devkit/core';
|
||||
import {
|
||||
BrowserBuilderOptions,
|
||||
ExtraEntryPoint,
|
||||
StylePreprocessorOptions,
|
||||
} from '@angular-devkit/build-angular';
|
||||
import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular';
|
||||
import { from, Observable, of } from 'rxjs';
|
||||
import { CLIOptions } from '@storybook/types';
|
||||
import { map, switchMap, mapTo } from 'rxjs/operators';
|
||||
import { sync as findUpSync } from 'find-up';
|
||||
import { sync as readUpSync } from 'read-pkg-up';
|
||||
|
||||
import { buildDevStandalone } from '@storybook/core-server';
|
||||
import { buildDevStandalone, withTelemetry } from '@storybook/core-server';
|
||||
import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
|
||||
import { StandaloneOptions } from '../utils/standalone-options';
|
||||
import { runCompodoc } from '../utils/run-compodoc';
|
||||
import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
|
||||
@ -28,7 +25,7 @@ export type StorybookBuilderOptions = JsonObject & {
|
||||
docsMode: boolean;
|
||||
compodoc: boolean;
|
||||
compodocArgs: string[];
|
||||
styles?: ExtraEntryPoint[];
|
||||
styles?: StyleElement[];
|
||||
stylePreprocessorOptions?: StylePreprocessorOptions;
|
||||
} & Pick<
|
||||
// makes sure the option exists
|
||||
@ -43,6 +40,7 @@ export type StorybookBuilderOptions = JsonObject & {
|
||||
| 'smokeTest'
|
||||
| 'ci'
|
||||
| 'quiet'
|
||||
| 'disableTelemetry'
|
||||
>;
|
||||
|
||||
export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
|
||||
@ -79,6 +77,7 @@ function commandBuilder(
|
||||
sslCa,
|
||||
sslCert,
|
||||
sslKey,
|
||||
disableTelemetry,
|
||||
} = options;
|
||||
|
||||
const standaloneOptions: StandaloneOptions = {
|
||||
@ -94,6 +93,7 @@ function commandBuilder(
|
||||
sslCa,
|
||||
sslCert,
|
||||
sslKey,
|
||||
disableTelemetry,
|
||||
angularBrowserTarget: browserTarget,
|
||||
angularBuilderContext: context,
|
||||
angularBuilderOptions: {
|
||||
@ -134,9 +134,17 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
|
||||
function runInstance(options: StandaloneOptions) {
|
||||
return new Observable<number>((observer) => {
|
||||
// This Observable intentionally never complete, leaving the process running ;)
|
||||
buildDevStandalone(options as any).then(
|
||||
({ port }) => observer.next(port),
|
||||
(error) => observer.error(buildStandaloneErrorHandler(error))
|
||||
withTelemetry(
|
||||
'dev',
|
||||
{
|
||||
cliOptions: options,
|
||||
presetOptions: { ...options, corePresets: [], overridePresets: [] },
|
||||
},
|
||||
() =>
|
||||
buildDevStandalone(options).then(
|
||||
({ port }) => observer.next(port),
|
||||
(error) => observer.error(buildStandaloneErrorHandler(error))
|
||||
)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
"type": "array",
|
||||
"description": "Global styles to be included in the build.",
|
||||
"items": {
|
||||
"$ref": "#/definitions/extraEntryPoint"
|
||||
"$ref": "#/definitions/styleElement"
|
||||
},
|
||||
"default": ""
|
||||
},
|
||||
@ -105,7 +105,7 @@
|
||||
},
|
||||
"additionalProperties": false,
|
||||
"definitions": {
|
||||
"extraEntryPoint": {
|
||||
"styleElement": {
|
||||
"oneOf": [
|
||||
{
|
||||
"type": "object",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { BuilderContext } from '@angular-devkit/architect';
|
||||
import { spawn } from 'child_process';
|
||||
import { Observable } from 'rxjs';
|
||||
import * as path from 'path';
|
||||
import { JsPackageManagerFactory } from '@storybook/cli';
|
||||
|
||||
const hasTsConfigArg = (args: string[]) => args.indexOf('-p') !== -1;
|
||||
const hasOutputArg = (args: string[]) =>
|
||||
@ -20,37 +20,22 @@ export const runCompodoc = (
|
||||
return new Observable<void>((observer) => {
|
||||
const tsConfigPath = toRelativePath(tsconfig);
|
||||
const finalCompodocArgs = [
|
||||
'compodoc',
|
||||
// Default options
|
||||
...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
|
||||
...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot}`]),
|
||||
...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
|
||||
...compodocArgs,
|
||||
];
|
||||
|
||||
const packageManager = JsPackageManagerFactory.getPackageManager();
|
||||
|
||||
try {
|
||||
context.logger.info(finalCompodocArgs.join(' '));
|
||||
const child = spawn('npx', finalCompodocArgs, {
|
||||
cwd: context.workspaceRoot,
|
||||
shell: true,
|
||||
});
|
||||
const stdout = packageManager.runScript('compodoc', finalCompodocArgs, context.workspaceRoot);
|
||||
|
||||
child.stdout.on('data', (data) => {
|
||||
context.logger.info(data.toString());
|
||||
});
|
||||
child.stderr.on('data', (data) => {
|
||||
context.logger.error(data.toString());
|
||||
});
|
||||
|
||||
child.on('close', (code) => {
|
||||
if (code === 0) {
|
||||
observer.next();
|
||||
observer.complete();
|
||||
} else {
|
||||
observer.error();
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
observer.error(error);
|
||||
context.logger.info(stdout);
|
||||
observer.next();
|
||||
observer.complete();
|
||||
} catch (e) {
|
||||
context.logger.error(e);
|
||||
observer.error();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
import { BuilderContext } from '@angular-devkit/architect';
|
||||
import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
|
||||
|
||||
export type StandaloneOptions = Partial<
|
||||
CLIOptions &
|
||||
LoadOptions &
|
||||
BuilderOptions & {
|
||||
mode?: 'static' | 'dev';
|
||||
angularBrowserTarget?: string | null;
|
||||
angularBuilderOptions?: Record<string, any> & {
|
||||
styles?: any[];
|
||||
stylePreprocessorOptions?: any;
|
||||
};
|
||||
angularBuilderContext?: BuilderContext | null;
|
||||
tsConfig?: string;
|
||||
}
|
||||
>;
|
||||
export type StandaloneOptions = CLIOptions &
|
||||
LoadOptions &
|
||||
BuilderOptions & {
|
||||
mode?: 'static' | 'dev';
|
||||
angularBrowserTarget?: string | null;
|
||||
angularBuilderOptions?: Record<string, any> & {
|
||||
styles?: any[];
|
||||
stylePreprocessorOptions?: any;
|
||||
};
|
||||
angularBuilderContext?: BuilderContext | null;
|
||||
tsConfig?: string;
|
||||
};
|
||||
|
||||
@ -1,43 +1,30 @@
|
||||
import { NgModule, PlatformRef, enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { NgModule, enableProdMode, Type, ApplicationRef } from '@angular/core';
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
|
||||
import { Subject, BehaviorSubject } from 'rxjs';
|
||||
import { stringify } from 'telejson';
|
||||
import { ICollection, StoryFnAngularReturnType, Parameters } from '../types';
|
||||
import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';
|
||||
import { getApplication } from './StorybookModule';
|
||||
import { storyPropsProvider } from './StorybookProvider';
|
||||
import { componentNgModules } from './StorybookWrapperComponent';
|
||||
|
||||
type StoryRenderInfo = {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
moduleMetadataSnapshot: string;
|
||||
};
|
||||
|
||||
// platform must be init only if render is called at least once
|
||||
let platformRef: PlatformRef;
|
||||
function getPlatform(newPlatform?: boolean): PlatformRef {
|
||||
if (!platformRef || newPlatform) {
|
||||
platformRef = platformBrowserDynamic();
|
||||
}
|
||||
return platformRef;
|
||||
}
|
||||
const applicationRefs = new Set<ApplicationRef>();
|
||||
|
||||
export abstract class AbstractRenderer {
|
||||
/**
|
||||
* Wait and destroy the platform
|
||||
*/
|
||||
public static resetPlatformBrowserDynamic() {
|
||||
return new Promise<void>((resolve) => {
|
||||
if (platformRef && !platformRef.destroyed) {
|
||||
platformRef.onDestroy(async () => {
|
||||
resolve();
|
||||
});
|
||||
// Destroys the current Angular platform and all Angular applications on the page.
|
||||
// So call each angular ngOnDestroy and avoid memory leaks
|
||||
platformRef.destroy();
|
||||
return;
|
||||
public static resetApplications() {
|
||||
componentNgModules.clear();
|
||||
applicationRefs.forEach((appRef) => {
|
||||
if (!appRef.destroyed) {
|
||||
appRef.destroy();
|
||||
}
|
||||
resolve();
|
||||
}).then(() => {
|
||||
getPlatform(true);
|
||||
});
|
||||
}
|
||||
|
||||
@ -109,15 +96,13 @@ export abstract class AbstractRenderer {
|
||||
const targetSelector = `${this.generateTargetSelectorFromStoryId()}`;
|
||||
|
||||
const newStoryProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);
|
||||
const moduleMetadata = getStorybookModuleMetadata(
|
||||
{ storyFnAngular, component, targetSelector },
|
||||
newStoryProps$
|
||||
);
|
||||
|
||||
if (
|
||||
!this.fullRendererRequired({
|
||||
storyFnAngular,
|
||||
moduleMetadata,
|
||||
moduleMetadata: {
|
||||
...storyFnAngular.moduleMetadata,
|
||||
},
|
||||
forced,
|
||||
})
|
||||
) {
|
||||
@ -125,7 +110,6 @@ export abstract class AbstractRenderer {
|
||||
|
||||
return;
|
||||
}
|
||||
await this.beforeFullRender();
|
||||
|
||||
// Complete last BehaviorSubject and set a new one for the current module
|
||||
if (this.storyProps$) {
|
||||
@ -135,10 +119,14 @@ export abstract class AbstractRenderer {
|
||||
|
||||
this.initAngularRootElement(targetDOMNode, targetSelector);
|
||||
|
||||
await getPlatform().bootstrapModule(
|
||||
createStorybookModule(moduleMetadata),
|
||||
parameters.bootstrapModuleOptions ?? undefined
|
||||
);
|
||||
const application = getApplication({ storyFnAngular, component, targetSelector });
|
||||
|
||||
const applicationRef = await bootstrapApplication(application, {
|
||||
providers: [storyPropsProvider(newStoryProps$)],
|
||||
});
|
||||
|
||||
applicationRefs.add(applicationRef);
|
||||
|
||||
await this.afterFullRender();
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ export class CanvasRenderer extends AbstractRenderer {
|
||||
}
|
||||
|
||||
async beforeFullRender(): Promise<void> {
|
||||
await CanvasRenderer.resetPlatformBrowserDynamic();
|
||||
CanvasRenderer.resetApplications();
|
||||
}
|
||||
|
||||
async afterFullRender(): Promise<void> {
|
||||
|
||||
@ -23,7 +23,7 @@ export class DocsRenderer extends AbstractRenderer {
|
||||
*
|
||||
*/
|
||||
channel.once(STORY_CHANGED, async () => {
|
||||
await DocsRenderer.resetPlatformBrowserDynamic();
|
||||
await DocsRenderer.resetApplications();
|
||||
});
|
||||
|
||||
/**
|
||||
@ -32,13 +32,15 @@ export class DocsRenderer extends AbstractRenderer {
|
||||
* for previous component
|
||||
*/
|
||||
channel.once(DOCS_RENDERED, async () => {
|
||||
await DocsRenderer.resetPlatformBrowserDynamic();
|
||||
await DocsRenderer.resetApplications();
|
||||
});
|
||||
|
||||
await super.render({ ...options, forced: false });
|
||||
}
|
||||
|
||||
async beforeFullRender(): Promise<void> {}
|
||||
async beforeFullRender(): Promise<void> {
|
||||
DocsRenderer.resetApplications();
|
||||
}
|
||||
|
||||
async afterFullRender(): Promise<void> {
|
||||
await AbstractRenderer.resetCompiledComponents();
|
||||
|
||||
@ -22,7 +22,7 @@ export class RendererFactory {
|
||||
const renderType = getRenderType(targetDOMNode);
|
||||
// keep only instances of the same type
|
||||
if (this.lastRenderType && this.lastRenderType !== renderType) {
|
||||
await AbstractRenderer.resetPlatformBrowserDynamic();
|
||||
await AbstractRenderer.resetApplications();
|
||||
clearRootHTMLElement(renderType);
|
||||
this.rendererMap.clear();
|
||||
}
|
||||
|
||||
@ -4,7 +4,8 @@ import { TestBed } from '@angular/core/testing';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { ICollection } from '../types';
|
||||
import { getStorybookModuleMetadata } from './StorybookModule';
|
||||
import { getApplication } from './StorybookModule';
|
||||
import { storyPropsProvider } from './StorybookProvider';
|
||||
|
||||
describe('StorybookModule', () => {
|
||||
describe('getStorybookModuleMetadata', () => {
|
||||
@ -54,16 +55,16 @@ describe('StorybookModule', () => {
|
||||
localFunction: () => 'localFunction',
|
||||
};
|
||||
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
new BehaviorSubject<ICollection>(props)
|
||||
);
|
||||
const application = getApplication({
|
||||
storyFnAngular: { props },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
});
|
||||
|
||||
const { fixture } = await configureTestingModule(ngModule);
|
||||
const { fixture } = await configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(new BehaviorSubject<ICollection>(props))],
|
||||
});
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(props.input);
|
||||
@ -90,16 +91,16 @@ describe('StorybookModule', () => {
|
||||
},
|
||||
};
|
||||
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
new BehaviorSubject<ICollection>(props)
|
||||
);
|
||||
const application = getApplication({
|
||||
storyFnAngular: { props },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
});
|
||||
|
||||
const { fixture } = await configureTestingModule(ngModule);
|
||||
const { fixture } = await configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(new BehaviorSubject<ICollection>(props))],
|
||||
});
|
||||
fixture.detectChanges();
|
||||
|
||||
fixture.nativeElement.querySelector('p#output').click();
|
||||
@ -116,15 +117,15 @@ describe('StorybookModule', () => {
|
||||
};
|
||||
const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
|
||||
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props: initialProps },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
storyProps$
|
||||
);
|
||||
const { fixture } = await configureTestingModule(ngModule);
|
||||
const application = getApplication({
|
||||
storyFnAngular: { props: initialProps },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
});
|
||||
const { fixture } = await configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(storyProps$)],
|
||||
});
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(
|
||||
@ -169,15 +170,15 @@ describe('StorybookModule', () => {
|
||||
};
|
||||
const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
|
||||
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props: initialProps },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
storyProps$
|
||||
);
|
||||
const { fixture } = await configureTestingModule(ngModule);
|
||||
const application = getApplication({
|
||||
storyFnAngular: { props: initialProps },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
});
|
||||
const { fixture } = await configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(storyProps$)],
|
||||
});
|
||||
fixture.detectChanges();
|
||||
|
||||
const newProps = {
|
||||
@ -207,18 +208,18 @@ describe('StorybookModule', () => {
|
||||
};
|
||||
const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
|
||||
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: {
|
||||
props: initialProps,
|
||||
template: '<p [style.color]="color"><foo [input]="input"></foo></p>',
|
||||
},
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
const application = getApplication({
|
||||
storyFnAngular: {
|
||||
props: initialProps,
|
||||
template: '<p [style.color]="color"><foo [input]="input"></foo></p>',
|
||||
},
|
||||
storyProps$
|
||||
);
|
||||
const { fixture } = await configureTestingModule(ngModule);
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
});
|
||||
const { fixture } = await configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(storyProps$)],
|
||||
});
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.querySelector('p').style.color).toEqual('red');
|
||||
expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(
|
||||
@ -242,15 +243,16 @@ describe('StorybookModule', () => {
|
||||
};
|
||||
const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
|
||||
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { props: initialProps },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
storyProps$
|
||||
);
|
||||
const { fixture } = await configureTestingModule(ngModule);
|
||||
const application = getApplication({
|
||||
storyFnAngular: { props: initialProps },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
});
|
||||
const { fixture } = await configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(storyProps$)],
|
||||
});
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.querySelector('p#setterCallNb').innerHTML).toEqual('1');
|
||||
@ -274,19 +276,19 @@ describe('StorybookModule', () => {
|
||||
it('should display the component', async () => {
|
||||
const props = {};
|
||||
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: {
|
||||
props,
|
||||
moduleMetadata: { entryComponents: [WithoutSelectorComponent] },
|
||||
},
|
||||
component: WithoutSelectorComponent,
|
||||
targetSelector: 'my-selector',
|
||||
const application = getApplication({
|
||||
storyFnAngular: {
|
||||
props,
|
||||
moduleMetadata: { entryComponents: [WithoutSelectorComponent] },
|
||||
},
|
||||
new BehaviorSubject<ICollection>(props)
|
||||
);
|
||||
component: WithoutSelectorComponent,
|
||||
targetSelector: 'my-selector',
|
||||
});
|
||||
|
||||
const { fixture } = await configureTestingModule(ngModule);
|
||||
const { fixture } = await configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(new BehaviorSubject<ICollection>(props))],
|
||||
});
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.innerHTML).toContain('The content');
|
||||
@ -300,16 +302,16 @@ describe('StorybookModule', () => {
|
||||
})
|
||||
class FooComponent {}
|
||||
|
||||
const ngModule = getStorybookModuleMetadata(
|
||||
{
|
||||
storyFnAngular: { template: '' },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
},
|
||||
new BehaviorSubject({})
|
||||
);
|
||||
const application = getApplication({
|
||||
storyFnAngular: { template: '' },
|
||||
component: FooComponent,
|
||||
targetSelector: 'my-selector',
|
||||
});
|
||||
|
||||
const { fixture } = await configureTestingModule(ngModule);
|
||||
const { fixture } = await configureTestingModule({
|
||||
imports: [application],
|
||||
providers: [storyPropsProvider(new BehaviorSubject<ICollection>({}))],
|
||||
});
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.innerHTML).toEqual('');
|
||||
@ -317,18 +319,9 @@ describe('StorybookModule', () => {
|
||||
});
|
||||
|
||||
async function configureTestingModule(ngModule: NgModule) {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: ngModule.declarations,
|
||||
providers: ngModule.providers,
|
||||
})
|
||||
.overrideModule(BrowserModule, {
|
||||
set: {
|
||||
entryComponents: [...ngModule.entryComponents],
|
||||
},
|
||||
})
|
||||
.compileComponents();
|
||||
await TestBed.configureTestingModule(ngModule).compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(ngModule.bootstrap[0] as Type<unknown>);
|
||||
const fixture = TestBed.createComponent(ngModule.imports[0] as any);
|
||||
|
||||
return {
|
||||
fixture,
|
||||
|
||||
@ -1,26 +1,16 @@
|
||||
import { Type, NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { Subject } from 'rxjs';
|
||||
import { ICollection, StoryFnAngularReturnType } from '../types';
|
||||
import { storyPropsProvider } from './StorybookProvider';
|
||||
import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
|
||||
import { isDeclarable, isStandaloneComponent } from './utils/NgComponentAnalyzer';
|
||||
import { StoryFnAngularReturnType } from '../types';
|
||||
import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
|
||||
import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';
|
||||
|
||||
export const getStorybookModuleMetadata = (
|
||||
{
|
||||
storyFnAngular,
|
||||
component,
|
||||
targetSelector,
|
||||
}: {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
component?: any;
|
||||
targetSelector: string;
|
||||
},
|
||||
storyProps$: Subject<ICollection>
|
||||
): NgModule => {
|
||||
export const getApplication = ({
|
||||
storyFnAngular,
|
||||
component,
|
||||
targetSelector,
|
||||
}: {
|
||||
storyFnAngular: StoryFnAngularReturnType;
|
||||
component?: any;
|
||||
targetSelector: string;
|
||||
}) => {
|
||||
const { props, styles, moduleMetadata = {} } = storyFnAngular;
|
||||
let { template } = storyFnAngular;
|
||||
|
||||
@ -32,47 +22,14 @@ export const getStorybookModuleMetadata = (
|
||||
/**
|
||||
* Create a component that wraps generated template and gives it props
|
||||
*/
|
||||
const ComponentToInject = createStorybookWrapperComponent(
|
||||
return createStorybookWrapperComponent(
|
||||
targetSelector,
|
||||
template,
|
||||
component,
|
||||
styles,
|
||||
moduleMetadata,
|
||||
props
|
||||
);
|
||||
|
||||
const isStandalone = isStandaloneComponent(component);
|
||||
// Look recursively (deep) if the component is not already declared by an import module
|
||||
const requiresComponentDeclaration =
|
||||
isDeclarable(component) &&
|
||||
!isComponentAlreadyDeclaredInModules(
|
||||
component,
|
||||
moduleMetadata.declarations,
|
||||
moduleMetadata.imports
|
||||
) &&
|
||||
!isStandalone;
|
||||
|
||||
return {
|
||||
declarations: [
|
||||
...(requiresComponentDeclaration ? [component] : []),
|
||||
ComponentToInject,
|
||||
...(moduleMetadata.declarations ?? []),
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
...(isStandalone ? [component] : []),
|
||||
...(moduleMetadata.imports ?? []),
|
||||
],
|
||||
providers: [storyPropsProvider(storyProps$), ...(moduleMetadata.providers ?? [])],
|
||||
entryComponents: [...(moduleMetadata.entryComponents ?? [])],
|
||||
schemas: [...(moduleMetadata.schemas ?? [])],
|
||||
bootstrap: [ComponentToInject],
|
||||
};
|
||||
};
|
||||
|
||||
export const createStorybookModule = (ngModule: NgModule): Type<unknown> => {
|
||||
@NgModule(ngModule)
|
||||
class StorybookModule {}
|
||||
return StorybookModule;
|
||||
};
|
||||
|
||||
function hasNoTemplate(template: string | null | undefined): template is undefined {
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
AfterViewInit,
|
||||
ElementRef,
|
||||
@ -8,13 +9,20 @@ import {
|
||||
Inject,
|
||||
ViewChild,
|
||||
ViewContainerRef,
|
||||
NgModule,
|
||||
} from '@angular/core';
|
||||
import { Subscription, Subject } from 'rxjs';
|
||||
import { map, skip } from 'rxjs/operators';
|
||||
|
||||
import { ICollection } from '../types';
|
||||
import { ICollection, NgModuleMetadata } from '../types';
|
||||
import { STORY_PROPS } from './StorybookProvider';
|
||||
import { ComponentInputsOutputs, getComponentInputsOutputs } from './utils/NgComponentAnalyzer';
|
||||
import {
|
||||
ComponentInputsOutputs,
|
||||
getComponentInputsOutputs,
|
||||
isDeclarable,
|
||||
isStandaloneComponent,
|
||||
} from './utils/NgComponentAnalyzer';
|
||||
import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
|
||||
|
||||
const getNonInputsOutputsProps = (
|
||||
ngComponentInputsOutputs: ComponentInputsOutputs,
|
||||
@ -29,6 +37,8 @@ const getNonInputsOutputsProps = (
|
||||
return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k));
|
||||
};
|
||||
|
||||
export const componentNgModules = new Map<any, Type<any>>();
|
||||
|
||||
/**
|
||||
* Wraps the story template into a component
|
||||
*
|
||||
@ -40,16 +50,65 @@ export const createStorybookWrapperComponent = (
|
||||
template: string,
|
||||
storyComponent: Type<unknown> | undefined,
|
||||
styles: string[],
|
||||
moduleMetadata: NgModuleMetadata,
|
||||
initialProps?: ICollection
|
||||
): Type<any> => {
|
||||
// In ivy, a '' selector is not allowed, therefore we need to just set it to anything if
|
||||
// storyComponent was not provided.
|
||||
const viewChildSelector = storyComponent ?? '__storybook-noop';
|
||||
|
||||
const isStandalone = isStandaloneComponent(storyComponent);
|
||||
// Look recursively (deep) if the component is not already declared by an import module
|
||||
const requiresComponentDeclaration =
|
||||
isDeclarable(storyComponent) &&
|
||||
!isComponentAlreadyDeclaredInModules(
|
||||
storyComponent,
|
||||
moduleMetadata.declarations,
|
||||
moduleMetadata.imports
|
||||
) &&
|
||||
!isStandalone;
|
||||
|
||||
const providersNgModules = (moduleMetadata.providers ?? []).map((provider) => {
|
||||
if (!componentNgModules.get(provider)) {
|
||||
@NgModule({
|
||||
providers: [provider],
|
||||
})
|
||||
class ProviderModule {}
|
||||
|
||||
componentNgModules.set(provider, ProviderModule);
|
||||
}
|
||||
|
||||
return componentNgModules.get(provider);
|
||||
});
|
||||
|
||||
if (!componentNgModules.get(storyComponent)) {
|
||||
const declarations = [
|
||||
...(requiresComponentDeclaration ? [storyComponent] : []),
|
||||
...(moduleMetadata.declarations ?? []),
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
declarations,
|
||||
imports: [CommonModule, ...(moduleMetadata.imports ?? [])],
|
||||
exports: [...declarations, ...(moduleMetadata.imports ?? [])],
|
||||
})
|
||||
class StorybookComponentModule {}
|
||||
|
||||
componentNgModules.set(storyComponent, StorybookComponentModule);
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector,
|
||||
template,
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
componentNgModules.get(storyComponent),
|
||||
...providersNgModules,
|
||||
...(isStandalone ? [storyComponent] : []),
|
||||
],
|
||||
styles,
|
||||
schemas: moduleMetadata.schemas,
|
||||
})
|
||||
class StorybookWrapperComponent implements AfterViewInit, OnDestroy {
|
||||
private storyComponentPropsSubscription: Subscription;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {
|
||||
ComponentFactory,
|
||||
Type,
|
||||
Component,
|
||||
ComponentFactoryResolver,
|
||||
@ -238,18 +237,14 @@ describe('isComponent', () => {
|
||||
|
||||
describe('isStandaloneComponent', () => {
|
||||
it('should return true with a Component with "standalone: true"', () => {
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
@Component({ standalone: true } as any)
|
||||
@Component({ standalone: true })
|
||||
class FooComponent {}
|
||||
|
||||
expect(isStandaloneComponent(FooComponent)).toEqual(true);
|
||||
});
|
||||
|
||||
it('should return false with a Component with "standalone: false"', () => {
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
@Component({ standalone: false } as any)
|
||||
@Component({ standalone: false })
|
||||
class FooComponent {}
|
||||
|
||||
expect(isStandaloneComponent(FooComponent)).toEqual(false);
|
||||
@ -269,18 +264,14 @@ describe('isStandaloneComponent', () => {
|
||||
});
|
||||
|
||||
it('should return true with a Directive with "standalone: true"', () => {
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
@Directive({ standalone: true } as any)
|
||||
@Directive({ standalone: true })
|
||||
class FooDirective {}
|
||||
|
||||
expect(isStandaloneComponent(FooDirective)).toEqual(true);
|
||||
});
|
||||
|
||||
it('should return false with a Directive with "standalone: false"', () => {
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
@Directive({ standalone: false } as any)
|
||||
@Directive({ standalone: false })
|
||||
class FooDirective {}
|
||||
|
||||
expect(isStandaloneComponent(FooDirective)).toEqual(false);
|
||||
@ -294,18 +285,14 @@ describe('isStandaloneComponent', () => {
|
||||
});
|
||||
|
||||
it('should return true with a Pipe with "standalone: true"', () => {
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
@Pipe({ standalone: true } as any)
|
||||
@Pipe({ name: 'FooPipe', standalone: true })
|
||||
class FooPipe {}
|
||||
|
||||
expect(isStandaloneComponent(FooPipe)).toEqual(true);
|
||||
});
|
||||
|
||||
it('should return false with a Pipe with "standalone: false"', () => {
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
@Pipe({ standalone: false } as any)
|
||||
@Pipe({ name: 'FooPipe', standalone: false })
|
||||
class FooPipe {}
|
||||
|
||||
expect(isStandaloneComponent(FooPipe)).toEqual(false);
|
||||
@ -356,7 +343,7 @@ function sortByPropName(
|
||||
return array.sort((a, b) => a.propName.localeCompare(b.propName));
|
||||
}
|
||||
|
||||
function resolveComponentFactory<T extends Type<any>>(component: T): ComponentFactory<T> {
|
||||
function resolveComponentFactory<T extends Type<any>>(component: T) {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [component],
|
||||
}).overrideModule(BrowserDynamicTestingModule, {
|
||||
|
||||
@ -117,9 +117,7 @@ export const isStandaloneComponent = (component: any): component is Type<unknown
|
||||
// TODO: `standalone` is only available in Angular v14. Remove cast to `any` once
|
||||
// Angular deps are updated to v14.x.x.
|
||||
return (decorators || []).some(
|
||||
(d) =>
|
||||
(d instanceof Component || d instanceof Directive || d instanceof Pipe) &&
|
||||
(d as any).standalone
|
||||
(d) => (d instanceof Component || d instanceof Directive || d instanceof Pipe) && d.standalone
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,207 +0,0 @@
|
||||
import { global } from '@storybook/global';
|
||||
import { NgModuleRef, Type, enableProdMode, NgModule, Component, NgZone } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { Subscriber, Observable, ReplaySubject } from 'rxjs';
|
||||
import { PartialStoryFn } from '@storybook/types';
|
||||
import { AppComponent } from './app.component';
|
||||
import { STORY } from './app.token';
|
||||
import { NgModuleMetadata, StoryFnAngularReturnType, AngularRenderer } from '../types';
|
||||
|
||||
const { document } = global;
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
NODE_ENV: 'string' | 'development' | undefined;
|
||||
}
|
||||
}
|
||||
|
||||
let platform: any = null;
|
||||
let promises: Promise<NgModuleRef<any>>[] = [];
|
||||
let storyData = new ReplaySubject<StoryFnAngularReturnType>(1);
|
||||
|
||||
const moduleClass = class DynamicModule {};
|
||||
const componentClass = class DynamicComponent {};
|
||||
|
||||
type DynamicComponentType = typeof componentClass;
|
||||
|
||||
function storyDataFactory<T>(data: Observable<T>) {
|
||||
return (ngZone: NgZone) =>
|
||||
new Observable((subscriber: Subscriber<T>) => {
|
||||
const sub = data.subscribe(
|
||||
(v: T) => {
|
||||
ngZone.run(() => subscriber.next(v));
|
||||
},
|
||||
(err) => {
|
||||
ngZone.run(() => subscriber.error(err));
|
||||
},
|
||||
() => {
|
||||
ngZone.run(() => subscriber.complete());
|
||||
}
|
||||
);
|
||||
|
||||
return () => {
|
||||
sub.unsubscribe();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const getModule = (
|
||||
declarations: (Type<any> | any[])[],
|
||||
entryComponents: (Type<any> | any[])[],
|
||||
bootstrap: (Type<any> | any[])[],
|
||||
data: StoryFnAngularReturnType,
|
||||
moduleMetadata: NgModuleMetadata
|
||||
) => {
|
||||
// Complete last ReplaySubject and create a new one for the current module
|
||||
storyData.complete();
|
||||
storyData = new ReplaySubject<StoryFnAngularReturnType>(1);
|
||||
storyData.next(data);
|
||||
|
||||
const moduleMeta = {
|
||||
declarations: [...declarations, ...(moduleMetadata.declarations || [])],
|
||||
imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
|
||||
providers: [
|
||||
{ provide: STORY, useFactory: storyDataFactory(storyData.asObservable()), deps: [NgZone] },
|
||||
...(moduleMetadata.providers || []),
|
||||
],
|
||||
entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
|
||||
schemas: [...(moduleMetadata.schemas || [])],
|
||||
bootstrap: [...bootstrap],
|
||||
};
|
||||
|
||||
return NgModule(moduleMeta)(moduleClass);
|
||||
};
|
||||
|
||||
const createComponentFromTemplate = (template: string, styles: string[]) => {
|
||||
return Component({
|
||||
template,
|
||||
styles,
|
||||
})(componentClass);
|
||||
};
|
||||
|
||||
const extractNgModuleMetadata = (importItem: any): NgModule => {
|
||||
const target = importItem && importItem.ngModule ? importItem.ngModule : importItem;
|
||||
const decoratorKey = '__annotations__';
|
||||
const decorators: any[] =
|
||||
Reflect &&
|
||||
Reflect.getOwnPropertyDescriptor &&
|
||||
Reflect.getOwnPropertyDescriptor(target, decoratorKey)
|
||||
? Reflect.getOwnPropertyDescriptor(target, decoratorKey).value
|
||||
: target[decoratorKey];
|
||||
|
||||
if (!decorators || decorators.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const ngModuleDecorator: NgModule | undefined = decorators.find(
|
||||
(decorator) => decorator instanceof NgModule
|
||||
);
|
||||
if (!ngModuleDecorator) {
|
||||
return null;
|
||||
}
|
||||
return ngModuleDecorator;
|
||||
};
|
||||
|
||||
const getExistenceOfComponentInModules = (
|
||||
component: any,
|
||||
declarations: any[],
|
||||
imports: any[]
|
||||
): boolean => {
|
||||
if (declarations && declarations.some((declaration) => declaration === component)) {
|
||||
// Found component in declarations array
|
||||
return true;
|
||||
}
|
||||
if (!imports) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return imports.some((importItem) => {
|
||||
const extractedNgModuleMetadata = extractNgModuleMetadata(importItem);
|
||||
if (!extractedNgModuleMetadata) {
|
||||
// Not an NgModule
|
||||
return false;
|
||||
}
|
||||
return getExistenceOfComponentInModules(
|
||||
component,
|
||||
extractedNgModuleMetadata.declarations,
|
||||
extractedNgModuleMetadata.imports
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const initModule = (storyFn: PartialStoryFn<AngularRenderer>) => {
|
||||
const storyObj = storyFn();
|
||||
const { component, template, props, styles, moduleMetadata = {} } = storyObj;
|
||||
|
||||
const isCreatingComponentFromTemplate = Boolean(template);
|
||||
|
||||
const AnnotatedComponent = isCreatingComponentFromTemplate
|
||||
? createComponentFromTemplate(template, styles)
|
||||
: component;
|
||||
|
||||
const componentRequiresDeclaration =
|
||||
isCreatingComponentFromTemplate ||
|
||||
!getExistenceOfComponentInModules(
|
||||
component,
|
||||
moduleMetadata.declarations,
|
||||
moduleMetadata.imports
|
||||
);
|
||||
|
||||
const componentDeclarations = componentRequiresDeclaration
|
||||
? [AppComponent, AnnotatedComponent]
|
||||
: [AppComponent];
|
||||
|
||||
const story = {
|
||||
component: AnnotatedComponent,
|
||||
props,
|
||||
};
|
||||
|
||||
return getModule(
|
||||
componentDeclarations,
|
||||
[AnnotatedComponent],
|
||||
[AppComponent],
|
||||
story,
|
||||
moduleMetadata
|
||||
);
|
||||
};
|
||||
|
||||
const staticRoot = document.getElementById('storybook-root');
|
||||
const insertDynamicRoot = () => {
|
||||
const app = document.createElement('storybook-dynamic-app-root');
|
||||
staticRoot.innerHTML = '';
|
||||
staticRoot.appendChild(app);
|
||||
};
|
||||
|
||||
const draw = (newModule: DynamicComponentType): void => {
|
||||
if (!platform) {
|
||||
insertDynamicRoot();
|
||||
if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
|
||||
try {
|
||||
enableProdMode();
|
||||
} catch (e) {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
platform = platformBrowserDynamic();
|
||||
promises.push(platform.bootstrapModule(newModule));
|
||||
} else {
|
||||
Promise.all(promises).then((modules) => {
|
||||
modules.forEach((mod) => mod.destroy());
|
||||
|
||||
insertDynamicRoot();
|
||||
promises = [];
|
||||
promises.push(platform.bootstrapModule(newModule));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const renderNgApp = (storyFn: PartialStoryFn<AngularRenderer>, forced: boolean) => {
|
||||
if (!forced) {
|
||||
draw(initModule(storyFn));
|
||||
} else {
|
||||
storyData.next(storyFn());
|
||||
}
|
||||
};
|
||||
@ -34,7 +34,7 @@ const prepareMain = (
|
||||
): AngularRenderer['storyResult'] => {
|
||||
let { template } = story;
|
||||
|
||||
const component = story.component ?? context.component;
|
||||
const { component } = context;
|
||||
const userDefinedTemplate = !hasNoTemplate(template);
|
||||
|
||||
if (!userDefinedTemplate && component) {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import '@angular/compiler';
|
||||
|
||||
import { RenderContext, ArgsStoryFn } from '@storybook/types';
|
||||
|
||||
import { renderNgApp } from './angular/helpers';
|
||||
import { AngularRenderer } from './types';
|
||||
|
||||
import { RendererFactory } from './angular-beta/RendererFactory';
|
||||
@ -21,11 +22,6 @@ export async function renderToCanvas(
|
||||
) {
|
||||
showMain();
|
||||
|
||||
if (parameters.angularLegacyRendering) {
|
||||
renderNgApp(storyFn, !forceRemount);
|
||||
return;
|
||||
}
|
||||
|
||||
const renderer = await rendererFactory.getRendererInstance(id, element);
|
||||
|
||||
await renderer.render({
|
||||
|
||||
@ -37,8 +37,6 @@ export interface AngularRenderer extends WebRenderer {
|
||||
}
|
||||
|
||||
export type Parameters = DefaultParameters & {
|
||||
/** Uses legacy angular rendering engine that use dynamic component */
|
||||
angularLegacyRendering?: boolean;
|
||||
bootstrapModuleOptions?: unknown;
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
export { storyPropsProvider } from './client/angular-beta/StorybookProvider';
|
||||
export { computesTemplateSourceFromComponent } from './client/angular-beta/ComputesTemplateFromComponent';
|
||||
export { rendererFactory } from './client/render';
|
||||
export { AbstractRenderer } from './client/angular-beta/AbstractRenderer';
|
||||
export { getStorybookModuleMetadata } from './client/angular-beta/StorybookModule';
|
||||
export { getApplication } from './client/angular-beta/StorybookModule';
|
||||
|
||||
@ -1,94 +0,0 @@
|
||||
/* eslint-disable global-require */
|
||||
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
|
||||
*/
|
||||
|
||||
// catch if nx.json does not exist
|
||||
require('@nrwl/workspace').readNxJson();
|
||||
|
||||
const nxWorkspace = require('@nrwl/workspace').readWorkspaceConfig({
|
||||
format: 'angularCli',
|
||||
path: dirToSearch,
|
||||
});
|
||||
|
||||
// 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);
|
||||
};
|
||||
host.isFile = (path) => {
|
||||
if (typeof path === 'string' && path.endsWith('angular.json')) {
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
return host.isFile(path);
|
||||
};
|
||||
} catch (e) {
|
||||
// Ignore if the client does not use NX
|
||||
}
|
||||
|
||||
return (await workspaces.readWorkspace(dirToSearch, host)).workspace;
|
||||
};
|
||||
|
||||
export const getDefaultProjectName = (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 findAngularProjectTarget = (
|
||||
workspace: workspaces.WorkspaceDefinition,
|
||||
projectName: string,
|
||||
targetName: string
|
||||
): {
|
||||
project: workspaces.ProjectDefinition;
|
||||
target: workspaces.TargetDefinition;
|
||||
} => {
|
||||
if (!workspace.projects || !Object.keys(workspace.projects).length) {
|
||||
throw new Error('No angular projects found');
|
||||
}
|
||||
|
||||
const project = workspace.projects.get(projectName);
|
||||
|
||||
if (!project) {
|
||||
throw new Error(`"${projectName}" project is not found in angular.json`);
|
||||
}
|
||||
|
||||
if (!project.targets.has(targetName)) {
|
||||
throw new Error(`"${targetName}" target is not found in "${projectName}" project`);
|
||||
}
|
||||
const target = project.targets.get(targetName);
|
||||
|
||||
return { project, target };
|
||||
};
|
||||
@ -1,19 +1,13 @@
|
||||
import webpack from 'webpack';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { BuilderContext, Target, targetFromTargetString } from '@angular-devkit/architect';
|
||||
import { BuilderContext, targetFromTargetString } from '@angular-devkit/architect';
|
||||
import { sync as findUpSync } from 'find-up';
|
||||
import semver from 'semver';
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
import { JsonObject, logging } from '@angular-devkit/core';
|
||||
import { getWebpackConfig as getCustomWebpackConfig } from './angular-cli-webpack';
|
||||
import { moduleIsAvailable } from './utils/module-is-available';
|
||||
import { PresetOptions } from './preset-options';
|
||||
import {
|
||||
getDefaultProjectName,
|
||||
findAngularProjectTarget,
|
||||
readAngularWorkspaceConfig,
|
||||
} from './angular-read-workspace';
|
||||
|
||||
export async function webpackFinal(baseConfig: webpack.Configuration, options: PresetOptions) {
|
||||
if (!moduleIsAvailable('@angular-devkit/build-angular')) {
|
||||
@ -21,43 +15,18 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
|
||||
return baseConfig;
|
||||
}
|
||||
|
||||
const angularCliVersion = await import('@angular/cli').then((m) => semver.coerce(m.VERSION.full));
|
||||
checkForLegacyBuildOptions(options);
|
||||
|
||||
/**
|
||||
* Ordered array to use the specific getWebpackConfig according to some condition like angular-cli version
|
||||
*/
|
||||
const webpackGetterByVersions: {
|
||||
info: string;
|
||||
condition: boolean;
|
||||
getWebpackConfig(
|
||||
baseConfig: webpack.Configuration,
|
||||
options: PresetOptions
|
||||
): Promise<webpack.Configuration> | webpack.Configuration;
|
||||
}[] = [
|
||||
{
|
||||
info: '=> Loading angular-cli config for angular >= 13.0.0',
|
||||
condition: semver.satisfies(angularCliVersion, '>=13.0.0'),
|
||||
getWebpackConfig: async (_baseConfig, _options) => {
|
||||
const builderContext = getBuilderContext(_options);
|
||||
const builderOptions = await getBuilderOptions(_options, builderContext);
|
||||
const legacyDefaultOptions = await getLegacyDefaultBuildOptions(_options);
|
||||
const builderContext = getBuilderContext(options);
|
||||
const builderOptions = await getBuilderOptions(options, builderContext);
|
||||
|
||||
return getCustomWebpackConfig(_baseConfig, {
|
||||
builderOptions: {
|
||||
watch: options.configType === 'DEVELOPMENT',
|
||||
...legacyDefaultOptions,
|
||||
...builderOptions,
|
||||
},
|
||||
builderContext,
|
||||
});
|
||||
},
|
||||
return getCustomWebpackConfig(baseConfig, {
|
||||
builderOptions: {
|
||||
watch: options.configType === 'DEVELOPMENT',
|
||||
...builderOptions,
|
||||
},
|
||||
];
|
||||
|
||||
const webpackGetter = webpackGetterByVersions.find((wg) => wg.condition);
|
||||
|
||||
logger.info(webpackGetter.info);
|
||||
return Promise.resolve(webpackGetter.getWebpackConfig(baseConfig, options));
|
||||
builderContext,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -116,58 +85,23 @@ async function getBuilderOptions(
|
||||
return builderOptions;
|
||||
}
|
||||
|
||||
export const migrationToBuilderReferrenceMessage = dedent`Your Storybook startup uses a solution that is not supported.
|
||||
You must use angular builder to have an explicit configuration on the project used in angular.json
|
||||
Read more at:
|
||||
- https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
|
||||
- https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
|
||||
`;
|
||||
|
||||
/**
|
||||
* Get options from legacy way
|
||||
* /!\ This is only for backward compatibility and would be removed on Storybook 7.0
|
||||
* only work for angular.json with [defaultProject].build or "storybook.build" config
|
||||
* Checks if using legacy configuration that doesn't use builder and logs message referring to migration docs.
|
||||
*/
|
||||
async function getLegacyDefaultBuildOptions(options: PresetOptions) {
|
||||
function checkForLegacyBuildOptions(options: PresetOptions) {
|
||||
if (options.angularBrowserTarget !== undefined) {
|
||||
// Not use legacy way with builder (`angularBrowserTarget` is defined or null with builder and undefined without)
|
||||
return {};
|
||||
return;
|
||||
}
|
||||
|
||||
logger.warn(dedent`Your Storybook startup uses a solution that will not be supported in version 7.0.
|
||||
You must use angular builder to have an explicit configuration on the project used in angular.json
|
||||
Read more at:
|
||||
- https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
|
||||
- https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
|
||||
`);
|
||||
const dirToSearch = process.cwd();
|
||||
logger.error(migrationToBuilderReferrenceMessage);
|
||||
|
||||
// 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 {};
|
||||
}
|
||||
|
||||
// Find angular project target
|
||||
try {
|
||||
const browserTarget = {
|
||||
configuration: undefined,
|
||||
project: getDefaultProjectName(workspaceConfig),
|
||||
target: 'build',
|
||||
} as Target;
|
||||
|
||||
const { target } = findAngularProjectTarget(
|
||||
workspaceConfig,
|
||||
browserTarget.project,
|
||||
browserTarget.target
|
||||
);
|
||||
|
||||
logger.info(
|
||||
`=> Using angular project "${browserTarget.project}:${browserTarget.target}" for configuring Storybook`
|
||||
);
|
||||
return { ...target.options };
|
||||
} catch (error) {
|
||||
logger.error(`=> Could not find angular project: ${error.message}`);
|
||||
logger.info(`=> Fail to load angular-cli config. Using base config`);
|
||||
return {};
|
||||
}
|
||||
throw Error('angularBrowserTarget is undefined.');
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { Options as CoreOptions } from '@storybook/types';
|
||||
|
||||
import { BuilderContext } from '@angular-devkit/architect';
|
||||
import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
|
||||
import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
|
||||
import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
|
||||
|
||||
export type PresetOptions = CoreOptions & {
|
||||
/* Allow to get the options of a targeted "browser builder" */
|
||||
angularBrowserTarget?: string | null;
|
||||
/* Defined set of options. These will take over priority from angularBrowserTarget options */
|
||||
angularBuilderOptions?: {
|
||||
styles?: ExtraEntryPoint[];
|
||||
styles?: StyleElement[];
|
||||
stylePreprocessorOptions?: StylePreprocessorOptions;
|
||||
};
|
||||
/* Angular context from builder */
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
/**
|
||||
* 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 {
|
||||
Path,
|
||||
BaseException,
|
||||
basename,
|
||||
dirname,
|
||||
getSystemPath,
|
||||
join,
|
||||
normalize,
|
||||
relative,
|
||||
resolve,
|
||||
} from '@angular-devkit/core';
|
||||
import { AssetPattern } from '@angular-devkit/build-angular';
|
||||
import { AssetPatternClass } from '@angular-devkit/build-angular/src/builders/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;
|
||||
});
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { OptimizationUnion } from '@angular-devkit/build-angular';
|
||||
import { NormalizedOptimizationOptions } from '@angular-devkit/build-angular/src/utils/normalize-optimization';
|
||||
import { moduleIsAvailable } from './module-is-available';
|
||||
|
||||
const importAngularCliNormalizeOptimization = ():
|
||||
| typeof import('@angular-devkit/build-angular/src/utils/normalize-optimization')
|
||||
| undefined => {
|
||||
// First we look for webpack config according to directory structure of Angular
|
||||
// present since the version 7.2.0
|
||||
if (moduleIsAvailable('@angular-devkit/build-angular/src/utils/normalize-optimization')) {
|
||||
// eslint-disable-next-line global-require
|
||||
return require('@angular-devkit/build-angular/src/utils/normalize-optimization');
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const normalizeOptimization = (
|
||||
options: OptimizationUnion
|
||||
): NormalizedOptimizationOptions => {
|
||||
if (importAngularCliNormalizeOptimization()) {
|
||||
return importAngularCliNormalizeOptimization().normalizeOptimization(options);
|
||||
}
|
||||
|
||||
// Best effort to stay compatible with 6.1.*
|
||||
return options as any;
|
||||
};
|
||||
@ -1,7 +1,9 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'storybook-button',
|
||||
imports: [CommonModule],
|
||||
template: ` <button
|
||||
type="button"
|
||||
(click)="onClick.emit($event)"
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
|
||||
import { ChipsModule } from './angular-src/chips.module';
|
||||
import { ChipComponent } from './angular-src/chip.component';
|
||||
|
||||
export default {
|
||||
component: ChipComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [ChipsModule],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
export const Chip: StoryFn = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
Chip.args = {
|
||||
displayText: 'Chip',
|
||||
};
|
||||
Chip.argTypes = {
|
||||
removeClicked: { action: 'Remove icon clicked' },
|
||||
};
|
||||
@ -1,7 +1,6 @@
|
||||
import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
|
||||
import { ChipsModule } from './angular-src/chips.module';
|
||||
import { ChipsGroupComponent } from './angular-src/chips-group.component';
|
||||
import { ChipComponent } from './angular-src/chip.component';
|
||||
|
||||
export default {
|
||||
// title: 'Basics / NgModule / Module with multiple component',
|
||||
@ -14,9 +13,9 @@ export default {
|
||||
} as Meta;
|
||||
|
||||
export const ChipsGroup: StoryFn = (args) => ({
|
||||
component: ChipsGroupComponent,
|
||||
props: args,
|
||||
});
|
||||
|
||||
ChipsGroup.args = {
|
||||
chips: [
|
||||
{
|
||||
@ -29,18 +28,8 @@ ChipsGroup.args = {
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
ChipsGroup.argTypes = {
|
||||
removeChipClick: { action: 'Remove chip' },
|
||||
removeAllChipsClick: { action: 'Remove all chips clicked' },
|
||||
};
|
||||
|
||||
export const Chip: StoryFn = (args) => ({
|
||||
component: ChipComponent,
|
||||
props: args,
|
||||
});
|
||||
Chip.args = {
|
||||
displayText: 'Chip',
|
||||
};
|
||||
Chip.argTypes = {
|
||||
removeClicked: { action: 'Remove icon clicked' },
|
||||
};
|
||||
|
||||
@ -97,21 +97,3 @@ WithCustomDecorator.decorators = [
|
||||
};
|
||||
},
|
||||
] as Story['decorators'];
|
||||
|
||||
export const AngularLegacyRendering = (args: Args) => ({
|
||||
template: `Child Template`,
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
});
|
||||
AngularLegacyRendering.parameters = { angularLegacyRendering: true };
|
||||
AngularLegacyRendering.decorators = [
|
||||
(storyFunc) => {
|
||||
const story = storyFunc();
|
||||
|
||||
return {
|
||||
...story,
|
||||
template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
|
||||
};
|
||||
},
|
||||
] as Story['decorators'];
|
||||
|
||||
@ -3,6 +3,7 @@ import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'component-with-whitespace',
|
||||
preserveWhitespaces: true,
|
||||
template: ` <div>
|
||||
<p>Some content</p>
|
||||
</div>`,
|
||||
@ -12,11 +13,6 @@ class ComponentWithWhitespace {}
|
||||
export default {
|
||||
// title: 'Core / Parameters / With Bootstrap Options',
|
||||
component: ComponentWithWhitespace,
|
||||
parameters: {
|
||||
bootstrapOptions: {
|
||||
preserveWhitespaces: true,
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
export const WithPreserveWhitespaces: StoryFn = (_args) => ({});
|
||||
|
||||
@ -22,6 +22,19 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Storybook Team",
|
||||
"exports": {
|
||||
".": {
|
||||
"node": "./dist/index.js",
|
||||
"require": "./dist/index.js",
|
||||
"import": "./dist/index.mjs",
|
||||
"types": "./dist/index.d.ts"
|
||||
},
|
||||
"./package.json": "./package.json",
|
||||
"./bin/index": "./bin/index.js"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"bin": {
|
||||
"getstorybook": "./bin/index.js",
|
||||
"sb": "./bin/index.js"
|
||||
@ -93,7 +106,8 @@
|
||||
},
|
||||
"bundler": {
|
||||
"entries": [
|
||||
"./src/generate.ts"
|
||||
"./src/generate.ts",
|
||||
"./src/index.ts"
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
|
||||
@ -344,14 +344,6 @@ describe('Detect', () => {
|
||||
)
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('ALREADY_HAS_STORYBOOK if lib is present', () => {
|
||||
expect(
|
||||
isStorybookInstalled({
|
||||
devDependencies: { '@storybook/react': '4.0.0-alpha.21' },
|
||||
})
|
||||
).toBe(ProjectType.ALREADY_HAS_STORYBOOK);
|
||||
});
|
||||
});
|
||||
|
||||
describe('detectFrameworkPreset should return', () => {
|
||||
|
||||
@ -142,7 +142,7 @@ export function isStorybookInstalled(
|
||||
false
|
||||
)
|
||||
) {
|
||||
return ProjectType.ALREADY_HAS_STORYBOOK;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
@ -194,9 +194,8 @@ export function detect(
|
||||
return ProjectType.UNDETECTED;
|
||||
}
|
||||
|
||||
const storyBookInstalled = isStorybookInstalled(packageJson, options.force);
|
||||
if (storyBookInstalled) {
|
||||
return storyBookInstalled;
|
||||
if (isNxProject(packageJson)) {
|
||||
return ProjectType.NX;
|
||||
}
|
||||
|
||||
if (options.html) {
|
||||
@ -205,3 +204,7 @@ export function detect(
|
||||
|
||||
return detectFrameworkPreset(packageJson || bowerJson);
|
||||
}
|
||||
|
||||
function isNxProject(packageJSON: PackageJson) {
|
||||
return !!packageJSON.devDependencies?.nx || fs.existsSync('nx.json');
|
||||
}
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
import * as path from 'path';
|
||||
import * as fs from 'fs';
|
||||
import { pathExists } from 'fs-extra';
|
||||
|
||||
import { readFileAsJson, writeFileAsJson } from '../../helpers';
|
||||
|
||||
type TsConfig = {
|
||||
extends: string;
|
||||
};
|
||||
|
||||
export function getAngularAppTsConfigPath() {
|
||||
const angularJson = readFileAsJson('angular.json', true);
|
||||
const defaultProject = getDefaultProjectName(angularJson);
|
||||
const tsConfigPath = angularJson.projects[defaultProject].architect.build.options.tsConfig;
|
||||
|
||||
if (!tsConfigPath || !fs.existsSync(path.resolve(tsConfigPath))) {
|
||||
return false;
|
||||
}
|
||||
return tsConfigPath;
|
||||
}
|
||||
|
||||
export function getAngularAppTsConfigJson() {
|
||||
const tsConfigPath = getAngularAppTsConfigPath();
|
||||
|
||||
if (!tsConfigPath) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return readFileAsJson(tsConfigPath, true);
|
||||
}
|
||||
|
||||
function setStorybookTsconfigExtendsPath(tsconfigJson: TsConfig) {
|
||||
const angularProjectTsConfigPath = getAngularAppTsConfigPath();
|
||||
const newTsconfigJson = { ...tsconfigJson };
|
||||
newTsconfigJson.extends = `../${angularProjectTsConfigPath}`;
|
||||
return newTsconfigJson;
|
||||
}
|
||||
|
||||
export function editStorybookTsConfig(tsconfigPath: string) {
|
||||
let tsConfigJson;
|
||||
try {
|
||||
tsConfigJson = readFileAsJson(tsconfigPath);
|
||||
} catch (e) {
|
||||
if (e.name === 'SyntaxError' && e.message.indexOf('Unexpected token /') > -1) {
|
||||
throw new Error(`Comments are disallowed in ${tsconfigPath}`);
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
tsConfigJson = setStorybookTsconfigExtendsPath(tsConfigJson);
|
||||
writeFileAsJson(tsconfigPath, tsConfigJson);
|
||||
}
|
||||
|
||||
export function getDefaultProjectName(angularJson: any): string | undefined {
|
||||
const { defaultProject, projects } = angularJson;
|
||||
|
||||
if (projects?.storybook) {
|
||||
return 'storybook';
|
||||
}
|
||||
|
||||
if (defaultProject) {
|
||||
return defaultProject;
|
||||
}
|
||||
|
||||
const firstProjectName = projects ? Object.keys(projects)[0] : undefined;
|
||||
if (firstProjectName) {
|
||||
return firstProjectName;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export function checkForProjects() {
|
||||
const { projects } = readFileAsJson('angular.json', true);
|
||||
|
||||
if (!projects || Object.keys(projects).length === 0) {
|
||||
throw new Error(
|
||||
'Could not find a project in your Angular workspace. \nAdd a project and re-run the installation'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function getBaseTsConfigName() {
|
||||
return (await pathExists('./tsconfig.base.json')) ? 'tsconfig.base.json' : 'tsconfig.json';
|
||||
}
|
||||
125
code/lib/cli/src/generators/ANGULAR/helpers.ts
Normal file
125
code/lib/cli/src/generators/ANGULAR/helpers.ts
Normal file
@ -0,0 +1,125 @@
|
||||
import fs from 'fs';
|
||||
import prompts from 'prompts';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
import { commandLog } from '../../helpers';
|
||||
|
||||
export const ANGULAR_JSON_PATH = 'angular.json';
|
||||
|
||||
export const compoDocPreviewPrefix = dedent`
|
||||
import { setCompodocJson } from "@storybook/addon-docs/angular";
|
||||
import docJson from "../documentation.json";
|
||||
setCompodocJson(docJson);
|
||||
`.trimStart();
|
||||
|
||||
export const promptForCompoDocs = async (): Promise<boolean> => {
|
||||
const { useCompoDoc } = await prompts({
|
||||
type: 'confirm',
|
||||
name: 'useCompoDoc',
|
||||
message: 'Do you want to use Compodoc for documentation?',
|
||||
});
|
||||
|
||||
return useCompoDoc;
|
||||
};
|
||||
|
||||
export class AngularJSON {
|
||||
json: {
|
||||
projects: Record<string, { root: string; architect: Record<string, any> }>;
|
||||
};
|
||||
|
||||
constructor() {
|
||||
if (!fs.existsSync(ANGULAR_JSON_PATH)) {
|
||||
commandLog(
|
||||
'An angular.json file was not found in the current directory. Storybook needs it to work properly.'
|
||||
);
|
||||
|
||||
throw new Error('No angular.json file found');
|
||||
}
|
||||
|
||||
const jsonContent = fs.readFileSync(ANGULAR_JSON_PATH, 'utf8');
|
||||
this.json = JSON.parse(jsonContent);
|
||||
}
|
||||
|
||||
get projects() {
|
||||
return this.json.projects;
|
||||
}
|
||||
|
||||
get projectsWithoutStorybook() {
|
||||
return Object.keys(this.projects).filter((projectName) => {
|
||||
const { architect } = this.projects[projectName];
|
||||
|
||||
return !architect.storybook;
|
||||
});
|
||||
}
|
||||
|
||||
getProjectSettingsByName(projectName: string) {
|
||||
return this.projects[projectName];
|
||||
}
|
||||
|
||||
async getProjectName() {
|
||||
if (this.projectsWithoutStorybook.length > 1) {
|
||||
const { projectName } = await prompts({
|
||||
type: 'select',
|
||||
name: 'projectName',
|
||||
message: 'For which project do you want to generate Storybook configuration?',
|
||||
choices: this.projectsWithoutStorybook.map((name) => ({
|
||||
title: name,
|
||||
value: name,
|
||||
})),
|
||||
});
|
||||
|
||||
return projectName;
|
||||
}
|
||||
|
||||
return this.projectsWithoutStorybook[0];
|
||||
}
|
||||
|
||||
addStorybookEntries({
|
||||
angularProjectName,
|
||||
storybookFolder,
|
||||
useCompodoc,
|
||||
root,
|
||||
}: {
|
||||
angularProjectName: string;
|
||||
storybookFolder: string;
|
||||
useCompodoc: boolean;
|
||||
root: string;
|
||||
}) {
|
||||
// add an entry to the angular.json file to setup the storybook builders
|
||||
const { architect } = this.projects[angularProjectName];
|
||||
|
||||
const baseOptions = {
|
||||
configDir: storybookFolder,
|
||||
browserTarget: `${angularProjectName}:build`,
|
||||
compodoc: useCompodoc,
|
||||
...(useCompodoc && { compodocArgs: ['-e', 'json', '-d', root || '.'] }),
|
||||
};
|
||||
|
||||
if (!architect.storybook) {
|
||||
architect.storybook = {
|
||||
builder: '@storybook/angular:start-storybook',
|
||||
options: {
|
||||
...baseOptions,
|
||||
port: 6006,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (!architect['build-storybook']) {
|
||||
architect['build-storybook'] = {
|
||||
builder: '@storybook/angular:build-storybook',
|
||||
options: {
|
||||
...baseOptions,
|
||||
outputDir:
|
||||
Object.keys(this.projects).length === 1
|
||||
? `storybook-static`
|
||||
: `dist/storybook/${angularProjectName}`,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
write() {
|
||||
fs.writeFileSync(ANGULAR_JSON_PATH, JSON.stringify(this.json, null, 2));
|
||||
}
|
||||
}
|
||||
@ -1,37 +1,22 @@
|
||||
import path, { join } from 'path';
|
||||
import { join } from 'path';
|
||||
import semver from 'semver';
|
||||
import {
|
||||
checkForProjects,
|
||||
editStorybookTsConfig,
|
||||
getAngularAppTsConfigJson,
|
||||
getAngularAppTsConfigPath,
|
||||
getBaseTsConfigName,
|
||||
} from './angular-helpers';
|
||||
import { writeFileAsJson, copyTemplate } from '../../helpers';
|
||||
import { getCliDir } from '../../dirs';
|
||||
import fs from 'fs';
|
||||
import dedent from 'ts-dedent';
|
||||
import { baseGenerator } from '../baseGenerator';
|
||||
import type { Generator } from '../types';
|
||||
import { CoreBuilder } from '../../project_types';
|
||||
import { AngularJSON, compoDocPreviewPrefix, promptForCompoDocs } from './helpers';
|
||||
import { getCliDir } from '../../dirs';
|
||||
import { paddedLog, copyTemplate } from '../../helpers';
|
||||
import { isStorybookInstalled } from '../../detect';
|
||||
|
||||
function editAngularAppTsConfig() {
|
||||
const tsConfigJson = getAngularAppTsConfigJson();
|
||||
const glob = '**/*.stories.*';
|
||||
if (!tsConfigJson) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { exclude = [] } = tsConfigJson;
|
||||
if (exclude.includes(glob)) {
|
||||
return;
|
||||
}
|
||||
|
||||
tsConfigJson.exclude = [...exclude, glob];
|
||||
writeFileAsJson(getAngularAppTsConfigPath(), tsConfigJson);
|
||||
}
|
||||
|
||||
const generator: Generator = async (packageManager, npmOptions, options) => {
|
||||
checkForProjects();
|
||||
|
||||
const generator: Generator<{ projectName: string }> = async (
|
||||
packageManager,
|
||||
npmOptions,
|
||||
options,
|
||||
commandOptions
|
||||
) => {
|
||||
const packageJson = packageManager.retrievePackageJson();
|
||||
const angularVersionFromDependencies = semver.coerce(
|
||||
packageManager.retrievePackageJson().dependencies['@angular/core']
|
||||
)?.version;
|
||||
@ -44,60 +29,88 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
|
||||
const isWebpack5 = semver.gte(angularVersion, '12.0.0');
|
||||
const updatedOptions = isWebpack5 ? { ...options, builder: CoreBuilder.Webpack5 } : options;
|
||||
|
||||
const angularJSON = new AngularJSON();
|
||||
|
||||
if (angularJSON.projectsWithoutStorybook.length === 0) {
|
||||
paddedLog(
|
||||
'Every project in your workspace is already set up with Storybook. There is nothing to do!'
|
||||
);
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
const angularProjectName = await angularJSON.getProjectName();
|
||||
|
||||
paddedLog(`Adding Storybook support to your "${angularProjectName}" project`);
|
||||
|
||||
const { root } = angularJSON.getProjectSettingsByName(angularProjectName);
|
||||
const { projects } = angularJSON;
|
||||
const useCompodoc = commandOptions.yes ? true : await promptForCompoDocs();
|
||||
const storybookFolder = root ? `${root}/.storybook` : '.storybook';
|
||||
|
||||
if (root !== '') {
|
||||
// create a .storybook folder in the root of the Angular project
|
||||
fs.mkdirSync(storybookFolder, { recursive: true });
|
||||
const rootReferencePathFromStorybookFolder = root
|
||||
.split('/')
|
||||
.map(() => '../')
|
||||
.join('');
|
||||
|
||||
fs.writeFileSync(
|
||||
`${storybookFolder}/main.js`,
|
||||
dedent(`
|
||||
const mainRoot = require('${rootReferencePathFromStorybookFolder}../.storybook/main.js');
|
||||
module.exports = {
|
||||
...mainRoot
|
||||
};
|
||||
`)
|
||||
);
|
||||
}
|
||||
|
||||
angularJSON.addStorybookEntries({
|
||||
angularProjectName,
|
||||
storybookFolder,
|
||||
useCompodoc,
|
||||
root,
|
||||
});
|
||||
angularJSON.write();
|
||||
|
||||
const isSbInstalled = isStorybookInstalled(packageJson, commandOptions.force);
|
||||
|
||||
await baseGenerator(
|
||||
packageManager,
|
||||
npmOptions,
|
||||
updatedOptions,
|
||||
{
|
||||
...updatedOptions,
|
||||
...(useCompodoc && {
|
||||
frameworkPreviewParts: {
|
||||
prefix: compoDocPreviewPrefix,
|
||||
},
|
||||
}),
|
||||
},
|
||||
'angular',
|
||||
{
|
||||
extraPackages: ['@compodoc/compodoc'],
|
||||
...(useCompodoc && { extraPackages: ['@compodoc/compodoc'] }),
|
||||
addScripts: false,
|
||||
componentsDestinationPath: root ? `${root}/src/stories` : undefined,
|
||||
addMainFile: !isSbInstalled,
|
||||
storybookConfigFolder: storybookFolder,
|
||||
},
|
||||
'angular'
|
||||
);
|
||||
|
||||
const templateDir = join(getCliDir(), 'templates', 'angular');
|
||||
copyTemplate(templateDir);
|
||||
|
||||
editAngularAppTsConfig();
|
||||
|
||||
// TODO: we need to add the following:
|
||||
|
||||
/*
|
||||
"storybook": {
|
||||
"builder": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build",
|
||||
"port": 4400
|
||||
}
|
||||
},
|
||||
"build-storybook": {
|
||||
"builder": "@storybook/angular:build-storybook",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build"
|
||||
}
|
||||
if (Object.keys(projects).length === 1) {
|
||||
packageManager.addScripts({
|
||||
storybook: `ng run ${angularProjectName}:storybook`,
|
||||
'build-storybook': `ng run ${angularProjectName}:build-storybook`,
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
// to the user's angular.json file.
|
||||
const templateDir = join(getCliDir(), 'templates', 'angular');
|
||||
copyTemplate(templateDir, root || undefined);
|
||||
|
||||
// then we want to add these scripts to package.json
|
||||
// packageManager.addScripts({
|
||||
// storybook: 'ng storybook',
|
||||
// 'build-storybook': 'ng build-storybook',
|
||||
// });
|
||||
|
||||
editStorybookTsConfig(path.resolve('./.storybook/tsconfig.json'));
|
||||
|
||||
// edit scripts to generate docs
|
||||
const tsConfigFile = await getBaseTsConfigName();
|
||||
packageManager.addScripts({
|
||||
'docs:json': `compodoc -p ./${tsConfigFile} -e json -d .`,
|
||||
});
|
||||
packageManager.addStorybookCommandInScripts({
|
||||
port: 6006,
|
||||
preCommand: 'docs:json',
|
||||
});
|
||||
return {
|
||||
projectName: angularProjectName,
|
||||
};
|
||||
};
|
||||
|
||||
export default generator;
|
||||
|
||||
@ -17,13 +17,16 @@ const defaultOptions: FrameworkOptions = {
|
||||
extraAddons: [],
|
||||
staticDir: undefined,
|
||||
addScripts: true,
|
||||
addMainFile: true,
|
||||
addComponents: true,
|
||||
addBabel: false,
|
||||
addESLint: false,
|
||||
extraMain: undefined,
|
||||
framework: undefined,
|
||||
extensions: undefined,
|
||||
componentsDestinationPath: undefined,
|
||||
commonJs: false,
|
||||
storybookConfigFolder: '.storybook',
|
||||
};
|
||||
|
||||
const getBuilderDetails = (builder: string) => {
|
||||
@ -106,7 +109,13 @@ const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
|
||||
export async function baseGenerator(
|
||||
packageManager: JsPackageManager,
|
||||
npmOptions: NpmOptions,
|
||||
{ language, builder = CoreBuilder.Webpack5, pnp, commonJs }: GeneratorOptions,
|
||||
{
|
||||
language,
|
||||
builder = CoreBuilder.Webpack5,
|
||||
pnp,
|
||||
commonJs,
|
||||
frameworkPreviewParts,
|
||||
}: GeneratorOptions,
|
||||
renderer: SupportedRenderers,
|
||||
options: FrameworkOptions = defaultOptions,
|
||||
framework?: SupportedFrameworks
|
||||
@ -116,11 +125,14 @@ export async function baseGenerator(
|
||||
extraPackages,
|
||||
staticDir,
|
||||
addScripts,
|
||||
addMainFile,
|
||||
addComponents,
|
||||
addBabel,
|
||||
addESLint,
|
||||
extraMain,
|
||||
extensions,
|
||||
storybookConfigFolder,
|
||||
componentsDestinationPath,
|
||||
} = {
|
||||
...defaultOptions,
|
||||
...options,
|
||||
@ -194,26 +206,29 @@ export async function baseGenerator(
|
||||
|
||||
const versionedPackages = await packageManager.getVersionedPackages(packages);
|
||||
|
||||
await fse.ensureDir('./.storybook');
|
||||
await fse.ensureDir(`./${storybookConfigFolder}`);
|
||||
|
||||
await configureMain({
|
||||
framework: { name: frameworkInclude, options: options.framework || {} },
|
||||
docs: { autodocs: 'tag' },
|
||||
addons: pnp ? addons.map(wrapForPnp) : addons,
|
||||
extensions,
|
||||
commonJs,
|
||||
...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null),
|
||||
...extraMain,
|
||||
...(type !== 'framework'
|
||||
? {
|
||||
core: {
|
||||
builder: builderInclude,
|
||||
},
|
||||
}
|
||||
: {}),
|
||||
});
|
||||
if (addMainFile) {
|
||||
await configureMain({
|
||||
framework: { name: frameworkInclude, options: options.framework || {} },
|
||||
storybookConfigFolder,
|
||||
docs: { autodocs: 'tag' },
|
||||
addons: pnp ? addons.map(wrapForPnp) : addons,
|
||||
extensions,
|
||||
commonJs,
|
||||
...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null),
|
||||
...extraMain,
|
||||
...(type !== 'framework'
|
||||
? {
|
||||
core: {
|
||||
builder: builderInclude,
|
||||
},
|
||||
}
|
||||
: {}),
|
||||
});
|
||||
}
|
||||
|
||||
await configurePreview(rendererId);
|
||||
await configurePreview({ frameworkPreviewParts, storybookConfigFolder });
|
||||
|
||||
// FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
|
||||
if (
|
||||
@ -226,7 +241,9 @@ export async function baseGenerator(
|
||||
window.global = window;
|
||||
</script>
|
||||
`;
|
||||
await fse.writeFile(`.storybook/preview-head.html`, previewHead, { encoding: 'utf8' });
|
||||
await fse.writeFile(`${storybookConfigFolder}/preview-head.html`, previewHead, {
|
||||
encoding: 'utf8',
|
||||
});
|
||||
}
|
||||
|
||||
const babelDependencies =
|
||||
@ -256,6 +273,6 @@ export async function baseGenerator(
|
||||
|
||||
if (addComponents) {
|
||||
const templateLocation = hasFrameworkTemplates(framework) ? framework : rendererId;
|
||||
await copyComponents(templateLocation, language);
|
||||
await copyComponents(templateLocation, language, componentsDestinationPath);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import fse from 'fs-extra';
|
||||
import { dedent } from 'ts-dedent';
|
||||
import type { SupportedRenderers, SupportedFrameworks } from '../project_types';
|
||||
|
||||
interface ConfigureMainOptions {
|
||||
addons: string[];
|
||||
extensions?: string[];
|
||||
commonJs?: boolean;
|
||||
staticDirs?: string[];
|
||||
storybookConfigFolder: string;
|
||||
/**
|
||||
* Extra values for main.js
|
||||
*
|
||||
@ -19,10 +19,20 @@ interface ConfigureMainOptions {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface FrameworkPreviewParts {
|
||||
prefix: string;
|
||||
}
|
||||
|
||||
interface ConfigurePreviewOptions {
|
||||
frameworkPreviewParts?: FrameworkPreviewParts;
|
||||
storybookConfigFolder: string;
|
||||
}
|
||||
|
||||
export async function configureMain({
|
||||
addons,
|
||||
extensions = ['js', 'jsx', 'ts', 'tsx'],
|
||||
commonJs = false,
|
||||
storybookConfigFolder,
|
||||
...custom
|
||||
}: ConfigureMainOptions) {
|
||||
const prefix = (await fse.pathExists('./src')) ? '../src' : '../stories';
|
||||
@ -44,7 +54,7 @@ export async function configureMain({
|
||||
// .replaceAll(/"(path\.dirname\(require\.resolve\(path\.join\('.*\))"/g, (_, a) => a)}`;
|
||||
|
||||
await fse.writeFile(
|
||||
`./.storybook/main.${commonJs ? 'cjs' : 'js'}`,
|
||||
`./${storybookConfigFolder}/main.${commonJs ? 'cjs' : 'js'}`,
|
||||
dedent`
|
||||
const path = require('path');
|
||||
${stringified}
|
||||
@ -53,20 +63,9 @@ export async function configureMain({
|
||||
);
|
||||
}
|
||||
|
||||
const frameworkToPreviewParts: Partial<Record<SupportedFrameworks | SupportedRenderers, any>> = {
|
||||
angular: {
|
||||
prefix: dedent`
|
||||
import { setCompodocJson } from "@storybook/addon-docs/angular";
|
||||
import docJson from "../documentation.json";
|
||||
setCompodocJson(docJson);
|
||||
|
||||
`.trimStart(),
|
||||
},
|
||||
};
|
||||
|
||||
export async function configurePreview(framework: SupportedFrameworks | SupportedRenderers) {
|
||||
const { prefix = '', extraParameters = '' } = frameworkToPreviewParts[framework] || {};
|
||||
const previewPath = `./.storybook/preview.js`;
|
||||
export async function configurePreview(options: ConfigurePreviewOptions) {
|
||||
const { prefix = '' } = options?.frameworkPreviewParts || {};
|
||||
const previewPath = `./${options.storybookConfigFolder}/preview.js`;
|
||||
|
||||
// If the framework template included a preview then we have nothing to do
|
||||
if (await fse.pathExists(previewPath)) {
|
||||
@ -83,7 +82,6 @@ export async function configurePreview(framework: SupportedFrameworks | Supporte
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
${extraParameters}
|
||||
}`
|
||||
.replace(' \n', '')
|
||||
.trim();
|
||||
|
||||
@ -2,6 +2,7 @@ import type { NpmOptions } from '../NpmOptions';
|
||||
import type { SupportedLanguage, Builder, ProjectType } from '../project_types';
|
||||
import type { JsPackageManager } from '../js-package-manager/JsPackageManager';
|
||||
import { type PackageManagerName } from '../js-package-manager/JsPackageManager';
|
||||
import type { FrameworkPreviewParts } from './configure';
|
||||
|
||||
export type GeneratorOptions = {
|
||||
language: SupportedLanguage;
|
||||
@ -9,6 +10,7 @@ export type GeneratorOptions = {
|
||||
linkable: boolean;
|
||||
pnp: boolean;
|
||||
commonJs: boolean;
|
||||
frameworkPreviewParts?: FrameworkPreviewParts;
|
||||
};
|
||||
|
||||
export interface FrameworkOptions {
|
||||
@ -16,6 +18,7 @@ export interface FrameworkOptions {
|
||||
extraAddons?: string[];
|
||||
staticDir?: string;
|
||||
addScripts?: boolean;
|
||||
addMainFile?: boolean;
|
||||
addComponents?: boolean;
|
||||
addBabel?: boolean;
|
||||
addESLint?: boolean;
|
||||
@ -23,13 +26,16 @@ export interface FrameworkOptions {
|
||||
extensions?: string[];
|
||||
framework?: Record<string, any>;
|
||||
commonJs?: boolean;
|
||||
storybookConfigFolder?: string;
|
||||
componentsDestinationPath?: string;
|
||||
}
|
||||
|
||||
export type Generator = (
|
||||
export type Generator<T = void> = (
|
||||
packageManagerInstance: JsPackageManager,
|
||||
npmOptions: NpmOptions,
|
||||
generatorOptions: GeneratorOptions
|
||||
) => Promise<void>;
|
||||
generatorOptions: GeneratorOptions,
|
||||
commandOptions?: CommandOptions
|
||||
) => Promise<T>;
|
||||
|
||||
export type CommandOptions = {
|
||||
packageManager: PackageManagerName;
|
||||
@ -40,6 +46,7 @@ export type CommandOptions = {
|
||||
html?: boolean;
|
||||
skipInstall?: boolean;
|
||||
parser?: string;
|
||||
// Automatically answer yes to prompts
|
||||
yes?: boolean;
|
||||
builder?: Builder;
|
||||
linkable?: boolean;
|
||||
|
||||
@ -176,19 +176,20 @@ export function addToDevDependenciesIfNotPresent(
|
||||
}
|
||||
}
|
||||
|
||||
export function copyTemplate(templateRoot: string) {
|
||||
export function copyTemplate(templateRoot: string, destination = '.') {
|
||||
const templateDir = path.resolve(templateRoot, `template-csf/`);
|
||||
|
||||
if (!fs.existsSync(templateDir)) {
|
||||
throw new Error(`Couldn't find template dir`);
|
||||
}
|
||||
|
||||
fse.copySync(templateDir, '.', { overwrite: true });
|
||||
fse.copySync(templateDir, destination, { overwrite: true });
|
||||
}
|
||||
|
||||
export async function copyComponents(
|
||||
renderer: SupportedFrameworks | SupportedRenderers,
|
||||
language: SupportedLanguage
|
||||
language: SupportedLanguage,
|
||||
destination?: string
|
||||
) {
|
||||
const languageFolderMapping: Record<SupportedLanguage, string> = {
|
||||
[SupportedLanguage.JAVASCRIPT]: 'js',
|
||||
@ -232,7 +233,7 @@ export async function copyComponents(
|
||||
return './stories';
|
||||
};
|
||||
|
||||
const destinationPath = await targetPath();
|
||||
const destinationPath = destination ?? (await targetPath());
|
||||
await fse.copy(join(getCliDir(), 'rendererAssets/common'), destinationPath, {
|
||||
overwrite: true,
|
||||
});
|
||||
|
||||
1
code/lib/cli/src/index.ts
Normal file
1
code/lib/cli/src/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './js-package-manager';
|
||||
@ -37,11 +37,11 @@ import type { CommandOptions } from './generators/types';
|
||||
|
||||
const logger = console;
|
||||
|
||||
const installStorybook = (
|
||||
projectType: ProjectType,
|
||||
const installStorybook = <Project extends ProjectType>(
|
||||
projectType: Project,
|
||||
packageManager: JsPackageManager,
|
||||
options: CommandOptions
|
||||
): Promise<void> => {
|
||||
): Promise<any> => {
|
||||
const npmOptions: NpmOptions = {
|
||||
installAsDevDependencies: true,
|
||||
skipInstall: options.skipInstall,
|
||||
@ -64,18 +64,8 @@ const installStorybook = (
|
||||
pnp: options.usePnp,
|
||||
};
|
||||
|
||||
const runGenerator: () => Promise<void> = async () => {
|
||||
const runGenerator: () => Promise<any> = async () => {
|
||||
switch (projectType) {
|
||||
case ProjectType.ALREADY_HAS_STORYBOOK:
|
||||
logger.log();
|
||||
paddedLog('There seems to be a Storybook already available in this project.');
|
||||
paddedLog('Apply following command to force:\n');
|
||||
codeLog(['sb init [options] -f']);
|
||||
|
||||
// Add a new line for the clear visibility.
|
||||
logger.log();
|
||||
return Promise.resolve();
|
||||
|
||||
case ProjectType.REACT_SCRIPTS:
|
||||
return reactScriptsGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Create React App" based project')
|
||||
@ -135,9 +125,8 @@ const installStorybook = (
|
||||
);
|
||||
|
||||
case ProjectType.ANGULAR:
|
||||
return angularGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
commandLog('Adding Storybook support to your "Angular" app\n')
|
||||
);
|
||||
commandLog('Adding Storybook support to your "Angular" app\n');
|
||||
return angularGenerator(packageManager, npmOptions, generatorOptions, options);
|
||||
|
||||
case ProjectType.EMBER:
|
||||
return emberGenerator(packageManager, npmOptions, generatorOptions).then(
|
||||
@ -204,6 +193,13 @@ const installStorybook = (
|
||||
commandLog('Adding Storybook support to your "Server" app\n')
|
||||
);
|
||||
|
||||
case ProjectType.NX /* NX */:
|
||||
paddedLog(
|
||||
'We have detected Nx in your project. Please use `nx g @nrwl/storybook:configuration` to add Storybook to your project.'
|
||||
);
|
||||
paddedLog('For more information, please see https://nx.dev/packages/storybook');
|
||||
return Promise.reject();
|
||||
|
||||
case ProjectType.UNSUPPORTED:
|
||||
paddedLog(`We detected a project type that we don't support yet.`);
|
||||
paddedLog(
|
||||
@ -296,10 +292,7 @@ async function doInitiate(options: CommandOptions, pkg: PackageJson): Promise<vo
|
||||
try {
|
||||
if (projectTypeProvided) {
|
||||
if (installableProjectTypes.includes(projectTypeProvided)) {
|
||||
const storybookInstalled = isStorybookInstalled(packageJson, options.force);
|
||||
projectType = storybookInstalled
|
||||
? ProjectType.ALREADY_HAS_STORYBOOK
|
||||
: projectTypeProvided.toUpperCase();
|
||||
projectType = projectTypeProvided.toUpperCase();
|
||||
} else {
|
||||
done(`The provided project type was not recognized by Storybook: ${projectTypeProvided}`);
|
||||
logger.log(`\nThe project types currently supported by Storybook are:\n`);
|
||||
@ -316,12 +309,27 @@ async function doInitiate(options: CommandOptions, pkg: PackageJson): Promise<vo
|
||||
}
|
||||
done();
|
||||
|
||||
await installStorybook(projectType as ProjectType, packageManager, {
|
||||
const storybookInstalled = isStorybookInstalled(packageJson, options.force);
|
||||
|
||||
if (storybookInstalled && projectType !== ProjectType.ANGULAR) {
|
||||
logger.log();
|
||||
paddedLog('There seems to be a Storybook already available in this project.');
|
||||
paddedLog('Apply following command to force:\n');
|
||||
codeLog(['sb init [options] -f']);
|
||||
|
||||
// Add a new line for the clear visibility.
|
||||
logger.log();
|
||||
return;
|
||||
}
|
||||
|
||||
const installResult = await installStorybook(projectType as ProjectType, packageManager, {
|
||||
...options,
|
||||
...(isEsm ? { commonJs: true } : undefined),
|
||||
}).catch((e) => {
|
||||
process.exit();
|
||||
});
|
||||
|
||||
if (!options.skipInstall) {
|
||||
if (!options.skipInstall && !storybookInstalled) {
|
||||
packageManager.installDependencies();
|
||||
}
|
||||
|
||||
@ -332,7 +340,13 @@ async function doInitiate(options: CommandOptions, pkg: PackageJson): Promise<vo
|
||||
await automigrate({ yes: options.yes || process.env.CI === 'true', packageManager: pkgMgr });
|
||||
|
||||
logger.log('\nTo run your Storybook, type:\n');
|
||||
codeLog([packageManager.getRunStorybookCommand()]);
|
||||
|
||||
if (projectType === ProjectType.ANGULAR) {
|
||||
codeLog([`ng run ${installResult.projectName}:storybook`]);
|
||||
} else {
|
||||
codeLog([packageManager.getRunStorybookCommand()]);
|
||||
}
|
||||
|
||||
logger.log('\nFor more information visit:', chalk.cyan('https://storybook.js.org'));
|
||||
|
||||
if (projectType === ProjectType.REACT_NATIVE) {
|
||||
|
||||
@ -376,9 +376,16 @@ export abstract class JsPackageManager {
|
||||
): // Use generic and conditional type to force `string[]` if fetchAllVersions is true and `string` if false
|
||||
Promise<T extends true ? string[] : string>;
|
||||
|
||||
public executeCommand(command: string, args: string[], stdio?: 'pipe' | 'inherit'): string {
|
||||
public abstract runScript(script: string, args: string[], cwd?: string): string;
|
||||
|
||||
public executeCommand(
|
||||
command: string,
|
||||
args: string[],
|
||||
stdio?: 'pipe' | 'inherit',
|
||||
cwd?: string
|
||||
): string {
|
||||
const commandResult = spawnSync(command, args, {
|
||||
cwd: this.cwd,
|
||||
cwd: cwd ?? this.cwd,
|
||||
stdio: stdio ?? 'pipe',
|
||||
encoding: 'utf-8',
|
||||
shell: true,
|
||||
|
||||
@ -57,6 +57,37 @@ describe('NPM Proxy', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('runScript', () => {
|
||||
describe('npm6', () => {
|
||||
it('should execute script `npm run compodoc -- -e json -d .`', () => {
|
||||
const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('6.0.0');
|
||||
|
||||
npmProxy.runScript('compodoc', ['-e', 'json', '-d', '.']);
|
||||
|
||||
expect(executeCommandSpy).toHaveBeenLastCalledWith(
|
||||
'npm',
|
||||
['run', 'compodoc', '--', '-e', 'json', '-d', '.'],
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
});
|
||||
});
|
||||
describe('npm7', () => {
|
||||
it('should execute script `npm run compodoc -- -e json -d .`', () => {
|
||||
const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('7.1.0');
|
||||
|
||||
npmProxy.runScript('compodoc', ['-e', 'json', '-d', '.']);
|
||||
|
||||
expect(executeCommandSpy).toHaveBeenLastCalledWith(
|
||||
'npm',
|
||||
['run', 'compodoc', '--', '-e', 'json', '-d', '.'],
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('addDependencies', () => {
|
||||
describe('npm6', () => {
|
||||
it('with devDep it should run `npm install -D @storybook/preview-api`', () => {
|
||||
|
||||
@ -38,6 +38,10 @@ export class NPMProxy extends JsPackageManager {
|
||||
return this.uninstallArgs;
|
||||
}
|
||||
|
||||
public runScript(command: string, args: string[], cwd?: string): string {
|
||||
return this.executeCommand(`npm`, ['run', command, '--', ...args], undefined, cwd);
|
||||
}
|
||||
|
||||
protected getResolutions(packageJson: PackageJson, versions: Record<string, string>) {
|
||||
return {
|
||||
overrides: {
|
||||
|
||||
@ -46,6 +46,21 @@ describe('NPM Proxy', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('runScript', () => {
|
||||
it('should execute script `yarn compodoc -- -e json -d .`', () => {
|
||||
const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('7.1.0');
|
||||
|
||||
pnpmProxy.runScript('compodoc', ['-e', 'json', '-d', '.']);
|
||||
|
||||
expect(executeCommandSpy).toHaveBeenLastCalledWith(
|
||||
'pnpm',
|
||||
['run', 'compodoc', '-e', 'json', '-d', '.'],
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('addDependencies', () => {
|
||||
it('with devDep it should run `pnpm add -D @storybook/preview-api`', () => {
|
||||
const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('6.0.0');
|
||||
|
||||
@ -24,6 +24,10 @@ export class PNPMProxy extends JsPackageManager {
|
||||
return this.executeCommand('pnpm', ['--version']);
|
||||
}
|
||||
|
||||
runScript(command: string, args: string[], cwd?: string): string {
|
||||
return this.executeCommand(`pnpm`, ['run', command, ...args], undefined, cwd);
|
||||
}
|
||||
|
||||
protected getResolutions(packageJson: PackageJson, versions: Record<string, string>) {
|
||||
return {
|
||||
overrides: {
|
||||
|
||||
@ -46,6 +46,21 @@ describe('Yarn 1 Proxy', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('runScript', () => {
|
||||
it('should execute script `yarn compodoc -- -e json -d .`', () => {
|
||||
const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('7.1.0');
|
||||
|
||||
yarn1Proxy.runScript('compodoc', ['-e', 'json', '-d', '.']);
|
||||
|
||||
expect(executeCommandSpy).toHaveBeenLastCalledWith(
|
||||
'yarn',
|
||||
['compodoc', '-e', 'json', '-d', '.'],
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('addDependencies', () => {
|
||||
it('with devDep it should run `yarn install -D --ignore-workspace-root-check @storybook/preview-api`', () => {
|
||||
const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('');
|
||||
|
||||
@ -16,6 +16,10 @@ export class Yarn1Proxy extends JsPackageManager {
|
||||
return `yarn ${command}`;
|
||||
}
|
||||
|
||||
runScript(command: string, args: string[], cwd?: string): string {
|
||||
return this.executeCommand(`yarn`, [command, ...args], undefined, cwd);
|
||||
}
|
||||
|
||||
protected getResolutions(packageJson: PackageJson, versions: Record<string, string>) {
|
||||
return {
|
||||
resolutions: {
|
||||
|
||||
@ -31,6 +31,21 @@ describe('Yarn 2 Proxy', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('runScript', () => {
|
||||
it('should execute script `yarn compodoc -- -e json -d .`', () => {
|
||||
const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('7.1.0');
|
||||
|
||||
yarn2Proxy.runScript('compodoc', ['-e', 'json', '-d', '.']);
|
||||
|
||||
expect(executeCommandSpy).toHaveBeenLastCalledWith(
|
||||
'yarn',
|
||||
['compodoc', '-e', 'json', '-d', '.'],
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setRegistryUrl', () => {
|
||||
it('should run `yarn config set npmRegistryServer https://foo.bar`', () => {
|
||||
const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('');
|
||||
|
||||
@ -17,6 +17,10 @@ export class Yarn2Proxy extends JsPackageManager {
|
||||
return `yarn ${command}`;
|
||||
}
|
||||
|
||||
runScript(command: string, args: string[], cwd?: string): string {
|
||||
return this.executeCommand(`yarn`, [command, ...args], undefined, cwd);
|
||||
}
|
||||
|
||||
protected getResolutions(packageJson: PackageJson, versions: Record<string, string>) {
|
||||
return {
|
||||
resolutions: {
|
||||
|
||||
@ -69,7 +69,6 @@ export enum ProjectType {
|
||||
SFC_VUE = 'SFC_VUE',
|
||||
ANGULAR = 'ANGULAR',
|
||||
EMBER = 'EMBER',
|
||||
ALREADY_HAS_STORYBOOK = 'ALREADY_HAS_STORYBOOK',
|
||||
WEB_COMPONENTS = 'WEB_COMPONENTS',
|
||||
MITHRIL = 'MITHRIL',
|
||||
MARIONETTE = 'MARIONETTE',
|
||||
@ -82,6 +81,7 @@ export enum ProjectType {
|
||||
RAX = 'RAX',
|
||||
AURELIA = 'AURELIA',
|
||||
SERVER = 'SERVER',
|
||||
NX = 'NX',
|
||||
}
|
||||
|
||||
export enum CoreBuilder {
|
||||
@ -192,20 +192,6 @@ export const supportedTemplates: TemplateConfiguration[] = [
|
||||
return dependencies.every(Boolean) || files.every(Boolean);
|
||||
},
|
||||
},
|
||||
{
|
||||
preset: ProjectType.WEBPACK_REACT,
|
||||
dependencies: ['react', 'webpack'],
|
||||
matcherFunction: ({ dependencies }) => {
|
||||
return dependencies.every(Boolean);
|
||||
},
|
||||
},
|
||||
{
|
||||
preset: ProjectType.REACT,
|
||||
dependencies: ['react'],
|
||||
matcherFunction: ({ dependencies }) => {
|
||||
return dependencies.every(Boolean);
|
||||
},
|
||||
},
|
||||
{
|
||||
preset: ProjectType.ANGULAR,
|
||||
dependencies: ['@angular/core'],
|
||||
@ -284,6 +270,22 @@ export const supportedTemplates: TemplateConfiguration[] = [
|
||||
return dependencies.every(Boolean);
|
||||
},
|
||||
},
|
||||
// DO NOT MOVE ANY TEMPLATES BELOW THIS LINE
|
||||
// React is part of every Template, after Storybook is initialized once
|
||||
{
|
||||
preset: ProjectType.WEBPACK_REACT,
|
||||
dependencies: ['react', 'webpack'],
|
||||
matcherFunction: ({ dependencies }) => {
|
||||
return dependencies.every(Boolean);
|
||||
},
|
||||
},
|
||||
{
|
||||
preset: ProjectType.REACT,
|
||||
dependencies: ['react'],
|
||||
matcherFunction: ({ dependencies }) => {
|
||||
return dependencies.every(Boolean);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// A TemplateConfiguration that matches unsupported frameworks
|
||||
@ -300,11 +302,7 @@ export const unsupportedTemplate: TemplateConfiguration = {
|
||||
},
|
||||
};
|
||||
|
||||
const notInstallableProjectTypes: ProjectType[] = [
|
||||
ProjectType.UNDETECTED,
|
||||
ProjectType.UNSUPPORTED,
|
||||
ProjectType.ALREADY_HAS_STORYBOOK,
|
||||
];
|
||||
const notInstallableProjectTypes: ProjectType[] = [ProjectType.UNDETECTED, ProjectType.UNSUPPORTED];
|
||||
|
||||
export const installableProjectTypes = Object.values(ProjectType)
|
||||
.filter((type) => !notInstallableProjectTypes.includes(type))
|
||||
|
||||
@ -249,16 +249,6 @@ const baseTemplates = {
|
||||
builder: '@storybook/builder-webpack5',
|
||||
},
|
||||
},
|
||||
'angular-cli/13-ts': {
|
||||
name: 'Angular CLI (Version 13)',
|
||||
script:
|
||||
'npx -p @angular/cli@13 ng new angular-v13 --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
|
||||
expected: {
|
||||
framework: '@storybook/angular',
|
||||
renderer: '@storybook/angular',
|
||||
builder: '@storybook/builder-webpack5',
|
||||
},
|
||||
},
|
||||
'svelte-kit/skeleton-js': {
|
||||
name: 'Svelte Kit (JS)',
|
||||
script:
|
||||
@ -421,7 +411,6 @@ export const merged: TemplateKey[] = [
|
||||
'react-webpack/18-ts',
|
||||
'react-webpack/17-ts',
|
||||
'angular-cli/14-ts',
|
||||
'angular-cli/13-ts',
|
||||
'preact-webpack5/default-ts',
|
||||
'preact-vite/default-ts',
|
||||
'html-webpack/default',
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{
|
||||
"extends": "%SET_DURING_SB_INIT%",
|
||||
"extends": "../tsconfig.app.json",
|
||||
"compilerOptions": {
|
||||
"types": ["node"],
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
|
||||
"include": ["../src/**/*", "../projects/**/*"],
|
||||
"exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
|
||||
"include": ["../src/**/*"],
|
||||
"files": ["./typings.d.ts"]
|
||||
}
|
||||
|
||||
@ -34,9 +34,11 @@ import { extractStorybookMetadata } from './utils/metadata';
|
||||
import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
|
||||
import { summarizeIndex } from './utils/summarizeIndex';
|
||||
|
||||
export async function buildStaticStandalone(
|
||||
options: CLIOptions & LoadOptions & BuilderOptions & { outputDir: string }
|
||||
) {
|
||||
export type BuildStaticStandaloneOptions = CLIOptions &
|
||||
LoadOptions &
|
||||
BuilderOptions & { outputDir: string };
|
||||
|
||||
export async function buildStaticStandalone(options: BuildStaticStandaloneOptions) {
|
||||
/* eslint-disable no-param-reassign */
|
||||
options.configType = 'PRODUCTION';
|
||||
|
||||
|
||||
@ -164,10 +164,10 @@ export interface CLIOptions {
|
||||
|
||||
export interface BuilderOptions {
|
||||
configType?: 'DEVELOPMENT' | 'PRODUCTION';
|
||||
ignorePreview: boolean;
|
||||
cache: FileSystemCache;
|
||||
ignorePreview?: boolean;
|
||||
cache?: FileSystemCache;
|
||||
configDir: string;
|
||||
docsMode: boolean;
|
||||
docsMode?: boolean;
|
||||
features?: StorybookConfig['features'];
|
||||
versionCheck?: VersionCheck;
|
||||
releaseNotesData?: ReleaseNotesData;
|
||||
|
||||
3356
code/yarn.lock
3356
code/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -11,6 +11,12 @@ export default {
|
||||
|
||||
Storybook uses this to auto-generate the `ArgTypes` for your component using [Compodoc](https://compodoc.app/). It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
|
||||
|
||||
## Automatic Compodoc setup
|
||||
|
||||
During `sb init`, you will be asked, whether you want to setup Compodoc for your project. Just answer the question with Yes. Compodoc is then ready to use!
|
||||
|
||||
## Manual Compodoc setup
|
||||
|
||||
You'll need to register Compodoc's `documentation.json` file in `.storybook/preview.ts`:
|
||||
|
||||
```js
|
||||
@ -26,16 +32,37 @@ Finally, to set up compodoc, you'll first need to install Compodoc:
|
||||
yarn add -D @compodoc/compodoc
|
||||
```
|
||||
|
||||
Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `package.json` creates a metadata file `./documentation.json` each time you run storybook:
|
||||
Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `projects.<project>.architect.<storybook|build-storybook>` in the `angular.json` creates a metadata file `./documentation.json` each time you run storybook:
|
||||
|
||||
```json
|
||||
```jsonc
|
||||
// angular.json
|
||||
{
|
||||
...
|
||||
"scripts": {
|
||||
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
|
||||
"storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
|
||||
...
|
||||
},
|
||||
"projects": {
|
||||
"your-project": {
|
||||
"architect": {
|
||||
"storybook": {
|
||||
...,
|
||||
"compodoc": true,
|
||||
"compodocArgs": [
|
||||
"-e",
|
||||
"json",
|
||||
"-d",
|
||||
"." // the root folder of your project
|
||||
],
|
||||
},
|
||||
"build-storybook": {
|
||||
...,
|
||||
"compodoc": true,
|
||||
"compodocArgs": [
|
||||
"-e",
|
||||
"json",
|
||||
"-d",
|
||||
"." // the root folder of your project
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -5,24 +5,4 @@
|
||||
npx storybook init
|
||||
```
|
||||
|
||||
- Update your `angular.json` file to include Storybook's custom builder:
|
||||
|
||||
```json
|
||||
{
|
||||
"storybook": {
|
||||
"builder": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build",
|
||||
"port": 6006
|
||||
}
|
||||
},
|
||||
"build-storybook": {
|
||||
"builder": "@storybook/angular:build-storybook",
|
||||
"options": {
|
||||
"browserTarget": "angular-cli:build"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
|
||||
@ -25,7 +25,11 @@ async function run() {
|
||||
|
||||
const events = await (await fetch(`http://localhost:${PORT}/event-log`)).json();
|
||||
|
||||
assert.equal(events.length, 2);
|
||||
assert.equal(
|
||||
events.length,
|
||||
2,
|
||||
`Expected 2 events. The following events were logged: ${JSON.stringify(events)} `
|
||||
);
|
||||
|
||||
const [bootEvent, mainEvent] = events;
|
||||
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
// This file requires many imports from `../code`, which requires both an install and bootstrap of
|
||||
// the repo to work properly. So we load it async in the task runner *after* those steps.
|
||||
|
||||
/* eslint-disable no-restricted-syntax, no-await-in-loop */
|
||||
import { copy, ensureSymlink, ensureDir, existsSync, pathExists } from 'fs-extra';
|
||||
/* eslint-disable no-restricted-syntax, no-await-in-loop, no-param-reassign */
|
||||
import {
|
||||
copy,
|
||||
ensureSymlink,
|
||||
ensureDir,
|
||||
existsSync,
|
||||
pathExists,
|
||||
readJson,
|
||||
writeJson,
|
||||
} from 'fs-extra';
|
||||
import { join, resolve, sep } from 'path';
|
||||
|
||||
import type { Task } from '../task';
|
||||
@ -115,6 +123,13 @@ export const install: Task['run'] = async ({ sandboxDir, template }, { link, dry
|
||||
prefix:
|
||||
'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" STORYBOOK_TELEMETRY_URL="http://localhost:6007/event-log"',
|
||||
});
|
||||
|
||||
switch (template.expected.framework) {
|
||||
case '@storybook/angular':
|
||||
await prepareAngularSandbox(cwd);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
};
|
||||
|
||||
// Ensure that sandboxes can refer to story files defined in `code/`.
|
||||
@ -436,3 +451,32 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }) => {
|
||||
if (template.expected.builder === '@storybook/builder-vite') setSandboxViteFinal(mainConfig);
|
||||
await writeConfig(mainConfig);
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets compodoc option in angular.json projects to false. We have to generate compodoc
|
||||
* manually to avoid symlink issues related to the template-stories folder.
|
||||
* In a second step a docs:json script is placed into the package.json to generate the
|
||||
* Compodoc documentation.json, which respects symlinks
|
||||
* */
|
||||
async function prepareAngularSandbox(cwd: string) {
|
||||
const angularJson = await readJson(join(cwd, 'angular.json'));
|
||||
|
||||
Object.keys(angularJson.projects).forEach((projectName: string) => {
|
||||
angularJson.projects[projectName].architect.storybook.options.compodoc = false;
|
||||
angularJson.projects[projectName].architect['build-storybook'].options.compodoc = false;
|
||||
});
|
||||
|
||||
await writeJson(join(cwd, 'angular.json'), angularJson, { spaces: 2 });
|
||||
|
||||
const packageJsonPath = join(cwd, 'package.json');
|
||||
const packageJson = await readJson(packageJsonPath);
|
||||
|
||||
packageJson.scripts = {
|
||||
...packageJson.scripts,
|
||||
'docs:json': 'DIR=$PWD; cd ../../scripts; yarn ts-node combine-compodoc $DIR',
|
||||
storybook: `yarn docs:json && ${packageJson.scripts.storybook}`,
|
||||
'build-storybook': `yarn docs:json && ${packageJson.scripts['build-storybook']}`,
|
||||
};
|
||||
|
||||
await writeJson(packageJsonPath, packageJson, { spaces: 2 });
|
||||
}
|
||||
|
||||
@ -1,23 +1,14 @@
|
||||
import { readJSON, writeJSON } from 'fs-extra';
|
||||
import { join } from 'path';
|
||||
|
||||
const logger = console;
|
||||
|
||||
export async function updatePackageScripts({ cwd, prefix }: { cwd: string; prefix: string }) {
|
||||
logger.info(`🔢 Adding package scripts:`);
|
||||
const packageJsonPath = join(cwd, 'package.json');
|
||||
const packageJson = await readJSON(packageJsonPath);
|
||||
packageJson.scripts = {
|
||||
...packageJson.scripts,
|
||||
storybook: packageJson.scripts.storybook.replace(/(npx )?storybook/, `${prefix} storybook`),
|
||||
'build-storybook': packageJson.scripts['build-storybook'].replace(
|
||||
/(npx )?storybook/,
|
||||
`${prefix} storybook`
|
||||
),
|
||||
|
||||
// See comment in combine-compodoc as to why this is necessary
|
||||
...(packageJson.scripts['docs:json'] && {
|
||||
'docs:json': 'DIR=$PWD; cd ../../scripts; yarn ts-node combine-compodoc $DIR',
|
||||
...(packageJson.scripts.storybook && {
|
||||
storybook: `${prefix} ${packageJson.scripts.storybook}`,
|
||||
'build-storybook': `${prefix} ${packageJson.scripts['build-storybook']}`,
|
||||
}),
|
||||
};
|
||||
await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user