`Renderer`'s property `canvasElement` has `unknown` type by default

[spark raptor]

Hi. I'm wondering why the canvasElement property of Renderer type for the interactions play prop, has the unknown type by default.

Here is a StackBlitz where svelte-check commands throws error regarding usage of canvasElement which has default type set to unknown. Previously in the @storybook/addons package it was set to HTMLElement. So there are multiple questions regarding this one. May the canvasElement be different than a HTMLElement? If so, how do we specify the template render type for the StoryContext inside SB stories using addon for svelte.
Steps: 1. Open StackBlitz 2. run npm run check:svelte
StackBlitz: https://stackblitz.com/github/StefanIlieP5/svelte-storybook7
@storybookjs/addon-svelte-csf issues: https://github.com/storybookjs/addon-svelte-csf/issues/105

[warped wren]

It should always be HTMLElement AFAICS:

https://github.com/storybookjs/storybook/blob/2cb1e8800851896947e010c4d2fc63bb175b1c84/code/renderers/svelte/src/types.ts#L34-L40

https://github.com/storybookjs/storybook/blob/1400d5d51cbdf9c326e4e58830eac6b772ee36f5/code/lib/types/src/modules/story.ts#L23-L25

Seems the type annotation for Story is coming from @storybook/addon-svelte-csf, perhaps that's where the problem is?

[spark raptor]

I think so. But it's using types from @storybook/types inside index.d.ts so I was expecting it to use the correct ones. I will check again there to see if it's indeed the right ones.

[spark raptor]

Here the play function has first param as Addon_StoryContext

https://github.com/storybookjs/storybook/blob/288cdb8544f28922b2cff2b3e8209555053c53f5/code/lib/types/src/modules/addons.ts#LL200C32-L200C32

And here the template of the StoryContext it's extending the generic Renderer

https://github.com/storybookjs/storybook/blob/288cdb8544f28922b2cff2b3e8209555053c53f5/code/lib/types/src/modules/addons.ts#L75

which has canvasElement as unknown

[spark raptor]

I would change the template of the Addon_StoryContext to <TRenederer extends Renderer = WebRenderer> since the WebRenderer is already a Renderer so every property will be as it is.

https://github.com/storybookjs/storybook/blob/ec5de1a4086be7eafbc8871ed4ea5cc01645af6a/code/lib/types/src/modules/addons.ts#L75

[spark raptor]

@warped wren any thoughts? Sorry for tagging

[warped wren]

Want to give it a try?

[spark raptor]

To change it to WebRenderer?

[spark raptor]

I've opened this PR https://github.com/storybookjs/storybook/pull/22771