Merge pull request #19623 from storybookjs/tom/sb-850-allow-passing-w…

…ebview-and-urlstore-to

Core: Allow overriding WebView and UrlStore

MIGRATION.md

@@ -43,6 +43,7 @@
   - [7.0 Deprecations](#70-deprecations)
     - [`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)
 - [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)
@@ -836,6 +837,10 @@ export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
 CSF2Story.args = { label: 'Label' };
 ```
 
+#### Renamed `renderToDOM` to `renderToCanvas`
+
+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.
+
 ## From version 6.4.x to 6.5.0
 
 ### Vue 3 upgrade

code/addons/actions/src/addArgsHelpers.ts

@@ -1,4 +1,4 @@
-import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/types';
+import type { Args, Framework, 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<AnyFramework> = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context) => {
   const {
     initialArgs,
     argTypes,
@@ -40,7 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (contex
 /**
  * Add action args for list of strings.
  */
-export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
+export const addActionsFromArgTypes: ArgsEnhancer<Framework> = (context) => {
   const {
     initialArgs,
     argTypes,

code/addons/backgrounds/src/decorators/withBackground.ts

@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Framework, 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<AnyFramework>,
-  context: StoryContext<AnyFramework>
+  StoryFn: StoryFunction<Framework>,
+  context: StoryContext<Framework>
 ) => {
   const { globals, parameters } = context;
   const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;

code/addons/backgrounds/src/decorators/withGrid.ts

@@ -1,13 +1,10 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Framework, 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<AnyFramework>,
-  context: StoryContext<AnyFramework>
-) => {
+export const withGrid = (StoryFn: StoryFunction<Framework>, context: StoryContext<Framework>) => {
   const { globals, parameters } = context;
   const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
   const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;

code/addons/docs/src/DocsRenderer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import type { AnyFramework, Parameters } from '@storybook/types';
+import type { Framework, 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,7 +14,7 @@ export const defaultComponents: Record<string, any> = {
   ...HeadersMdx,
 };
 
-export class DocsRenderer<TFramework extends AnyFramework> {
+export class DocsRenderer<TFramework extends Framework> {
   public render: DocsRenderFunction<TFramework>;
 
   public unmount: (element: HTMLElement) => void;

code/addons/interactions/src/preset/preview.ts

@@ -3,7 +3,7 @@
 import { addons } from '@storybook/addons';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import type {
-  AnyFramework,
+  Framework,
   ArgsEnhancer,
   PlayFunction,
   PlayFunctionContext,
@@ -52,7 +52,7 @@ const addSpies = (id: string, val: any, key?: string): any => {
   return val;
 };
 
-const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = ({ id, initialArgs }) =>
+const addActionsFromArgTypes: ArgsEnhancer<Framework> = ({ id, initialArgs }) =>
   addSpies(id, initialArgs);
 
 export const argsEnhancers = [addActionsFromArgTypes];

code/addons/measure/src/withMeasure.ts

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import { useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Framework, 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';
@@ -14,8 +14,8 @@ function findAndDrawElement(x: number, y: number) {
 }
 
 export const withMeasure = (
-  StoryFn: StoryFunction<AnyFramework>,
-  context: StoryContext<AnyFramework>
+  StoryFn: StoryFunction<Framework>,
+  context: StoryContext<Framework>
 ) => {
   const { measureEnabled } = context.globals;
 

code/addons/outline/src/withOutline.ts

@@ -1,13 +1,13 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Framework, 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<AnyFramework>,
-  context: StoryContext<AnyFramework>
+  StoryFn: StoryFunction<Framework>,
+  context: StoryContext<Framework>
 ) => {
   const { globals } = context;
   const isActive = globals[PARAM_KEY] === true;

code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts

@@ -1,11 +1,11 @@
-import type { AnyFramework, Addon_Loadable } from '@storybook/types';
+import type { Framework, 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 AnyFramework> extends ClientApiClass<AnyFramework> {
+export interface ClientApi<TFramework extends Framework> extends ClientApiClass<Framework> {
   configure(
     loader: Addon_Loadable,
     module: NodeModule | false,
@@ -19,7 +19,7 @@ export interface Loader {
     framework: SupportedFramework;
     renderTree: RenderTree;
     renderShallowTree: any;
-    storybook: ClientApi<AnyFramework>;
+    storybook: ClientApi<Framework>;
   };
   test: (options: StoryshotsOptions) => boolean;
 }

code/addons/storyshots/storyshots-core/src/frameworks/configure.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import type {
-  AnyFramework,
+  Framework,
   ArgsEnhancer,
   ArgTypesEnhancer,
   CoreCommon_NormalizedStoriesSpecifier,
@@ -87,7 +87,7 @@ function getConfigPathParts(input: string): Output {
   return { preview: configDir };
 }
 
-function configure<TFramework extends AnyFramework>(
+function configure<TFramework extends Framework>(
   options: {
     storybook: ClientApi<TFramework>;
   } & StoryshotsOptions

code/frameworks/angular/src/client/config.ts

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

code/frameworks/angular/src/client/decorateStory.test.ts

@@ -347,15 +347,15 @@ describe('decorateStory', () => {
   });
 });
 
-function makeContext(input: Record<string, unknown>): StoryContext {
+function makeContext(input: Record<string, unknown>): StoryContext<AngularFramework> {
   return {
     id: 'id',
     kind: 'kind',
     name: 'name',
     viewMode: 'story',
     parameters: {},
     ...input,
-  } as StoryContext;
+  } as StoryContext<AngularFramework>;
 }
 
 @Component({

code/frameworks/angular/src/client/decorators.test.ts

@@ -2,8 +2,9 @@ import { Addon_StoryContext } from '@storybook/types';
 
 import { Component } from '@angular/core';
 import { moduleMetadata } from './decorators';
+import { AngularFramework } from './types';
 
-const defaultContext: Addon_StoryContext = {
+const defaultContext: Addon_StoryContext<AngularFramework> = {
   componentId: 'unspecified',
   kind: 'unspecified',
   title: 'unspecified',

code/frameworks/angular/src/client/public-api.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 import { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
-import { renderToDOM, render } from './render';
+import { renderToCanvas, render } from './render';
 import decorateStory from './decorateStory';
 import { AngularFramework } from './types';
 
@@ -16,7 +16,7 @@ interface ClientApi extends Addon_ClientStoryApi<AngularFramework['storyResult']
   load: (...args: any[]) => void;
 }
 
-const api = start(renderToDOM, { decorateStory, render });
+const api = start(renderToCanvas, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

code/frameworks/angular/src/client/render.ts

@@ -9,7 +9,7 @@ export const rendererFactory = new RendererFactory();
 
 export const render: ArgsStoryFn<AngularFramework> = (props) => ({ props });
 
-export async function renderToDOM(
+export async function renderToCanvas(
   {
     storyFn,
     showMain,

code/frameworks/angular/src/client/types.ts

@@ -1,6 +1,7 @@
 import {
   Parameters as DefaultParameters,
   StoryContext as DefaultStoryContext,
+  WebFramework,
 } from '@storybook/types';
 
 export interface NgModuleMetadata {
@@ -26,10 +27,10 @@ export interface StoryFnAngularReturnType {
   userDefinedTemplate?: boolean;
 }
 
-export type AngularFramework = {
+export interface AngularFramework extends WebFramework {
   component: any;
   storyResult: StoryFnAngularReturnType;
-};
+}
 
 export type Parameters = DefaultParameters & {
   /** Uses legacy angular rendering engine that use dynamic component */

code/frameworks/ember/src/client/preview/config.ts

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

code/frameworks/ember/src/client/preview/index.ts

@@ -1,9 +1,9 @@
 import { start } from '@storybook/core-client';
 
 import './globals';
-import { renderToDOM } from './render';
+import { renderToCanvas } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM);
+const { configure: coreConfigure, clientApi, forceReRender } = start(renderToCanvas);
 
 export const { raw } = clientApi;
 

code/frameworks/ember/src/client/preview/render.ts

@@ -20,7 +20,7 @@ let lastPromise = app.boot();
 let hasRendered = false;
 let isRendering = false;
 
-function render(options: OptionsArgs, el: Element) {
+function render(options: OptionsArgs, el: EmberFramework['canvasElement']) {
   if (isRendering) return;
   isRendering = true;
 
@@ -60,9 +60,9 @@ function render(options: OptionsArgs, el: Element) {
     });
 }
 
-export function renderToDOM(
+export function renderToCanvas(
   { storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberFramework>,
-  domElement: Element
+  canvasElement: EmberFramework['canvasElement']
 ) {
   const element = storyFn();
 
@@ -80,5 +80,5 @@ export function renderToDOM(
   }
 
   showMain();
-  render(element, domElement);
+  render(element, canvasElement);
 }

code/frameworks/ember/src/client/preview/types.ts

@@ -1,3 +1,5 @@
+import type { WebFramework } from '@storybook/types';
+
 export type { RenderContext } from '@storybook/types';
 
 export interface ShowErrorArgs {
@@ -11,7 +13,7 @@ export interface OptionsArgs {
   element: any;
 }
 
-export type EmberFramework = {
+export interface EmberFramework extends WebFramework {
   component: any;
   storyResult: OptionsArgs;
-};
+}