GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-03 05:04:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix memory leak in vue3 renderer

Browse Source
This commit is contained in:
Jeppe Reinhold 2022-11-01 13:26:09 +01:00
parent 41427307e1
commit a9e4e17530
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
code/renderers/vue3/src/render.ts
View File

@ -20,20 +20,31 @@ export const setup = (fn: (app: any) => void) => {
setupFunction = fn;
};
const map = new Map<Element, ReturnType<typeof createApp>>();
const componentsByDomElementId = new Map<string, ReturnType<typeof createApp>>();
export function renderToDOM(
{ title, name, storyFn, showMain, showError, showException }: Store_RenderContext<VueFramework>,
{
title,
name,
storyFn,
showMain,
showError,
showException,
storyContext,
}: Store_RenderContext<VueFramework>,
domElement: Element
) {
// in docs mode we're rendering multiple stories to the DOM, so we need to key by the story id
const domElementKey = storyContext.viewMode === 'docs' ? storyContext.id : 'storybook-root';
// TODO: explain cyclical nature of these app => story => mount
let element: StoryFnVueReturnType;
const storybookApp = createApp({
unmounted() {
map.delete(domElement);
componentsByDomElementId.delete(domElementKey);
},
render() {
map.set(domElement, storybookApp);
componentsByDomElementId.set(domElementKey, storybookApp);
setupFunction(storybookApp);
return h(element);
},
@ -54,7 +65,7 @@ export function renderToDOM(
showMain();
map.get(domElement)?.unmount();
componentsByDomElementId.get(domElementKey)?.unmount();
storybookApp.mount(domElement);
}