@pyreon/document-primitives 0.12.10 → 0.12.11

package/src/__tests__/useDocumentExport.test.ts

@@ -1,6 +1,6 @@
 import type { DocumentMarker } from '@pyreon/connector-document'
 import { describe, expect, it } from 'vitest'
-import { createDocumentExport } from '../useDocumentExport'
+import { createDocumentExport, extractDocNode } from '../useDocumentExport'
 
 // Mock VNode
 const vnode = (
@@ -90,3 +90,226 @@ describe('createDocumentExport', () => {
     expect(tree.children).toEqual([])
   })
 })
+
+describe('extractDocNode (one-step alias)', () => {
+  // The one-step form. Equivalent to
+  // `createDocumentExport(templateFn).getDocNode()` but without
+  // the wrapper-object indirection. This is the form most
+  // consumers should use.
+
+  it('extracts a tree from a template function in one call', () => {
+    const tree = extractDocNode(() =>
+      vnode(DocDocument, { _documentProps: { title: 'Test' } }, [
+        vnode(DocHeading, { _documentProps: { level: 1 } }, ['Hello']),
+      ]),
+    )
+
+    expect(tree.type).toBe('document')
+    expect(tree.props.title).toBe('Test')
+    expect(tree.children).toHaveLength(1)
+    const heading = tree.children[0] as { type: string; props: Record<string, unknown> }
+    expect(heading.type).toBe('heading')
+    expect(heading.props.level).toBe(1)
+  })
+
+  it('respects extraction options (includeStyles: false)', () => {
+    const tree = extractDocNode(
+      () => vnode(DocHeading, { $rocketstyle: { fontSize: 24 } }, ['Hello']),
+      { includeStyles: false },
+    )
+    expect(tree.styles).toBeUndefined()
+  })
+
+  it('returns the same tree shape as createDocumentExport().getDocNode()', () => {
+    // Equivalence guarantee — the two-step form delegates to the
+    // one-step form internally, so they MUST produce identical
+    // output for identical input.
+    const template = () =>
+      vnode(DocText, { $rocketstyle: { fontSize: 14 } }, ['Hello'])
+
+    const oneStep = extractDocNode(template)
+    const twoStep = createDocumentExport(template).getDocNode()
+
+    expect(oneStep).toEqual(twoStep)
+  })
+
+  it('is idempotent — calling extractDocNode twice on the same template produces equivalent results', () => {
+    // The framework fix in PR #197 changed extractDocumentTree to
+    // CALL the component function for documentType vnodes when
+    // _documentProps is not directly on the JSX vnode. The fix is
+    // correct because rocketstyle's attrs HOC is meant to be pure
+    // setup with no observable side effects on the second call.
+    // This test locks in that purity assumption: extracting the
+    // same template twice produces structurally equivalent doc
+    // nodes.
+    //
+    // If a future change to a primitive accidentally introduces a
+    // side effect in its attrs callback (e.g. a counter, a log
+    // line, a stateful import), the second extraction would still
+    // SUCCEED but produce different output — and this test would
+    // catch the regression. The three extractions should be deeply
+    // equal under any change to the primitive's setup path.
+    const template = () =>
+      vnode(
+        DocDocument,
+        { _documentProps: { title: 'Idempotent', author: 'Test' } },
+        [
+          vnode(DocHeading, { _documentProps: { level: 1 } }, ['Hello']),
+          vnode(DocText, { $rocketstyle: { fontSize: 14 } }, ['World']),
+        ],
+      )
+
+    const first = extractDocNode(template)
+    const second = extractDocNode(template)
+    const third = extractDocNode(template)
+
+    expect(first).toEqual(second)
+    expect(second).toEqual(third)
+  })
+
+  it('resolves function values in _documentProps each call (D1+D2 integration)', () => {
+    // The combined contract: extractDocNode is the one-step form,
+    // and it benefits from the same function-value resolution
+    // that extractDocumentTree does. Each call sees the live
+    // value of any accessor in _documentProps.
+    let counter = 0
+    const template = () =>
+      vnode(
+        DocDocument,
+        {
+          _documentProps: {
+            title: () => `Export ${++counter}`,
+            author: 'Plain string still works',
+          },
+        },
+        [],
+      )
+
+    const first = extractDocNode(template)
+    const second = extractDocNode(template)
+
+    expect(first.props.title).toBe('Export 1')
+    expect(first.props.author).toBe('Plain string still works')
+    expect(second.props.title).toBe('Export 2')
+  })
+})
+
+describe('DocDocument reactive metadata (D1 integration)', () => {
+  // The end-to-end contract: a real DocDocument primitive (NOT a
+  // mock vnode) accepts accessor functions for title/author/subject,
+  // stores them in _documentProps, and the export pipeline reads
+  // the LIVE values at extraction time.
+  //
+  // This test mounts DocDocument as if from JSX (via h()) and
+  // extracts the resulting tree, then mutates the closure-captured
+  // state and re-extracts to prove the second extraction sees the
+  // updated value. The previous tests use mock vnodes — this one
+  // uses the real primitive.
+
+  // Long timeout: this test dynamic-imports @pyreon/test-utils,
+  // @pyreon/core, and DocDocument inside the test body. Each
+  // dynamic import triggers Vite's transform pipeline (JSX
+  // compilation, rocketstyle wrapping, etc.) which takes 5+
+  // seconds on slow CI runners on first hit. The default 5000ms
+  // timeout fails reliably on CI.
+  it('DocDocument with accessor title produces live values across multiple extractions', { timeout: 30_000 }, async () => {
+    // Use happy-dom + initTestConfig like the rest of the test suite
+    const { initTestConfig } = await import('@pyreon/test-utils')
+    const { h } = await import('@pyreon/core')
+    const cleanup = initTestConfig()
+    try {
+      // Real DocDocument from the package (not the mock above)
+      const RealDocDocument = (await import('../primitives/DocDocument')).default
+
+      // Closure state that the accessor reads from. Mutating it
+      // between extractions simulates a signal change.
+      let currentName = 'Aisha'
+      const titleAccessor = () => `${currentName} — Resume`
+      const authorAccessor = () => currentName
+
+      // Build the template via h() so DocDocument's attrs callback
+      // runs (storing the accessor functions in _documentProps).
+      const template = () =>
+        h(
+          RealDocDocument as never,
+          { title: titleAccessor, author: authorAccessor } as never,
+        )
+
+      const first = extractDocNode(template)
+      expect(first.type).toBe('document')
+      expect(first.props.title).toBe('Aisha — Resume')
+      expect(first.props.author).toBe('Aisha')
+
+      // Mutate the closure-captured name. The next extraction
+      // should see the new value because extractDocumentTree calls
+      // the function fresh.
+      currentName = 'Marcus'
+      const second = extractDocNode(template)
+      expect(second.props.title).toBe('Marcus — Resume')
+      expect(second.props.author).toBe('Marcus')
+
+      // And once more for good measure
+      currentName = 'Priya'
+      const third = extractDocNode(template)
+      expect(third.props.title).toBe('Priya — Resume')
+      expect(third.props.author).toBe('Priya')
+    } finally {
+      cleanup()
+    }
+  })
+
+  it('DocDocument with plain string title still works (backward compat)', { timeout: 30_000 }, async () => {
+    const { initTestConfig } = await import('@pyreon/test-utils')
+    const { h } = await import('@pyreon/core')
+    const cleanup = initTestConfig()
+    try {
+      const RealDocDocument = (await import('../primitives/DocDocument')).default
+
+      const tree = extractDocNode(() =>
+        h(
+          RealDocDocument as never,
+          { title: 'Static title', author: 'Static author' } as never,
+        ),
+      )
+
+      expect(tree.props.title).toBe('Static title')
+      expect(tree.props.author).toBe('Static author')
+    } finally {
+      cleanup()
+    }
+  })
+
+  it('DocDocument subject prop also accepts both string and accessor (full prop coverage)', { timeout: 30_000 }, async () => {
+    // The widening covered all three metadata props (title, author,
+    // subject). The previous tests only exercise title and author —
+    // this test fills the coverage gap so a typo in the subject
+    // type widening would be caught.
+    const { initTestConfig } = await import('@pyreon/test-utils')
+    const { h } = await import('@pyreon/core')
+    const cleanup = initTestConfig()
+    try {
+      const RealDocDocument = (await import('../primitives/DocDocument')).default
+
+      // Plain string subject
+      const plainTree = extractDocNode(() =>
+        h(RealDocDocument as never, { subject: 'Q4 Report' } as never),
+      )
+      expect(plainTree.props.subject).toBe('Q4 Report')
+
+      // Accessor subject — value resolved at extraction time
+      let topic = 'Initial topic'
+      const accessorTree1 = extractDocNode(() =>
+        h(RealDocDocument as never, { subject: () => topic } as never),
+      )
+      expect(accessorTree1.props.subject).toBe('Initial topic')
+
+      topic = 'Updated topic'
+      const accessorTree2 = extractDocNode(() =>
+        h(RealDocDocument as never, { subject: () => topic } as never),
+      )
+      expect(accessorTree2.props.subject).toBe('Updated topic')
+    } finally {
+      cleanup()
+    }
+  })
+})

