Core: Allow overriding WebView and UrlStore

MIGRATION.md

@@ -41,6 +41,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 `renderToRoot`](#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)
@@ -790,6 +791,10 @@ export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
 CSF2Story.args = { label: 'Label' };
 ```
 
+#### Renamed `renderToDOM` to `renderToRoot`
+
+The "rendering" function that renderers (ex-frameworks) must export (`renderToDOM`) has been renamed to `renderToRoot` 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, renderToRoot } from './render';
 export { decorateStory as applyDecorators } from './decorateStory';
 
 export const parameters = { framework: 'angular' as const };

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 { renderToRoot, 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(renderToRoot, { 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 renderToRoot(
   {
     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 { renderToRoot } 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 { renderToRoot } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM);
+const { configure: coreConfigure, clientApi, forceReRender } = start(renderToRoot);
 
 export const { raw } = clientApi;
 

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

@@ -60,7 +60,7 @@ function render(options: OptionsArgs, el: Element) {
     });
 }
 
-export function renderToDOM(
+export function renderToRoot(
   { storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberFramework>,
   domElement: Element
 ) {

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;
-};
+}

code/lib/addons/src/hooks.ts

@@ -1,7 +1,7 @@
 import global from 'global';
 import { logger } from '@storybook/client-logger';
 import type {
-  AnyFramework,
+  Framework,
   Args,
   DecoratorApplicator,
   DecoratorFunction,
@@ -32,7 +32,7 @@ interface Effect {
 
 type AbstractFunction = (...args: any[]) => any;
 
-export class HooksContext<TFramework extends AnyFramework> {
+export class HooksContext<TFramework extends Framework> {
   hookListsMap: WeakMap<AbstractFunction, Hook[]>;
 
   mountedDecorators: Set<AbstractFunction>;
@@ -126,13 +126,13 @@ export class HooksContext<TFramework extends AnyFramework> {
   }
 }
 
-function hookify<TFramework extends AnyFramework>(
+function hookify<TFramework extends Framework>(
   storyFn: LegacyStoryFn<TFramework>
 ): LegacyStoryFn<TFramework>;
-function hookify<TFramework extends AnyFramework>(
+function hookify<TFramework extends Framework>(
   decorator: DecoratorFunction<TFramework>
 ): DecoratorFunction<TFramework>;
-function hookify<TFramework extends AnyFramework>(fn: AbstractFunction) {
+function hookify<TFramework extends Framework>(fn: AbstractFunction) {
   return (...args: any[]) => {
     const { hooks }: { hooks: HooksContext<TFramework> } =
       typeof args[0] === 'function' ? args[1] : args[0];
@@ -177,7 +177,7 @@ function hookify<TFramework extends AnyFramework>(fn: AbstractFunction) {
 let numberOfRenders = 0;
 const RENDER_LIMIT = 25;
 export const applyHooks =
-  <TFramework extends AnyFramework>(
+  <TFramework extends Framework>(
     applyDecorators: DecoratorApplicator<TFramework>
   ): DecoratorApplicator<TFramework> =>
   (storyFn: LegacyStoryFn<TFramework>, decorators: DecoratorFunction<TFramework>[]) => {
@@ -215,11 +215,11 @@ const areDepsEqual = (deps: any[], nextDeps: any[]) =>
 const invalidHooksError = () =>
   new Error('Storybook preview hooks can only be called inside decorators and story functions.');
 
-function getHooksContextOrNull<TFramework extends AnyFramework>(): HooksContext<TFramework> | null {
+function getHooksContextOrNull<TFramework extends Framework>(): HooksContext<TFramework> | null {
   return global.STORYBOOK_HOOKS_CONTEXT || null;
 }
 
-function getHooksContextOrThrow<TFramework extends AnyFramework>(): HooksContext<TFramework> {
+function getHooksContextOrThrow<TFramework extends Framework>(): HooksContext<TFramework> {
   const hooks = getHooksContextOrNull<TFramework>();
   if (hooks == null) {
     throw invalidHooksError();
@@ -404,7 +404,7 @@ export function useChannel(eventMap: EventMap, deps: any[] = []) {
 }
 
 /* Returns current story context */
-export function useStoryContext<TFramework extends AnyFramework>(): StoryContext<TFramework> {
+export function useStoryContext<TFramework extends Framework>(): StoryContext<TFramework> {
   const { currentContext } = getHooksContextOrThrow();
   if (currentContext == null) {
     throw invalidHooksError();

code/lib/builder-vite/src/codegen-iframe-script.ts

@@ -87,7 +87,8 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
           }
           case 'decorateStory':
           case 'applyDecorators':
-          case 'renderToDOM': {
+          case 'renderToDOM': // deprecated
+          case 'renderToRoot': {
             return null; // This key is not handled directly in v6 mode.
           }
           case 'runStep': {

code/lib/builder-webpack5/templates/virtualModuleEntry.template.js

@@ -47,7 +47,8 @@ Object.keys(previewAnnotations).forEach((key) => {
     }
     case '__namedExportsOrder':
     case 'decorateStory':
-    case 'renderToDOM': {
+    case 'renderToDOM': // deprecated
+    case 'renderToRoot': {
       return null; // This key is not handled directly in v6 mode.
     }
     case 'runStep': {

code/lib/cli/src/project_types.ts

@@ -277,7 +277,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
 ];
 
 // A TemplateConfiguration that matches unsupported frameworks
-// AnyFramework matchers can be added to this object to give
+// Framework matchers can be added to this object to give
 // users an "Unsupported framework" message
 export const unsupportedTemplate: TemplateConfiguration = {
   preset: ProjectType.UNSUPPORTED,

code/lib/cli/src/window.d.ts

@@ -1,8 +1,8 @@
-import type { AnyFramework } from '@storybook/types';
+import type { Framework } from '@storybook/types';
 import type { StoryStore } from '@storybook/client-api';
 
 declare global {
   interface Window {
-    __STORYBOOK_STORY_STORE__: StoryStore<AnyFramework>;
+    __STORYBOOK_STORY_STORE__: StoryStore<Framework>;
   }
 }