Add rootElement to Framework and add Framework

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

code/lib/client-api/src/ClientApi.ts

@@ -8,7 +8,7 @@ import type {
   Args,
   StepRunner,
   ArgTypes,
-  AnyFramework,
+  Framework,
   DecoratorFunction,
   Parameters,
   ArgTypesEnhancer,
@@ -31,7 +31,7 @@ import { StoryStoreFacade } from './StoryStoreFacade';
 
 // ClientApi (and StoreStore) are really singletons. However they are not created until the
 // relevant framework instanciates them via `start.js`. The good news is this happens right away.
-let singleton: ClientApi<AnyFramework, any>;
+let singleton: ClientApi<Framework, any>;
 
 const warningAlternatives = {
   addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`,
@@ -60,7 +60,7 @@ const checkMethod = (method: keyof typeof warningAlternatives) => {
   }
 };
 
-export const addDecorator = (decorator: DecoratorFunction<AnyFramework>) => {
+export const addDecorator = (decorator: DecoratorFunction<Framework>) => {
   checkMethod('addDecorator');
   singleton.addDecorator(decorator);
 };
@@ -70,7 +70,7 @@ export const addParameters = (parameters: Parameters) => {
   singleton.addParameters(parameters);
 };
 
-export const addLoader = (loader: LoaderFunction<AnyFramework>) => {
+export const addLoader = (loader: LoaderFunction<Framework>) => {
   checkMethod('addLoader');
   singleton.addLoader(loader);
 };
@@ -85,12 +85,12 @@ export const addArgTypes = (argTypes: ArgTypes) => {
   singleton.addArgTypes(argTypes);
 };
 
-export const addArgsEnhancer = (enhancer: ArgsEnhancer<AnyFramework>) => {
+export const addArgsEnhancer = (enhancer: ArgsEnhancer<Framework>) => {
   checkMethod('addArgsEnhancer');
   singleton.addArgsEnhancer(enhancer);
 };
 
-export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<AnyFramework>) => {
+export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<Framework>) => {
   checkMethod('addArgTypesEnhancer');
   singleton.addArgTypesEnhancer(enhancer);
 };
@@ -105,13 +105,13 @@ export const getGlobalRender = () => {
   return singleton.facade.projectAnnotations.render;
 };
 
-export const setGlobalRender = (render: StoryFn<AnyFramework>) => {
+export const setGlobalRender = (render: StoryFn<Framework>) => {
   checkMethod('setGlobalRender');
   singleton.facade.projectAnnotations.render = render;
 };
 
 const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']);
-export class ClientApi<TFramework extends AnyFramework, TStorybookRoot = HTMLElement> {
+export class ClientApi<TFramework extends Framework, TStorybookRoot = HTMLElement> {
   facade: StoryStoreFacade<TFramework, TStorybookRoot>;
 
   storyStore?: StoryStore<TFramework, TStorybookRoot>;

code/lib/client-api/src/StoryStoreFacade.ts

@@ -5,7 +5,7 @@ import { SynchronousPromise } from 'synchronous-promise';
 import { toId, isExportStory, storyNameFromExport } from '@storybook/csf';
 import type {
   Addon_IndexEntry,
-  AnyFramework,
+  Framework,
   ComponentId,
   DocsOptions,
   Parameters,
@@ -21,7 +21,7 @@ import type { StoryStore } from '@storybook/store';
 import { userOrAutoTitle, sortStoriesV6 } from '@storybook/store';
 import { logger } from '@storybook/client-logger';
 
-export class StoryStoreFacade<TFramework extends AnyFramework, TStorybookRoot = HTMLElement> {
+export class StoryStoreFacade<TFramework extends Framework, TStorybookRoot = HTMLElement> {
   projectAnnotations: Store_NormalizedProjectAnnotations<TFramework, TStorybookRoot>;
 
   entries: Record<StoryId, Addon_IndexEntry & { componentId?: ComponentId }>;