Fix various missed types

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

@@ -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>;
+let singleton: ClientApi<AnyFramework, any>;
 
 const warningAlternatives = {
   addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`,
@@ -111,10 +111,10 @@ export const setGlobalRender = (render: StoryFn<AnyFramework>) => {
 };
 
 const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']);
-export class ClientApi<TFramework extends AnyFramework> {
-  facade: StoryStoreFacade<TFramework>;
+export class ClientApi<TFramework extends AnyFramework, TStorybookRoot = HTMLElement> {
+  facade: StoryStoreFacade<TFramework, TStorybookRoot>;
 
-  storyStore?: StoryStore<TFramework>;
+  storyStore?: StoryStore<TFramework, TStorybookRoot>;
 
   private addons: Addon_ClientApiAddons<TFramework['storyResult']>;
 
@@ -124,7 +124,7 @@ export class ClientApi<TFramework extends AnyFramework> {
   // just use numeric indexes
   private lastFileName = 0;
 
-  constructor({ storyStore }: { storyStore?: StoryStore<TFramework> } = {}) {
+  constructor({ storyStore }: { storyStore?: StoryStore<TFramework, TStorybookRoot> } = {}) {
     this.facade = new StoryStoreFacade();
 
     this.addons = {};

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

@@ -21,8 +21,8 @@ import type { StoryStore } from '@storybook/store';
 import { userOrAutoTitle, sortStoriesV6 } from '@storybook/store';
 import { logger } from '@storybook/client-logger';
 
-export class StoryStoreFacade<TFramework extends AnyFramework> {
-  projectAnnotations: Store_NormalizedProjectAnnotations<TFramework>;
+export class StoryStoreFacade<TFramework extends AnyFramework, TStorybookRoot = HTMLElement> {
+  projectAnnotations: Store_NormalizedProjectAnnotations<TFramework, TStorybookRoot>;
 
   entries: Record<StoryId, Addon_IndexEntry & { componentId?: ComponentId }>;
 
@@ -54,7 +54,7 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
     });
   }
 
-  getStoryIndex(store: StoryStore<TFramework>) {
+  getStoryIndex(store: StoryStore<TFramework, TStorybookRoot>) {
     const fileNameOrder = Object.keys(this.csfExports);
     const storySortParameter = this.projectAnnotations.parameters?.options?.storySort;
 

code/lib/preview-web/src/Preview.tsx

@@ -47,7 +47,7 @@ const renderToDOMDeprecated = deprecate(() => {},
 export class Preview<TFramework extends AnyFramework, TStorybookRoot = HTMLElement> {
   serverChannel?: Channel;
 
-  storyStore: StoryStore<TFramework>;
+  storyStore: StoryStore<TFramework, TStorybookRoot>;
 
   getStoryIndex?: () => Store_StoryIndex;
 
@@ -109,7 +109,7 @@ export class Preview<TFramework extends AnyFramework, TStorybookRoot = HTMLEleme
 
   getProjectAnnotationsOrRenderError(
     getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework, TStorybookRoot>>
-  ): Store_PromiseLike<ProjectAnnotations<TFramework>> {
+  ): Store_PromiseLike<ProjectAnnotations<TFramework, TStorybookRoot>> {
     return SynchronousPromise.resolve()
       .then(getProjectAnnotations)
       .then((projectAnnotations) => {
@@ -199,7 +199,7 @@ export class Preview<TFramework extends AnyFramework, TStorybookRoot = HTMLEleme
   async onGetProjectAnnotationsChanged({
     getProjectAnnotations,
   }: {
-    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
+    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework, TStorybookRoot>>;
   }) {
     delete this.previewEntryError;
 

code/lib/preview-web/src/PreviewWeb.tsx

@@ -182,7 +182,7 @@ export class PreviewWeb<
   async onGetProjectAnnotationsChanged({
     getProjectAnnotations,
   }: {
-    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
+    getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework, TStorybookRoot>>;
   }) {
     await super.onGetProjectAnnotationsChanged({ getProjectAnnotations });
 

code/lib/preview-web/src/docs-context/DocsContext.ts

@@ -13,7 +13,9 @@ import type { Channel } from '@storybook/channels';
 
 import type { DocsContextProps } from './DocsContextProps';
 
-export class DocsContext<TFramework extends AnyFramework> implements DocsContextProps<TFramework> {
+export class DocsContext<TFramework extends AnyFramework, TStorybookRoot = HTMLElement>
+  implements DocsContextProps<TFramework>
+{
   private componentStoriesValue: Store_Story<TFramework>[];
 
   private storyIdToCSFFile: Map<StoryId, Store_CSFFile<TFramework>>;
@@ -26,7 +28,7 @@ export class DocsContext<TFramework extends AnyFramework> implements DocsContext
 
   constructor(
     public channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TFramework, TStorybookRoot>,
     public renderStoryToElement: DocsContextProps['renderStoryToElement'],
     /** The CSF files known (via the index) to be refererenced by this docs file */
     csfFiles: Store_CSFFile<TFramework>[],

code/lib/preview-web/src/render/StandaloneDocsRender.ts

@@ -47,7 +47,7 @@ export class StandaloneDocsRender<TFramework extends AnyFramework, TStorybookRoo
 
   constructor(
     protected channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TFramework, TStorybookRoot>,
     public entry: Addon_IndexEntry
   ) {
     this.id = entry.id;
@@ -83,7 +83,7 @@ export class StandaloneDocsRender<TFramework extends AnyFramework, TStorybookRoo
     if (!this.exports || !this.csfFiles || !this.store.projectAnnotations)
       throw new Error('Cannot render docs before preparing');
 
-    const docsContext = new DocsContext<TFramework>(
+    const docsContext = new DocsContext<TFramework, TStorybookRoot>(
       this.channel,
       this.store,
       renderStoryToElement,

code/lib/preview-web/src/render/StoryRender.ts

@@ -70,7 +70,7 @@ export class StoryRender<TFramework extends AnyFramework, TStorybookRoot = HTMLE
 
   constructor(
     public channel: Channel,
-    public store: StoryStore<TFramework>,
+    public store: StoryStore<TFramework, TStorybookRoot>,
     private renderToScreen: RenderToRoot<TFramework, TStorybookRoot>,
     private callbacks: RenderContextCallbacks<TFramework>,
     public id: StoryId,

code/lib/preview-web/src/render/TemplateDocsRender.ts

@@ -50,7 +50,7 @@ export class TemplateDocsRender<TFramework extends AnyFramework, TStorybookRoot
 
   constructor(
     protected channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TFramework, TStorybookRoot>,
     public entry: Addon_IndexEntry
   ) {
     this.id = entry.id;
@@ -99,7 +99,7 @@ export class TemplateDocsRender<TFramework extends AnyFramework, TStorybookRoot
   ) {
     if (!this.story || !this.csfFiles) throw new Error('Cannot render docs before preparing');
 
-    const docsContext = new DocsContext<TFramework>(
+    const docsContext = new DocsContext<TFramework, TStorybookRoot>(
       this.channel,
       this.store,
       renderStoryToElement,

code/lib/store/src/StoryStore.ts

@@ -37,12 +37,12 @@ import { processCSFFile, prepareStory, normalizeProjectAnnotations } from './csf
 const CSF_CACHE_SIZE = 1000;
 const STORY_CACHE_SIZE = 10000;
 
-export class StoryStore<TFramework extends AnyFramework> {
+export class StoryStore<TFramework extends AnyFramework, TStorybookRoot = HTMLElement> {
   storyIndex?: StoryIndexStore;
 
   importFn?: Store_ModuleImportFn;
 
-  projectAnnotations?: Store_NormalizedProjectAnnotations<TFramework>;
+  projectAnnotations?: Store_NormalizedProjectAnnotations<TFramework, TStorybookRoot>;
 
   globals?: GlobalsStore;
 
@@ -77,7 +77,7 @@ export class StoryStore<TFramework extends AnyFramework> {
     });
   }
 
-  setProjectAnnotations(projectAnnotations: ProjectAnnotations<TFramework>) {
+  setProjectAnnotations(projectAnnotations: ProjectAnnotations<TFramework, TStorybookRoot>) {
     // By changing `this.projectAnnotations, we implicitly invalidate the `prepareStoryWithCache`
     this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);
     const { globals, globalTypes } = projectAnnotations;
