GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18089 from storybookjs/future/remove-app-apis

Browse Source 
Core: Remove standalone node APIs
This commit is contained in:
Michael Shilman 2022-06-19 17:38:43 +08:00 committed by GitHub
commit 8cc4e6c1af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 32 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
MIGRATION.md
View File

@ -9,6 +9,7 @@
- [Modern ESM / IE11 support discontinued](#modern-esm--ie11-support-discontinued)
- [Framework field mandatory](#framework-field-mandatory)
- [frameworkOptions renamed](#frameworkoptions-renamed)
- [Framework standalone build moved](#framework-standalone-build-moved)
- [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default)
- [Babel mode v7 by default](#babel-mode-v7-by-default)
- [7.0 feature flags removed](#70-feature-flags-removed)
@ -329,6 +330,26 @@ module.exports = {
}
```
#### Framework standalone build moved
In 7.0 the location of the standalone node API has moved to `@storybook/core-server`.
If you used the React standalone API, for example, you might have written:
```js
const { buildStandalone } = require('@storybook/react/standalone');
const options = {};
buildStandalone(options).then(() => console.log('done'));
```
In 7.0, you would now use:
```js
const build = require('@storybook/core-server/standalone');
const options = {};
build(options).then(() => console.log('done'));
```
#### Docs modern inline rendering by default
Storybook docs has a new rendering mode called "modern inline rendering" which unifies the way stories are rendered in Docs mode and in the canvas (aka story mode). It is still being stabilized in 7.0 dev cycle. If you run into trouble with inline rendering in docs, you can opt out of modern inline rendering in your `.storybook/main.js`:

8
frameworks/angular/src/builders/build-storybook/index.ts
View File

@ -10,14 +10,15 @@ import { from, Observable, of, throwError } from 'rxjs';
import type { CLIOptions } from '@storybook/core-common';
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';
// eslint-disable-next-line import/no-extraneous-dependencies
import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
import { buildStaticStandalone } from '@storybook/core-server';
import type { StandaloneOptions } from '../utils/standalone-options';
import { runCompodoc } from '../utils/run-compodoc';
import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
@ -66,6 +67,7 @@ function commandBuilder(
} = options;
const standaloneOptions: StandaloneOptions = {
packageJson: readUpSync({ cwd: __dirname }).packageJson,
configDir,
docs,
loglevel,
@ -110,7 +112,7 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
}
function runInstance(options: StandaloneOptions) {
return from(buildStandalone(options)).pipe(
return from(buildStaticStandalone(options as any)).pipe(
catchError((error: any) => throwError(buildStandaloneErrorHandler(error)))
);
}

8
frameworks/angular/src/builders/start-storybook/index.ts
View File

@ -15,9 +15,10 @@ import { from, Observable, of } from 'rxjs';
import type { CLIOptions } from '@storybook/core-common';
import { map, switchMap, mapTo } from 'rxjs/operators';
import { sync as findUpSync } from 'find-up';
import { sync as readUpSync } from 'read-pkg-up';
// eslint-disable-next-line import/no-extraneous-dependencies
import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
import { buildDevStandalone } from '@storybook/core-server';
import type { StandaloneOptions } from '../utils/standalone-options';
import { runCompodoc } from '../utils/run-compodoc';
import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
@ -81,6 +82,7 @@ function commandBuilder(
} = options;
const standaloneOptions: StandaloneOptions = {
packageJson: readUpSync({ cwd: __dirname }).packageJson,
ci,
configDir,
docs,
@ -132,7 +134,7 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
function runInstance(options: StandaloneOptions) {
return new Observable<void>((observer) => {
// This Observable intentionally never complete, leaving the process running ;)
buildStandalone(options).then(
buildDevStandalone(options as any).then(
() => observer.next(),
(error) => observer.error(buildStandaloneErrorHandler(error))
);

6
frameworks/angular/standalone.d.ts → frameworks/angular/src/builders/utils/standalone-options.ts
View File

@ -1,5 +1,5 @@
import type { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common';
import type { BuilderContext } from '@angular-devkit/architect';
import type { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/core-common';
export type StandaloneOptions = Partial<
CLIOptions &
@ -15,7 +15,3 @@ export type StandaloneOptions = Partial<
tsConfig?: string;
}
>;
declare module '@storybook/angular/standalone' {
export default function buildStandalone(options: StandaloneOptions): Promise<unknown>;
}

7
frameworks/angular/standalone.js vendored
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

1
frameworks/ember/package.json
View File

@ -32,7 +32,6 @@
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-client": "7.0.0-alpha.3",
"@storybook/core-common": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/docs-tools": "7.0.0-alpha.3",
"@storybook/store": "7.0.0-alpha.3",
"core-js": "^3.8.2",

7
frameworks/ember/standalone.js
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

1
frameworks/html-webpack5/package.json
View File

@ -34,7 +34,6 @@
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-common": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/html": "7.0.0-alpha.3",
"@storybook/preset-html-webpack": "7.0.0-alpha.3",
"@types/node": "^14.14.20 || ^16.0.0",

7
frameworks/html-webpack5/standalone.js
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

1
frameworks/preact-webpack5/package.json
View File

@ -34,7 +34,6 @@
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-common": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/preact": "7.0.0-alpha.3",
"@storybook/preset-preact-webpack": "7.0.0-alpha.3",
"@types/node": "^14.14.20 || ^16.0.0",

7
frameworks/preact-webpack5/standalone.js
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

1
frameworks/react-webpack5/package.json
View File

@ -34,7 +34,6 @@
},
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/preset-react-webpack": "7.0.0-alpha.3",
"@storybook/react": "7.0.0-alpha.3",
"@types/node": "^14.14.20 || ^16.0.0",

7
frameworks/react-webpack5/standalone.js vendored
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

1
frameworks/server-webpack5/package.json
View File

@ -34,7 +34,6 @@
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-common": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/preset-server-webpack": "7.0.0-alpha.3",
"@storybook/server": "7.0.0-alpha.3",
"@types/node": "^14.14.20 || ^16.0.0",

7
frameworks/server-webpack5/standalone.js
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

28
frameworks/standalone.test.ts
View File

@ -1,28 +0,0 @@
import build from '@storybook/core-server/standalone';
jest.mock('@storybook/core-server/standalone');
describe.each([
['angular'],
['ember'],
['html-webpack5'],
['preact-webpack5'],
['react-webpack5'],
['server-webpack5'],
['svelte-webpack5'],
['vue-webpack5'],
['vue3-webpack5'],
['web-components-webpack5'],
])('%s', (app) => {
it('should run standalone', async () => {
// eslint-disable-next-line import/no-dynamic-require, global-require
const storybook = require(`@storybook/${app}/standalone`);
await storybook({
mode: 'static',
outputDir: '',
});
expect(build).toHaveBeenCalled();
});
});

1
frameworks/svelte-webpack5/package.json
View File

@ -35,7 +35,6 @@
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-common": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/preset-svelte-webpack": "7.0.0-alpha.3",
"@storybook/svelte": "7.0.0-alpha.3",
"core-js": "^3.8.2",

7
frameworks/svelte-webpack5/standalone.js
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

1
frameworks/vue-webpack5/package.json
View File

@ -34,7 +34,6 @@
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-common": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/preset-vue-webpack": "7.0.0-alpha.3",
"@storybook/vue": "7.0.0-alpha.3",
"@types/node": "^14.14.20 || ^16.0.0",

7
frameworks/vue-webpack5/standalone.js
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

1
frameworks/vue3-webpack5/package.json
View File

@ -34,7 +34,6 @@
"dependencies": {
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-common": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/preset-vue3-webpack": "7.0.0-alpha.3",
"@storybook/vue3": "7.0.0-alpha.3",
"@types/node": "^14.14.20 || ^16.0.0",

7
frameworks/vue3-webpack5/standalone.js
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

1
frameworks/web-components-webpack5/package.json
View File

@ -37,7 +37,6 @@
"@babel/preset-env": "^7.12.11",
"@storybook/builder-webpack5": "7.0.0-alpha.3",
"@storybook/core-common": "7.0.0-alpha.3",
"@storybook/core-server": "7.0.0-alpha.3",
"@storybook/preset-web-components-webpack": "7.0.0-alpha.3",
"@storybook/web-components": "7.0.0-alpha.3",
"@types/node": "^14.14.20 || ^16.0.0",

7
frameworks/web-components-webpack5/standalone.js
View File

@ -1,7 +0,0 @@
const build = require('@storybook/core-server/standalone');
async function buildStandalone(options) {
return build(options);
}
module.exports = buildStandalone;

9
yarn.lock
View File

@ -7956,7 +7956,6 @@ __metadata:
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-client": 7.0.0-alpha.3
"@storybook/core-common": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/docs-tools": 7.0.0-alpha.3
"@storybook/store": 7.0.0-alpha.3
core-js: ^3.8.2
@ -8063,7 +8062,6 @@ __metadata:
dependencies:
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-common": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/html": 7.0.0-alpha.3
"@storybook/preset-html-webpack": 7.0.0-alpha.3
"@types/node": ^14.14.20 || ^16.0.0
@ -8296,7 +8294,6 @@ __metadata:
dependencies:
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-common": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/preact": 7.0.0-alpha.3
"@storybook/preset-preact-webpack": 7.0.0-alpha.3
"@types/node": ^14.14.20 || ^16.0.0
@ -8586,7 +8583,6 @@ __metadata:
resolution: "@storybook/react-webpack5@workspace:frameworks/react-webpack5"
dependencies:
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/preset-react-webpack": 7.0.0-alpha.3
"@storybook/react": 7.0.0-alpha.3
"@types/node": ^14.14.20 || ^16.0.0
@ -8983,7 +8979,6 @@ __metadata:
dependencies:
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-common": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/preset-server-webpack": 7.0.0-alpha.3
"@storybook/server": 7.0.0-alpha.3
"@types/node": ^14.14.20 || ^16.0.0
@ -9058,7 +9053,6 @@ __metadata:
dependencies:
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-common": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/preset-svelte-webpack": 7.0.0-alpha.3
"@storybook/svelte": 7.0.0-alpha.3
core-js: ^3.8.2
@ -9258,7 +9252,6 @@ __metadata:
dependencies:
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-common": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/preset-vue-webpack": 7.0.0-alpha.3
"@storybook/vue": 7.0.0-alpha.3
"@types/node": ^14.14.20 || ^16.0.0
@ -9284,7 +9277,6 @@ __metadata:
dependencies:
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-common": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/preset-vue3-webpack": 7.0.0-alpha.3
"@storybook/vue3": 7.0.0-alpha.3
"@types/node": ^14.14.20 || ^16.0.0
@ -9354,7 +9346,6 @@ __metadata:
"@babel/preset-env": ^7.12.11
"@storybook/builder-webpack5": 7.0.0-alpha.3
"@storybook/core-common": 7.0.0-alpha.3
"@storybook/core-server": 7.0.0-alpha.3
"@storybook/preset-web-components-webpack": 7.0.0-alpha.3
"@storybook/web-components": 7.0.0-alpha.3
"@types/node": ^14.14.20 || ^16.0.0