azoxjs 0.1.0 → 0.2.0

package/core/compiler/compileToJs.js

@@ -3,37 +3,243 @@
 // its own effect — no Virtual DOM tree, no diffing. A signal update
 // touches exactly the text node or attribute it owns.
 
-import { relative, dirname, resolve } from 'node:path';
+// This module has no Node built-ins on purpose: it runs unchanged in
+// the browser, which is what makes the playground possible. Anything
+// that needs to know about paths on disk belongs in build.js.
 
 let uid = 0;
 const nextId = () => `_el${uid++}`;
 
-// sourcePath: absolute path of the .azox file being compiled.
-// outPath: absolute path of the client module being written.
 // runtimeSpecifier: how the emitted module should import the Azox
-//   runtime — a bare "azox/reactivity" for user projects, or a
-//   relative path when compiling inside the framework itself.
-//
-// Relative import specifiers in the user's <script> are resolved
-// against sourcePath and re-expressed relative to outPath, since
-// compiled output lives in .azox/build/, not next to the page.
-// Bare specifiers are left untouched for the resolver to handle.
-export function compileToModule(ast, { sourcePath, outPath, runtimeSpecifier }) {
+//   runtime — a relative path to the copied runtime for a build, or
+//   whatever the playground wants to point at.
+// rewriteImports: optional hook the build uses to rebase the user's
+//   own relative imports, since compiled output lives in
+//   .azox/build/ rather than next to the page. Called as
+//   (script, sourcePath) — an import hoisted out of a component is
+//   relative to that component, not to the page. The playground has
+//   no output directory, so it omits this.
+// inlineModules: values the build already loaded, as local name →
+//   value, whose import must not reach the browser. A JSON import
+//   points outside the build directory at a file that is never
+//   deployed, so the value is emitted as a constant instead.
+export function compileToModule(ast, { runtimeSpecifier, rewriteImports, inlineModules }) {
   uid = 0;
   const statements = [];
   const rootVar = emitNode(ast.markup, statements, 'root');
-  const script = rebaseImports(dropComponentImports(ast.script), dirname(sourcePath), outPath);
+
+  let script = dropComponentImports(ast.script);
+  if (rewriteImports) script = rewriteImports(script);
+
+  // A page with no bindings and no listeners has nothing to hydrate:
+  // the server-rendered markup is already the finished page. Leaving
+  // it alone avoids a pointless rebuild, and avoids destroying nodes
+  // that other scripts on the page may be holding.
+  const isStatic = !statements.some(
+    (line) =>
+      line.startsWith('effect(') || line.includes('.addEventListener(')
+  );
+
+  // Stateful components keep their logic inside a scope function, but
+  // their imports cannot live there, so the resolver hoisted them,
+  // each carrying the file it was written in. They need the same path
+  // rewriting the page's own imports get — but relative to their own
+  // file, not the page's — then merging with them: declaring the same
+  // binding twice is a syntax error.
+  let hoisted = (ast.componentImports ?? [])
+    // An inlined import becomes a constant below, so the statement
+    // must be dropped here too — it would declare the binding twice.
+    .filter((entry) => !isInlined(entry.statement, inlineModules))
+    .map((entry) =>
+      rewriteImports ? rewriteImports(entry.statement, entry.path) : entry.statement
+    );
+
+  // A keyed list disposes the effects of rows that leave, so the
+  // module needs dispose as well as effect.
+  const needsDispose = statements.some((line) => line.includes('dispose('));
+
+  const { imports, body } = mergeImports(
+    script,
+    hoisted,
+    runtimeSpecifier,
+    needsDispose,
+    inlineModules
+  );
+
+  // Narrowed to what the module actually reads, so importing
+  // package.json for a version does not publish the whole file.
+  const inlined = emitInlineModules(inlineModules, [...statements, body].join('\n'));
 
   return `
-import { effect } from '${runtimeSpecifier}';
-${script}
+${imports}
+${inlined}${body}
 
 export function render(mount) {
 ${statements.map((line) => '  ' + line).join('\n')}
   mount.appendChild(${rootVar});
   return ${rootVar};
 }
+${isStatic ? staticNote() : hydrateBlock()}`.trimStart();
+}
+
+// Collects every import the module needs into one set of statements,
+// pulling the page's own imports out of its script so they cannot be
+// duplicated by an identical import hoisted from a component.
+//
+// Named imports from the same specifier are merged into one
+// statement, so `signal` imported by both the page and a component is
+// declared once rather than twice — which would be a syntax error.
+function mergeImports(
+  script,
+  componentImports,
+  runtimeSpecifier,
+  needsDispose = false,
+  inlineModules = null
+) {
+  const pageImports = [...script.matchAll(/^\s*(import\s[^;\n]+;?)\s*$/gm)]
+    .map((m) => m[1].trim())
+    // An inlined import becomes a constant below, so its statement
+    // must not also be emitted — the binding would be declared twice.
+    .filter((line) => !isInlined(line, inlineModules));
+  const body = script.replace(/^\s*import\s[^;\n]+;?\s*$/gm, '').trim();
+
+  // specifier -> set of named bindings; anything not a plain named
+  // import is kept verbatim.
+  const named = new Map();
+  const verbatim = new Set();
+
+  const record = (statement) => {
+    const match = statement.match(/^import\s*\{([^}]*)\}\s*from\s*['"]([^'"]+)['"]/);
+
+    if (!match) {
+      verbatim.add(statement);
+      return;
+    }
+
+    const [, bindings, specifier] = match;
+    const set = named.get(specifier) ?? new Set();
+    for (const binding of bindings.split(',')) {
+      if (binding.trim()) set.add(binding.trim());
+    }
+    named.set(specifier, set);
+  };
+
+  // `effect` is always needed: the compiler emits calls to it.
+  record(`import { effect } from '${runtimeSpecifier}';`);
+  if (needsDispose) record(`import { dispose } from '${runtimeSpecifier}';`);
+  for (const statement of [...componentImports, ...pageImports]) record(statement);
+
+  const lines = [
+    ...[...named].map(([specifier, bindings]) => {
+      return `import { ${[...bindings].join(', ')} } from '${specifier}';`;
+    }),
+    ...verbatim,
+  ];
+
+  return { imports: lines.join('\n'), body };
+}
+
+// An import is inlined when every binding it declares was loaded by
+// the build. Matching on the specifier would be wrong: the same file
+// could be imported for some other reason.
+function isInlined(statement, inlineModules) {
+  if (!inlineModules) return false;
+
+  const match = statement.match(/^import\s+([\s\S]*?)\s+from\s+['"]([^'"]+)['"]/);
+  if (!match) return false;
+
+  const locals = localNames(match[1]);
+  return locals.length > 0 && locals.every((name) => name in inlineModules);
+}
+
+// The local names an import clause declares, for deciding whether the
+// statement has been replaced by constants.
+function localNames(clause) {
+  const text = clause.trim();
+  const names = [];
 
+  const namespace = text.match(/^\*\s+as\s+([A-Za-z_$][\w$]*)$/);
+  if (namespace) return [namespace[1]];
+
+  const braceAt = text.indexOf('{');
+  const head = (braceAt === -1 ? text : text.slice(0, braceAt)).replace(/,\s*$/, '').trim();
+  if (/^[A-Za-z_$][\w$]*$/.test(head)) names.push(head);
+
+  if (braceAt !== -1) {
+    const closeAt = text.lastIndexOf('}');
+    for (const part of text.slice(braceAt + 1, closeAt === -1 ? undefined : closeAt).split(',')) {
+      const entry = part.trim();
+      if (!entry) continue;
+      const aliased = entry.match(/^(.+?)\s+as\s+([A-Za-z_$][\w$]*)$/);
+      const local = (aliased ? aliased[2] : entry).trim();
+      if (/^[A-Za-z_$][\w$]*$/.test(local)) names.push(local);
+    }
+  }
+
+  return names;
+}
+
+// Emits a loaded value as a constant. JSON.stringify is exact for what
+// JSON can hold, which is all this path accepts.
+function emitInlineModules(inlineModules, usage = '') {
+  if (!inlineModules) return '';
+
+  const entries = Object.entries(inlineModules);
+  if (!entries.length) return '';
+
+  const lines = entries.map(
+    ([name, value]) => `const ${name} = ${JSON.stringify(narrow(name, value, usage))};`
+  );
+  return `${lines.join('\n')}\n`;
+}
+
+// Keeps only the properties the module reads by name. A page that
+// imports package.json for its version has no business shipping the
+// author's address to every visitor, and the unread half is dead
+// weight in the bundle.
+//
+// Narrowing applies to a plain object read as `name.prop`. Anything
+// else — a primitive, an array, or a value the code indexes
+// dynamically — is kept whole, since what is needed cannot be known
+// from the source alone.
+function narrow(name, value, usage) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return value;
+
+  const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+  // A dynamic read — name[expr] — could reach any property, and
+  // passing the object on (or spreading it) could read any of them
+  // later. Both mean the whole value has to stay.
+  if (new RegExp(`\\b${escaped}\\s*\\[`).test(usage)) return value;
+  if (new RegExp(`\\.\\.\\.\\s*${escaped}\\b`).test(usage)) return value;
+
+  const read = new Set();
+  for (const match of usage.matchAll(new RegExp(`\\b${escaped}\\.([A-Za-z_$][\\w$]*)`, 'g'))) {
+    read.add(match[1]);
+  }
+
+  // No property read by name at all: the object itself is being used,
+  // so it is kept as it is.
+  if (!read.size) return value;
+
+  const narrowed = {};
+  for (const key of read) {
+    if (key in value) narrowed[key] = value[key];
+  }
+
+  return narrowed;
+}
+
+function staticNote() {
+  return `
+// This page has no bindings and no listeners, so the server-rendered
+// markup is already complete and is left untouched. render() is
+// exported for anyone who wants to mount it somewhere else.
+`;
+}
+
+function hydrateBlock() {
+  return `
 // Hydrate: the SSR markup is already on the page, so clear it and
 // mount the reactive version in its place.
 if (typeof document !== 'undefined') {
@@ -41,7 +247,7 @@ if (typeof document !== 'undefined') {
   mount.innerHTML = '';
   render(mount);
 }
-`.trimStart();
+`;
 }
 
 function emitNode(node, statements, fallbackVar) {
@@ -60,6 +266,10 @@ function emitNode(node, statements, fallbackVar) {
     return varName;
   }
 
+  if (node.type === 'each') return emitEach(node, statements);
+  if (node.type === 'if') return emitIf(node, statements);
+  if (node.type === 'scope') return emitScope(node, statements, fallbackVar);
+
   const varName = nextId();
   statements.push(`const ${varName} = document.createElement(${JSON.stringify(node.name)});`);
 
@@ -72,6 +282,244 @@ function emitNode(node, statements, fallbackVar) {
   return varName;
 }
 
+// A component that declares its own state becomes an immediately
+// called function: its declarations are locals of that call, so two
+// uses of the same component hold two independent sets of them.
+//
+// This is scoping the language already provides, not a component
+// instance. There is nothing to mount, nothing to reconcile, and no
+// object representing the component at runtime — just a function that
+// runs once and returns the nodes it built.
+function emitScope(node, statements, fallbackVar) {
+  const varName = nextId();
+  const bodyLines = [];
+
+  const roots = node.children.map((child) => emitNode(child, bodyLines, fallbackVar));
+
+  statements.push(`const ${varName} = ((${node.params.join(', ')}) => {`);
+
+  // The component's own script comes first, so its declarations exist
+  // before the markup that reads them is built.
+  for (const line of node.script.split('\n')) {
+    statements.push(`  ${line}`);
+  }
+
+  for (const line of bodyLines) statements.push(`  ${line}`);
+
+  // A component renders one root; more than one would need a fragment,
+  // and the parser already requires a single root element.
+  statements.push(`  return ${roots[0] ?? 'null'};`);
+  statements.push(`})(${node.args.join(', ')});`);
+
+  return varName;
+}
+
+// Control flow needs a fixed point in the DOM to work from, since the
+// nodes it manages come and go. An empty comment node serves as that
+// anchor: it stays put, and everything the block renders is inserted
+// before it and removed by walking back from it.
+//
+// Only the nodes between the markers are touched when the source
+// signal changes — the rest of the page is never involved, which is
+// the same guarantee a text binding gives.
+function emitControlBlock(statements, buildBody, sourceExpr, renderCall) {
+  const start = nextId();
+  const end = nextId();
+  const frag = nextId();
+
+  const holder = nextId();
+
+  statements.push(`const ${start} = document.createComment('');`);
+  statements.push(`const ${end} = document.createComment('');`);
+
+  // The markers go into their own fragment straight away, so they
+  // always have a parent to insert into. Waiting for the page to be
+  // mounted instead would break a nested block: its markers are
+  // rebuilt every time the outer block re-runs, long after any
+  // one-time mount step has passed.
+  statements.push(`const ${holder} = document.createDocumentFragment();`);
+  statements.push(`${holder}.append(${start}, ${end});`);
+
+  // The body is compiled once into a function, then called as needed.
+  const bodyLines = [];
+  const bodyVar = buildBody(bodyLines);
+
+  statements.push(`const ${frag} = (${bodyVar.params}) => {`);
+  statements.push(`  const _frag = document.createDocumentFragment();`);
+  for (const line of bodyLines) statements.push(`  ${line}`);
+  for (const rootVar of bodyVar.roots) {
+    statements.push(`  if (${rootVar} !== null) _frag.appendChild(${rootVar});`);
+  }
+  statements.push(`  return _frag;`);
+  statements.push(`};`);
+
+  statements.push(`effect(() => {`);
+  statements.push(`  // Read the source before anything can return early. An effect`);
+  statements.push(`  // subscribes only to what it reads, so bailing out first would`);
+  statements.push(`  // leave this block subscribed to nothing and never update.`);
+  statements.push(`  const _source = ${sourceExpr};`);
+  statements.push(``);
+  statements.push(`  // Clearing walks back from the end marker, so nothing outside`);
+  statements.push(`  // the block can be removed by accident.`);
+  statements.push(`  while (${end}.previousSibling && ${end}.previousSibling !== ${start}) {`);
+  statements.push(`    ${end}.previousSibling.remove();`);
+  statements.push(`  }`);
+  statements.push(``);
+  statements.push(`  const _parent = ${end}.parentNode;`);
+  statements.push(`  if (!_parent) return;`);
+  for (const line of renderCall(frag, end)) statements.push(`  ${line}`);
+  statements.push(`});`);
+
+  return holder;
+}
+
+function emitEach(node, statements) {
+  return node.key ? emitKeyedEach(node, statements) : emitPlainEach(node, statements);
+}
+
+// A keyed list remembers the rows it built, so an update moves the
+// ones that are still there instead of discarding every row and
+// building it again. That is what lets a row keep its own state, its
+// focus, and its scroll position across a change to the list.
+//
+// Rows that leave have their effects disposed, which is the one place
+// the runtime's dispose() is needed: a row's bindings are created
+// inside their own effect scope rather than inside the block's, since
+// re-running the block must not tear down rows it is keeping.
+function emitKeyedEach(node, statements) {
+  const params = node.index ? `${node.alias}, ${node.index}` : node.alias;
+
+  const start = nextId();
+  const end = nextId();
+  const build = nextId();
+  const rows = nextId();
+  const holder = nextId();
+
+  statements.push(`const ${start} = document.createComment('');`);
+  statements.push(`const ${end} = document.createComment('');`);
+  statements.push(`const ${holder} = document.createDocumentFragment();`);
+  statements.push(`${holder}.append(${start}, ${end});`);
+
+  // key -> { nodes, scope }. Kept across runs; this is the memory that
+  // makes the list keyed rather than rebuilt.
+  statements.push(`const ${rows} = new Map();`);
+
+  // The row builder returns its nodes and the effect owning them, so
+  // the block can both re-insert a row and dispose it later.
+  const bodyLines = [];
+  const roots = node.children.map((child) => emitNode(child, bodyLines, 'root'));
+
+  statements.push(`const ${build} = (${params}) => {`);
+  statements.push(`  let _nodes;`);
+  statements.push(`  const _scope = effect(() => {`);
+  for (const line of bodyLines) statements.push(`    ${line}`);
+  statements.push(`    _nodes = [${roots.filter((r) => r !== 'null').join(', ')}];`);
+  statements.push(`  });`);
+  statements.push(`  return { nodes: _nodes, scope: _scope };`);
+  statements.push(`};`);
+
+  statements.push(`effect(() => {`);
+  statements.push(`  const _source = ${node.expr};`);
+  statements.push(`  const _parent = ${end}.parentNode;`);
+  statements.push(`  if (!_parent) return;`);
+  statements.push(``);
+  statements.push(`  const _seen = new Set();`);
+  statements.push(`  let _i = 0;`);
+  statements.push(``);
+  statements.push(`  for (const _item of _source ?? []) {`);
+  statements.push(`    const ${node.alias} = _item;`);
+  if (node.index) statements.push(`    const ${node.index} = _i;`);
+  statements.push(`    const _key = ${node.key};`);
+  statements.push(``);
+  statements.push(`    if (_seen.has(_key)) {`);
+  statements.push(`      throw new Error(`);
+  statements.push(
+    "        `Azox: <each> saw the key ${String(_key)} twice. Keys must be unique within a list.`"
+  );
+  statements.push(`      );`);
+  statements.push(`    }`);
+  statements.push(`    _seen.add(_key);`);
+  statements.push(``);
+  statements.push(`    let _row = ${rows}.get(_key);`);
+  statements.push(`    if (!_row) {`);
+  statements.push(`      _row = ${build}(_item${node.index ? ', _i' : ''});`);
+  statements.push(`      ${rows}.set(_key, _row);`);
+  statements.push(`    }`);
+  statements.push(``);
+  statements.push(`    // Moving a node that is already in place is a no-op in`);
+  statements.push(`    // the DOM, so ordering costs nothing when nothing moved.`);
+  statements.push(`    for (const _node of _row.nodes) _parent.insertBefore(_node, ${end});`);
+  statements.push(`    _i++;`);
+  statements.push(`  }`);
+  statements.push(``);
+  statements.push(`  // Whatever is left in the map is a row that has gone.`);
+  statements.push(`  for (const [_key, _row] of ${rows}) {`);
+  statements.push(`    if (_seen.has(_key)) continue;`);
+  statements.push(`    for (const _node of _row.nodes) _node.remove();`);
+  statements.push(`    dispose(_row.scope);`);
+  statements.push(`    ${rows}.delete(_key);`);
+  statements.push(`  }`);
+  statements.push(`});`);
+
+  return holder;
+}
+
+function emitPlainEach(node, statements) {
+  const params = node.index ? `${node.alias}, ${node.index}` : node.alias;
+
+  return emitControlBlock(
+    statements,
+    (bodyLines) => {
+      // Compile the body once; each iteration calls it with its own
+      // item, so the DOM calls are shared rather than duplicated.
+      const roots = node.children.map((child) => emitNode(child, bodyLines, 'root'));
+      return { params, roots };
+    },
+    node.expr,
+    (frag, endVar) => [
+      `if (_source) {`,
+      `  let _i = 0;`,
+      `  for (const _item of _source) {`,
+      `    _parent.insertBefore(${frag}(_item${node.index ? ', _i' : ''}), ${endVar});`,
+      `    _i++;`,
+      `  }`,
+      `}`,
+    ]
+  );
+}
+
+function emitIf(node, statements) {
+  return emitControlBlock(
+    statements,
+    (bodyLines) => {
+      // Both branches are compiled into the same function, selected by
+      // a flag, so a conditional costs one function rather than two.
+      const thenLines = [];
+      const thenRoots = node.then.map((child) => emitNode(child, thenLines, 'root'));
+
+      const elseLines = [];
+      const elseRoots = node.otherwise.map((child) => emitNode(child, elseLines, 'root'));
+
+      bodyLines.push(`const _out = document.createDocumentFragment();`);
+      bodyLines.push(`if (_branch) {`);
+      for (const line of thenLines) bodyLines.push(`  ${line}`);
+      for (const root of thenRoots) {
+        if (root !== 'null') bodyLines.push(`  _out.appendChild(${root});`);
+      }
+      bodyLines.push(`} else {`);
+      for (const line of elseLines) bodyLines.push(`  ${line}`);
+      for (const root of elseRoots) {
+        if (root !== 'null') bodyLines.push(`  _out.appendChild(${root});`);
+      }
+      bodyLines.push(`}`);
+
+      return { params: '_branch', roots: ['_out'] };
+    },
+    node.expr,
+    (frag, endVar) => [`_parent.insertBefore(${frag}(Boolean(_source)), ${endVar});`]
+  );
+}
+
 function appendChildren(parentVar, children, statements, fallbackVar) {
   for (const child of children) {
     const childVar = emitNode(child, statements, fallbackVar);
@@ -79,10 +527,36 @@ function appendChildren(parentVar, children, statements, fallbackVar) {
   }
 }
 
+// createTextNode takes text, not markup, so an entity the author
+// wrote in static markup has to be decoded here — otherwise the
+// browser would show a literal "&lt;" where the server rendered "<",
+// and the page would visibly change on hydration. Content from a
+// <text> block is already literal and passes through untouched.
+const textValue = (part) => (part.kind === 'literal' ? part.value : decodeEntities(part.value));
+
+// `{'{'}` is how a page writes a literal brace, since bare braces
+// start an expression. It is a constant, so it should not produce an
+// effect — a page whose only "dynamic" content is escaped punctuation
+// would otherwise be treated as reactive and hydrated needlessly.
+function foldLiteralParts(parts) {
+  return parts.map((part) => {
+    if (part.kind !== 'expr') return part;
+
+    const match = part.expr.trim().match(/^'((?:[^'\\]|\\.)*)'$|^"((?:[^"\\]|\\.)*)"$/);
+    if (!match) return part;
+
+    const raw = match[1] ?? match[2];
+    return { kind: 'literal', value: raw.replace(/\\(['"\\])/g, '$1') };
+  });
+}
+
 function emitText(node, statements, fallbackVar) {
-  // Purely static text: one text node, no effect needed.
-  if (node.parts.every((p) => p.kind === 'static')) {
-    const value = node.parts.map((p) => p.value).join('');
+  const isFixed = (part) => part.kind === 'static' || part.kind === 'literal';
+  node = { ...node, parts: foldLiteralParts(node.parts) };
+
+  // Nothing dynamic: one text node, no effect needed.
+  if (node.parts.every(isFixed)) {
+    const value = node.parts.map(textValue).join('');
     const varName = nextId();
     statements.push(`const ${varName} = document.createTextNode(${JSON.stringify(value)});`);
     return varName;
@@ -92,12 +566,25 @@ function emitText(node, statements, fallbackVar) {
   const varName = nextId();
   statements.push(`const ${varName} = document.createTextNode('');`);
   const expr = node.parts
-    .map((p) => (p.kind === 'static' ? JSON.stringify(p.value) : `String(${p.expr})`))
+    .map((part) => (isFixed(part) ? JSON.stringify(textValue(part)) : `String(${part.expr})`))
     .join(' + ');
   statements.push(`effect(() => { ${varName}.data = ${expr}; });`);
   return varName;
 }
 
+// The five entities that matter for text content. Numeric forms are
+// handled too, since documentation snippets tend to use them.
+function decodeEntities(text) {
+  return text
+    .replace(/&#(\d+);/g, (_, code) => String.fromCodePoint(Number(code)))
+    .replace(/&#x([0-9a-f]+);/gi, (_, code) => String.fromCodePoint(parseInt(code, 16)))
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, '&');
+}
+
 function emitAttr(varName, key, attr, statements) {
   if (key.startsWith('on:')) {
     const event = key.slice(3);
@@ -120,20 +607,3 @@ function dropComponentImports(script) {
   return script.replace(/^\s*import\s+[A-Z]\w*\s+from\s+['"][^'"]+\.azox['"]\s*;?\s*$/gm, '');
 }
 
-// Rewrites every relative import specifier in the user's <script>
-// block so it still resolves once the module lives in outPath
-// instead of next to sourceDir.
-function rebaseImports(script, sourceDir, outPath) {
-  return script.replace(
-    /(from\s+|import\s+)(['"])(\.[^'"]*)\2/g,
-    (full, keyword, quote, specifier) =>
-      `${keyword}${quote}${rebaseSpecifier(resolve(sourceDir, specifier), outPath)}${quote}`
-  );
-}
-
-// Re-expresses an absolute target path as a path relative to outPath.
-function rebaseSpecifier(absoluteTarget, outPath) {
-  let rebased = relative(dirname(outPath), absoluteTarget);
-  if (!rebased.startsWith('.')) rebased = `./${rebased}`;
-  return rebased;
-}

package/core/compiler/html.js

@@ -0,0 +1,28 @@
+// Facts about HTML shared by the parser and the renderer. Keeping one
+// list means the two can never disagree about what a void element is,
+// which would show up as a mismatch between server output and what
+// the browser builds.
+
+export const VOID_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'source',
+  'track',
+  'wbr',
+]);
+
+export function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}