@transclude/core 0.2.0 → 0.3.0

package/src/compiler/bind.js

@@ -24,14 +24,10 @@
 import { Scope, collectRefs, emit, parseExpr } from './expr.js';
 import { splitInterpolations } from './interp.js';
 import { childrenOf, gatherChain } from './codegen.js';
+import { parseEach } from './directives.js';
+import { RAW_TEXT, VOID } from './html.js';
 
 const DIRECTIVES = new Set(['if', 'else-if', 'else', 'each', 'key']);
-const VOID = new Set([
-  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
-  'link', 'meta', 'param', 'source', 'track', 'wbr',
-]);
-const RAW_TEXT = new Set(['script', 'style']);
-const EACH = /^\s*([A-Za-z_$][\w$]*)\s*(?:,\s*([A-Za-z_$][\w$]*)\s*)?\s+of\s+([\s\S]+?)\s*$/;
 
 /**
  * @param {object[]} nodes the same parse5 nodes the renderer walked
@@ -140,13 +136,13 @@ class Bindgen {
     let inner = scope;
 
     const each = attrs.find((attr) => attr.name === 'each');
-    const spec = each && EACH.exec(each.value);
+    const spec = each ? parseEach(each.value) : null;
     if (spec) {
-      this.giveUp(spec[3], scope);
+      this.giveUp(spec.list, scope);
       inner = new Scope(scope);
       // The name only has to exist for collectRefs to stop calling it data.
-      inner.declare(spec[1], spec[1]);
-      if (spec[2]) inner.declare(spec[2], spec[2]);
+      inner.declare(spec.item, spec.item);
+      if (spec.index) inner.declare(spec.index, spec.index);
     }
 
     for (const attr of attrs) {
@@ -265,11 +261,14 @@ class Bindgen {
    * rebuild. -1 is "none of them", which an `if` with no `else` can be.
    */
   emitBranchParts(id, branches) {
-    const pick = branches.reduceRight(
-      (rest, branch, at) =>
-        branch.kind === 'else' ? String(at) : `${this.js(branch.cond)} ? ${at} : ${rest}`,
-      '-1',
-    );
+    // Built from the last branch back, so each condition wraps the answer for
+    // everything after it. An `else` has no condition and ends the chain.
+    let pick = '-1';
+    for (let at = branches.length - 1; at >= 0; at--) {
+      const branch = branches[at];
+      if (branch.kind === 'else') pick = String(at);
+      else pick = `${this.js(branch.cond)} ? ${at} : ${pick}`;
+    }
     // The condition may read the loop variables, so pick takes them too. The
     // runtime hands every piece of a block the same arguments.
     const outer = this.frame.loopArgs;
@@ -284,7 +283,7 @@ class Bindgen {
 
   /** One part, reused for every item the loop produces. */
   emitItemPart(id, element) {
-    const spec = EACH.exec(element.attrs.find((attr) => attr.name === 'each').value);
+    const spec = parseEach(element.attrs.find((attr) => attr.name === 'each').value);
     if (!spec) return;
 
     const outer = this.frame.loopArgs;
@@ -293,8 +292,8 @@ class Bindgen {
     const index = `__i${depth}`;
 
     const scope = new Scope(this.scope);
-    scope.declare(spec[1], item);
-    if (spec[2]) scope.declare(spec[2], index);
+    scope.declare(spec.item, item);
+    if (spec.index) scope.declare(spec.index, index);
 
     const inner = [...outer, item, index];
     // Same shape as a branch: the element itself, whose `each` is already
@@ -393,7 +392,11 @@ class Bindgen {
       return `__b[${ref}]`;
     };
     // Descending only ever happens inside `bind`, so a stable path is fine.
-    const parentExpr = () => (ref !== null ? `__b[${ref}]` : stable ? nodeExpr : slotFor());
+    const parentExpr = () => {
+      if (ref !== null) return `__b[${ref}]`;
+      if (stable) return nodeExpr;
+      return slotFor();
+    };
 
     for (const attr of node.attrs ?? []) {
       if (DIRECTIVES.has(attr.name)) continue;
@@ -407,14 +410,18 @@ class Bindgen {
 
       let value;
       try {
-        value =
-          parts.length === 1
-            ? this.js(parts[0].value)
-            : parts
-                .map((part) =>
-                  part.type === 'expr' ? `__str(${this.js(part.value)})` : JSON.stringify(part.value),
-                )
-                .join(' + ');
+        if (parts.length === 1) {
+          value = this.js(parts[0].value);
+        } else {
+          // Several pieces, so each one is turned into a string and the lot
+          // concatenated. `__str` is what makes null and undefined empty rather
+          // than the words.
+          const pieces = parts.map((part) => {
+            if (part.type !== 'expr') return JSON.stringify(part.value);
+            return `__str(${this.js(part.value)})`;
+          });
+          value = pieces.join(' + ');
+        }
       } catch {
         this.giveUpText(attr.value);
         continue;

package/src/compiler/codegen.js

@@ -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

@@ -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

@@ -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

@@ -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. `&` 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

@@ -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

@@ -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;