Custom shell
Custom
Body
Body
Own
', (doc) => { + expect(globalThis.document).toBe(doc) + expect(globalThis.window.document).toBe(doc) + return document.querySelector('h1')?.textContent + }) + + expect(title).toBe('Own') + }) + + it('keeps its document across awaits until the render finishes', async () => { + const text = await runInDom( + 'first
', + async (doc) => { + await tick() + expect(globalThis.document).toBe(doc) + document.body.appendChild(document.createTextNode(' then')) + return document.body.textContent + }, + ) + + expect(text).toBe('first then') + }) + + it('restores the outer document after a nested render', async () => { + await runInDom('outer', async (outer) => { + const inner = await runInDom( + 'inner', + async () => { + await tick() + return document.body.textContent + }, + ) + expect(inner).toBe('inner') + expect(globalThis.document).toBe(outer) + }) + }) + + it('returns to the process DOM when the render finishes, even when it fails', async () => { + const restore = createDom('process
') + try { + const processDocument = globalThis.document + + expect(() => + runInDom('', () => { + throw new Error('Render failed.') + }), + ).toThrow('Render failed.') + await expect( + runInDom('', async () => { + await tick() + throw new Error('Async render failed.') + }), + ).rejects.toThrow('Async render failed.') + + expect(globalThis.document).toBe(processDocument) + expect(document.body.textContent).toBe('process') + } finally { + restore() + } + }) + + it('keeps each DOM in the scope useDomScope installs', () => { + const runs: unknown[] = [] + let store: unknown + const scope: AsyncScope = { + getStore: () => store, + run(next, callback) { + runs.push(next) + store = next + try { + return callback() + } finally { + store = undefined + } + }, + } + const restore = useDomScope(scope) + try { + runInDom('', (doc) => { + expect(globalThis.document).toBe(doc) + }) + } finally { + restore() + } + + expect(runs).toHaveLength(1) + expect((runs[0] as { document: unknown }).document).toBeDefined() + }) +}) + +describe('createDom', () => { + it('restores the previous process DOM', () => { + const restoreOuter = createDom('outer') + try { + const outer = globalThis.document + const restoreInner = createDom('inner') + expect(document.body.textContent).toBe('inner') + restoreInner() + expect(globalThis.document).toBe(outer) + } finally { + restoreOuter() + } + }) +}) diff --git a/packages/ts-minidom/src/createDom.ts b/packages/ts-minidom/src/createDom.ts index c40431b2..8728577e 100644 --- a/packages/ts-minidom/src/createDom.ts +++ b/packages/ts-minidom/src/createDom.ts @@ -1,102 +1,144 @@ -import cssEscape from './cssEscape' import { parseHtml, resetMiniDomCaches } from './minidom' -type GlobalKey = - | 'window' - | 'document' - | 'Node' - | 'Element' - | 'HTMLElement' - | 'HTMLSlotElement' - | 'DocumentFragment' - | 'CustomEvent' - | 'Event' - | 'MouseEvent' - | 'MutationObserver' - | 'Comment' - | 'Text' - | 'HTMLTemplateElement' - | 'CSS' - | 'localStorage' - | 'sessionStorage' +const DOM_GLOBAL_KEYS = [ + 'window', + 'document', + 'Node', + 'Element', + 'HTMLElement', + 'HTMLSlotElement', + 'DocumentFragment', + 'CustomEvent', + 'Event', + 'MouseEvent', + 'MutationObserver', + 'Comment', + 'Text', + 'HTMLTemplateElement', + 'CSS', + 'localStorage', + 'sessionStorage', +] as const -export function createDom(html: string): () => void { - const { document, window } = parseHtml(html) - const globals = globalThis as Record