diff --git a/MIGRATION.md b/MIGRATION.md index d5b9ce4d3451..1e3ef9d02ce0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -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`: diff --git a/frameworks/angular/src/builders/build-storybook/index.ts b/frameworks/angular/src/builders/build-storybook/index.ts index ea53e7a4a7ce..e049c05b0407 100644 --- a/frameworks/angular/src/builders/build-storybook/index.ts +++ b/frameworks/angular/src/builders/build-storybook/index.ts @@ -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))) ); } diff --git a/frameworks/angular/src/builders/start-storybook/index.ts b/frameworks/angular/src/builders/start-storybook/index.ts index b125fe67a834..ba3e5ca66ee4 100644 --- a/frameworks/angular/src/builders/start-storybook/index.ts +++ b/frameworks/angular/src/builders/start-storybook/index.ts @@ -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((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)) ); diff --git a/frameworks/angular/standalone.d.ts b/frameworks/angular/src/builders/utils/standalone-options.ts similarity index 69% rename from frameworks/angular/standalone.d.ts rename to frameworks/angular/src/builders/utils/standalone-options.ts index cd728e7dfb14..56cb457a2e68 100644 --- a/frameworks/angular/standalone.d.ts +++ b/frameworks/angular/src/builders/utils/standalone-options.ts @@ -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; -} diff --git a/frameworks/angular/standalone.js b/frameworks/angular/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/angular/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/ember/package.json b/frameworks/ember/package.json index 5e7f41f59738..f65f8a5c5c44 100644 --- a/frameworks/ember/package.json +++ b/frameworks/ember/package.json @@ -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", diff --git a/frameworks/ember/standalone.js b/frameworks/ember/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/ember/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/html-webpack5/package.json b/frameworks/html-webpack5/package.json index 4c250bc051aa..b4eed00c4ca1 100644 --- a/frameworks/html-webpack5/package.json +++ b/frameworks/html-webpack5/package.json @@ -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", diff --git a/frameworks/html-webpack5/standalone.js b/frameworks/html-webpack5/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/html-webpack5/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/preact-webpack5/package.json b/frameworks/preact-webpack5/package.json index 0d402650d09a..15e3569f1cb6 100644 --- a/frameworks/preact-webpack5/package.json +++ b/frameworks/preact-webpack5/package.json @@ -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", diff --git a/frameworks/preact-webpack5/standalone.js b/frameworks/preact-webpack5/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/preact-webpack5/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/react-webpack5/package.json b/frameworks/react-webpack5/package.json index 83187cff163e..dd028f77a9b9 100644 --- a/frameworks/react-webpack5/package.json +++ b/frameworks/react-webpack5/package.json @@ -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", diff --git a/frameworks/react-webpack5/standalone.js b/frameworks/react-webpack5/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/react-webpack5/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/server-webpack5/package.json b/frameworks/server-webpack5/package.json index efc47d30ef31..47c7da34b924 100644 --- a/frameworks/server-webpack5/package.json +++ b/frameworks/server-webpack5/package.json @@ -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", diff --git a/frameworks/server-webpack5/standalone.js b/frameworks/server-webpack5/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/server-webpack5/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/standalone.test.ts b/frameworks/standalone.test.ts deleted file mode 100644 index 9e9386e80a90..000000000000 --- a/frameworks/standalone.test.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/frameworks/svelte-webpack5/package.json b/frameworks/svelte-webpack5/package.json index 29da17592d12..518e68fc2f0a 100644 --- a/frameworks/svelte-webpack5/package.json +++ b/frameworks/svelte-webpack5/package.json @@ -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", diff --git a/frameworks/svelte-webpack5/standalone.js b/frameworks/svelte-webpack5/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/svelte-webpack5/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/vue-webpack5/package.json b/frameworks/vue-webpack5/package.json index e3d2be2f660e..dd600f71aba9 100644 --- a/frameworks/vue-webpack5/package.json +++ b/frameworks/vue-webpack5/package.json @@ -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", diff --git a/frameworks/vue-webpack5/standalone.js b/frameworks/vue-webpack5/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/vue-webpack5/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/vue3-webpack5/package.json b/frameworks/vue3-webpack5/package.json index f4c813b986f4..0a7127cd21b3 100644 --- a/frameworks/vue3-webpack5/package.json +++ b/frameworks/vue3-webpack5/package.json @@ -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", diff --git a/frameworks/vue3-webpack5/standalone.js b/frameworks/vue3-webpack5/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/vue3-webpack5/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/frameworks/web-components-webpack5/package.json b/frameworks/web-components-webpack5/package.json index 87a7bab5f202..623faeb23e9b 100644 --- a/frameworks/web-components-webpack5/package.json +++ b/frameworks/web-components-webpack5/package.json @@ -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", diff --git a/frameworks/web-components-webpack5/standalone.js b/frameworks/web-components-webpack5/standalone.js deleted file mode 100644 index de7f65371d4a..000000000000 --- a/frameworks/web-components-webpack5/standalone.js +++ /dev/null @@ -1,7 +0,0 @@ -const build = require('@storybook/core-server/standalone'); - -async function buildStandalone(options) { - return build(options); -} - -module.exports = buildStandalone; diff --git a/yarn.lock b/yarn.lock index 37a7af844dc8..a0e2f10abc91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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