-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: optimize the error prompts and editing experience of vue demo (#…
…2065) * feat: optimize the error prompts and editing experience of vue demo * refactor: use preflight option * refactor: optimize userRenderer
- Loading branch information
Showing
19 changed files
with
239 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,92 @@ | ||
| import { useEffect, useRef } from 'react'; | ||
| import type { AgnosticComponentModule, IDemoData } from './types'; | ||
| import { useEffect, useRef, useState } from 'react'; | ||
| import type { AgnosticComponentType, IDemoData } from './types'; | ||
| import { getAgnosticComponentModule } from './utils'; | ||
|
|
||
| // maintain all the mounted instance | ||
| const map = new Map<string, any>(); | ||
| const map = new Map< | ||
| string, | ||
| { teardown?: () => void; hostElement?: HTMLElement } | ||
| >(); | ||
|
|
||
| export interface UseRendererOptions { | ||
| id: string; | ||
| component?: AgnosticComponentType; | ||
| renderOpts: IDemoData['renderOpts']; | ||
| onResolved?: () => void; | ||
| } | ||
|
|
||
| export const useRenderer = ({ | ||
| id, | ||
| component, | ||
| renderOpts, | ||
| }: IDemoData & { id: string }) => { | ||
| onResolved, | ||
| }: UseRendererOptions) => { | ||
| const [deferedComponent, setComponent] = | ||
| useState<AgnosticComponentType | null>( | ||
| component ? getAgnosticComponentModule(component) : null, | ||
| ); | ||
|
|
||
| const canvasRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| const teardownRef = useRef(() => {}); | ||
|
|
||
| const prevComponent = useRef(component); | ||
| const prevCanvas = useRef(canvasRef.current); | ||
|
|
||
| // forcibly destroyed | ||
| if (prevComponent.current !== component) { | ||
| const teardown = map.get(id); | ||
| teardown?.(); | ||
| prevComponent.current = component; | ||
| const resolving = useRef(false); | ||
|
|
||
| if (prevCanvas.current !== canvasRef.current) { | ||
| if (prevCanvas.current === null) { | ||
| // When first render, component maintained by the parent component userRenderer may be removed. | ||
| // The hosted element should be added back | ||
| const handler = map.get(id); | ||
| if (handler?.teardown && handler?.hostElement && canvasRef.current) { | ||
| canvasRef.current.appendChild(handler.hostElement); | ||
| teardownRef.current = handler.teardown; | ||
| } | ||
| } | ||
| prevCanvas.current = canvasRef.current; | ||
| } | ||
|
|
||
| const renderer = renderOpts?.renderer; | ||
|
|
||
| useEffect(() => { | ||
| async function resolveRender() { | ||
| if (!canvasRef.current || !renderer || !component) return; | ||
| if (map.get(id)) return; | ||
|
|
||
| map.set(id, () => {}); | ||
| let module: AgnosticComponentModule = | ||
| component instanceof Promise ? await component : component; | ||
| module = module.default ?? module; | ||
|
|
||
| const teardown = await renderer(canvasRef.current, module); | ||
|
|
||
| // remove instance when react component is unmounted | ||
| teardownRef.current = function () { | ||
| teardown(); | ||
| map.delete(id); | ||
| }; | ||
| map.set(id, teardownRef.current); | ||
| if (!canvasRef.current || !renderer || !deferedComponent) return; | ||
| const legacyHandler = map.get(id); | ||
| if (resolving.current) return; | ||
| resolving.current = true; | ||
|
|
||
| const legacyTeardown = legacyHandler?.teardown; | ||
| const comp = await deferedComponent; | ||
| const hostElement = document.createElement('div'); | ||
| try { | ||
| canvasRef.current.appendChild(hostElement); | ||
| const teardown = await renderer(hostElement, comp); | ||
| legacyTeardown?.(); | ||
| legacyHandler?.hostElement?.remove(); | ||
| // remove instance when react component is unmounted | ||
| teardownRef.current = function () { | ||
| teardown(); | ||
| hostElement.remove(); | ||
| map.delete(id); | ||
| }; | ||
| map.set(id, { | ||
| teardown: teardownRef.current, | ||
| hostElement, | ||
| }); | ||
| } catch (error) { | ||
| hostElement.remove(); | ||
| throw error; | ||
| } finally { | ||
| resolving.current = false; | ||
| onResolved?.(); | ||
| } | ||
| } | ||
|
|
||
| resolveRender(); | ||
| }, [canvasRef.current, component, renderer]); | ||
| }, [canvasRef.current, deferedComponent, renderer]); | ||
|
|
||
| useEffect(() => () => teardownRef.current(), []); | ||
|
|
||
| return canvasRef; | ||
| return { canvasRef, setComponent }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { createApp, h, nextTick } from 'vue'; | ||
|
|
||
| function u(d){return new Promise((i,t)=>{let n=document.createElement("div");n.style.display="none",n.style.overflow="hidden",document.body.appendChild(n);let e;function r(){nextTick(()=>{e.config.errorHandler=void 0,e.unmount(),n.remove();});}e=createApp({mounted(){i(),r();},render(){return h(d)}}),e.config.warnHandler=o=>{r(),t(new Error(o));},e.config.errorHandler=o=>{r(),t(o);},e.mount(n);})} | ||
|
|
||
| export { u as default }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| import { createApp } from 'vue'; | ||
|
|
||
| var _=function(s,e){e.__css__&&setTimeout(()=>{document.querySelectorAll(`style[css-${e.__id__}]`).forEach(t=>t.remove()),document.head.insertAdjacentHTML("beforeend",`<style css-${e.__id__}>${e.__css__}</style>`);},1);let r=createApp(e);return r.config.errorHandler=t=>console.error(t),r.mount(s),()=>{r.unmount();}},l=_; | ||
| var _=async function(s,e){e.__css__&&setTimeout(()=>{document.querySelectorAll(`style[css-${e.__id__}]`).forEach(r=>r.remove()),document.head.insertAdjacentHTML("beforeend",`<style css-${e.__id__}>${e.__css__}</style>`);},1);let t=createApp(e);return t.config.errorHandler=function(r){throw r},t.mount(s),()=>{t.unmount();}},o=_; | ||
|
|
||
| export { l as default }; | ||
| export { o as default }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.