@jxsuite/compiler 1.3.0 → 1.5.0

package/src/targets/compile-element.ts

@@ -11,12 +11,16 @@ import {
   compileExpression,
   compileStatements,
   emitFormulaFn,
+  emitRequestFetch,
   escapeHtml,
   isMutating,
   isSchemaOnly,
+  PREFORMATTED_TAGS,
+  srcImportBinding,
   tagNameToClassName,
 } from "../shared.ts";
 import {
+  bodyReturnsValue,
   hasStructuredBody,
   isExpressionDef,
   isFunctionDef,
@@ -34,6 +38,7 @@ import type {
   JxFunctionDef,
   JxMappedArray,
   JxMutableNode,
+  JxPrototypeDef,
   JxStyle,
 } from "@jxsuite/schema/types";
 
@@ -248,6 +253,68 @@ function extractInitialValue(def: JxMutableNode) {
   return JSON.stringify(def);
 }
 
+/** Lifecycle hooks the generated element calls itself, so they are never `$ref`'d (spec.md §16.4). */
+const LIFECYCLE_KEYS = new Set(["onMount", "onUnmount", "onAdopted"]);
+
+/**
+ * Collect the state keys a document uses as a _callable_, at any depth: bound to an `on*` event,
+ * invoked by an `$expression` `call` node, or called as `state.key(…)` from a template string or
+ * another function's body.
+ *
+ * A bodyless `$src` Function carries no body to classify by, and unlike the interpreter — which
+ * introspects the imported function — a compiler only has the document to go on. Anything not used
+ * as a callable has its return value read reactively, and so becomes a computed (spec.md §5.3 4b).
+ * Defaulting the other way round would turn a called helper into a value and break its call site.
+ *
+ * @param {JxDocument} doc
+ * @returns {Set<string>}
+ */
+function collectCallableRefs(doc: JxDocument) {
+  const keys = new Set<string>();
+  const seen = new Set<object>();
+
+  const addStateRef = (ref: unknown) => {
+    if (typeof ref === "string" && ref.startsWith("#/state/")) {
+      keys.add(ref.slice("#/state/".length).split("/")[0] as string);
+    }
+  };
+
+  const visit = (node: unknown) => {
+    if (typeof node === "string") {
+      // `${state.formatDate(d)}` in a template, or `state.helper(x)` in another function's body.
+      for (const call of node.matchAll(/\bstate\.([A-Za-z_$][\w$]*)\s*\(/g)) {
+        keys.add(call[1] as string);
+      }
+      return;
+    }
+    if (!node || typeof node !== "object" || seen.has(node)) {
+      return;
+    }
+    seen.add(node);
+    if (Array.isArray(node)) {
+      for (const item of node) {
+        visit(item);
+      }
+      return;
+    }
+    const record = node as Record<string, unknown>;
+    // An `$expression` `call` node names its callee in `target` (spec.md §19.4c).
+    if (record.operator === "call" && isRef(record.target)) {
+      addStateRef((record.target as { $ref: string }).$ref);
+    }
+    for (const [key, val] of Object.entries(record)) {
+      if (key.startsWith("on") && key !== "observedAttributes" && isRef(val)) {
+        addStateRef(val.$ref);
+      }
+      visit(val);
+    }
+  };
+
+  visit(doc.children);
+  visit(doc.state);
+  return keys;
+}
+
 /**
  * Generate a complete ES module string for a custom element.
  *
@@ -282,7 +349,7 @@ export function emitElementModule(
       if (!srcImportMap.has(srcPath)) {
         srcImportMap.set(srcPath, []);
       }
-      (srcImportMap.get(srcPath) as string[]).push(key);
+      (srcImportMap.get(srcPath) as string[]).push(srcImportBinding(key, d));
     }
   }
   for (const [srcPath, names] of srcImportMap) {
@@ -292,12 +359,24 @@ export function emitElementModule(
     lines.push(`import { ${names.join(", ")} } from '${importPath}';`);
   }
 
+  // `$prototype: "Request"` entries each get an auto-fetch effect in connectedCallback, plus the
+  // Machinery to stop those effects again on disconnect. Both are emitted only when one exists, so
+  // Documents without a Request produce exactly the same module as before.
+  const requestEntries = Object.entries(defs).filter(([, def]) => {
+    const d = def as JxMutableNode;
+    return Boolean(d) && typeof d === "object" && !Array.isArray(d) && d.$prototype === "Request";
+  });
+
   lines.push(
-    `import { reactive, computed, effect } from '@vue/reactivity';`,
+    `import { reactive, computed, effect, stop } from '@vue/reactivity';`,
     `import { render, html } from 'lit-html';`,
     "",
     `class ${className} extends HTMLElement {`,
-    "  #dispose = null;",
+    // One registry for every effect the element creates — render, dynamic host styles, Request
+    // Auto-fetches. Calling an @vue/reactivity runner re-runs it, so teardown has to be `stop()`,
+    // And a single list keeps every effect on the same lifecycle instead of leaking the ones nobody
+    // Held a handle to.
+    "  #effects = [];",
     "",
     // Constructor: build reactive state
     "  constructor() {",
@@ -309,6 +388,7 @@ export function emitElementModule(
   const functionEntries: [string, JxExpressionDef | JxFunctionDef][] = [];
 
   const formulaEntries: [string, JxExpressionDef][] = [];
+  const callableRefs = collectCallableRefs(doc);
   for (const [key, def] of Object.entries(defs)) {
     const d = def as JxMutableNode;
     if (isExpressionDef(d)) {
@@ -321,7 +401,16 @@ export function emitElementModule(
         computedEntries.push([key, d]);
       }
     } else if (isFunctionDef(d)) {
-      if (typeof d.body === "string" && d.body.includes("return")) {
+      if (d.$src && typeof d.body !== "string") {
+        // Bodyless `$src` entry — classify by document usage, not by an absent body. `body` and
+        // `$src` are mutually exclusive (spec.md §5.3 4d), so this is the only shape a
+        // Spec-conformant external Function takes.
+        if (callableRefs.has(key) || LIFECYCLE_KEYS.has(key)) {
+          functionEntries.push([key, d]);
+        } else {
+          computedEntries.push([key, d]);
+        }
+      } else if (typeof d.body === "string" && bodyReturnsValue(d.body)) {
         computedEntries.push([key, d]);
       } else {
         functionEntries.push([key, d]);
@@ -364,15 +453,35 @@ export function emitElementModule(
     } else {
       const args = def.parameters ? paramNames(def.parameters) : (def.arguments ?? ["state"]);
       const paramList = args.join(", ");
-      if (def.$src) {
-        // $src function — wrap imported function so it receives state
-        lines.push(`    this.state.${key} = (${paramList}) => ${key}(${paramList});`);
+      const body = typeof def.body === "string" ? def.body : "";
+      // Every call site invokes a state function as `(state, event)` — the template's
+      // `s.fn(s, e)`, `onMount`, `onUnmount`. Declared names that already start with `state` line
+      // Up positionally, so they are emitted directly. Any other declaration — including the
+      // `"parameters": ["event"]` form that examples/components/{todo-app,fetch-demo}.json use — is
+      // Mapped onto the arguments by name, the way the client target does it
+      // (compile-client.ts), with `state` bound as the outer parameter so a body referencing bare
+      // `state` resolves regardless of the declared arity.
+      if (args[0] === "state") {
+        if (def.$src) {
+          // $src function — wrap imported function so it receives state
+          lines.push(`    this.state.${key} = (${paramList}) => ${key}(${paramList});`);
+        } else {
+          lines.push(`    this.state.${key} = (${paramList}) => {`, `      ${body}`, "    };");
+        }
       } else {
-        lines.push(
-          `    this.state.${key} = (${paramList}) => {`,
-          `      ${typeof def.body === "string" ? def.body : ""}`,
-          "    };",
-        );
+        const callArgs = args.map((a: string) => (a === "state" ? "state" : "e")).join(", ");
+        if (def.$src) {
+          lines.push(`    this.state.${key} = (state, e) => ${key}(${callArgs});`);
+        } else {
+          lines.push(
+            `    this.state.${key} = (state, e) => {`,
+            `      const _fn = (${paramList}) => {`,
+            `        ${body}`,
+            "      };",
+            `      return _fn(${callArgs});`,
+            "    };",
+          );
+        }
       }
     }
   }
@@ -441,6 +550,17 @@ export function emitElementModule(
     "      } catch {}",
     "      this.removeAttribute('data-jx-props');",
     "    }",
+    // Literal `props.*` attributes — the live-render mirror of the build-time lift in site-build.
+    // String values only: HTML lowercases attribute names, so a state key must be lowercase to match.
+    // Names are collected first because removing while iterating the live NamedNodeMap skips entries.
+    "    const _pn = this.getAttributeNames().filter(n => n.startsWith('props.') && n.length > 6);",
+    "    for (const _n of _pn) {",
+    "      const _k = _n.slice(6);",
+    "      if (_k in this.state) {",
+    "        this.state[_k] = this.getAttribute(_n);",
+    "        this.removeAttribute(_n);",
+    "      }",
+    "    }",
     // Merge JS properties set before connection (by parent runtime).
     // Only check own properties to avoid inherited DOM properties like `title`.
     "    for (const key of Object.keys(this.state)) {",
@@ -449,6 +569,20 @@ export function emitElementModule(
     "      }",
     "    }",
   );
+
+  // `$prototype: "Request"` entries fetch on connect — after the `$props`/property merge above, so
+  // A template `url` interpolates the values the parent passed in rather than the initial ones.
+  // Runners are collected so disconnectedCallback can stop them: a reactive URL would otherwise
+  // Keep fetching after removal, and every re-insertion would stack another effect on top.
+  for (const [key, def] of requestEntries) {
+    lines.push(
+      emitRequestFetch(key, def as unknown as JxPrototypeDef, {
+        collect: "this.#effects",
+        indent: "    ",
+        statePrefix: "this.state",
+      }),
+    );
+  }
   if (doc.style && typeof doc.style === "object") {
     const dynamicStyles: [string, string][] = [];
     for (const [prop, value] of Object.entries(doc.style)) {
@@ -470,7 +604,7 @@ export function emitElementModule(
       }
     }
     if (dynamicStyles.length > 0) {
-      lines.push("    effect(() => {");
+      lines.push("    this.#effects.push(effect(() => {");
       for (const [cssProp, value] of dynamicStyles) {
         const expr = value.replaceAll(
           /\$\{([^}]+)\}/g,
@@ -478,7 +612,7 @@ export function emitElementModule(
         );
         lines.push(`      this.style['${cssProp}'] = \`${expr}\`;`);
       }
-      lines.push("    });");
+      lines.push("    }));");
     }
   }
   const hasSlot = treeHasSlot(doc.children);
@@ -493,7 +627,7 @@ export function emitElementModule(
     "      this.removeAttribute('data-jx-prerendered');",
     "    }",
     "    this.innerHTML = '';",
-    "    this.#dispose = effect(() => render(this.template(), this));",
+    "    this.#effects.push(effect(() => render(this.template(), this)));",
   );
   if (hasSlot) {
     // Replace <slot> placeholder with saved slotted content
@@ -514,7 +648,8 @@ export function emitElementModule(
     "",
     // DisconnectedCallback
     "  disconnectedCallback() {",
-    "    if (this.#dispose) { this.#dispose(); this.#dispose = null; }",
+    "    for (const _e of this.#effects) { stop(_e); }",
+    "    this.#effects.length = 0;",
     "    if (typeof this.state.onUnmount === 'function') { this.state.onUnmount(this.state); }",
     "  }",
     "}",
@@ -532,12 +667,15 @@ export function emitElementModule(
  * @param {JxMutableNode["children"]} children
  * @param {JxStyle | null | undefined} parentStyle
  * @param {string} indent
+ * @param {boolean} [preformatted]
  * @returns {string}
  */
 function emitLitChildren(
   children: JxMutableNode["children"],
   _parentStyle: JxStyle | null | undefined,
   indent: string,
+  preformatted = false,
+  inMap = false,
 ) {
   if (!children) {
     return "";
@@ -555,17 +693,25 @@ function emitLitChildren(
   // Mixed children: elements/text plus array pseudo-elements expanded inline among siblings.
   return children
     .map((child: JxMutableNode | string) =>
-      isMappedArray(child) ? emitMappedArray(child, indent) : emitLitNode(child, indent),
+      isMappedArray(child)
+        ? emitMappedArray(child, indent)
+        : emitLitNode(child, preformatted ? "" : indent, preformatted, inMap),
     )
-    .join("\n");
+    .join(preformatted ? "" : "\n");
 }
 
 /**
  * @param {JxMutableNode | string} def
  * @param {string} indent
+ * @param {boolean} [preformatted]
  * @returns {string}
  */
-function emitLitNode(def: JxMutableNode | string, indent: string) {
+function emitLitNode(
+  def: JxMutableNode | string,
+  indent: string,
+  preformatted = false,
+  inMap = false,
+) {
   // String children are text nodes
   if (typeof def === "string") {
     if (def.includes("${")) {
@@ -581,6 +727,8 @@ function emitLitNode(def: JxMutableNode | string, indent: string) {
   }
 
   const tag = def.tagName ?? "div";
+  // `white-space` inherits, so once inside a <pre> the whole subtree stays whitespace-significant.
+  const inPre = preformatted || PREFORMATTED_TAGS.has(tag);
 
   const parts: string[] = [];
 
@@ -596,11 +744,14 @@ function emitLitNode(def: JxMutableNode | string, indent: string) {
     }
   }
 
+  // `id`/`className` take the same template rewriting as every other attribute — inside a map
+  // These routinely carry `${$map.item…}`/`${$map.index}`, which emitMappedArray already rewrites
+  // On the map root but nothing rewrote on its descendants.
   if (def.id) {
-    parts.push(`id="${def.id}"`);
+    parts.push(`id="${toLitExpr(String(def.id))}"`);
   }
   if (def.className) {
-    parts.push(`class="${def.className}"`);
+    parts.push(`class="${toLitExpr(String(def.className))}"`);
   }
 
   for (const [key, val] of Object.entries(def)) {
@@ -631,12 +782,21 @@ function emitLitNode(def: JxMutableNode | string, indent: string) {
     for (const [key, val] of Object.entries(def.$props)) {
       if (val && typeof val === "object" && (val as JxMutableNode).$ref) {
         parts.push(`.${key}="\${${refToExpr((val as JxMutableNode).$ref as string)}}"`);
+      } else if (typeof val === "string" && val.includes("${")) {
+        // A template value is a binding, not text. JSON-quoting it emitted the template's own source
+        // As the prop value (`.label="${"${state.x}"}"`), so the component received the literal
+        // String `${state.x}` forever.
+        parts.push(`.${key}="${toLitExpr(val)}"`);
       } else {
         parts.push(`.${key}="\${${JSON.stringify(val)}}"`);
       }
     }
   }
 
+  // A handler bound inside a map publishes its iteration to state before running, matching the
+  // Interpreter's child scope and the client target's handler wrapper. Bodies read it as
+  // `state.$map.index` / `state.$map.item`.
+  const mapCtx = inMap ? "s.$map = $map; " : "";
   for (const [key, val] of Object.entries(def)) {
     if (!key.startsWith("on") || key === "observedAttributes") {
       continue;
@@ -644,7 +804,9 @@ function emitLitNode(def: JxMutableNode | string, indent: string) {
     const eventName = key.slice(2).toLowerCase();
     if (val && typeof val === "object" && (val as JxMutableNode).$ref) {
       parts.push(
-        `@${eventName}="\${(e) => ${refToExpr((val as JxMutableNode).$ref as string)}(s, e)}"`,
+        mapCtx
+          ? `@${eventName}="\${(e) => { ${mapCtx}${refToExpr((val as JxMutableNode).$ref as string)}(s, e); }}"`
+          : `@${eventName}="\${(e) => ${refToExpr((val as JxMutableNode).$ref as string)}(s, e)}"`,
       );
     } else if (val && typeof val === "object" && "$expression" in /** @type {any} */ val) {
       const compiled = compileExpression(
@@ -654,9 +816,9 @@ function emitLitNode(def: JxMutableNode | string, indent: string) {
           statePrefix: "s",
         },
       );
-      parts.push(`@${eventName}="\${(e) => { ${compiled}; }}"`);
+      parts.push(`@${eventName}="\${(e) => { ${mapCtx}${compiled}; }}"`);
     } else if (isFunctionDef(val)) {
-      parts.push(`@${eventName}="\${(e) => { ${inlineHandlerBody(val)} }}"`);
+      parts.push(`@${eventName}="\${(e) => { ${mapCtx}${inlineHandlerBody(val)} }}"`);
     }
   }
 
@@ -682,7 +844,7 @@ function emitLitNode(def: JxMutableNode | string, indent: string) {
       if (!caseDef || isRef(caseDef)) {
         continue;
       }
-      const renderedCase = emitLitNode(caseDef, `${indent}  `);
+      const renderedCase = emitLitNode(caseDef, `${indent}  `, false, inMap);
       caseEntries.push(`  ${JSON.stringify(key)}: html\`\n${renderedCase}\n  \``);
     }
     inner = `\${{\n${caseEntries.join(",\n")}\n}[${switchExpr}]}`;
@@ -691,10 +853,15 @@ function emitLitNode(def: JxMutableNode | string, indent: string) {
   } else if (def.innerHTML !== undefined) {
     inner = def.innerHTML;
   } else if (def.children) {
-    inner = `\n${emitLitChildren(def.children, def.style, `${indent}  `)}\n${indent}`;
+    inner = inPre
+      ? emitLitChildren(def.children, def.style, "", true, inMap)
+      : `\n${emitLitChildren(def.children, def.style, `${indent}  `, false, inMap)}\n${indent}`;
   }
 
-  return `${indent}<${tag}${attrsStr}\n${indent}>${inner}</${tag}>`;
+  // Inside a <pre>, the newline before `>` would land in the element's own text.
+  return inPre
+    ? `<${tag}${attrsStr}>${inner}</${tag}>`
+    : `${indent}<${tag}${attrsStr}\n${indent}>${inner}</${tag}>`;
 }
 
 /**
@@ -713,10 +880,35 @@ function emitMappedArray(arrayDef: JxMappedArray, indent: string) {
   const tag = mapDef.tagName ?? "div";
   const parts: string[] = [];
 
+  // The map root gets the same attribute treatment as any other element (emitLitNode above);
+  // `${item…}`/`${index…}` templates resolve against the map callback's own parameters.
+  if (mapDef.attributes) {
+    for (const [key, val] of Object.entries(mapDef.attributes)) {
+      if (val && typeof val === "object" && isRef(val)) {
+        parts.push(`${key}="\${${mapRefToExpr(val.$ref)}}"`);
+      } else if (typeof val === "string" && val.includes("${")) {
+        parts.push(`${key}="${toLitExpr(val)}"`);
+      } else {
+        parts.push(`${key}="${val}"`);
+      }
+    }
+  }
+
+  if (mapDef.id) {
+    parts.push(`id="${toLitExpr(String(mapDef.id))}"`);
+  }
+  if (mapDef.className) {
+    parts.push(`class="${toLitExpr(String(mapDef.className))}"`);
+  }
+
   if (mapDef.$props) {
     for (const [key, val] of Object.entries(mapDef.$props)) {
       if (isRef(val)) {
         parts.push(`.${key}="\${${mapRefToExpr(val.$ref)}}"`);
+      } else if (typeof val === "string" && val.includes("${")) {
+        // `$props: { label: "${$map.item.name}" }` is the ordinary way to pass per-item data to a
+        // Component in a list; JSON-quoting it handed over the template source instead.
+        parts.push(`.${key}="${toLitExpr(val)}"`);
       } else {
         parts.push(`.${key}="\${${JSON.stringify(val)}}"`);
       }
@@ -734,13 +926,13 @@ function emitMappedArray(arrayDef: JxMappedArray, indent: string) {
     }
     const eventName = key.slice(2).toLowerCase();
     if (isRef(val)) {
-      parts.push(`@${eventName}="\${(e) => ${refToExpr(val.$ref)}(s, e)}"`);
+      parts.push(`@${eventName}="\${(e) => { s.$map = $map; ${refToExpr(val.$ref)}(s, e); }}"`);
     } else if (isExpressionDef(val)) {
       const compiled = compileExpression(val.$expression as ExpressionNode, {
         eventParam: "e",
         statePrefix: "s",
       });
-      parts.push(`@${eventName}="\${(e) => { ${compiled}; }}"`);
+      parts.push(`@${eventName}="\${(e) => { s.$map = $map; ${compiled}; }}"`);
     }
   }
 
@@ -750,10 +942,24 @@ function emitMappedArray(arrayDef: JxMappedArray, indent: string) {
   if (mapDef.textContent !== undefined) {
     inner = toLitTextContent(mapDef.textContent);
   } else if (mapDef.children) {
-    inner = `\n${emitLitChildren(mapDef.children, null, `${indent}      `)}\n${indent}    `;
+    inner = `\n${emitLitChildren(mapDef.children, null, `${indent}      `, false, true)}\n${indent}    `;
   }
 
-  return `${indent}\${${itemsExpr}.map((item, index) => html\`\n${indent}  <${tag}${attrsStr}\n${indent}  >${inner}</${tag}>\n${indent}\`)}`;
+  const body = `html\`\n${indent}  <${tag}${attrsStr}\n${indent}  >${inner}</${tag}>\n${indent}\``;
+
+  // `${$map.item…}` and `${$map.index}` are spec-sanctioned template forms: spec.md §6.6 names
+  // `$map` alongside `item`/`index` as an iteration binding, and the interpreter passes it into the
+  // Template evaluator as a real parameter. The compiled callback bound only `item`/`index`, so
+  // Every such template survived into the module as a dead `$map` reference and threw at render.
+  // Binding the same object here resolves every access form — `$map.item`, `$map?.item`,
+  // `$map["item"]` — and nests correctly, since an inner map shadows the outer binding exactly as
+  // The interpreter's child scope does. Emitted only when referenced, so output is otherwise
+  // Unchanged.
+  const callback = body.includes("$map")
+    ? `(item, index) => { const $map = { item, index }; return ${body}; }`
+    : `(item, index) => ${body}`;
+
+  return `${indent}\${${itemsExpr}.map(${callback})}`;
 }
 
 /**
@@ -828,6 +1034,15 @@ function inlineHandlerBody(def: JxFunctionDef) {
     });
   }
   const body = typeof def.body === "string" ? def.body : "";
+  const declared = def.parameters ? paramNames(def.parameters) : (def.arguments ?? []);
+  if (declared.length > 0) {
+    // The call site supplies only `(e)`, so map the declared names onto the arguments the handler
+    // Actually has — `state` to the `s` alias, anything else to the event. Binding by name means the
+    // Body needs no textual rewriting, and a declared `event` stops silently resolving to the
+    // Deprecated `window.event` global (any other declared name threw ReferenceError outright).
+    const args = declared.map((name: string) => (name === "state" ? "s" : "e")).join(", ");
+    return `((${declared.join(", ")}) => { ${body} })(${args});`;
+  }
   return body.replaceAll(/(?<!this\.)state\./g, "s.").replaceAll(/(?<!this\.)state(?!\.)/g, "s");
 }
 

package/src/targets/compile-static.ts

@@ -7,11 +7,13 @@
 
 import {
   buildAttrs,
+  childSeparator,
   colorSchemePrePaintScript,
   compileStyles,
   createCompileContext,
   escapeHtml,
   isNodeDynamic,
+  PREFORMATTED_TAGS,
   pureSchemeOf,
   resolveStaticValue,
   SELF_CLOSING,
@@ -127,6 +129,7 @@ function compileNode(
     scope: Record<string, unknown> | null;
     scopeDefs: Record<string, unknown>;
     media: Record<string, string>;
+    preformatted?: boolean;
   },
   islands: { def: JxMutableNode; tagName: string; className: string }[],
 ): string {
@@ -166,7 +169,9 @@ function compileNode(
     return `<${tag}${attrs}>`;
   }
 
-  const inner = buildInnerWithIslands(def, raw, nextContext, islands);
+  // `white-space` inherits, so once inside a <pre> the whole subtree stays whitespace-significant.
+  const preformatted = context.preformatted === true || PREFORMATTED_TAGS.has(tag);
+  const inner = buildInnerWithIslands(def, raw, { ...nextContext, preformatted }, islands);
 
   return `<${tag}${attrs}>${inner}</${tag}>`;
 }
@@ -188,6 +193,7 @@ function buildInnerWithIslands(
     scope: Record<string, unknown> | null;
     scopeDefs: Record<string, unknown>;
     media: Record<string, string>;
+    preformatted?: boolean;
   },
   islands: { def: JxMutableNode; tagName: string; className: string }[],
 ): string {
@@ -209,7 +215,7 @@ function buildInnerWithIslands(
         const childRaw = (rawChildren?.[i] ?? c) as JxMutableNode;
         return compileNode(child, childDynamic, childRaw, context, islands);
       })
-      .join("\n  ");
+      .join(childSeparator(context.preformatted));
   }
   return "";
 }