hyper-html-api 0.13.0 → 0.15.0

package/src/dom-api.js

@@ -4,9 +4,12 @@ import domAdapter, { createDomAdapter } from './adapters/dom.js'
 // The DOM-bound engine: every engine call pre-wired with the DOM adapter. Lives
 // here (instead of inline in hyper-html-api.js) so both the full CDN bundle and
 // the lean `data.js` entry share one definition.
+// Calls default `codecs` to the ones registered with engine.codecs.register.
+const withCodecs = (opts) => ({ codecs: engineMod.registeredCodecs(), ...opts })
+
 export const engine = {
-  extract: (root, rules, opts = {}) => engineMod.extract(createDomAdapter(root, opts), root, rules, opts),
-  apply: (root, rules, data, opts = {}) => engineMod.apply(createDomAdapter(root, { ...opts, _write: true }), root, rules, data, opts),
+  extract: (root, rules, opts = {}) => engineMod.extract(createDomAdapter(root, opts), root, rules, withCodecs(opts)),
+  apply: (root, rules, data, opts = {}) => engineMod.apply(createDomAdapter(root, { ...opts, _write: true }), root, rules, data, withCodecs(opts)),
   findRulesIn: (root, token) => engineMod.findRulesIn(domAdapter, root, token),
   findRules: (root, source) => engineMod.resolveRules(domAdapter, root, source),
   bind: (root, source, opts = {}) => {
@@ -15,12 +18,14 @@ export const engine = {
       const what = typeof source === 'string' ? `data-rules-name~="${source}"` : 'the provided rules object'
       throw new Error(`hyper-html-api: could not resolve rules for ${what}`)
     }
+    const callOpts = withCodecs({ version: found.version, ...opts })
     return {
       ...found,
-      get: () => engineMod.extract(createDomAdapter(root, opts), root, found.rules, opts),
-      set: data => engineMod.apply(createDomAdapter(root, { ...opts, _write: true }), root, found.rules, data, opts),
+      get: () => engineMod.extract(createDomAdapter(root, opts), root, found.rules, callOpts),
+      set: data => engineMod.apply(createDomAdapter(root, { ...opts, _write: true }), root, found.rules, data, callOpts),
     }
   },
+  codecs: { register: engineMod.registerCodec, get: engineMod.getCodec },
   parseStrict: engineMod.parseStrict,
   parseRelaxed: engineMod.parseRelaxed,
   // Adapter-free, like the parsers above: a consumer that has to split a rule
@@ -38,7 +43,7 @@ function defaultRules(root) {
   const searchRoot = root && root.ownerDocument ? root.ownerDocument : root
   const found = engineMod.findRulesIn(domAdapter, searchRoot, 'api')
   if (!found) throw new engineMod.errors.NoRulesTag('api')
-  return found.rules
+  return { rules: found.rules, version: found.version }
 }
 
 function containingTree(root) {
@@ -119,8 +124,8 @@ function assertNoReadOnlyTargets(rule, value) {
   }
 }
 
-function guardedApply(root, rules, data) {
-  const opts = { templateAttr: 'cms-template' }
+function guardedApply(root, rules, data, version) {
+  const opts = withCodecs({ templateAttr: 'cms-template', version })
   const liveTree = containingTree(root)
   const rootPath = childIndexPath(liveTree, root)
   const detachedTree = cloneContainingTree(liveTree)
@@ -145,7 +150,8 @@ function guardedApply(root, rules, data) {
 
 function exposeWriteError(error) {
   if (!(error instanceof Error)) return error
-  const code = error.name || 'Error'
+  const keepsCode = error instanceof engineMod.errors.UnknownCodec || error instanceof engineMod.errors.CodecRefused
+  const code = keepsCode ? error.code : error.name || 'Error'
   try {
     error.code = code
   } catch {
@@ -182,7 +188,10 @@ function exposeWriteError(error) {
 export function extractData(a, b) {
   const root = isNode(a) ? a : document
   const source = isNode(a) ? b : a
-  if (source === undefined) return engineMod.extract(createDomAdapter(root), root, defaultRules(root))
+  if (source === undefined) {
+    const { rules, version } = defaultRules(root)
+    return engineMod.extract(createDomAdapter(root), root, rules, withCodecs({ version }))
+  }
   return engine.bind(root, source).get()
 }
 
@@ -193,8 +202,8 @@ export function applyData(root, data, source) {
     if (!isNode(root)) {
       throw new Error('hyper-html-api: applyData(root, data, source?) needs a DOM root as the first argument.')
     }
-    const rules = source === undefined ? defaultRules(root) : engine.bind(root, source).rules
-    guardedApply(root, rules, data)
+    const { rules, version } = source === undefined ? defaultRules(root) : engine.bind(root, source)
+    guardedApply(root, rules, data, version)
   } catch (error) {
     throw exposeWriteError(error)
   }

package/src/engine/apply.js

@@ -10,13 +10,15 @@ import {
   ShapeMismatch,
 } from './errors.js'
 import { listDiff } from './diff.js'
-import { ruleAttrIndex } from './rule-syntax.js'
+import { codecOf, ruleAttrIndex, splitRule } from './rule-syntax.js'
 import { isCustomPropertyName, setStyleVar } from './style-vars.js'
+import { checkCodecRules, codecForRule } from './codecs.js'
 
 export function apply(adapter, root, rules, data, opts = {}) {
   if (Object.prototype.hasOwnProperty.call(opts, 'exclude') && adapter.semanticExclude === false) {
     throw new Error('This adapter does not support semantic exclude queries; omit exclude or use the DOM adapter.')
   }
+  checkCodecRules(rules, opts)
   const mismatches = []
   validateShape(rules, data, [], mismatches)
   if (mismatches.length) throw new ShapeMismatch(mismatches)
@@ -64,17 +66,23 @@ function applyScalar(adapter, ctx, rule, value, trace, opts) {
     return ctx
   }
 
+  const codec = codecForRule(rule, opts)
+  if (codec) {
+    const matches = codec.selector ? adapter.find(ctx, codec.selector, opts) : [ctx]
+    if (matches.length) codec.codec.write(adapter, matches[0], value, { query: opts.query })
+    return ctx
+  }
+
   if (rule.startsWith('@')) {
     return writePropOrAttr(adapter, ctx, rule.slice(1), value)
   }
 
   const at = ruleAttrIndex(rule)
   if (at !== -1) {
-    const selector = rule.slice(0, at)
+    const { selector, all } = splitRule(rule)
     const name = rule.slice(at + 1)
     const matches = selector ? adapter.find(ctx, selector, opts) : [ctx]
-    if (matches.length === 0) return ctx
-    writePropOrAttr(adapter, matches[0], name, value)
+    for (const node of all ? matches : matches.slice(0, 1)) writePropOrAttr(adapter, node, name, value)
     return ctx
   }
 
@@ -83,9 +91,9 @@ function applyScalar(adapter, ctx, rule, value, trace, opts) {
     return ctx
   }
 
-  const matches = adapter.find(ctx, rule, opts)
-  if (matches.length === 0) return ctx
-  writeText(adapter, matches[0], value)
+  const { selector, all } = splitRule(rule)
+  const matches = adapter.find(ctx, selector, opts)
+  for (const node of all ? matches : matches.slice(0, 1)) writeText(adapter, node, value)
   return ctx
 }
 
@@ -157,6 +165,8 @@ function validateShape(rule, value, path, mismatches) {
   if (value === undefined) return
 
   if (typeof rule === 'string') {
+    // A codec judges its own value when it writes.
+    if (codecOf(rule)) return
     if (rule.endsWith('[]')) {
       if (!Array.isArray(value)) {
         mismatches.push({ path: pathStr(path), expected: 'array', got: typeofX(value) })

package/src/engine/codecs.js

@@ -0,0 +1,80 @@
+import { MAX_RULE_DEPTH, RulesParseError, UnknownCodec } from './errors.js'
+import { codecOf } from './rule-syntax.js'
+
+// A codec reads and writes one element's whole value as JSON, for content the
+// rule grammar cannot describe (a sheet's grid). It is named by the rule form
+// "selector@codec(name)", valid only under data-rules-version="2" and only as the
+// value of a top level key.
+//
+// codec = {
+//   name,
+//   read(adapter, node, ctx)          -> JSON value       ctx = { query?, view?, region? }
+//   write(adapter, node, value, ctx)  -> void | { regions }
+//   patch?(adapter, node, ops, ctx)   -> { changed, stale, regions }
+//   same(written, reread)             -> boolean
+//   styles?: string[]
+//   cut?(src, marker)                 -> { rest, regions }
+// }
+
+const NAME_RE = /^[a-z][a-z0-9-]*$/
+const registry = new Map()
+
+// The browser registry. Hosts pass `codecs` per call instead, so no state is
+// shared between requests.
+export function registerCodec(name, codec) {
+  if (typeof name !== 'string' || !NAME_RE.test(name)) {
+    throw new Error(`hyper-html-api: invalid codec name ${JSON.stringify(name)} (must match ${NAME_RE})`)
+  }
+  if (!codec || typeof codec.read !== 'function' || typeof codec.write !== 'function' || typeof codec.same !== 'function') {
+    throw new Error(`hyper-html-api: codec "${name}" needs read, write and same functions`)
+  }
+  registry.set(name, codec)
+}
+
+export function getCodec(name) {
+  return registry.get(name) ?? null
+}
+
+export function registeredCodecs() {
+  return Object.fromEntries(registry)
+}
+
+export const NEEDS_VERSION_2 = 'The @codec(name) rule form needs a rules tag with data-rules-version="2".'
+export const NEEDS_TOP_LEVEL = 'A @codec(name) rule must be the value of a top level key.'
+
+// The codec a rule names, or null for any other rule. Assumes checkCodecRules
+// already accepted the tree.
+export function codecForRule(rule, opts) {
+  const form = codecOf(rule)
+  return form ? { ...form, codec: opts.codecs[form.name] } : null
+}
+
+// Walks the whole rule tree once, before anything is read or written, so a
+// rules tree the call cannot honor refuses without a partial write. A codec
+// rule read as a plain attribute would return null for the whole value, and a
+// null that reaches a draft store or a guard baseline looks like the owner
+// emptied it, which is why every refusal here is loud.
+export function checkCodecRules(rules, opts = {}) {
+  const version = opts.version ?? '1'
+  const codecs = opts.codecs ?? {}
+  walk(rules, 0)
+
+  function walk(rule, depth) {
+    if (depth > MAX_RULE_DEPTH) return
+    if (typeof rule === 'string') {
+      const form = codecOf(rule)
+      if (!form) return
+      if (version !== '2') throw new RulesParseError(NEEDS_VERSION_2)
+      if (depth !== 1) throw new RulesParseError(NEEDS_TOP_LEVEL)
+      if (!Object.prototype.hasOwnProperty.call(codecs, form.name)) throw new UnknownCodec(form.name)
+      return
+    }
+    if (Array.isArray(rule)) {
+      walk(rule[1], depth + 1)
+      return
+    }
+    if (rule && typeof rule === 'object') {
+      for (const sub of Object.values(rule)) walk(sub, depth + 1)
+    }
+  }
+}

package/src/engine/errors.js

@@ -8,7 +8,7 @@ export class RulesParseError extends Error {
 
 export class UnknownRulesVersion extends Error {
   constructor(version) {
-    super(`unknown rules version: ${version}. Library supports "1".`)
+    super(`unknown rules version: ${version}. Library supports "1" and "2".`)
     this.name = 'UnknownRulesVersion'
     this.version = version
   }
@@ -92,3 +92,22 @@ export class WriteRejected extends Error {
     this.unmatched = unmatched
   }
 }
+
+export class UnknownCodec extends Error {
+  constructor(name) {
+    super(`unknown codec "${name}": no codec by that name is given to this call`)
+    this.name = 'UnknownCodec'
+    this.code = 'unknown-codec'
+    this.codec = name
+  }
+}
+
+// Thrown by a codec that will not take a write, with its own code (for
+// example "sheet-not-canonical"). A client error, like UnknownCodec.
+export class CodecRefused extends Error {
+  constructor(code, message) {
+    super(message)
+    this.name = 'CodecRefused'
+    this.code = code
+  }
+}

package/src/engine/extract.js

@@ -1,12 +1,14 @@
 import { DOM_PROPERTIES_SET } from './dom-properties.js'
 import { MaxRuleDepthExceeded, MAX_RULE_DEPTH } from './errors.js'
-import { ruleAttrIndex } from './rule-syntax.js'
+import { ruleAttrIndex, splitRule } from './rule-syntax.js'
 import { isCustomPropertyName, readStyleVar } from './style-vars.js'
+import { checkCodecRules, codecForRule } from './codecs.js'
 
 export function extract(adapter, root, rules, opts = {}) {
   if (Object.prototype.hasOwnProperty.call(opts, 'exclude') && adapter.semanticExclude === false) {
     throw new Error('This adapter does not support semantic exclude queries; omit exclude or use the DOM adapter.')
   }
+  checkCodecRules(rules, opts)
   return extractAt(adapter, root, rules, { depth: 0, path: [] }, opts)
 }
 
@@ -57,25 +59,37 @@ function extractScalar(adapter, ctx, rule, trace, opts) {
     return matches.map((n) => adapter.text(n))
   }
 
+  const codec = codecForRule(rule, opts)
+  if (codec) return readCodec(adapter, ctx, codec, opts)
+
   if (rule.startsWith('@')) {
     return readPropOrAttr(adapter, ctx, rule.slice(1))
   }
 
   const at = ruleAttrIndex(rule)
   if (at !== -1) {
-    const selector = rule.slice(0, at)
+    const { selector, all } = splitRule(rule)
     const name = rule.slice(at + 1)
     const matches = selector ? adapter.find(ctx, selector, opts) : [ctx]
+    if (all && opts.allMatches) return matches.map((n) => readPropOrAttr(adapter, n, name))
     if (matches.length === 0) return null
     return readPropOrAttr(adapter, matches[0], name)
   }
 
   if (rule === '.') return adapter.text(ctx)
 
-  const matches = adapter.find(ctx, rule, opts)
+  const { selector, all } = splitRule(rule)
+  const matches = adapter.find(ctx, selector, opts)
+  if (all && opts.allMatches) return matches.map((n) => adapter.text(n))
   return matches.length === 0 ? null : adapter.text(matches[0])
 }
 
+function readCodec(adapter, ctx, { selector, codec }, opts) {
+  const matches = selector ? adapter.find(ctx, selector, opts) : [ctx]
+  if (matches.length === 0) return null
+  return codec.read(adapter, matches[0], { query: opts.query, view: opts.view, region: opts.region })
+}
+
 // The path is copied because the caller is handed it and every nested path is
 // built from the same array. A throwing hook must not abandon the extract.
 function reportRows(opts, trace, nodes) {

package/src/engine/index.js

@@ -6,7 +6,9 @@ export { extract } from './extract.js'
 export { apply } from './apply.js'
 export { findRulesIn } from './rules-tag.js'
 export { parseStrict, parseRelaxed } from './rules.js'
-export { ruleAttrIndex, splitRule } from './rule-syntax.js'
+export { ruleAttrIndex, splitRule, codecOf } from './rule-syntax.js'
+export { registerCodec, getCodec, registeredCodecs, checkCodecRules } from './codecs.js'
+export { SUPPORTED_VERSION, SUPPORTED_VERSIONS } from './rules-tag.js'
 export * as errors from './errors.js'
 export { DOM_PROPERTIES, DOM_PROPERTIES_SET, DOM_PROPERTIES_READ_ONLY_SET } from './dom-properties.js'
 export { WRITE_POLICY, guardAdapter, checkAttribute, checkCustomPropertyValue, urlScheme } from './write-policy.js'
@@ -21,7 +23,7 @@ export { trackAdapter, spliceDocument } from './splice.js'
 // For a Document root or the cheerio $.root(), ownerDocument is absent → no-op.
 export function resolveRules(adapter, root, source) {
   if (source && typeof source === 'object') {
-    return { rules: source, tagNode: null }
+    return { rules: source, tagNode: null, version: '1' }
   }
   if (typeof source === 'string') {
     const searchRoot = (root && root.ownerDocument) ? root.ownerDocument : root
@@ -36,11 +38,13 @@ export function bind(adapter, root, source, opts) {
     const what = typeof source === 'string' ? `data-rules-name~="${source}"` : 'the provided rules object'
     throw new Error(`hyper-html-api: could not resolve rules for ${what}`)
   }
-  const { rules, tagNode } = found
+  const { rules, tagNode, version } = found
+  const callOpts = { version, ...opts }
   return {
     rules,
     tagNode,                                                // informational only; null for a literal object
-    get: () => extract(adapter, root, rules, opts),         // opts (skip/templateAttr) forwarded
-    set: (data) => apply(adapter, root, rules, data, opts),
+    version,
+    get: () => extract(adapter, root, rules, callOpts),     // opts (skip/templateAttr/codecs) forwarded
+    set: (data) => apply(adapter, root, rules, data, callOpts),
   }
 }

package/src/engine/round-trip.js

@@ -4,7 +4,7 @@ import {
   coercePropValue,
 } from './dom-properties.js'
 import { WriteNotRoundTripped } from './errors.js'
-import { ruleAttrIndex } from './rule-syntax.js'
+import { codecOf, ruleAttrIndex, splitRule } from './rule-syntax.js'
 import { isCustomPropertyName } from './style-vars.js'
 
 // Props whose read-side value keeps its whitespace. Every other text rule reads
@@ -18,22 +18,28 @@ const UNTRIMMED_PROPS = new Set(['textContent', 'innerText'])
 // WriteNotRoundTripped instead of returning a false success. Only the supplied
 // projection is checked: omitted keys and undefined are skipped exactly as the
 // writer skips them, which is what keeps partial updates working.
-export function assertRoundTrip(rules, requested, actual) {
-  check(rules, requested, actual, [])
+// A codec value is compared by its codec's own same(), from `codecs`.
+export function assertRoundTrip(rules, requested, actual, codecs = {}) {
+  check(rules, requested, actual, [], codecs)
 }
 
-function check(rule, want, got, path) {
+function check(rule, want, got, path, codecs) {
   if (want === undefined) return
   if (typeof rule === 'string') {
+    const form = codecOf(rule)
+    if (form) {
+      if (!codecs[form.name].same(want, got)) fail(path)
+      return
+    }
     checkScalarRule(rule, want, got, path)
     return
   }
   if (Array.isArray(rule)) {
-    checkList(rule[1], want, got, path)
+    checkList(rule[1], want, got, path, codecs)
     return
   }
   if (typeof rule === 'object' && rule !== null) {
-    checkObject(rule, want, got, path)
+    checkObject(rule, want, got, path, codecs)
   }
 }
 
@@ -47,6 +53,14 @@ function checkScalarRule(rule, want, got, path) {
     return
   }
   const at = ruleAttrIndex(rule)
+  if (splitRule(rule).all) {
+    if (!Array.isArray(got) || got.length === 0) fail(path)
+    for (const one of got) {
+      if (at !== -1) checkPropOrAttr(rule.slice(at + 1), want, one, path)
+      else checkText(want, one, path)
+    }
+    return
+  }
   if (at !== -1) {
     checkPropOrAttr(rule.slice(at + 1), want, got, path)
     return
@@ -63,16 +77,16 @@ function checkTextList(want, got, path) {
   for (let i = 0; i < want.length; i++) checkText(want[i], got[i], [...path, i])
 }
 
-function checkObject(rule, want, got, path) {
+function checkObject(rule, want, got, path, codecs) {
   if (!isPlainObject(want) || !isPlainObject(got)) fail(path)
   for (const [key, sub] of Object.entries(rule)) {
-    check(sub, want[key], got[key], [...path, key])
+    check(sub, want[key], got[key], [...path, key], codecs)
   }
 }
 
-function checkList(shape, want, got, path) {
+function checkList(shape, want, got, path, codecs) {
   if (!Array.isArray(want) || !Array.isArray(got) || want.length !== got.length) fail(path)
-  for (let i = 0; i < want.length; i++) check(shape, want[i], got[i], [...path, i])
+  for (let i = 0; i < want.length; i++) check(shape, want[i], got[i], [...path, i], codecs)
 }
 
 function checkPropOrAttr(name, want, got, path) {

package/src/engine/rule-syntax.js

@@ -10,6 +10,8 @@
 // rule into `a[href="mailto:hi` and `example.com"]`, which reads downstream as
 // an invalid selector when the rule the author wrote was correct.
 
+import { RulesParseError } from './errors.js'
+
 // Index of the separator "@", or -1 when the rule has no prop part.
 export function ruleAttrIndex(rule) {
   let depth = 0
@@ -34,12 +36,22 @@ export function ruleAttrIndex(rule) {
   return found
 }
 
+const ALL = '[*]'
+
 // "<selector>@<prop>" split at that separator. selector is "" for a leading "@"
-// (the context node itself); prop is null when the rule names no prop.
+// (the context node itself); prop is null when the rule names no prop. A selector
+// that ends in "[*]" names every match instead of the first: `all` is true and
+// the marker is removed, because "[*]" is not CSS and no adapter can run it.
 export function splitRule(rule) {
   const at = ruleAttrIndex(rule)
-  if (at === -1) return { selector: rule, prop: null }
-  return { selector: rule.slice(0, at), prop: rule.slice(at + 1) || null }
+  const head = at === -1 ? rule : rule.slice(0, at)
+  const all = head.endsWith(ALL)
+  const split = {
+    selector: all ? head.slice(0, -ALL.length) : head,
+    prop: at === -1 ? null : rule.slice(at + 1) || null,
+  }
+  if (all) split.all = true
+  return split
 }
 
 // The list grammar needs a second split: "container > row" says where a row
@@ -112,3 +124,17 @@ function isSingleCompound(selector, start) {
   }
   return true
 }
+
+const CODEC_PROP = /^codec\(([a-z][a-z0-9-]*)\)$/
+
+// { selector, name } when a scalar rule calls a codec, else null.
+export function codecOf(rule) {
+  if (typeof rule !== 'string') return null
+  const at = ruleAttrIndex(rule)
+  if (at === -1) return null
+  const match = CODEC_PROP.exec(rule.slice(at + 1))
+  if (!match) return null
+  const { selector, all } = splitRule(rule)
+  if (all) throw new RulesParseError('A @codec(name) rule cannot use [*].')
+  return { selector, name: match[1] }
+}

package/src/engine/rules-tag.js

@@ -2,6 +2,7 @@ import { parseRelaxed } from './rules.js'
 import { UnknownRulesVersion } from './errors.js'
 
 export const SUPPORTED_VERSION = '1'
+export const SUPPORTED_VERSIONS = ['1', '2']
 const TOKEN_RE = /^[a-zA-Z0-9_-]+$/
 
 // findRulesIn(adapter, root)         → first script[data-rules-name] (tooling/no-token)
@@ -29,12 +30,12 @@ export function findRulesIn(adapter, root, token) {
 
   const tagNode = candidates[0]
   const version = adapter.attr(tagNode, 'data-rules-version')
-  if (version !== SUPPORTED_VERSION) throw new UnknownRulesVersion(version)
+  if (!SUPPORTED_VERSIONS.includes(version)) throw new UnknownRulesVersion(version)
 
   // Script tag bodies accept the same relaxed JSON syntax as the ?data=
   // URL parameter: unquoted keys, single-quoted strings, trailing commas.
   // parseRelaxed tries strict JSON.parse first, so valid JSON keeps
   // parsing identically.
   const rules = parseRelaxed(adapter.text(tagNode))
-  return { rules, tagNode }
+  return { rules, tagNode, version }
 }

package/src/engine/write-plan.js

@@ -1,4 +1,5 @@
-import { ruleAttrIndex } from './rule-syntax.js'
+import { splitRule } from './rule-syntax.js'
+import { checkCodecRules } from './codecs.js'
 
 function isPlainObject(v) {
   return v !== null && typeof v === 'object' && !Array.isArray(v)
@@ -13,6 +14,7 @@ function label(path) {
 // Shape problems are left to apply(), which already reports them. Inside list
 // items only unknown keys are checked, because new rows do not exist yet.
 export function planWrite(adapter, root, rules, data, opts = {}) {
+  checkCodecRules(rules, opts)
   const unknownKeys = []
   const unmatched = []
 
@@ -34,8 +36,7 @@ export function planWrite(adapter, root, rules, data, opts = {}) {
     if (value === undefined) return
     if (typeof rule === 'string') {
       if (rule.endsWith('[]') || rule === '.' || rule.startsWith('@')) return
-      const at = ruleAttrIndex(rule)
-      const selector = at === -1 ? rule : rule.slice(0, at)
+      const { selector } = splitRule(rule)
       if (!selector) return
       if (adapter.find(ctx, selector, opts).length === 0) unmatched.push({ path: label(path), selector })
       return

package/src/page.js

@@ -5,7 +5,7 @@ import { NoRulesTag, RulesParseError } from './engine/errors.js'
 import { parseRelaxed } from './engine/rules.js'
 import { writeDocument } from './write.js'
 
-const PAGE = /^page(?:\.[0-9]+)?$/
+const PAGE = /^blockeditor(?:\.[0-9]+)?$/
 const TEXT = new Set(['paragraph', 'heading', 'list_item', 'callout', 'code_block', 'toggle'])
 const MARKS = ['b', 'i', 's', 'c', 'a']
 
@@ -21,10 +21,19 @@ function refuse(message) {
   throw new PageWriteRefused('invalid-content', message)
 }
 
+// Inert content (a starter article kept in a <template>) is not part of the page, as in a browser.
+// Cheerio parents a template's content under a root node, which closest() does not climb past.
+function live(_, node) {
+  for (let up = node.parent; up; up = up.parent) {
+    if (up.type === 'tag' && (up.name === 'template' || up.name === 'noscript')) return false
+  }
+  return true
+}
+
 function pageNodes($) {
-  const tags = $('script[merge][clay~="live"]').filter((_, node) => PAGE.test($(node).attr('merge')))
+  const tags = $('script[merge][clay~="live"]').filter((_, node) => PAGE.test($(node).attr('merge'))).filter(live)
   if (!tags.length) return null
-  const articles = $('article[data-page]')
+  const articles = $('article[data-blockeditor]').filter(live)
   if (tags.length !== 1 || articles.length !== 1) refuse('Expected one page store and one page article')
   return { tag: tags[0], article: articles[0] }
 }
@@ -316,8 +325,9 @@ export async function writePageDocument(load, html, data, options = {}) {
   const next$ = load(candidate.html, { sourceCodeLocationInfo: true })
   const nextNodes = pageNodes(next$)
   const aligned$ = load(aligned)
-  const changes = pageChanges(next$, nextNodes.article, aligned$, aligned$('article[data-page]')[0], page.blocks, before.model, projection)
-  const unchangedAttrs = canon(next$(nextNodes.article).attr()) === canon(aligned$('article[data-page]').attr())
+  const alignedArticle = pageNodes(aligned$).article
+  const changes = pageChanges(next$, nextNodes.article, aligned$, alignedArticle, page.blocks, before.model, projection)
+  const unchangedAttrs = canon(next$(nextNodes.article).attr()) === canon(aligned$(alignedArticle).attr())
   const proposed = projectionOf(load, proposedBlocks(page.blocks, changes), projection)
   if (!unchangedAttrs || !sameArticle(next$, nextNodes.article, proposed)) {
     refuse('The article edit cannot be represented in the page store')