package/src/index.ts

@@ -34,4 +34,4 @@ export type { DocumentTheme } from './theme'
 export { documentTheme } from './theme'
 // Export helper
 export type { DocumentExport, DocumentExportOptions } from './useDocumentExport'
-export { createDocumentExport } from './useDocumentExport'
+export { createDocumentExport, extractDocNode } from './useDocumentExport'

package/src/primitives/DocButton.ts

@@ -29,7 +29,7 @@ const DocButton = rocketstyle({
     },
   })
   .statics({ _documentType: 'button' as const })
-  .attrs<{ href?: string; tag: string; _documentProps: { href: string } }>((props) => ({
+  .attrs<{ href?: string }>((props) => ({
     tag: 'a',
     _documentProps: { href: props.href ?? '#' },
   }))

package/src/primitives/DocCode.ts

@@ -10,7 +10,7 @@ const DocCode = rocketstyle()({ name: 'DocCode', component: Text })
     borderRadius: 4,
   })
   .statics({ _documentType: 'code' as const })
-  .attrs<{ language?: string; tag: string; _documentProps: Record<string, unknown> }>((props) => ({
+  .attrs<{ language?: string }>((props) => ({
     tag: 'pre',
     _documentProps: props.language ? { language: props.language } : {},
   }))

package/src/primitives/DocColumn.ts

@@ -3,11 +3,9 @@ import rocketstyle from '@pyreon/rocketstyle'
 
 const DocColumn = rocketstyle()({ name: 'DocColumn', component: Element })
   .statics({ _documentType: 'column' as const })
-  .attrs<{ width?: number | string; tag: string; _documentProps: Record<string, unknown> }>(
-    (props) => ({
-      tag: 'div',
-      _documentProps: props.width != null ? { width: props.width } : {},
-    }),
-  )
+  .attrs<{ width?: number | string }>((props) => ({
+    tag: 'div',
+    _documentProps: props.width != null ? { width: props.width } : {},
+  }))
 
 export default DocColumn

package/src/primitives/DocDivider.ts

@@ -10,8 +10,6 @@ const DocDivider = rocketstyle()({ name: 'DocDivider', component: Element })
   .attrs<{
     color?: string
     thickness?: number
-    tag: string
-    _documentProps: Record<string, unknown>
   }>((props) => ({
     tag: 'hr',
     _documentProps: {

package/src/primitives/DocDocument.ts

@@ -1,20 +1,68 @@
 import { Element } from '@pyreon/elements'
 import rocketstyle from '@pyreon/rocketstyle'
 
+/**
+ * Root document container with metadata for the export pipeline.
+ *
+ * The `title`, `author`, and `subject` props each accept either a
+ * plain `string` or a `() => string` accessor. Accessors are
+ * resolved by `extractDocumentTree` at export time, so consumers
+ * can pass live signal accessors without capturing values at
+ * component mount.
+ *
+ * **Why accessors are needed**: rocketstyle's `.attrs()` callback
+ * runs ONCE at component mount (see
+ * `packages/ui-system/rocketstyle/src/hoc/rocketstyleAttrsHoc.ts`
+ * line 38: ".attrs() callbacks run once at mount"). If `title` were
+ * `string`-only and a consumer wanted to bind it to a live signal,
+ * they'd have to capture the initial value at template setup time
+ * — meaning the export metadata would be permanently stale relative
+ * to the live UI state.
+ *
+ * Storing the accessor in `_documentProps` and resolving it at
+ * extraction time means every `extractDocumentTree` call (one per
+ * export click) reads the live value. Plain string values still
+ * work as before — `extractDocumentTree` only calls the value if
+ * it's a function.
+ *
+ * @example Plain string
+ * ```tsx
+ * <DocDocument title="My Report" author="Alice">
+ *   ...
+ * </DocDocument>
+ * ```
+ *
+ * @example Reactive accessor (recommended for templates that drive
+ * a live preview AND export the same tree)
+ * ```tsx
+ * function MyTemplate({ resume }: { resume: () => Resume }) {
+ *   return (
+ *     <DocDocument
+ *       title={() => `${resume().name} — Resume`}
+ *       author={() => resume().name}
+ *     >
+ *       ...
+ *     </DocDocument>
+ *   )
+ * }
+ * ```
+ */
 const DocDocument = rocketstyle()({ name: 'DocDocument', component: Element })
   .statics({ _documentType: 'document' as const })
   .attrs<{
-    title?: string
-    author?: string
-    subject?: string
-    tag: string
-    _documentProps: Record<string, unknown>
+    title?: string | (() => string)
+    author?: string | (() => string)
+    subject?: string | (() => string)
   }>((props) => ({
     tag: 'div',
     _documentProps: {
-      ...(props.title ? { title: props.title } : {}),
-      ...(props.author ? { author: props.author } : {}),
-      ...(props.subject ? { subject: props.subject } : {}),
+      // Pass accessor functions through unmodified — extractDocumentTree
+      // resolves them at export time. Plain strings pass through too.
+      // Empty / nullish values are omitted entirely so they don't
+      // appear as `title: undefined` in the export metadata.
+      ...(props.title != null ? { title: props.title } : {}),
+      ...(props.author != null ? { author: props.author } : {}),
+      ...(props.subject != null ? { subject: props.subject } : {}),
     },
   }))
 

package/src/primitives/DocHeading.ts

@@ -21,7 +21,7 @@ const DocHeading = rocketstyle({
     h6: { fontSize: 14, lineHeight: 1.5 },
   })
   .statics({ _documentType: 'heading' as const })
-  .attrs<{ level?: string; tag: string; _documentProps: { level: number } }>((props) => {
+  .attrs<{ level?: string }>((props) => {
     const lvl = props.level ?? 'h1'
     const num = Number.parseInt(String(lvl).replace('h', ''), 10) || 1
     return {

package/src/primitives/DocImage.ts

@@ -9,8 +9,6 @@ const DocImage = rocketstyle()({ name: 'DocImage', component: Element })
     width?: number | string
     height?: number | string
     caption?: string
-    tag: string
-    _documentProps: Record<string, unknown>
   }>((props) => ({
     tag: 'img',
     _documentProps: {

package/src/primitives/DocLink.ts

@@ -7,7 +7,7 @@ const DocLink = rocketstyle()({ name: 'DocLink', component: Text })
     textDecoration: 'underline',
   })
   .statics({ _documentType: 'link' as const })
-  .attrs<{ href?: string; tag: string; _documentProps: { href: string } }>((props) => ({
+  .attrs<{ href?: string }>((props) => ({
     tag: 'a',
     _documentProps: { href: props.href ?? '#' },
   }))

package/src/primitives/DocList.ts

@@ -7,7 +7,7 @@ const DocList = rocketstyle()({ name: 'DocList', component: Element })
     paddingLeft: 20,
   })
   .statics({ _documentType: 'list' as const })
-  .attrs<{ ordered?: boolean; tag: string; _documentProps: Record<string, unknown> }>((props) => ({
+  .attrs<{ ordered?: boolean }>((props) => ({
     tag: props.ordered ? 'ol' : 'ul',
     _documentProps: props.ordered ? { ordered: props.ordered } : {},
   }))

package/src/primitives/DocListItem.ts

@@ -7,7 +7,7 @@ const DocListItem = rocketstyle()({ name: 'DocListItem', component: Text })
     lineHeight: 1.5,
   })
   .statics({ _documentType: 'list-item' as const })
-  .attrs<{ tag: string; _documentProps: Record<string, unknown> }>((_props) => ({
+  .attrs(() => ({
     tag: 'li',
     _documentProps: {},
   }))

package/src/primitives/DocPage.ts

@@ -10,8 +10,6 @@ const DocPage = rocketstyle()({ name: 'DocPage', component: Element })
   .attrs<{
     size?: string
     orientation?: string
-    tag: string
-    _documentProps: Record<string, unknown>
   }>((props) => ({
     tag: 'div',
     _documentProps: {

package/src/primitives/DocPageBreak.ts

@@ -3,7 +3,7 @@ import rocketstyle from '@pyreon/rocketstyle'
 
 const DocPageBreak = rocketstyle()({ name: 'DocPageBreak', component: Element })
   .statics({ _documentType: 'page-break' as const })
-  .attrs<{ tag: string; _documentProps: Record<string, unknown> }>((_props) => ({
+  .attrs(() => ({
     tag: 'div',
     _documentProps: {},
   }))

package/src/primitives/DocQuote.ts

@@ -9,11 +9,9 @@ const DocQuote = rocketstyle()({ name: 'DocQuote', component: Element })
     color: '#666666',
   })
   .statics({ _documentType: 'quote' as const })
-  .attrs<{ borderColor?: string; tag: string; _documentProps: Record<string, unknown> }>(
-    (props) => ({
-      tag: 'blockquote',
-      _documentProps: props.borderColor ? { borderColor: props.borderColor } : {},
-    }),
-  )
+  .attrs<{ borderColor?: string }>((props) => ({
+    tag: 'blockquote',
+    _documentProps: props.borderColor ? { borderColor: props.borderColor } : {},
+  }))
 
 export default DocQuote

package/src/primitives/DocRow.ts

@@ -1,13 +1,18 @@
 import { Element } from '@pyreon/elements'
 import rocketstyle from '@pyreon/rocketstyle'
 
+/**
+ * Horizontal row of inline children. Per project conventions, layout
+ * props (`direction`, `gap`) live in `.attrs()`, not `.theme()`. The
+ * Element base accepts `direction: 'inline' | 'rows' | 'reverseInline'
+ * | 'reverseRows'` — `'row'` is not a valid value.
+ */
 const DocRow = rocketstyle()({ name: 'DocRow', component: Element })
-  .theme({
-    direction: 'row',
-  })
   .statics({ _documentType: 'row' as const })
-  .attrs<{ tag: string; _documentProps: Record<string, unknown> }>((_props) => ({
+  .attrs(() => ({
     tag: 'div',
+    direction: 'inline' as const,
+    gap: 8,
     _documentProps: {},
   }))
 

package/src/primitives/DocSection.ts

@@ -15,7 +15,7 @@ const DocSection = rocketstyle({
     row: { direction: 'row' },
   })
   .statics({ _documentType: 'section' as const })
-  .attrs<{ direction?: string; tag: string; _documentProps: { direction: string } }>((props) => ({
+  .attrs<{ direction?: string }>((props) => ({
     tag: 'div',
     _documentProps: { direction: props.direction ?? 'column' },
   }))

package/src/primitives/DocSpacer.ts

@@ -3,7 +3,7 @@ import rocketstyle from '@pyreon/rocketstyle'
 
 const DocSpacer = rocketstyle()({ name: 'DocSpacer', component: Element })
   .statics({ _documentType: 'spacer' as const })
-  .attrs<{ height?: number; tag: string; _documentProps: { height: number } }>((props) => ({
+  .attrs<{ height?: number }>((props) => ({
     tag: 'div',
     _documentProps: { height: props.height ?? 16 },
   }))

package/src/primitives/DocTable.ts

@@ -1,6 +1,24 @@
 import { Element } from '@pyreon/elements'
 import rocketstyle from '@pyreon/rocketstyle'
 
+/**
+ * Tabular data primitive.
+ *
+ * The `columns`, `rows`, `headerStyle`, `striped`, `bordered`, and
+ * `caption` props are document-export metadata — they belong in
+ * `_documentProps` only and must NOT be forwarded to the rendered
+ * `<table>` element. The `filter` option on `.attrs()` strips them
+ * from the props that flow into the DOM.
+ *
+ * Why this matters: HTMLTableElement's `rows` property is a
+ * read-only `HTMLCollection` of `<tr>` elements. If `rows` were
+ * forwarded as a DOM attr, the runtime would call
+ * `el.rows = [...]` and crash with
+ * `TypeError: Cannot set property rows of [object Object] which has
+ * only a getter`. Same family for `columns` (`HTMLTableColElement`'s
+ * column collection on parent table). Filtering them at the
+ * rocketstyle layer keeps the DOM render path clean.
+ */
 const DocTable = rocketstyle({
   dimensions: {
     variants: 'variant',
@@ -19,18 +37,21 @@ const DocTable = rocketstyle({
     striped?: boolean
     bordered?: boolean
     caption?: string
-    tag: string
-    _documentProps: Record<string, unknown>
-  }>((props) => ({
-    tag: 'table',
-    _documentProps: {
-      columns: props.columns ?? [],
-      rows: props.rows ?? [],
-      ...(props.headerStyle ? { headerStyle: props.headerStyle } : {}),
-      ...(props.striped ? { striped: props.striped } : {}),
-      ...(props.bordered ? { bordered: props.bordered } : {}),
-      ...(props.caption ? { caption: props.caption } : {}),
+  }>(
+    (props) => ({
+      tag: 'table',
+      _documentProps: {
+        columns: props.columns ?? [],
+        rows: props.rows ?? [],
+        ...(props.headerStyle ? { headerStyle: props.headerStyle } : {}),
+        ...(props.striped ? { striped: props.striped } : {}),
+        ...(props.bordered ? { bordered: props.bordered } : {}),
+        ...(props.caption ? { caption: props.caption } : {}),
+      },
+    }),
+    {
+      filter: ['columns', 'rows', 'headerStyle', 'striped', 'bordered', 'caption'],
     },
-  }))
+  )
 
 export default DocTable

package/src/primitives/DocText.ts

@@ -23,11 +23,7 @@ const DocText = rocketstyle({
     bold: { fontWeight: 'bold' },
   })
   .statics({ _documentType: 'text' as const })
-  // .attrs(
-  //   (props: any) =>
-  //     ({
-  //       tag: "p",
-  .attrs<{ tag: string; _documentProps: Record<string, unknown> }>((_props) => ({
+  .attrs(() => ({
     tag: 'p',
     _documentProps: {},
   }))

package/src/useDocumentExport.ts

@@ -13,6 +13,45 @@ export interface DocumentExport {
   getDocNode: () => DocNode
 }
 
+/**
+ * One-step helper: extract a DocNode tree from a template function.
+ *
+ * Equivalent to `createDocumentExport(templateFn).getDocNode()` but
+ * without the wrapper-object indirection. Use this when you just
+ * need the tree to feed into `@pyreon/document`'s `render()` or
+ * `download()` — which is the only thing the wrapper object was
+ * ever used for in practice.
+ *
+ * ```ts
+ * import { extractDocNode } from '@pyreon/document-primitives'
+ * import { download } from '@pyreon/document'
+ *
+ * function ResumeTemplate({ resume }: { resume: () => Resume }) {
+ *   return (
+ *     <DocDocument title={() => `${resume().name} — Resume`}>
+ *       <DocPage>...</DocPage>
+ *     </DocDocument>
+ *   )
+ * }
+ *
+ * // Export click handler:
+ * const tree = extractDocNode(() => <ResumeTemplate resume={store.resume} />)
+ * await download(tree, 'resume.pdf')
+ * ```
+ *
+ * The two-step `createDocumentExport` form is still exported for
+ * backward compatibility and for callers that want to pass the
+ * helper object around (e.g. to wrapper components that take a
+ * `DocumentExport` instance). New code should prefer this one-step
+ * form unless you specifically need the helper object.
+ */
+export function extractDocNode(
+  templateFn: () => unknown,
+  options: DocumentExportOptions = {},
+): DocNode {
+  return extractDocumentTree(templateFn(), options)
+}
+
 /**
  * Create a document export helper from a template function.
  *
@@ -31,17 +70,15 @@ export interface DocumentExport {
  * // Pass to @pyreon/document's render() for any format
  * ```
  *
- * When @pyreon/document is published, this will also expose
- * convenience methods like toPdf(), toDocx(), download(), etc.
+ * **Most consumers should use `extractDocNode(templateFn)` instead**
+ * — it's the same operation in one call without the wrapper
+ * object. `createDocumentExport` is kept for callers that want to
+ * pass the helper object around.
  */
 export function createDocumentExport(
   templateFn: () => unknown,
   options: DocumentExportOptions = {},
 ): DocumentExport {
-  const getDocNode = (): DocNode => {
-    const vnode = templateFn()
-    return extractDocumentTree(vnode, options)
-  }
-
+  const getDocNode = (): DocNode => extractDocNode(templateFn, options)
   return { getDocNode }
 }