npm - azoxjs - Versions diffs - 1.0.1 → 1.3.0 - Mend

azoxjs 1.0.1 → 1.3.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 (15) hide show

package/README.md +1 -1
package/core/build.js +30 -2
package/core/compiler/compileToJs.js +237 -27
package/core/compiler/index.d.ts +41 -0
package/core/compiler/parser.js +38 -6
package/core/compiler/resolveComponents.js +67 -7
package/core/compiler/scopeStyles.js +151 -0
package/core/index.d.ts +43 -0
package/core/index.js +1 -0
package/core/reactivity/signal.d.ts +106 -0
package/core/reactivity/signal.js +61 -0
package/core/renderer/renderToHtml.js +14 -3
package/core/renderer/serverScope.js +102 -4
package/core/router/navigate.js +25 -2
package/package.json +17 -7

package/README.md CHANGED Viewed

@@ -11,7 +11,7 @@ third-party CLI dependencies, no borrowed syntax from React, Vue, or
 Next.js. It compiles `.azox` components directly into fine-grained,
 signal-driven DOM updates.
-> Status: stable (v1.0.1). The template syntax, the reactivity exports
+> Status: stable (v1.3.0). The template syntax, the reactivity exports
 > and the shape of the build output will not change without a 2.0. What
 > Azox does **not** do is listed in
 > [Limitations](https://azox.dev/docs/limitations) — those are stopping

package/core/build.js CHANGED Viewed

@@ -132,7 +132,18 @@ export function buildRoute(projectDir, route, { transformHtml } = {}) {
   // A component's <head> block is merged in behind the page's own, so
   // a layout can carry the stylesheet and fonts every page needs while
   // the page keeps the last word on its title and description.
-  const head = mergeHeads(ast.head, ast.componentHeads ?? []);
+  // A component's scoped CSS is plain stylesheet text by this point,
+  // with every selector already rewritten to require its scope
+  // attribute. One <style> carries all of them, so a page makes no
+  // extra request for styles that are only a few lines each.
+  // A page's own <style> is global: it has no caller to be scoped
+  // against, and `body { … }` in a page should mean what it says.
+  // Without this it was extracted by the parser and then silently
+  // dropped, which is worse than the error it used to raise.
+  const scoped = [ast.style, ...(ast.componentStyles ?? [])].filter(Boolean);
+  const styleTag = scoped.length ? `<style>\n${scoped.join('\n')}\n</style>` : '';
+  const head = mergeHeads(ast.head, [...(ast.componentHeads ?? []), styleTag].filter(Boolean));
   let document = wrapDocument(html, projectTitle(projectDir), head, {
     routerSrc: router ? `${route.assetPrefix}${ROUTER_FILENAME}` : null,
@@ -337,6 +348,17 @@ function removeStaleOutput(projectDir, results, assets = []) {
 // Everything in public/ is copied to the build root untouched, so a
 // stylesheet, font or image is referenced by the same path in source
 // and in the built site: public/style.css -> /style.css.
+// Files an editor or OS leaves behind, which should not be published.
+//
+// Every dotfile used to be skipped, which also dropped the ones a static
+// host needs: .nojekyll tells GitHub Pages not to run Jekyll over the
+// output, and .well-known/ is how a domain or certificate is verified.
+const EDITOR_JUNK = new Set(['.DS_Store', 'Thumbs.db', '.git', 'node_modules']);
+function isEditorJunk(name) {
+  return EDITOR_JUNK.has(name);
+}
 export function copyPublicAssets(projectDir) {
   const publicDir = resolve(projectDir, PUBLIC_DIR);
   if (!existsSync(publicDir)) return [];
@@ -346,7 +368,7 @@ export function copyPublicAssets(projectDir) {
   const walk = (dir, relativeDir) => {
     for (const entry of readdirSync(dir, { withFileTypes: true })) {
-      if (entry.name.startsWith('.')) continue;
+      if (isEditorJunk(entry.name)) continue;
       const from = join(dir, entry.name);
       const to = join(buildRoot, relativeDir, entry.name);
@@ -589,6 +611,12 @@ function uniqueTagName(line) {
   const meta = line.match(/^<meta\s[^>]*name=["']([^"']+)["']/i);
   if (meta) return `meta:${meta[1].toLowerCase()}`;
+  // Open Graph and Twitter cards key on `property`, not `name`. Without
+  // this a shared default and a page's own tag both shipped, and a
+  // scraper takes whichever it sees first.
+  const property = line.match(/^<meta\s[^>]*property=["']([^"']+)["']/i);
+  if (property) return `meta:${property[1].toLowerCase()}`;
   return null;
 }

package/core/compiler/compileToJs.js CHANGED Viewed

@@ -7,9 +7,35 @@
 // the browser, which is what makes the playground possible. Anything
 // that needs to know about paths on disk belongs in build.js.
+// Control-flow markers carry a label. An empty comment serialises to
+// <!---->, so two adjacent blocks produce four identical nodes and a
+// walker adopting server markup cannot tell a start from an end, nor
+// one block from the next. The server emits the same pair.
+//
+// See docs/hydration.md.
+export const BLOCK_START = '[';
+export const BLOCK_END = ']';
 let uid = 0;
 const nextId = () => `_el${uid++}`;
+// Node variable -> the binding holding what the cursor handed back for
+// it, or absent when the node was created outright. Whoever appends a
+// node consults this: an adopted node is already in place, and
+// appending an existing child detaches and re-attaches it, which blurs
+// it and loses the reader's focus. Set per compile, and cleared with
+// the variable counter — a page compiles twice when it adopts, and the
+// second pass reuses the same names.
+let adoptedOf = new Map();
+// Tags that open an SVG document fragment. Everything inside one is in
+// the SVG namespace too, which is threaded down as `inSvg` — <circle>
+// and <path> carry no hint of their own.
+//
+// <a> and <script> exist in both languages; they are left as HTML,
+// which is what they almost always are on a page.
+const SVG_TAGS = new Set(['svg']);
 // Names the build resolved to constants — an inlined JSON import, say.
 // An expression reading only these can never change, so it is emitted
 // as text rather than wrapped in an effect. Set per compile.
@@ -78,13 +104,42 @@ export function compileToModule(
   { runtimeSpecifier, rewriteImports, inlineModules, routeParams }
 ) {
   uid = 0;
+  adoptedOf = new Map();
   // Values the build resolved: their bindings need no effect, which is
   // what lets a page whose only "dynamic" text is a version number ship
   // as a static page.
   constantValues = inlineModules ?? {};
   constantNames = new Set(Object.keys(constantValues));
-  const statements = [];
-  const rootVar = emitNode(ast.markup, statements, 'root');
+  let statements = [];
+  let rootVar = emitNode(ast.markup, statements, 'root');
+  // Adoption reuses the nodes the server sent instead of rebuilding
+  // them, which is what preserves focus, a caret position and an open
+  // <details> across hydration.
+  //
+  // Control flow is excluded for now. An <if> or <each> creates its
+  // marker pair and its rows fresh on every run, so a page mixing
+  // adopted markup with a rebuilt block would bind effects across two
+  // generations of nodes — worse than the wholesale rebuild it
+  // replaces. Pages carrying a block keep that rebuild until the
+  // walker can adopt between the markers too; see docs/hydration.md.
+  const hasControlFlow = statements.some((line) => line.includes('createComment('));
+  // A static page ships no hydration block, so no cursor can ever reach
+  // its render(): adopting there would import the walker for nothing.
+  // Decided from this pass, whose effect and listener lines are the same
+  // ones the second pass emits.
+  const staticFirstPass = !statements.some(
+    (line) => line.startsWith('effect(') || line.includes('.addEventListener(')
+  );
+  const adopts = !hasControlFlow && !staticFirstPass;
+  if (adopts) {
+    // Emitted again from a clean slate: the cursor changes almost every
+    // creation site, and reusing the first pass's variable counter
+    // would leave gaps in the names.
+    uid = 0;
+    statements = [];
+    rootVar = emitNode(ast.markup, statements, 'root', false, '_cursor');
+  }
   let script = dropComponentImports(ast.script);
   script = resolveRouteDeclarations(script, routeParams);
@@ -117,6 +172,10 @@ export function compileToModule(
   // module needs dispose as well as effect.
   const needsDispose = statements.some((line) => line.includes('dispose('));
   const needsUntracked = statements.some((line) => line.includes('untracked('));
+  const needsAdopt = statements.some((line) => line.includes('adopt('));
+  // The root is adopted from the mount the same way children are, so it
+  // must not be re-appended either.
+  const rootTaken = adoptedOf.get(rootVar);
   const { imports, body } = mergeImports(
     script,
@@ -124,7 +183,8 @@ export function compileToModule(
     runtimeSpecifier,
     needsDispose,
     inlineModules,
-    needsUntracked
+    needsUntracked,
+    needsAdopt
   );
   // Narrowed to what the module actually reads, so importing
@@ -135,12 +195,12 @@ export function compileToModule(
 ${imports}
 ${inlined}${body}
-export function render(mount) {
+export function render(mount${adopts ? ', _cursor = null' : ''}) {
 ${statements.map((line) => '  ' + line).join('\n')}
-  mount.appendChild(${rootVar});
+${rootTaken ? `  if (!${rootTaken}) mount.appendChild(${rootVar});` : `  mount.appendChild(${rootVar});`}
   return ${rootVar};
 }
-${isStatic ? staticNote() : hydrateBlock()}`.trimStart();
+${isStatic ? staticNote() : hydrateBlock(adopts)}`.trimStart();
 }
 // Collects every import the module needs into one set of statements,
@@ -156,7 +216,8 @@ function mergeImports(
   runtimeSpecifier,
   needsDispose = false,
   inlineModules = null,
-  needsUntracked = false
+  needsUntracked = false,
+  needsAdopt = false
 ) {
   const pageImports = [...script.matchAll(/^\s*(import\s[^;\n]+;?)\s*$/gm)]
     .map((m) => m[1].trim())
@@ -221,6 +282,7 @@ function mergeImports(
   record(`import { effect } from '${runtimeSpecifier}';`);
   if (needsDispose) record(`import { dispose } from '${runtimeSpecifier}';`);
   if (needsUntracked) record(`import { untracked } from '${runtimeSpecifier}';`);
+  if (needsAdopt) record(`import { adopt } from '${runtimeSpecifier}';`);
   const lines = [
     ...[...named].map(([specifier, bindings]) => {
@@ -371,23 +433,49 @@ function staticNote() {
 `;
 }
-function hydrateBlock() {
+function hydrateBlock(adopts = false) {
+  const mountLines = adopts
+    ? `  // Adopting: the walker takes each node the server already sent,
+  // so focus, a caret position and an open <details> survive. Anything
+  // that does not match is created instead, and anything left over is
+  // removed — a stale page costs the rebuild we used to do always.
+  const _cursor = adopt(mount);
+  render(mount, _cursor);
+  _cursor.done();`
+    : `  mount.innerHTML = '';
+  render(mount);`;
   return `
 // Hydrate: the SSR markup is already on the page, so clear it and
 // mount the reactive version in its place.
+//
+// Everything inside the root is replaced, so a listener another script
+// attached to server-rendered markup is discarded with it — a menu
+// button that looked right and did nothing. The event says the DOM has
+// been rebuilt, and is the same one the router dispatches after a
+// navigation, so one listener covers both.
 if (typeof document !== 'undefined') {
   const mount = document.querySelector('[data-azox-root]') ?? document.body;
-  mount.innerHTML = '';
-  render(mount);
+${mountLines}
+  // Guarded: the emitted module is also run against minimal DOM stubs —
+  // in tests, and anywhere rendering happens outside a browser — where
+  // CustomEvent and dispatchEvent need not exist.
+  if (typeof CustomEvent === 'function' && typeof document.dispatchEvent === 'function') {
+    document.dispatchEvent(
+      new CustomEvent('azox:navigate', {
+        detail: { url: typeof location !== 'undefined' ? location.href : null, from: null, hydrated: true },
+      })
+    );
+  }
 }
 `;
 }
-function emitNode(node, statements, fallbackVar) {
+function emitNode(node, statements, fallbackVar, inSvg = false, cursor = null) {
   if (!node) return 'null';
   if (node.type === 'text') {
-    return emitText(node, statements, fallbackVar);
+    return emitText(node, statements, fallbackVar, cursor);
   }
   // A fragment (from <slot />) has no element of its own; it wraps
@@ -395,7 +483,9 @@ function emitNode(node, statements, fallbackVar) {
   if (node.type === 'fragment') {
     const varName = nextId();
     statements.push(`const ${varName} = document.createDocumentFragment();`);
-    appendChildren(varName, node.children, statements, fallbackVar);
+    // A fragment owns no node of its own, so its children are adopted
+    // against the parent's cursor rather than a new one.
+    appendChildren(varName, node.children, statements, fallbackVar, inSvg, cursor, true);
     return varName;
   }
@@ -404,13 +494,40 @@ function emitNode(node, statements, fallbackVar) {
   if (node.type === 'scope') return emitScope(node, statements, fallbackVar);
   const varName = nextId();
-  statements.push(`const ${varName} = document.createElement(${JSON.stringify(node.name)});`);
+  // An SVG element needs its namespace. createElement always makes an
+  // HTML element, so an inline <svg> compiled to something the browser
+  // laid out as an unknown HTML tag: present in the DOM, 0×0 on screen.
+  const svg = inSvg || SVG_TAGS.has(node.name);
+  // With a cursor, take the node the server already sent when it
+  // matches. A mismatch yields null and this falls back to creating, so
+  // a stale page costs the work we do today rather than breaking.
+  const create = svg
+    ? `document.createElementNS("http://www.w3.org/2000/svg", ${JSON.stringify(node.name)})`
+    : `document.createElement(${JSON.stringify(node.name)})`;
+  // Optional call: render() is exported, and a direct caller passes no
+  // cursor at all. Without the guard the root line would throw on null
+  // instead of falling back to creating the node.
+  //
+  // The adopted node is kept in its own binding so whoever appends this
+  // one can tell the two cases apart: an adopted node is already in
+  // place, and re-appending it would detach and re-attach it, which
+  // blurs it. See docs/hydration.md.
+  if (cursor) {
+    const taken = nextId();
+    statements.push(`const ${taken} = ${cursor}?.next(${JSON.stringify(node.name)});`);
+    statements.push(`const ${varName} = ${taken} ?? ${create};`);
+    adoptedOf.set(varName, taken);
+  } else {
+    statements.push(`const ${varName} = ${create};`);
+  }
   for (const [key, attr] of Object.entries(node.attrs)) {
     emitAttr(varName, key, attr, statements, node.name);
   }
-  appendChildren(varName, node.children, statements, fallbackVar);
+  appendChildren(varName, node.children, statements, fallbackVar, svg, cursor);
   return varName;
 }
@@ -462,8 +579,8 @@ function emitControlBlock(statements, buildBody, sourceExpr, renderCall) {
   const holder = nextId();
-  statements.push(`const ${start} = document.createComment('');`);
-  statements.push(`const ${end} = document.createComment('');`);
+  statements.push(`const ${start} = document.createComment('${BLOCK_START}');`);
+  statements.push(`const ${end} = document.createComment('${BLOCK_END}');`);
   // The markers go into their own fragment straight away, so they
   // always have a parent to insert into. Waiting for the page to be
@@ -528,8 +645,8 @@ function emitKeyedEach(node, statements) {
   const rows = nextId();
   const holder = nextId();
-  statements.push(`const ${start} = document.createComment('');`);
-  statements.push(`const ${end} = document.createComment('');`);
+  statements.push(`const ${start} = document.createComment('${BLOCK_START}');`);
+  statements.push(`const ${end} = document.createComment('${BLOCK_END}');`);
   statements.push(`const ${holder} = document.createDocumentFragment();`);
   statements.push(`${holder}.append(${start}, ${end});`);
@@ -595,8 +712,10 @@ function emitKeyedEach(node, statements) {
   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(`    // insertBefore detaches and re-attaches, even when the node`);
+  statements.push(`    // is already where it belongs — so this re-seeds the row and`);
+  statements.push(`    // would blur anything focused inside it. Harmless while rows`);
+  statements.push(`    // are built fresh, and the thing to fix when they are adopted.`);
   statements.push(`    for (const _node of _row.nodes) _parent.insertBefore(_node, ${end});`);
   statements.push(`    _i++;`);
   statements.push(`  }`);
@@ -669,11 +788,48 @@ function emitIf(node, statements) {
   );
 }
-function appendChildren(parentVar, children, statements, fallbackVar) {
+function appendChildren(
+  parentVar,
+  children,
+  statements,
+  fallbackVar,
+  inSvg = false,
+  cursor = null,
+  reuseCursor = false
+) {
+  // Each element walks its own children, so a nested cursor is opened
+  // for it. A node the cursor handed back is already in place and must
+  // not be appended: appending an existing child detaches and
+  // re-attaches it, which blurs it and loses the reader's focus. Only a
+  // created node is appended. See docs/hydration.md.
+  //
+  // A fragment is the exception: it owns no node in the document, so
+  // there is nothing to open a cursor against. Its children continue
+  // the parent's walk, and the parent closes it.
+  //
+  // Nothing to walk: a void element like <input> would otherwise open a
+  // cursor and close it again without ever calling next().
+  if (!children.length) return;
+  let inner = reuseCursor ? cursor : null;
+  if (!reuseCursor && cursor) {
+    inner = nextId();
+    statements.push(`const ${inner} = adopt(${parentVar});`);
+  }
   for (const child of children) {
-    const childVar = emitNode(child, statements, fallbackVar);
-    if (childVar !== 'null') statements.push(`${parentVar}.appendChild(${childVar});`);
+    const childVar = emitNode(child, statements, fallbackVar, inSvg, inner);
+    if (childVar === 'null') continue;
+    const taken = adoptedOf.get(childVar);
+    statements.push(
+      taken
+        ? `if (!${taken}) ${parentVar}.appendChild(${childVar});`
+        : `${parentVar}.appendChild(${childVar});`
+    );
   }
+  // Anything the server sent that the module did not claim is stale.
+  if (inner && !reuseCursor) statements.push(`${inner}.done();`);
 }
 // createTextNode takes text, not markup, so an entity the author
@@ -699,7 +855,7 @@ function foldLiteralParts(parts) {
   });
 }
-function emitText(node, statements, fallbackVar) {
+function emitText(node, statements, fallbackVar, cursor = null) {
   const isFixed = (part) => part.kind === 'static' || part.kind === 'literal';
   node = { ...node, parts: foldConstantParts(foldLiteralParts(node.parts)) };
@@ -707,13 +863,29 @@ function emitText(node, statements, fallbackVar) {
   if (node.parts.every(isFixed)) {
     const value = node.parts.map(textValue).join('');
     const varName = nextId();
-    statements.push(`const ${varName} = document.createTextNode(${JSON.stringify(value)});`);
+    if (cursor) {
+      const taken = nextId();
+      statements.push(`const ${taken} = ${cursor}?.next(null);`);
+      statements.push(
+        `const ${varName} = ${taken} ?? document.createTextNode(${JSON.stringify(value)});`
+      );
+      adoptedOf.set(varName, taken);
+    } else {
+      statements.push(`const ${varName} = document.createTextNode(${JSON.stringify(value)});`);
+    }
     return varName;
   }
   // Dynamic text: one text node, one effect that rewrites its data.
   const varName = nextId();
-  statements.push(`const ${varName} = document.createTextNode('');`);
+  if (cursor) {
+    const taken = nextId();
+    statements.push(`const ${taken} = ${cursor}?.next(null);`);
+    statements.push(`const ${varName} = ${taken} ?? document.createTextNode('');`);
+    adoptedOf.set(varName, taken);
+  } else {
+    statements.push(`const ${varName} = document.createTextNode('');`);
+  }
   const expr = node.parts
     .map((part) => (isFixed(part) ? JSON.stringify(textValue(part)) : `String(${part.expr})`))
     .join(' + ');
@@ -782,6 +954,7 @@ const DOM_PROPERTIES = new Set(['value', 'checked', 'selected', 'indeterminate']
 function emitAttr(varName, key, attr, statements, tagName) {
   if (key.startsWith('on:')) {
     const event = key.slice(3);
+    assertHandler(key, attr.expr);
     statements.push(`${varName}.addEventListener(${JSON.stringify(event)}, ${attr.expr});`);
     return;
   }
@@ -807,6 +980,43 @@ function emitAttr(varName, key, attr, statements, tagName) {
   statements.push(`effect(() => { ${varName}.setAttribute(${JSON.stringify(key)}, String(${attr.expr})); });`);
 }
+// A listener is the expression itself, so `on:click={n.set(1)}` passes
+// addEventListener whatever the call returned — and the call already ran
+// while the page was being built. The button then appears to fire once on
+// load and never again, with no error anywhere. Caught here instead.
+//
+// Only a call at the top level is rejected. A handler is far more often a
+// name (`handler`, `obj.method`, `fns[i]`) or an arrow whose body happens
+// to contain a call, and all of those have to keep working.
+function assertHandler(key, rawExpr) {
+  const expr = rawExpr.trim();
+  if (/=>/.test(expr)) return;
+  if (/^(async\s+)?function\b/.test(expr)) return;
+  const opening = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\[[^\]]*\])*\(/.exec(expr);
+  if (!opening || !expr.endsWith(')')) return;
+  // Balanced from the first `(`: only a call that closes at the very end
+  // is the whole expression. `f(1) || g` is something else, and left
+  // alone.
+  let depth = 0;
+  for (let i = opening[0].length - 1; i < expr.length; i++) {
+    if (expr[i] === '(') depth++;
+    else if (expr[i] === ')') {
+      depth--;
+      if (depth === 0 && i !== expr.length - 1) return;
+    }
+  }
+  const name = opening[0].slice(0, -1);
+  throw new Error(
+    `Azox: ${key}={${expr}} calls ${name}() while the page is built, and ` +
+      `passes the result as the listener — ` +
+      `write ${key}={() => ${expr}} to call it on the event instead`
+  );
+}
 // Two-way binding: the element shows the signal, and the signal follows
 // the element. Writing it by hand means a value= and an on:input= that
 // have to agree, and getting the event or the property wrong is easy —

package/core/compiler/index.d.ts ADDED Viewed

@@ -0,0 +1,41 @@
+// Types for `azoxjs/compiler`.
+//
+// The compiler is free of Node built-ins on purpose, so these describe
+// an API that runs in a browser as well as in the build.
+/** A parsed `.azox` file. The node shapes are internal and may change. */
+export interface AzoxAst {
+  /** The `<script>` block, with its imports intact. */
+  script: string;
+  /** The `<head>` block, verbatim. */
+  head: string;
+  /** The markup, as a tree the compiler and renderer both walk. */
+  markup: unknown;
+  /** Component name → the specifier it was imported from. */
+  components: Record<string, string>;
+  /** Prop names the file declared with `props()`. */
+  props: string[];
+  /** Route parameter names the file declared with `params()`. */
+  params: string[];
+}
+export interface CompileOptions {
+  /** How the emitted module should import the runtime. */
+  runtimeSpecifier: string;
+  /**
+   * Rebases the author's relative imports, since compiled output does
+   * not sit beside the source. Called with the file an import was
+   * written in, which differs from the page for a hoisted one.
+   */
+  rewriteImports?: (script: string, sourcePath?: string) => string;
+  /** Values the build resolved, inlined instead of imported. */
+  inlineModules?: Record<string, unknown>;
+  /** Resolved parameters for one page of a dynamic route. */
+  routeParams?: Record<string, string> | null;
+}
+/** Parses a `.azox` file. Throws on malformed markup, naming the tag. */
+export declare function parseAzox(source: string): AzoxAst;
+/** Compiles a parsed file into a JavaScript module, as a string. */
+export declare function compileToModule(ast: AzoxAst, options: CompileOptions): string;

package/core/compiler/parser.js CHANGED Viewed

@@ -16,19 +16,40 @@ export class ParseError extends BuildError {}
 const isComponentName = (name) => /^[A-Z]/.test(name);
 export function parseAzox(source) {
-  const scriptMatch = source.match(/<script>([\s\S]*?)<\/script>/);
+  // <script>, <head> and <style> are pulled out of the source before
+  // anything else looks at it. A literal <text> block may contain those
+  // very tags — documenting them requires it — so the spans are blanked
+  // first, and only what is left is searched. Without this, a code
+  // sample showing a <style> block was eaten as the page's own CSS.
+  const searchable = blankTextBlocks(source);
+  const scriptMatch = searchable.match(/<script>([\s\S]*?)<\/script>/);
   const script = scriptMatch ? scriptMatch[1].trim() : '';
   // An optional <head> block is copied into the document head
   // verbatim: stylesheets, meta tags, fonts. It is markup for the
   // document, not for the page body, so it skips the AST entirely.
-  const headMatch = source.match(/<head>([\s\S]*?)<\/head>/);
+  const headMatch = searchable.match(/<head>([\s\S]*?)<\/head>/);
   const head = headMatch ? headMatch[1].trim() : '';
-  const template = source
-    .replace(/<script>[\s\S]*?<\/script>/, '')
-    .replace(/<head>[\s\S]*?<\/head>/, '')
-    .trim();
+  // A <style> block is CSS, not markup. It has to come out before the
+  // tokeniser runs: left in, its braces are read as {expressions} and a
+  // rule like `.a { color: red }` failed the build with "Unexpected
+  // token ':'" — an error about JavaScript, pointing at a stylesheet.
+  const styleMatch = searchable.match(/<style>([\s\S]*?)<\/style>/);
+  const style = styleMatch ? styleMatch[1].trim() : '';
+  // Cut by position rather than by pattern: replacing on the source
+  // would remove the first match anywhere, including one inside a
+  // <text> block that was deliberately ignored above.
+  const cuts = [scriptMatch, headMatch, styleMatch]
+    .filter(Boolean)
+    .map((match) => [match.index, match.index + match[0].length])
+    .sort((a, b) => b[0] - a[0]);
+  let template = source;
+  for (const [from, to] of cuts) template = template.slice(0, from) + template.slice(to);
+  template = template.trim();
   const tokens = tokenize(template);
@@ -55,6 +76,7 @@ export function parseAzox(source) {
   return {
     script,
     head,
+    style,
     markup,
     components: parseComponentImports(script),
     props: parsePropNames(script),
@@ -64,6 +86,16 @@ export function parseAzox(source) {
   };
 }
+// Replaces the contents of every <text> block with spaces, keeping the
+// length and therefore every offset in the original. What a <text>
+// block holds is literal by definition, so nothing inside one should be
+// mistaken for the page's script, head or style.
+function blankTextBlocks(source) {
+  return source.replace(/<text>[\s\S]*?<\/text>/g, (block) =>
+    `<text>${' '.repeat(Math.max(0, block.length - '<text></text>'.length))}</text>`
+  );
+}
 // Component imports are written as ordinary import statements, so an
 // editor treats them like any other module reference:
 //   import Card from '../components/Card.azox';