Skip to content

Commit

Permalink
Merge pull request #19802 from storybookjs/kasper/framework-to-renderer
Browse files Browse the repository at this point in the history
CSF: Renamed Framework to Renderer
kasperpeulen authored Nov 13, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 34cd21d + 3c8f3e3 commit bd23a5a
Showing 133 changed files with 830 additions and 721 deletions.
23 changes: 23 additions & 0 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -44,6 +44,7 @@
- [`Story` type deprecated](#story-type-deprecated)
- [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
- [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot)
- [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
- [Vue 3 upgrade](#vue-3-upgrade)
- [React18 new root API](#react18-new-root-api)
@@ -841,6 +842,28 @@ CSF2Story.args = { label: 'Label' };

The "rendering" function that renderers (ex-frameworks) must export (`renderToDOM`) has been renamed to `renderToCanvas` to acknowledge that some consumers of frameworks/the preview do not work with DOM elements.

#### Renamed `XFramework` to `XRenderer`

In 6.x you could import XFramework types:

```ts
import type { ReactFramework } from '@storybook/react';
import type { VueFramework } from '@storybook/vue';
import type { SvelteFramework } from '@storybook/svelte';

// etc.
```

Those are deprecated in 7.0 as they are renamed to:

```ts
import type { ReactRenderer } from '@storybook/react';
import type { VueRenderer } from '@storybook/vue';
import type { SvelteRenderer } from '@storybook/svelte';

// etc.
```

## From version 6.4.x to 6.5.0

### Vue 3 upgrade
6 changes: 3 additions & 3 deletions code/addons/actions/src/addArgsHelpers.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Args, Framework, ArgsEnhancer } from '@storybook/types';
import type { Args, Renderer, ArgsEnhancer } from '@storybook/types';
import { action } from './runtime/action';

// interface ActionsParameter {
@@ -14,7 +14,7 @@ const isInInitialArgs = (name: string, initialArgs: Args) =>
* matches a regex, such as `^on.*` for react-style `onClick` etc.
*/

export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context) => {
export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) => {
const {
initialArgs,
argTypes,
@@ -40,7 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context)
/**
* Add action args for list of strings.
*/
export const addActionsFromArgTypes: ArgsEnhancer<Framework> = (context) => {
export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
const {
initialArgs,
argTypes,
6 changes: 3 additions & 3 deletions code/addons/backgrounds/src/decorators/withBackground.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useMemo, useEffect } from '@storybook/addons';
import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';

import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
import {
@@ -10,8 +10,8 @@ import {
} from '../helpers';

export const withBackground = (
StoryFn: StoryFunction<Framework>,
context: StoryContext<Framework>
StoryFn: StoryFunction<Renderer>,
context: StoryContext<Renderer>
) => {
const { globals, parameters } = context;
const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
4 changes: 2 additions & 2 deletions code/addons/backgrounds/src/decorators/withGrid.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useMemo, useEffect } from '@storybook/addons';
import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';

import { clearStyles, addGridStyle } from '../helpers';
import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

export const withGrid = (StoryFn: StoryFunction<Framework>, context: StoryContext<Framework>) => {
export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
const { globals, parameters } = context;
const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
8 changes: 4 additions & 4 deletions code/addons/docs/src/DocsRenderer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import type { Framework, Parameters } from '@storybook/types';
import type { Renderer, Parameters } from '@storybook/types';
import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
import { components as htmlComponents } from '@storybook/components';
import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
@@ -14,14 +14,14 @@ export const defaultComponents: Record<string, any> = {
...HeadersMdx,
};

export class DocsRenderer<TFramework extends Framework> {
public render: DocsRenderFunction<TFramework>;
export class DocsRenderer<TRenderer extends Renderer> {
public render: DocsRenderFunction<TRenderer>;

public unmount: (element: HTMLElement) => void;

constructor() {
this.render = (
context: DocsContextProps<TFramework>,
context: DocsContextProps<TRenderer>,
docsParameter: Parameters,
element: HTMLElement,
callback: () => void
4 changes: 2 additions & 2 deletions code/addons/interactions/src/preview.ts
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
import { addons } from '@storybook/addons';
import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
import type {
Framework,
Renderer,
ArgsEnhancer,
PlayFunction,
PlayFunctionContext,
@@ -52,7 +52,7 @@ const addSpies = (id: string, val: any, key?: string): any => {
return val;
};

const addActionsFromArgTypes: ArgsEnhancer<Framework> = ({ id, initialArgs }) =>
const addActionsFromArgTypes: ArgsEnhancer<Renderer> = ({ id, initialArgs }) =>
addSpies(id, initialArgs);

export const argsEnhancers = [addActionsFromArgTypes];
2 changes: 1 addition & 1 deletion code/addons/links/package.json
Original file line number Diff line number Diff line change
@@ -79,7 +79,7 @@
"@storybook/addons": "7.0.0-alpha.49",
"@storybook/client-logger": "7.0.0-alpha.49",
"@storybook/core-events": "7.0.0-alpha.49",
"@storybook/csf": "next",
"@storybook/csf": "0.0.2-next.5",
"@storybook/router": "7.0.0-alpha.49",
"@storybook/types": "7.0.0-alpha.49",
"global": "^4.4.0",
7 changes: 2 additions & 5 deletions code/addons/measure/src/withMeasure.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-env browser */
import { useEffect } from '@storybook/addons';
import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
import { drawSelectedElement } from './box-model/visualizer';
import { init, rescale, destroy } from './box-model/canvas';
import { deepElementFromPoint } from './util';
@@ -13,10 +13,7 @@ function findAndDrawElement(x: number, y: number) {
drawSelectedElement(nodeAtPointerRef);
}

export const withMeasure = (
StoryFn: StoryFunction<Framework>,
context: StoryContext<Framework>
) => {
export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
const { measureEnabled } = context.globals;

useEffect(() => {
7 changes: 2 additions & 5 deletions code/addons/outline/src/withOutline.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import { useMemo, useEffect } from '@storybook/addons';
import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';

import { clearStyles, addOutlineStyles } from './helpers';
import { PARAM_KEY } from './constants';
import outlineCSS from './outlineCSS';

export const withOutline = (
StoryFn: StoryFunction<Framework>,
context: StoryContext<Framework>
) => {
export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
const { globals } = context;
const isActive = globals[PARAM_KEY] === true;
const isInDocs = context.viewMode === 'docs';
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import type { Framework, Addon_Loadable } from '@storybook/types';
import type { Renderer, Addon_Loadable } from '@storybook/types';
import type { ClientApi as ClientApiClass } from '@storybook/client-api';
import type { StoryshotsOptions } from '../api/StoryshotsOptions';
import type { SupportedFramework } from './SupportedFramework';

export type RenderTree = (story: any, context?: any, options?: any) => any;

export interface ClientApi<TFramework extends Framework> extends ClientApiClass<Framework> {
export interface ClientApi<TRenderer extends Renderer> extends ClientApiClass<Renderer> {
configure(
loader: Addon_Loadable,
module: NodeModule | false,
@@ -19,7 +19,7 @@ export interface Loader {
framework: SupportedFramework;
renderTree: RenderTree;
renderShallowTree: any;
storybook: ClientApi<Framework>;
storybook: ClientApi<Renderer>;
};
test: (options: StoryshotsOptions) => boolean;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import fs from 'fs';
import path from 'path';
import type {
Framework,
Renderer,
ArgsEnhancer,
ArgTypesEnhancer,
CoreCommon_NormalizedStoriesSpecifier,
@@ -87,9 +87,9 @@ function getConfigPathParts(input: string): Output {
return { preview: configDir };
}

function configure<TFramework extends Framework>(
function configure<TRenderer extends Renderer>(
options: {
storybook: ClientApi<TFramework>;
storybook: ClientApi<TRenderer>;
} & StoryshotsOptions
): void {
const { configPath = '.storybook', config, storybook } = options;
@@ -125,7 +125,7 @@ function configure<TFramework extends Framework>(
} = jest.requireActual(preview);

if (decorators) {
decorators.forEach((decorator: DecoratorFunction<TFramework>) =>
decorators.forEach((decorator: DecoratorFunction<TRenderer>) =>
storybook.addDecorator(decorator)
);
}
@@ -136,12 +136,12 @@ function configure<TFramework extends Framework>(
storybook.addStepRunner(runStep);
}
if (argsEnhancers) {
argsEnhancers.forEach((enhancer: ArgsEnhancer<TFramework>) =>
argsEnhancers.forEach((enhancer: ArgsEnhancer<TRenderer>) =>
storybook.addArgsEnhancer(enhancer as any)
);
}
if (argTypesEnhancers) {
argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer<TFramework>) =>
argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer<TRenderer>) =>
storybook.addArgTypesEnhancer(enhancer as any)
);
}
2 changes: 1 addition & 1 deletion code/addons/storyshots/storyshots-puppeteer/package.json
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@
},
"dependencies": {
"@axe-core/puppeteer": "^4.2.0",
"@storybook/csf": "next",
"@storybook/csf": "0.0.2-next.5",
"@storybook/node-logger": "7.0.0-alpha.49",
"@storybook/types": "7.0.0-alpha.49",
"@types/jest-image-snapshot": "^4.1.3",
6 changes: 3 additions & 3 deletions code/frameworks/angular/src/client/angular/helpers.ts
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import { Subscriber, Observable, ReplaySubject } from 'rxjs';
import { PartialStoryFn } from '@storybook/types';
import { AppComponent } from './app.component';
import { STORY } from './app.token';
import { NgModuleMetadata, StoryFnAngularReturnType, AngularFramework } from '../types';
import { NgModuleMetadata, StoryFnAngularReturnType, AngularRenderer } from '../types';

const { document } = global;

@@ -131,7 +131,7 @@ const getExistenceOfComponentInModules = (
});
};

const initModule = (storyFn: PartialStoryFn<AngularFramework>) => {
const initModule = (storyFn: PartialStoryFn<AngularRenderer>) => {
const storyObj = storyFn();
const { component, template, props, styles, moduleMetadata = {} } = storyObj;

@@ -198,7 +198,7 @@ const draw = (newModule: DynamicComponentType): void => {
}
};

export const renderNgApp = (storyFn: PartialStoryFn<AngularFramework>, forced: boolean) => {
export const renderNgApp = (storyFn: PartialStoryFn<AngularRenderer>, forced: boolean) => {
if (!forced) {
draw(initModule(storyFn));
} else {
Loading

0 comments on commit bd23a5a

Please sign in to comment.