npm - @transclude/core - Versions diffs - 0.2.0 → 0.4.0 - Mend

@transclude/core 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/README.md +23 -5
package/bin/build.js +35 -3
package/bin/check.js +30 -8
package/bin/dev.js +40 -2
package/bin/release.js +53 -5
package/package.json +3 -2
package/skills/transclude/SKILL.md +20 -3
package/skills/transclude/references/elements.md +43 -0
package/skills/transclude/references/server.md +1 -0
package/src/address.js +9 -2
package/src/app.js +110 -81
package/src/compiler/ambient.js +99 -0
package/src/compiler/bind.js +34 -27
package/src/compiler/codegen.js +40 -41
package/src/compiler/directives.js +29 -0
package/src/compiler/expr.js +10 -1
package/src/compiler/html.js +41 -0
package/src/compiler/index.js +46 -8
package/src/compiler/script.js +10 -3
package/src/compiler/shim.js +14 -41
package/src/compiler/types.js +32 -5
package/src/csp.js +7 -1
package/src/document.js +63 -12
package/src/extract.js +9 -8
package/src/icons.js +174 -0
package/src/plugin.js +28 -7
package/src/precache.js +11 -1
package/src/project.js +1 -0
package/src/proxy.js +9 -1
package/src/rewrite.js +12 -5
package/src/runtime/index.js +8 -5
package/src/sitemap.js +3 -3
package/src/static-cache.js +4 -1
package/src/typecheck.js +104 -10

package/src/compiler/codegen.js CHANGED Viewed

@@ -9,14 +9,10 @@
 import { Scope, collectRefs, emit, parseExpr } from './expr.js';
 import { splitInterpolations } from './interp.js';
+import { parseEach as readEach } from './directives.js';
+import { escapeAttr, escapeText, RAW_TEXT, VOID } from './html.js';
-const VOID = new Set([
-  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
-  'link', 'meta', 'param', 'source', 'track', 'wbr',
-]);
-// Content is not entity-decoded by the parser and must not be escaped by us.
-const RAW_TEXT = new Set(['script', 'style']);
 // Hoisted out of a page body into <head>.
 const HEAD_TAGS = new Set(['title', 'meta', 'link', 'base']);
@@ -39,11 +35,6 @@ export class CompileError extends Error {
   }
 }