@@ -145,7 +145,7 @@ export class StoryStore<TFramework extends AnyFramework> {
     );
   }
 
-  loadAllCSFFiles(): Store_PromiseLike<StoryStore<TFramework>['cachedCSFFiles']> {
+  loadAllCSFFiles(): Store_PromiseLike<StoryStore<TFramework, TStorybookRoot>['cachedCSFFiles']> {
     if (!this.storyIndex) throw new Error(`loadAllCSFFiles called before initialization`);
 
     const importPaths: Record<Path, StoryId> = {};

code/lib/store/src/csf/normalizeProjectAnnotations.ts

@@ -9,12 +9,15 @@ import { inferArgTypes } from '../inferArgTypes';
 import { inferControls } from '../inferControls';
 import { normalizeInputTypes } from './normalizeInputTypes';
 
-export function normalizeProjectAnnotations<TFramework extends AnyFramework>({
+export function normalizeProjectAnnotations<TFramework extends AnyFramework, TStorybookRoot>({
   argTypes,
   globalTypes,
   argTypesEnhancers,
   ...annotations
-}: ProjectAnnotations<TFramework>): Store_NormalizedProjectAnnotations<TFramework> {
+}: ProjectAnnotations<TFramework, TStorybookRoot>): Store_NormalizedProjectAnnotations<
+  TFramework,
+  TStorybookRoot
+> {
   return {
     ...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }),
     ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),

code/lib/store/src/csf/prepareStory.ts

@@ -41,10 +41,10 @@ const argTypeDefaultValueWarning = deprecate(
 //
 // Note that this story function is *stateless* in the sense that it does not track args or globals
 // Instead, it is expected these are tracked separately (if necessary) and are passed into each invocation.
-export function prepareStory<TFramework extends AnyFramework>(
+export function prepareStory<TFramework extends AnyFramework, TStorybookRoot = HTMLElement>(
   storyAnnotations: Store_NormalizedStoryAnnotations<TFramework>,
   componentAnnotations: Store_NormalizedComponentAnnotations<TFramework>,
-  projectAnnotations: Store_NormalizedProjectAnnotations<TFramework>
+  projectAnnotations: Store_NormalizedProjectAnnotations<TFramework, TStorybookRoot>
 ): Store_Story<TFramework> {
   // NOTE: in the current implementation we are doing everything once, up front, rather than doing
   // anything at render time. The assumption is that as we don't load all the stories at once, this

code/lib/types/src/modules/store.ts

@@ -51,11 +51,13 @@ export type ProjectAnnotations<
   renderToDOM?: RenderToRoot<TFramework, TStorybookRoot>;
 };
 
-export type Store_NormalizedProjectAnnotations<TFramework extends AnyFramework = AnyFramework> =
-  ProjectAnnotations<TFramework> & {
-    argTypes?: StrictArgTypes;
-    globalTypes?: StrictGlobalTypes;
-  };
+export type Store_NormalizedProjectAnnotations<
+  TFramework extends AnyFramework = AnyFramework,
+  TStorybookRoot = HTMLElement
+> = ProjectAnnotations<TFramework, TStorybookRoot> & {
+  argTypes?: StrictArgTypes;
+  globalTypes?: StrictGlobalTypes;
+};
 
 export type Store_NormalizedComponentAnnotations<TFramework extends AnyFramework = AnyFramework> =
   ComponentAnnotations<TFramework> & {