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

Merge pull request #21108 from storybookjs/shilman/framework-parameter-to-renderer

Browse Source 
Core: Rename `framework` parameter to `renderer`
This commit is contained in:
Michael Shilman 2023-02-20 22:46:34 +08:00 committed by GitHub
commit 74efb34a76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 92 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
MIGRATION.md
View File

@ -22,18 +22,18 @@
- [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
- [Core addons](#core-addons)
- [7.0 core addons changes](#70-core-addons-changes)
- [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
- [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
- [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
- [Vite](#vite)
- [7.0 Vite changes](#70-vite-changes)
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Webpack](#webpack)
- [7.0 Webpack changes](#70-webpack-changes)
- [Webpack4 support discontinued](#webpack4-support-discontinued)
- [Postcss removed](#postcss-removed)
- [Removed DLL flags](#removed-dll-flags)
- [Framework-specific](#framework-specific)
- [7.0 Framework-specific changes](#70-framework-specific-changes)
- [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)
@ -41,13 +41,14 @@
- [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
- [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
- [Web-components: dropped lit-html v1 support](#web-components-dropped-lit-html-v1-support)
- [Addon authors](#addon-authors)
- [7.0 Addon authors changes](#70-addon-authors-changes)
- [register.js removed](#registerjs-removed)
- [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
- [No more configuration for manager](#no-more-configuration-for-manager)
- [Icons API changed](#icons-api-changed)
- [Removed global client APIs](#removed-global-client-apis)
- [Docs Changes](#docs-changes)
- [framework parameter renamed to renderer](#framework-parameter-renamed-to-renderer)
- [7.0 Docs changes](#70-docs-changes)
- [Autodocs changes](#autodocs-changes)
- [MDX docs files](#mdx-docs-files)
- [Unattached docs files](#unattached-docs-files)
@ -749,7 +750,7 @@ This change modifies the way Storybook prepares stories to avoid reactive args t
For avoiding that, this change passes the mapped args instead of raw args at `renderToCanvas` so that the proxies stay intact. Also decorators will benefit from this as well by receiving mapped args instead of raw args.
### Core addons
### 7.0 core addons changes
#### Removed auto injection of @storybook/addon-actions decorator
@ -785,7 +786,7 @@ Starting in 7.0 the `grid.cellSize` parameter should now be `backgrounds.grid.ce
We removed the deprecated `withA11y` decorator. This was [deprecated in 6.0](#removed-witha11y-decorator)
### Vite
### 7.0 Vite changes
#### Vite builder uses Vite config automatically
@ -799,7 +800,7 @@ For Svelte projects this means that the `svelteOptions` property in the `main.js
Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
### Webpack
### 7.0 Webpack changes
#### Webpack4 support discontinued
@ -824,7 +825,7 @@ Storybook 6.x installed postcss by default. In 7.0 built-in support has been rem
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.
### Framework-specific
### 7.0 Framework-specific changes
#### Angular: Drop support for Angular < 14
@ -885,7 +886,7 @@ setup((app) => {
In v6.x `@storybook/web-components` had a peer dependency on `lit-html` v1 or v2. In 7.0 we've dropped support for `lit-html` v1 and now uses `lit` v2 instead. Please upgrade your project's `lit-html` dependency if you're still on 1.x.
### Addon authors
### 7.0 Addon authors changes
#### register.js removed
@ -944,7 +945,14 @@ The `addParameters` and `addDecorator` APIs to add global decorators and paramet
Instead, use `export const parameters = {};` and `export const decorators = [];` in your `.storybook/preview.js`. Addon authors similarly should use such an export in a preview entry file (see [Preview entries](https://github.com/storybookjs/storybook/blob/next/docs/addons/writing-presets.md#preview-entries)).
### Docs Changes
#### framework parameter renamed to renderer
All SB6.x frameworks injected a parameter called `framework` indicating to addons which framework is running.
For example, the framework value of `@storybook/react` would be `react`, `@storybook/vue` would be `vue`, etc.
Now those packages are called renderers in SB7, so the renderer information is now available in the `renderer`
parameter.
### 7.0 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 underneath the component, rather than attached to individual stories. You can also opt-in to a Autodocs entry rather than having one for every component (previously stories).

2
code/addons/storyshots-core/src/test-bodies.ts
View File

@ -22,7 +22,7 @@ export function snapshotWithOptions(
function match(tree: any) {
let target = tree;
const isReact = story.parameters.framework === 'react';
const isReact = story.parameters.renderer === 'react';
if (isReact && typeof tree.childAt === 'function') {
target = tree.childAt(0);

2
code/frameworks/angular/src/client/config.ts
View File

@ -3,4 +3,4 @@ import './globals';
export { render, renderToCanvas } from './render';
export { decorateStory as applyDecorators } from './decorateStory';
export const parameters = { framework: 'angular' as const };
export const parameters = { renderer: 'angular' as const };

6
code/frameworks/angular/src/client/public-api.ts
View File

@ -7,7 +7,7 @@ import { AngularRenderer } from './types';
export * from './public-types';
const FRAMEWORK = 'angular';
const RENDERER = 'angular';
interface ClientApi extends Addon_ClientStoryApi<AngularRenderer['storyResult']> {
configure(loader: Addon_Loadable, module: NodeModule): void;
@ -20,10 +20,10 @@ const api = start<AngularRenderer>(renderToCanvas, { decorateStory, render });
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
framework: FRAMEWORK,
renderer: RENDERER,
});
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
export const raw: ClientApi['raw'] = api.clientApi.raw;

2
code/frameworks/ember/src/client/preview/config.ts
View File

@ -1,3 +1,3 @@
export { renderToCanvas } from './render';
export const parameters = { framework: 'ember' as const };
export const parameters = { renderer: 'ember' as const };

6
code/frameworks/ember/src/client/preview/index.ts
View File

@ -8,9 +8,9 @@ const { configure: coreConfigure, clientApi, forceReRender } = start<EmberRender
export const { raw } = clientApi;
const FRAMEWORK = 'ember';
const RENDERER = 'ember';
export const storiesOf = (kind: string, m: any) =>
clientApi.storiesOf(kind, m).addParameters({ framework: FRAMEWORK });
export const configure = (loadable: any, m: any) => coreConfigure(FRAMEWORK, loadable, m);
clientApi.storiesOf(kind, m).addParameters({ renderer: RENDERER });
export const configure = (loadable: any, m: any) => coreConfigure(RENDERER, loadable, m);
export { forceReRender };

58
code/lib/preview-api/src/modules/core-client/start.test.ts
View File

@ -152,7 +152,7 @@ describe('start', () => {
"__id": "component-a--story-one",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -172,7 +172,7 @@ describe('start', () => {
"__id": "component-a--story-two",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -192,7 +192,7 @@ describe('start', () => {
"__id": "component-b--story-three",
"__isArgsStory": false,
"fileName": "file2",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -438,7 +438,7 @@ describe('start', () => {
"__id": "component-a--default",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -458,7 +458,7 @@ describe('start', () => {
"__id": "component-a--new",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -509,7 +509,7 @@ describe('start', () => {
"__id": "component-a--default",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -529,7 +529,7 @@ describe('start', () => {
"__id": "component-b--default",
"__isArgsStory": false,
"fileName": "file2",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -561,7 +561,7 @@ describe('start', () => {
"__id": "component-a--default",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -610,7 +610,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story-tag",
@ -629,7 +629,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"component-tag",
@ -731,7 +731,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story-tag",
@ -750,7 +750,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"component-tag",
@ -770,7 +770,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"component-tag",
@ -822,7 +822,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story-tag",
@ -841,7 +841,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"component-tag",
@ -861,7 +861,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -894,7 +894,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story-tag",
@ -913,7 +913,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"component-tag",
@ -1042,7 +1042,7 @@ describe('start', () => {
"__id": "component-a--story-one",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -1062,7 +1062,7 @@ describe('start', () => {
"__id": "component-a--story-two",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -1082,7 +1082,7 @@ describe('start', () => {
"__id": "component-b--story-three",
"__isArgsStory": false,
"fileName": "file2",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -1100,7 +1100,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story-tag",
@ -1119,7 +1119,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"component-tag",
@ -1185,7 +1185,7 @@ describe('start', () => {
"__id": "component-a--story-one",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -1205,7 +1205,7 @@ describe('start', () => {
"__id": "component-a--story-two",
"__isArgsStory": false,
"fileName": "file1",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",
@ -1238,7 +1238,7 @@ describe('start', () => {
"__id": "component-b--story-three",
"__isArgsStory": false,
"fileName": "file2",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"autodocs",
@ -1270,7 +1270,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story-tag",
@ -1289,7 +1289,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"component-tag",
@ -1377,7 +1377,7 @@ describe('start', () => {
"parameters": Object {
"__isArgsStory": false,
"fileName": "exports-map-0",
"framework": "test",
"renderer": "test",
},
"tags": Array [
"story",

4
code/lib/preview-api/src/modules/core-client/start.ts
View File

@ -89,7 +89,7 @@ export function start<TRenderer extends Renderer>(
// This gets called each time the user calls configure (i.e. once per HMR)
// The first time, it constructs the preview, subsequently it updates it
configure(
framework: string,
renderer: string,
loadable: Loadable,
m?: NodeModule,
disableBackwardCompatibility = true
@ -98,7 +98,7 @@ export function start<TRenderer extends Renderer>(
throw new Error('unexpected configure() call');
}
clientApi.addParameters({ framework });
clientApi.addParameters({ renderer });
// We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations
// function in case it throws. So we also need to process its output there also

2
code/renderers/html/src/config.ts
View File

@ -1,6 +1,6 @@
import { parameters as docsParams } from './docs/config';
export const parameters = { framework: 'html' as const, ...docsParams };
export const parameters = { renderer: 'html' as const, ...docsParams };
export { decorators, argTypesEnhancers } from './docs/config';
export { renderToCanvas, render } from './render';

6
code/renderers/html/src/public-api.ts
View File

@ -5,7 +5,7 @@ import type { HtmlRenderer } from './types';
import { renderToCanvas, render } from './render';
const FRAMEWORK = 'html';
const RENDERER = 'html';
interface ClientApi extends Addon_ClientStoryApi<HtmlRenderer['storyResult']> {
configure(loader: Addon_Loadable, module: NodeModule): void;
@ -17,10 +17,10 @@ const api = start<HtmlRenderer>(renderToCanvas, { render });
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
framework: FRAMEWORK,
renderer: RENDERER,
});
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
export const raw: ClientApi['raw'] = api.clientApi.raw;

2
code/renderers/preact/src/config.ts
View File

@ -2,4 +2,4 @@ import { parameters as docsParams } from './docs/config';
export { renderToCanvas, render } from './render';
export const parameters = { framework: 'preact' as const, ...docsParams };
export const parameters = { renderer: 'preact' as const, ...docsParams };

6
code/renderers/preact/src/public-api.ts
View File

@ -12,15 +12,15 @@ export interface ClientApi extends Addon_ClientStoryApi<PreactRenderer['storyRes
load: (...args: any[]) => void;
}
const FRAMEWORK = 'preact';
const RENDERER = 'preact';
const api = start<PreactRenderer>(renderToCanvas);
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
framework: FRAMEWORK,
renderer: RENDERER,
});
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
export const raw: ClientApi['raw'] = api.clientApi.raw;

5
code/renderers/react/src/config.ts
View File

@ -1,9 +1,6 @@
import { parameters as docsParams } from './docs/config';
export const parameters = {
framework: 'react',
...docsParams,
};
export const parameters = { renderer: 'react', ...docsParams };
export { decorators, argTypesEnhancers } from './docs/config';

6
code/renderers/react/src/public-api.tsx
View File

@ -10,16 +10,16 @@ interface ClientApi extends Addon_ClientStoryApi<ReactRenderer['storyResult']> {
forceReRender(): void;
raw: () => any; // todo add type
}
const FRAMEWORK = 'react';
const RENDERER = 'react';
const api = start<ReactRenderer>(renderToCanvas, { render });
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
framework: FRAMEWORK,
renderer: RENDERER,
});
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
export const raw: ClientApi['raw'] = api.clientApi.raw;

2
code/renderers/server/src/config.ts
View File

@ -1,3 +1,3 @@
export { render, renderToCanvas } from './render';
export const parameters = { framework: 'server' as const };
export const parameters = { renderer: 'server' as const };

6
code/renderers/server/src/public-api.ts
View File

@ -4,7 +4,7 @@ import { start } from '@storybook/preview-api';
import { renderToCanvas, render } from './render';
import type { ServerRenderer } from './types';
const FRAMEWORK = 'server';
const RENDERER = 'server';
interface ClientApi extends Addon_ClientStoryApi<ServerRenderer['storyResult']> {
configure(loader: Addon_Loadable, module: NodeModule): void;
@ -16,11 +16,11 @@ const api = start<ServerRenderer>(renderToCanvas, { render });
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
framework: FRAMEWORK,
renderer: RENDERER,
});
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
export const { raw } = api.clientApi;
export const { forceReRender } = api;

2
code/renderers/svelte/src/config.ts
View File

@ -1,6 +1,6 @@
import { parameters as docsParams } from './docs/config';
export const parameters = { framework: 'svelte' as const, ...docsParams };
export const parameters = { renderer: 'svelte' as const, ...docsParams };
export { decorators, argTypesEnhancers } from './docs/config';
export { render, renderToCanvas } from './render';

6
code/renderers/svelte/src/public-api.ts
View File

@ -15,9 +15,9 @@ const {
export const { raw } = clientApi;
const FRAMEWORK = 'svelte';
const RENDERER = 'svelte';
export const storiesOf = (kind: string, m: any) =>
clientApi.storiesOf(kind, m).addParameters({ framework: FRAMEWORK });
export const configure = (loadable: any, m: any) => coreConfigure(FRAMEWORK, loadable, m);
clientApi.storiesOf(kind, m).addParameters({ renderer: RENDERER });
export const configure = (loadable: any, m: any) => coreConfigure(RENDERER, loadable, m);
export { forceReRender };

2
code/renderers/vue/src/config.ts
View File

@ -1,6 +1,6 @@
import { parameters as docsParams } from './docs/config';
export const parameters = { framework: 'vue' as const, ...docsParams };
export const parameters = { renderer: 'vue' as const, ...docsParams };
export { decorators, argTypesEnhancers } from './docs/config';
export { render, renderToCanvas } from './render';

6
code/renderers/vue/src/public-api.ts
View File

@ -6,7 +6,7 @@ import type { VueRenderer } from './types';
import { renderToCanvas, render } from './render';
import { decorateStory } from './decorateStory';
const FRAMEWORK = 'vue';
const RENDERER = 'vue';
interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
configure(loader: Addon_Loadable, module: NodeModule): void;
@ -19,10 +19,10 @@ const api = start<VueRenderer>(renderToCanvas, { decorateStory, render });
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
framework: FRAMEWORK,
renderer: RENDERER,
});
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
export const raw: ClientApi['raw'] = api.clientApi.raw;

2
code/renderers/vue3/src/config.ts
View File

@ -1,6 +1,6 @@
import { parameters as docsParams } from './docs/config';
export const parameters = { framework: 'vue3' as const, ...docsParams };
export const parameters = { renderer: 'vue3' as const, ...docsParams };
export { decorators, argTypesEnhancers } from './docs/config';
export { render, renderToCanvas } from './render';

6
code/renderers/vue3/src/public-api.ts
View File

@ -7,7 +7,7 @@ import { decorateStory } from './decorateStory';
import { render, renderToCanvas } from './render';
const FRAMEWORK = 'vue3';
const RENDERER = 'vue3';
interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
configure(loader: Addon_Loadable, module: NodeModule): void;
@ -21,11 +21,11 @@ const api = start<VueRenderer>(renderToCanvas, { decorateStory, render });
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
framework: FRAMEWORK,
renderer: RENDERER,
});
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
export const { forceReRender } = api;
export const { raw } = api.clientApi;
export { setup } from './render';

2
code/renderers/web-components/src/config.ts
View File

@ -1,5 +1,5 @@
import { parameters as docsParams } from './docs/config';
export const parameters = { framework: 'web-components' as const, ...docsParams };
export const parameters = { renderer: 'web-components' as const, ...docsParams };
export { decorators, argTypesEnhancers } from './docs/config';
export { render, renderToCanvas } from './render';

6
code/renderers/web-components/src/public-api.ts
View File

@ -5,7 +5,7 @@ import { start } from '@storybook/preview-api';
import { renderToCanvas } from './render';
import type { WebComponentsRenderer } from './types';
const FRAMEWORK = 'web-components';
const RENDERER = 'web-components';
interface ClientApi extends Addon_ClientStoryApi<WebComponentsRenderer['storyResult']> {
configure(loader: Addon_Loadable, module: NodeModule): void;
@ -17,10 +17,10 @@ const api = start<WebComponentsRenderer>(renderToCanvas);
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
framework: FRAMEWORK,
renderer: RENDERER,
});
};
export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
export const configure: ClientApi['configure'] = (...args) => api.configure(RENDERER, ...args);
export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
export const raw: ClientApi['raw'] = api.clientApi.raw;