From 91fa9889408a5120606a8ca9026ba26c2991c087 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 4 Nov 2022 14:08:05 +1100 Subject: [PATCH] Update renderToCanvas functions to use precise type --- code/frameworks/ember/src/client/preview/render.ts | 4 ++-- code/lib/types/src/modules/store.ts | 2 +- code/renderers/html/src/render.ts | 3 +-- code/renderers/preact/src/render.tsx | 4 ++-- code/renderers/react/src/render.tsx | 2 +- code/renderers/server/src/render.ts | 2 +- code/renderers/svelte/src/render.ts | 6 +++--- code/renderers/vue/src/render.ts | 8 ++++---- code/renderers/vue3/src/render.ts | 4 ++-- code/renderers/web-components/src/render.ts | 2 +- 10 files changed, 18 insertions(+), 19 deletions(-) diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts index 7d61d690513..ed5a7b4b53c 100644 --- a/code/frameworks/ember/src/client/preview/render.ts +++ b/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; @@ -62,7 +62,7 @@ function render(options: OptionsArgs, el: Element) { export function renderToCanvas( { storyFn, kind, name, showMain, showError }: Store_RenderContext, - domElement: Element + domElement: EmberFramework['canvasElement'] ) { const element = storyFn(); diff --git a/code/lib/types/src/modules/store.ts b/code/lib/types/src/modules/store.ts index 4a88df31789..94a6a1f0c90 100644 --- a/code/lib/types/src/modules/store.ts +++ b/code/lib/types/src/modules/store.ts @@ -28,7 +28,7 @@ import type { } from './csf'; export interface WebFramework extends Framework { - rootElement: HTMLElement; + canvasElement: HTMLElement; } export type Store_ModuleExport = any; diff --git a/code/renderers/html/src/render.ts b/code/renderers/html/src/render.ts index 1e9238f5bc0..e18e234d164 100644 --- a/code/renderers/html/src/render.ts +++ b/code/renderers/html/src/render.ts @@ -1,5 +1,4 @@ /* eslint-disable no-param-reassign */ -// @ts-expect-error (Converted from ts-ignore) import global from 'global'; import { dedent } from 'ts-dedent'; @@ -43,7 +42,7 @@ export const render: ArgsStoryFn = (args, context) => { export function renderToCanvas( { storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext, - domElement: Element + domElement: HtmlFramework['canvasElement'] ) { const element = storyFn(); showMain(); diff --git a/code/renderers/preact/src/render.tsx b/code/renderers/preact/src/render.tsx index 0deea62b169..f0381565296 100644 --- a/code/renderers/preact/src/render.tsx +++ b/code/renderers/preact/src/render.tsx @@ -37,7 +37,7 @@ const StoryHarness: preact.FunctionalComponent<{ title: string; showError: Store_RenderContext['showError']; storyFn: () => any; - domElement: Element; + domElement: PreactFramework['canvasElement']; }> = ({ showError, name, title, storyFn, domElement }) => { const content = preact.h(storyFn as any, null); if (!content) { @@ -55,7 +55,7 @@ const StoryHarness: preact.FunctionalComponent<{ export function renderToCanvas( { storyFn, title, name, showMain, showError, forceRemount }: Store_RenderContext, - domElement: Element + domElement: PreactFramework['canvasElement'] ) { if (forceRemount) { preactRender(null, domElement); diff --git a/code/renderers/react/src/render.tsx b/code/renderers/react/src/render.tsx index bdfcca43454..d564992cbe0 100644 --- a/code/renderers/react/src/render.tsx +++ b/code/renderers/react/src/render.tsx @@ -136,7 +136,7 @@ export async function renderToCanvas( showException, forceRemount, }: Store_RenderContext, - domElement: Element + domElement: ReactFramework['canvasElement'] ) { const Story = unboundStoryFn as FC>; diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts index a2e1c49fbe4..5db111f6b43 100644 --- a/code/renderers/server/src/render.ts +++ b/code/renderers/server/src/render.ts @@ -56,7 +56,7 @@ export async function renderToCanvas( storyContext, storyContext: { parameters, args, argTypes }, }: Store_RenderContext, - domElement: Element + domElement: ServerFramework['canvasElement'] ) { // Some addons wrap the storyFn so we need to call it even though Server doesn't need the answer storyFn(); diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts index 1f3d264bb9e..94033bcbec6 100644 --- a/code/renderers/svelte/src/render.ts +++ b/code/renderers/svelte/src/render.ts @@ -5,9 +5,9 @@ import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte'; import type { SvelteFramework } from './types'; -const componentsByDomElement = new Map(); +const componentsByDomElement = new Map(); -function teardown(domElement: Element) { +function teardown(domElement: SvelteFramework['canvasElement']) { if (!componentsByDomElement.has(domElement)) { return; } @@ -29,7 +29,7 @@ export function renderToCanvas( storyContext, forceRemount, }: Store_RenderContext, - domElement: Element + domElement: SvelteFramework['canvasElement'] ) { const existingComponent = componentsByDomElement.get(domElement); diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts index 0fe8bd48c2e..26b23e99ab5 100644 --- a/code/renderers/vue/src/render.ts +++ b/code/renderers/vue/src/render.ts @@ -8,7 +8,7 @@ import type { VueFramework } from './types'; export const COMPONENT = 'STORYBOOK_COMPONENT'; export const VALUES = 'STORYBOOK_VALUES'; -const map = new Map(); +const map = new Map(); type Instance = CombinedVueInstance< Vue, { @@ -20,7 +20,7 @@ type Instance = CombinedVueInstance< Record >; -const getRoot = (domElement: Element): Instance => { +const getRoot = (domElement: VueFramework['canvasElement']): Instance => { const cachedInstance = map.get(domElement); if (cachedInstance != null) return cachedInstance; @@ -92,13 +92,13 @@ export function renderToCanvas( showException, forceRemount, }: Store_RenderContext, - domElement: Element + domElement: VueFramework['canvasElement'] ) { const root = getRoot(domElement); Vue.config.errorHandler = showException; const element = storyFn(); - let mountTarget: Element | null; + let mountTarget: VueFramework['canvasElement'] | null; // Vue2 mount always replaces the mount target with Vue-generated DOM. // https://v2.vuejs.org/v2/api/#el:~:text=replaced%20with%20Vue%2Dgenerated%20DOM diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index f14b49a7a3e..0766ef975ea 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -20,11 +20,11 @@ export const setup = (fn: (app: any) => void) => { setupFunction = fn; }; -const map = new Map>(); +const map = new Map>(); export function renderToCanvas( { title, name, storyFn, showMain, showError, showException }: Store_RenderContext, - domElement: Element + domElement: VueFramework['canvasElement'] ) { // TODO: explain cyclical nature of these app => story => mount let element: StoryFnVueReturnType; diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts index 3aa53b1ed9e..2c3d67149e3 100644 --- a/code/renderers/web-components/src/render.ts +++ b/code/renderers/web-components/src/render.ts @@ -38,7 +38,7 @@ export function renderToCanvas( showError, forceRemount, }: Store_RenderContext, - domElement: Element + domElement: WebComponentsFramework['canvasElement'] ) { const element = storyFn();