-/**
- * @param {object[]} nodes
- * @param {object} [opts]
- * @returns {object} the render body, the regions, the slots, the includes and the warnings
- */
 /**
  * An attribute name is emitted exactly as written, so `${…}` in one reaches the
  * page as those characters rather than as a value. Nothing downstream reads it,
@@ -66,16 +57,24 @@ function assertStaticAttrNames(el) {
   }
 }
+/**
+ * @param {object[]} nodes
+ * @param {object} [opts]
+ * @returns {object} the render body, the regions, the slots, the includes and the warnings
+ */
 export function compileFragment(nodes, opts = {}) {
   const gen = new Codegen(opts);
-  gen.emitChildren(nodes, gen.body, gen.rootScope, true);
+  gen.emitChildren(nodes, gen.body, gen.rootScope, { topLevel: true });
   // `<html>` is read separately, because the fragment parser drops it: a nested
   // html start tag is not something that can appear in a body, so parse5 throws
   // it away attributes and all. `splitBlocks` reads it in document mode, where
   // it is the element it names.
+  // `<body>` is read the same way, for the same reason.
   const htmlNode = opts.html ?? null;
-  const htmlAttrs = htmlNode?.attrs?.length ? gen.htmlAttrsJs(htmlNode, gen.rootScope) : null;
+  const bodyNode = opts.body ?? null;
+  const htmlAttrs = htmlNode?.attrs?.length ? gen.openTagAttrsJs(htmlNode, gen.rootScope) : null;
+  const bodyAttrs = bodyNode?.attrs?.length ? gen.openTagAttrsJs(bodyNode, gen.rootScope) : null;
   const body = joinOut(gen.body);
   const head = joinOut(gen.head);
@@ -108,6 +107,7 @@ export function compileFragment(nodes, opts = {}) {
     title: title.code,
     hasTitle: gen.title.length > 0,
     htmlAttrs,
+    bodyAttrs,
     warnings: gen.warnings,
     reads: gen.reads,
     components: [...gen.used.entries()].map(([tag, ref]) => ({ tag, ref })),
@@ -252,7 +252,7 @@ class Codegen {
   // ---- traversal ----------------------------------------------------------
-  emitChildren(nodes, out, scope, topLevel = false) {
+  emitChildren(nodes, out, scope, { topLevel = false } = {}) {
     let i = 0;
     while (i < nodes.length) {
       const node = nodes[i];
@@ -264,7 +264,7 @@ class Codegen {
         if (slot) {
           const target = this.slots.get(slot) ?? [];
           this.slots.set(slot, target);
-          this.emitChildren(childrenOf(node), target, scope, false);
+          this.emitChildren(childrenOf(node), target, scope);
           i++;
           continue;
         }
@@ -358,7 +358,7 @@ class Codegen {
   emitNodeAt(node, out, scope, topLevel) {
     if (node.nodeName === '#text') {
-      this.emitText(node.value ?? '', out, scope, node, false);
+      this.emitText(node.value ?? '', out, scope, node);
       return;
     }
     // Authoring comments are stripped. They still count as "insignificant" when
@@ -591,14 +591,14 @@ class Codegen {
         return;
       }
       this.c(out, `if (${filled}) { __o += ${filled}; } else {`);
-      this.emitChildren(fallback, out, scope, false);
+      this.emitChildren(fallback, out, scope);
       this.c(out, `}`);
       return;
     }
     // A <template> carrying a directive is structural: consumed, children emitted.
     if (tag === 'template' && directivesOf(el).size > 0) {
-      this.emitChildren(childrenOf(el), out, scope, false);
+      this.emitChildren(childrenOf(el), out, scope);
       return;
     }
@@ -628,11 +628,11 @@ class Codegen {
       for (const child of childrenOf(el)) {
         if (child.nodeName === '#text') {
           assertRawTextSafe(tag, child.value ?? '', el);
-          this.emitText(child.value ?? '', target, scope, child, true);
+          this.emitText(child.value ?? '', target, scope, child, { raw: true });
         }
       }
     } else {
-      this.emitChildren(childrenOf(el), target, scope, false);
+      this.emitChildren(childrenOf(el), target, scope);
     }
     this.s(target, `</${tag}>`);
@@ -655,7 +655,7 @@ class Codegen {
     this.c(out, `__o += __sh(${ref}, {${props}}${this.fragments ? ', __fragment' : ''});`);
     // Light DOM children fill <slot>.
-    this.emitChildren(childrenOf(el), out, scope, false);
+    this.emitChildren(childrenOf(el), out, scope);
     this.s(out, `</${tag}>`);
   }
@@ -773,7 +773,7 @@ class Codegen {
     const uid = ++this.uid;
     if (children.length) {
       this.c(out, `const __fb${uid} = (() => { let __o = '';`);
-      this.emitChildren(children, out, scope, false);
+      this.emitChildren(children, out, scope);
       this.c(out, `return __o; })();`);
     }
@@ -795,7 +795,7 @@ class Codegen {
     const children = childrenOf(el);
     if (children.length) {
       this.c(out, `const __sl${id} = (() => { let __o = '';`);
-      this.emitChildren(children, out, scope, false);
+      this.emitChildren(children, out, scope);
       this.c(out, `return __o; })();`);
     }
@@ -847,15 +847,17 @@ class Codegen {
   }
   /**
-   * `<html lang="en" data-theme="${theme}">` as `{ "lang": "en", "data-theme": theme }`.
+   * `<html lang="en" data-theme="${theme}">` as `{ "lang": "en", "data-theme": theme }`,
+   * and the same for `<body>`.
    *
    * An object rather than serialized markup, because the chain merges these by
    * name: a root layout setting the theme and a page setting `dir` must both
    * survive, and two `data-theme` attributes in one tag would leave the parser
    * taking the first, which is the outermost. `renderDocument` serializes.
    */
-  htmlAttrsJs(el, scope) {
-    // <html> is read by a second parse, so it never reaches emitElement.
+  openTagAttrsJs(el, scope) {
+    // `<html>` and `<body>` are read by a second parse, so neither reaches
+    // emitElement and neither is checked by it.
     assertStaticAttrNames(el);
     const pairs = el.attrs
       .filter((attr) => !DIRECTIVES.has(attr.name))
@@ -883,7 +885,7 @@ class Codegen {
       .join(' + ');
   }
-  emitText(value, out, scope, node, raw) {
+  emitText(value, out, scope, node, { raw = false } = {}) {
     const start = node?.sourceCodeLocation?.startLine ?? this.at;
     let line = start;
@@ -943,7 +945,9 @@ function assertRawTextSafe(tag, text, el) {
 function isJsonCall(source) {
   try {
     const node = parseExpr(source);
-    return node.type === 'CallExpression' && node.callee?.type === 'Identifier' && node.callee.name === 'json';
+    if (node.type !== 'CallExpression') return false;
+    if (node.callee?.type !== 'Identifier') return false;
+    return node.callee.name === 'json';
   } catch {
     return false;
   }
@@ -958,7 +962,7 @@ export const ANCHOR_CLOSE = '<!--]-->';
  *
  * @param {object[]} nodes
  * @param {number} i where the `if` is
- * @returns {{ chain: Array<{ node: object, kind: string, cond?: string }>, next: number }|null}
+ * @returns {{ chain: Array<{ node: object, kind: string, cond: string|null }>, next: number }|null}
  *   null when the element carries no `if`, so there is no chain to gather
  */
 export function gatherChain(nodes, i) {
@@ -977,7 +981,10 @@ export function gatherChain(nodes, i) {
       continue;
     }
     if (d?.has('else')) {
-      chain.push({ node: nodes[k], kind: 'else' });
+      // `cond: null` rather than absent, so every entry in the chain is one
+      // shape. `emitBranches` reads `kind` to decide, and never reads the
+      // condition of an `else`.
+      chain.push({ node: nodes[k], kind: 'else', cond: null });
       next = k + 1;
     }
     break;
@@ -1020,14 +1027,14 @@ function nextSignificant(nodes, from) {
 function parseEach(value, node) {
-  const m = /^\s*([A-Za-z_$][\w$]*)\s*(?:,\s*([A-Za-z_$][\w$]*)\s*)?\s+of\s+([\s\S]+?)\s*$/.exec(value);
-  if (!m) {
+  const spec = readEach(value);
+  if (!spec) {
     throw new CompileError(
       `each="${value}" is malformed. Expected each="item of list" or each="item, index of list"`,
       node,
     );
   }
-  return { item: m[1], index: m[2] || null, list: m[3] };
+  return spec;
 }
 // ---- output ---------------------------------------------------------------
@@ -1076,11 +1083,3 @@ function joinOut(entries) {
   return { code: lines.join('\n'), at };
 }
-// parse5 hands us decoded text, so static output has to be re-encoded.
-function escapeText(value) {
-  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-function escapeAttr(value) {
-  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
-}

package/src/compiler/directives.js ADDED Viewed

@@ -0,0 +1,29 @@
+// What a directive value means. One answer, because three files ask.
+//
+// `each` was parsed by the same regular expression written out in bind.js,
+// codegen.js and shim.js. Three copies of one rule is three places to change and
+// two to forget, and the three do different things with the answer: one emits a
+// loop, one emits a binding, one emits the JS tsc checks. They agreed by luck.
+/**
+ * `item of items`, or `item, i of items`.
+ *
+ * The value is an expression, not an interpolation: there is no `${}` in it. A
+ * parser that treated it as one would read the whole thing as text and get the
+ * volatile set wrong, which is a silent bug rather than a loud one.
+ */
+const EACH = /^\s*([A-Za-z_$][\w$]*)\s*(?:,\s*([A-Za-z_$][\w$]*)\s*)?\s+of\s+([\s\S]+?)\s*$/;
+/**
+ * The three parts of an `each`, or null when it does not parse.
+ *
+ * @param {string} value the attribute as written
+ * @returns {{ item: string, index: string|null, list: string }|null}
+ */
+export function parseEach(value) {
+  const found = EACH.exec(value ?? '');
+  if (!found) return null;
+  const [, item, index, list] = found;
+  return { item, index: index ?? null, list };
+}

package/src/compiler/expr.js CHANGED Viewed

@@ -175,6 +175,14 @@ export function chainOf(node, scope, computed = []) {
   return null;
 }
+/**
+ * Every jsep node key that can hold another node. Anything else on a node is a
+ * name, a value or a flag, and walking into one finds nothing.
+ */
+const CHILD_KEYS = [
+  'argument', 'left', 'right', 'test', 'consequent', 'alternate', 'object', 'property',
+];
 /**
  * Every data or loop-variable path an expression reads.
  *
@@ -212,9 +220,10 @@ export function collectRefs(node, scope, out = []) {
       return out;
     default:
-      for (const key of ['argument', 'left', 'right', 'test', 'consequent', 'alternate', 'object', 'property']) {
+      for (const key of CHILD_KEYS) {
         if (node[key]) collectRefs(node[key], scope, out);
       }
       for (const element of node.elements ?? []) collectRefs(element, scope, out);
       return out;
   }

package/src/compiler/html.js ADDED Viewed

@@ -0,0 +1,41 @@
+// Facts about HTML that both compiler passes need.
+//
+// These are the spec's, not this codebase's, so they belong in one place and
+// never change for a reason either pass would know about. Both lists were
+// written out twice, in codegen.js and bind.js, and agreed by luck.
+/** Elements with no closing tag and no children. */
+export const VOID = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+  'link', 'meta', 'param', 'source', 'track', 'wbr',
+]);
+/**
+ * Elements whose text is not entity-decoded by the parser, so escaping it would
+ * change what the browser reads. `&amp;` is one character in prose and five in
+ * JavaScript.
+ */
+export const RAW_TEXT = new Set(['script', 'style']);
+/** parse5 hands back decoded text, so static output has to be re-encoded. */
+export function escapeText(value) {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+/**
+ * A static attribute value.
+ *
+ * Three characters, and `>` is deliberately not one of them: a quoted attribute
+ * value may hold one, and leaving it is what a serializer does. That has a
+ * consequence worth knowing, because `content="a > b"` then reaches the page
+ * with a bare `>` in it, and anything scanning compiled markup for the end of a
+ * tag has to be quote-aware rather than stopping at the first one. `mergeHead`
+ * in document.js is that scanner, and it had this wrong once.
+ *
+ * The runtime escapes `>` as well, so an interpolated value and a static one
+ * come out spelled differently and parse the same. That is not worth making
+ * agree: the runtime ships to a browser and must not import from here.
+ */
+export function escapeAttr(value) {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}

package/src/compiler/index.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { parse, parseFragment } from 'parse5';
 import { compileFragment, childrenOf, CompileError } from './codegen.js';
+import { escapeAttr } from './html.js';
 import { lineMap, sourceMap } from './sourcemap.js';
 import { compileBindings } from './bind.js';
 import {
@@ -21,6 +22,7 @@ export { CompileError, ScriptError };
 const PAGE_EXPORTS = new Set([
   'css', 'load', 'render', 'renderHead', 'renderTitle', 'renderHtmlAttrs',
   'layouts', 'client', 'elements', 'headScript', 'hasTitle', 'includes',
+  'renderBodyAttrs',
 ]);
 const COMPONENT_EXPORTS = new Set([
   'tag', 'light', 'css', 'elements', 'propDefs', 'propAttrs', 'stateDefs', 'members', 'render',
@@ -113,10 +115,17 @@ export function splitBlocks(source) {
   // away with its attributes. In document mode it is the element it names, and a
   // `<html>` inside a script block or a comment is still not one, because this
   // is the real parser rather than a search for a string.
-  const html =
-    parse(source, { sourceCodeLocationInfo: true }).childNodes.find((n) => n.nodeName === 'html') ??
-    null;
-  const out = { server: null, properties: null, state: null, client: [], head: [], styles: [], nodes: [], html };
+  const document = parse(source, { sourceCodeLocationInfo: true });
+  const html = document.childNodes.find((n) => n.nodeName === 'html') ?? null;
+  // `<body>` is dropped by the fragment parser for the same reason `<html>` is,
+  // and was silently going missing: writing `<body class="admin">` in a page
+  // produced no attribute and no error. In document mode it is a real element.
+  // parse5's ChildNode union does not carry `childNodes`; in document mode this
+  // one is the html element and does.
+  const parent = /** @type {{ childNodes?: Array<{ nodeName: string }> }|null} */ (html);
+  const body = parent?.childNodes?.find((n) => n.nodeName === 'body') ?? null;
+  const out = { server: null, properties: null, state: null, client: [], head: [], styles: [], nodes: [], html, body };
   for (const node of doc.childNodes) {
     if (node.nodeName === 'script') {
@@ -367,6 +376,21 @@ const MARK = {
   title: '/*@transclude:title*/',
 };
+/**
+ * A page: the `<script server>` block, the markup, and whatever layouts wrap it.
+ *
+ * `filename` is what an error message says, which is the short route id.
+ * `sourcePath` is what the source map names, which is a path an editor opens.
+ *
+ * @param {string} source
+ * @param {{ components?: Map<string, string>, shadowTags?: Set<string>,
+ *   runtime: string, filename?: string, sourcePath?: string|null,
+ *   layouts?: string[],
+ *   client?: { tags: string[], hasScript: boolean, needed: boolean } }} options
+ * @returns {{ code: string, map: object|null, warnings: string[],
+ *   components: string[] }} the module, a line-level map or null when there is
+ *   no markup to map, whatever the template warned about, and the tags it used
+ */
 export function compilePage(
   source,
   {
@@ -392,7 +416,13 @@ export function compilePage(
   assertNoCollisions(server.declared ?? [], PAGE_EXPORTS, where, 'declares');
   assertNoActionsObject(server.exports, where);
-  const template = compileFragment(blocks.nodes, { components, shadowTags, page: true, html: blocks.html });
+  const template = compileFragment(blocks.nodes, {
+    components,
+    shadowTags,
+    page: true,
+    html: blocks.html,
+    body: blocks.body,
+  });
   assertIncludesResolve(template.regionIncludes, template.regions);
   const code = `
@@ -426,6 +456,10 @@ export function renderHtmlAttrs(__d) {
   return ${template.htmlAttrs ?? '{}'};
 }
+export function renderBodyAttrs(__d) {
+  return ${template.bodyAttrs ?? '{}'};
+}
 export function renderHead(__d) {
   let __o = '';
 ${MARK.head}
@@ -509,6 +543,7 @@ export function compileLayout(source, { id, components = new Map(), shadowTags =
     page: true,
     layout: true,
     html: blocks.html,
+    body: blocks.body,
   });
   const warnings = [...template.warnings];
@@ -541,6 +576,10 @@ export function renderHtmlAttrs(__d) {
   return ${template.htmlAttrs ?? '{}'};
 }
+export function renderBodyAttrs(__d) {
+  return ${template.bodyAttrs ?? '{}'};
+}
 export function renderHead(__d) {
   let __o = '';
 ${indent(template.head)}
@@ -553,7 +592,7 @@ ${slotBodies(template)}
   return __out;
 }
-export default { css, headScript, elements, hasTitle, load, renderTitle, renderHead, renderHtmlAttrs, render };
+export default { css, headScript, elements, hasTitle, load, renderTitle, renderHead, renderHtmlAttrs, renderBodyAttrs, render };
 `;
   return { code, warnings, components: template.components.map((c) => c.tag) };
@@ -858,8 +897,7 @@ function headScript(blocks, where) {
 /** A static attribute, escaped the way an HTML serializer must. */
 function serializeAttr({ name, value }) {
   if (value === '') return ` ${name}`;
-  const escaped = value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
-  return ` ${name}="${escaped}"`;
+  return ` ${name}="${escapeAttr(value)}"`;
 }
 function elementsExport(used) {

package/src/compiler/script.js CHANGED Viewed

@@ -369,6 +369,9 @@ function scopedNames(statements) {
   return (statements ?? []).flatMap(declaredNames);
 }
+/** Keys acorn puts on every node. They hold positions, never child nodes. */
+const NODE_BOOKKEEPING = new Set(['type', 'start', 'end', 'loc', 'range']);
 /**
  * Identifiers a subtree reads from outside itself.
  *
@@ -406,8 +409,12 @@ function freeNames(node, bound, out) {
     case 'ArrowFunctionExpression': {
       const inner = new Set(bound);
       if (node.id) inner.add(node.id.name);
-      for (const param of node.params) for (const name of patternNames(param)) inner.add(name);
-      if (node.body.type === 'BlockStatement') for (const name of scopedNames(node.body.body)) inner.add(name);
+      for (const param of node.params) {
+        for (const name of patternNames(param)) inner.add(name);
+      }
+      if (node.body.type === 'BlockStatement') {
+        for (const name of scopedNames(node.body.body)) inner.add(name);
+      }
       // A default is evaluated in the function's own scope, so it sees the params.
       for (const param of node.params) freeNames(param, inner, out);
       freeNames(node.body, inner, out);
@@ -463,7 +470,7 @@ function freeNames(node, bound, out) {
     default:
       for (const key of Object.keys(node)) {
-        if (key === 'type' || key === 'start' || key === 'end' || key === 'loc' || key === 'range') continue;
+        if (NODE_BOOKKEEPING.has(key)) continue;
         freeNames(node[key], bound, out);
       }
       return out;

package/src/compiler/shim.js CHANGED Viewed

@@ -14,6 +14,8 @@
 // came from.
 import { parse, parseExpressionAt } from 'acorn';
+import { ambientJsdoc } from './ambient.js';
+import { parseEach } from './directives.js';
 import { childrenOf } from './codegen.js';
 import { splitInterpolations } from './interp.js';
 import { splitBlocks } from './index.js';
@@ -46,23 +48,7 @@ const PASS_THROUGH = /^(?:data|aria|hx)-/;
  * it type-checked happily and caught nothing. The endpoint shim
  * did exactly that.
  */
-const COOKIES_TYPEDEF =
-  '/**\n' +
-  ' * @typedef {{ path?: string; domain?: string; maxAge?: number; expires?: Date;\n' +
-  ' *   httpOnly?: boolean; secure?: boolean; sameSite?: "Strict" | "Lax" | "None" }} __CookieOptions\n' +
-  ' */\n' +
-  '/**\n' +
-  ' * @typedef {{\n' +
-  ' *   get(name: string): string | undefined;\n' +
-  ' *   all(): Record<string, string>;\n' +
-  ' *   set(name: string, value: string, options?: __CookieOptions): void;\n' +
-  ' *   delete(name: string, options?: __CookieOptions): void;\n' +
-  ' *   signed: {\n' +
-  ' *     get(name: string): Promise<string | undefined>;\n' +
-  ' *     all(): Promise<Record<string, string>>;\n' +
-  ' *     set(name: string, value: string, options?: __CookieOptions): Promise<void>;\n' +
-  ' *   };\n' +
-  ' * }} __Cookies\n */\n\n';
+const COOKIES_TYPEDEF = `${ambientJsdoc(['__CookieOptions', '__Cookies'])}\n`;
 class Builder {
   constructor() {
@@ -278,20 +264,9 @@ export function buildShim(source, { kind, shadow = false, contextType = null, co
   // types its own.
   out.add('export {};\n');
-  // Two jobs, both about letting the author write plain JS.
-  //
-  // The mapping is what keeps `${user.nmae}` an error. TypeScript treats a type
-  // that came straight from an object literal in a .js file as open for expando
-  // properties, so reading an undeclared one is allowed. Remapping the keys gives
-  // an ordinary object type, where it is not.
-  //
-  // The conditional widens a bare `[]`, which otherwise infers `never[]` and
-  // turns "no annotation" from "less checking" into a page of errors about a
-  // type nobody wrote.
-  out.add(
-    '/**\n * @template T\n' +
-      ' * @typedef {{ [K in keyof T]: T[K] extends never[] ? any[] : T[K] }} __Shape\n */\n',
-  );
+  // Both jobs `__Shape` does are about letting the author write plain JS, and
+  // both are written out in `ambient.js`.
+  out.add(ambientJsdoc(['__Shape']));
   out.add(COOKIES_TYPEDEF);
@@ -573,20 +548,18 @@ function emitNodes(nodes, out, scope, components, depth) {
     let closes = 0;
     if (each) {
-      const spec = /^\s*([A-Za-z_$][\w$]*)\s*(?:,\s*([A-Za-z_$][\w$]*)\s*)?\s+of\s+([\s\S]+?)\s*$/.exec(
-        each.value,
-      );
+      const spec = parseEach(each.value);
       if (spec) {
-        const listOffset = attrValueOffset(node, 'each') + each.value.indexOf(spec[3]);
+        const listOffset = attrValueOffset(node, 'each') + each.value.indexOf(spec.list);
         indent(out, depth);
-        out.add(`for (const ${spec[1]} of `);
-        emitExpression(spec[3], listOffset, out, scope);
+        out.add(`for (const ${spec.item} of `);
+        emitExpression(spec.list, listOffset, out, scope);
         out.add(') {\n');
-        inner.add(spec[1]);
-        if (spec[2]) {
+        inner.add(spec.item);
+        if (spec.index) {
           indent(out, depth + 1);
-          out.add(`const ${spec[2]}: number = 0;\n`);
-          inner.add(spec[2]);
+          out.add(`const ${spec.index}: number = 0;\n`);
+          inner.add(spec.index);
         }
         closes++;
       }

package/src/compiler/types.js CHANGED Viewed

@@ -3,15 +3,24 @@
 // Everything here is a type *string* produced by tsc's own printer, so this file
 // formats and names things and nothing else. Nothing infers.
+import { ambientDeclarations } from './ambient.js';
 /**
  * @param {{ components?: object[], partials?: object[], layouts?: object[],
- *   pages?: object[] }} [what] each element carries its `tag`, its props `type`,
- *   its `members`, its `state` and whether anything `upgrades` it. `partials` is
- *   the light elements: the key is the old name and is load-bearing until the
- *   callers change with it.
+ *   pages?: object[], types?: {name: string, type: string}[] }} [what] each
+ *   element carries its `tag`, its props `type`, its `members`, its `state` and
+ *   whether anything `upgrades` it. `partials` is the light elements: the key is
+ *   the old name and is load-bearing until the callers change with it. `types`
+ *   are the names the app declared that the strings below use.
  * @returns {string} the contents of transclude-env.d.ts
  */
-export function emitTypes({ components = [], partials = [], layouts = [], pages = [] } = {}) {
+export function emitTypes({
+  components = [],
+  partials = [],
+  layouts = [],
+  pages = [],
+  types = [],
+} = {}) {
   const out = [
     '// Generated by transclude. Do not edit. `npm run check` rewrites it.',
     '//',
@@ -21,6 +30,9 @@ export function emitTypes({ components = [], partials = [], layouts = [], pages
     '',
   ];
+  // Where the declarations go once it is known which are needed.
+  const head = out.length;
   for (const { tag, type, members, state } of [...components, ...partials]) {
     out.push(`/** Properties of \`<${tag}>\`, from its <script properties> block. */`);
     out.push(`export type ${interfaceName(tag)}Props = ${pretty(type)};`);
@@ -83,6 +95,21 @@ export function emitTypes({ components = [], partials = [], layouts = [], pages
     out.push('');
   }
+  // Written last and put first. What has to be declared is whatever the types
+  // above ended up naming, which is not known until they are all built.
+  const body = out.slice(head).join('\n');
+  const declared = [
+    ...ambientDeclarations(body, (type) => pretty(type)),
+    ...(types.length
+      ? [
+          '// Declared by the app, in the file each was written in.',
+          ...types.map(({ name, type }) => `type ${name} = ${pretty(type)};`),
+          '',
+        ]
+      : []),
+  ];
+  out.splice(head, 0, ...declared);
   return out.join('\n');
 }

package/src/csp.js CHANGED Viewed

@@ -104,9 +104,15 @@ export async function policyFor(html, { directives = CSP_DEFAULTS } = {}) {
     inline.filter((one) => one.kind === 'style').map((one) => sha256(one.body)),
   );
+  // Which set `'hashes'` stands for, by directive. Anything else gets none:
+  // there is nothing to hash for `default-src`, and a directive carrying a hash
+  // ignores `'unsafe-inline'` outright, so handing it an empty list is wrong in a
+  // way that only shows up in a browser.
+  const hashesFor = { 'script-src': scripts, 'style-src': styles };
   const parts = [];
   for (const [name, sources] of Object.entries(directives)) {
-    const hashes = name === 'script-src' ? scripts : name === 'style-src' ? styles : [];
+    const hashes = hashesFor[name] ?? [];
     const resolved = sources.flatMap((source) => (source === "'hashes'" ? hashes : [source]));
     // A directive left with nothing is dropped. An empty source list means