@webjsdev/core 0.7.65 → 0.9.0

package/src/render-server/compile.js

@@ -1,5 +1,6 @@
 import { BINDING_PREFIXES } from '../binding-prefixes.js';
 import { isVoidElement, isRawtextTag, isTextOnlyTag } from './html-scan.js';
+import { assertNoJsxIsms } from '../jsx-guard.js';
 
 /**
  * The SSR template compiler (#1646): one tokenizer pass per template, run
@@ -74,6 +75,8 @@ export function _compileCount() { return compiled; }
 export function compile(strings) {
   let ops = cache.get(strings);
   if (ops === undefined) {
+    // `className=`, `htmlFor=`, `<Link>`: JSX that HTML silently ignores.
+    assertNoJsxIsms(strings);
     ops = tokenize(strings);
     cache.set(strings, ops);
   }
@@ -115,6 +118,9 @@ function tokenize(strings) {
   let attrName = '';
   let attrStart = 0;   // index into `chunk` of the attribute's first character
   let attrQuote = '';
+  // An unquoted value holding a hole, written quoted (`a=x${v}` -> `a="x..."`),
+  // so a value with a space or `>` in it cannot add an attribute or close the tag.
+  let synthQuote = false;
   let commentDashes = 0;
   let currentTag = '';
   /** @type {Op | null} */
@@ -181,8 +187,10 @@ function tokenize(strings) {
     state = 'text';
   };
 
+  let bindingQuote = '';
   for (let i = 0; i < strings.length; i++) {
-    const s = strings[i];
+    const s = bindingQuote ? strings[i].slice(1) : strings[i];
+    bindingQuote = '';
     for (let j = 0; j < s.length; j++) {
       const c = s[j];
       switch (state) {
@@ -321,6 +329,18 @@ function tokenize(strings) {
           else chunk += c;
           break;
         case 'attr-quoted':
+          if (synthQuote) {
+            // It ends where the unquoted value it stands for ends, and the
+            // character that ends it is read again as the tag's own.
+            if (WS.test(c) || c === '>' || (c === '/' && s[j + 1] === '>')) {
+              chunk += '"';
+              synthQuote = false;
+              state = 'in-tag';
+              attrName = '';
+              j--;
+            } else chunk += c === '"' ? '&quot;' : c;
+            break;
+          }
           chunk += c;
           if (c === attrQuote) { state = 'in-tag'; attrName = ''; }
           break;
@@ -366,6 +386,22 @@ function tokenize(strings) {
     }
 
     if (i < strings.length - 1) {
+      // An unquoted value with more than the one hole in it (`a=x${v}`,
+      // `a=${x}${y}`, `a=${x}/z`) is written quoted, so the walker resolves it
+      // whole through the quoted-value path, as the client does.
+      if (BINDING_PREFIXES[attrName[0]] === undefined && !synthQuote) {
+        const next = strings[i + 1];
+        const ends = next !== '' && (WS.test(next[0]) || next[0] === '>' || (next[0] === '/' && next[1] === '>'));
+        if (state === 'after-eq' && !ends) {
+          chunk += '"';
+          state = 'attr-quoted'; attrQuote = '"'; synthQuote = true;
+        } else if (state === 'attr-unquoted') {
+          const eq = chunk.indexOf('=', attrStart) + 1;
+          const gap = /^\s*/.exec(chunk.slice(eq))[0].length;
+          chunk = chunk.slice(0, eq + gap) + '"' + chunk.slice(eq + gap).replace(/"/g, '&quot;');
+          state = 'attr-quoted'; attrQuote = '"'; synthQuote = true;
+        }
+      }
       // A value hole sits here. Its op says where, and the walker decides what.
       if (state === 'comment' || state === 'comment-start' || state === 'comment-start-dash' || state === 'comment-bang') {
         flush();
@@ -393,9 +429,21 @@ function tokenize(strings) {
         });
         state = 'in-tag';
         attrName = '';
+      } else if (state === 'attr-quoted' && BINDING_PREFIXES[attrName[0]] !== undefined) {
+        const lead = chunk.slice(attrStart);
+        if (!lead.endsWith('=' + attrQuote) || !strings[i + 1].startsWith(attrQuote)) {
+          throw new Error('Event, property and boolean bindings require exactly one expression with no surrounding text.');
+        }
+        chunk = chunk.slice(0, attrStart);
+        flush();
+        ops.push({ t: HOLE, k: ATTR, kind: BINDING_PREFIXES[attrName[0]], name: attrName.slice(1), tag: currentTag, lead: lead.slice(0, -1) });
+        bindingQuote = attrQuote;
+        state = 'in-tag';
+        attrName = '';
       } else if (state === 'attr-quoted' || state === 'attr-unquoted') {
+        const prefix = chunk.slice(attrStart);
         flush();
-        ops.push({ t: HOLE, k: VALUE, name: attrName, tag: currentTag });
+        ops.push({ t: HOLE, k: VALUE, name: attrName, tag: currentTag, quote: state === 'attr-quoted' ? attrQuote : '', prefix });
       } else {
         // A hole in a tag name, between attributes, in a close tag or a markup
         // declaration: nothing is emitted for it, as before.

package/src/render-server/errors.js

@@ -36,6 +36,43 @@ export function browserMemberHint(e) {
   return null;
 }
 
+/**
+ * Lit decorator names. Bun runs legacy decorators, so a decorated class fails
+ * there with a `ReferenceError` naming the undefined decorator; Node and the
+ * browser fail the whole module with a bare `SyntaxError` instead.
+ */
+const DECORATOR_NAMES = new Set([
+  'customElement', 'property', 'state', 'query', 'queryAll', 'queryAsync',
+  'queryAssignedElements', 'queryAssignedNodes', 'eventOptions', 'provide', 'consume',
+]);
+
+/**
+ * If `e` is the recognisable failure of a Lit DECORATOR reaching the runtime
+ * (WebJs has no build step and decorators are not erasable TypeScript, so the
+ * type stripper passes them through), return the WebJs fix; otherwise null.
+ * Node and the browser report a bare `SyntaxError: Invalid or unexpected
+ * token` for the `@`, which names neither cause nor fix; Bun reports a
+ * `ReferenceError: property is not defined`. The `no-non-erasable-typescript`
+ * check rule catches the same thing at edit time with a per-decorator fix.
+ * @param {unknown} e
+ * @returns {string | null}
+ */
+export function decoratorHint(e) {
+  const msg = e && typeof (/** @type any */ (e).message) === 'string' ? /** @type any */ (e).message : '';
+  const fix =
+    'WebJs runs no build step, so decorators cannot run. Declare reactive properties in `static properties` ' +
+    '(or the `WebComponent({ ... })` factory), use `state: true` for `@state`, call `MyEl.register(tag)` for ' +
+    '`@customElement`, and write `@query` as a getter over `this.renderRoot`.';
+  if (e instanceof SyntaxError && /Invalid or unexpected token|Unexpected token '@'|Unexpected character '@'|[Dd]ecorators? /.test(msg)) {
+    return `A module failed to parse. If it uses a decorator (\`@property\`, \`@customElement\`, ...), that is the cause. ${fix}`;
+  }
+  const m = /^(\w+) is not defined\b/.exec(msg);
+  if (e instanceof ReferenceError && m && DECORATOR_NAMES.has(m[1])) {
+    return `\`${m[1]}\` is a Lit decorator, which WebJs does not provide. ${fix}`;
+  }
+  return null;
+}
+
 // Browser-only names whose absence during SSR produces a recognisable error.
 // Mirrors the `no-browser-globals-in-render` webjs check rule, which catches
 // these at edit time; this turns the runtime SSR crash into the same guidance.

package/src/render-server/expand.js

@@ -1,11 +1,12 @@
-import { stylesToString, isCSS } from '../css.js';
+import { stylesToString, finalizeStyles, lightDomStylesMessage } from '../css.js';
 import { unsafeHTML } from '../directives.js';
 import { escapeAttr } from '../escape.js';
-import { defaultSSRErrorTemplate, browserMemberHint } from './errors.js';
+import { defaultSSRErrorTemplate, browserMemberHint, isProd } from './errors.js';
 import {
-  appendReflectedAttrs, applyAttrsToInstance, consumePropAttrs, parseAttrs, seedServerAttrs,
+  applyAttrsToInstance, consumePropAttrs, parseAttrs, seedServerAttrs,
   withHostMarker,
 } from './attrs.js';
+import { serveInstanceAttrs } from './served-attrs.js';
 
 /**
  * Custom-element expansion inside the op walk (#1646): what `injectDSD`
@@ -44,6 +45,7 @@ const NON_BLANK = /\S/;
 export function beginComponent(w, tag, Cls, opening, attrs) {
   if (w.ctx && w.ctx.usedComponents) w.ctx.usedComponents.add(tag);
   const isShadow = Cls.shadow === true;
+  if (!isShadow) reportLightDomStyles(w, tag, Cls);
   const frame = {
     kind: 'component', tag, Cls, isShadow, instance: null, opening, tpl: undefined,
     pending: /** @type {Promise<unknown> | null} */ (null), presentAttrNames: /** @type {Set<string> | null} */ (null),
@@ -113,10 +115,11 @@ export async function settleRender(frame) {
 }
 
 function afterRender(frame) {
-  // Surface attributes the component set up to and including render() that
-  // were not in the source tag (reflected props, an explicit setAttribute,
-  // a host mutation inside render()). Reading after render() captures all.
-  frame.opening = appendReflectedAttrs(frame.opening, frame.instance, frame.presentAttrNames);
+  // Serve the attributes as the component left them up to and including
+  // render(): one it added is appended, one it changed carries its new value,
+  // and one it removed is dropped, as lit-ssr's renderAttributes() does (see
+  // served-attrs.js). Reading after render() captures all.
+  frame.opening = serveInstanceAttrs(frame.opening, frame.instance, frame.presentAttrNames);
   // Mark LIGHT-DOM hosts for the `@layer webjs-host` display:block default.
   // Shadow hosts are NOT marked: a document-level rule on the host beats the
   // shadow tree's own `:host { display }`.
@@ -140,7 +143,7 @@ export async function finishComponent(w, frame, children) {
         // Native <slot> stays as-is in the DSD template: the browser projects
         // the host's light children natively. The authored children stay in
         // place after the template, and the source end tag is kept.
-        return `${frame.opening}<template shadowrootmode="open">${styleString(Cls)}${inner}</template>${children}${frame.closeText}`;
+        return `${frame.opening}${dsdOpenTag(Cls)}${styleString(Cls)}${inner}</template>${children}${frame.closeText}`;
       }
       if (!NON_BLANK.test(inner)) {
         // An empty rendered template (a decorator component with no render(),
@@ -167,10 +170,12 @@ export async function finishComponent(w, frame, children) {
 async function renderOwnTemplate(w, frame, children) {
   const owner = w.owner;
   w.owner = frame.isShadow ? null : { tag: frame.tag, partition: partitionChildren(children, frame.segments), consumed: null };
+  w.componentDepth = (w.componentDepth || 0) + 1;
   try {
     return await w.capture(() => w.value(frame.tpl));
   } finally {
     w.owner = owner;
+    w.componentDepth -= 1;
   }
 }
 
@@ -202,12 +207,54 @@ function partitionChildren(children, segments) {
   return groups;
 }
 
+/**
+ * The Declarative Shadow DOM opening tag for a shadow component, carrying
+ * Lit's `static shadowRootOptions` as the template attributes the HTML parser
+ * maps onto `attachShadow()`: the mode, `delegatesFocus`, `clonable` and
+ * `serializable`. The common case (no options) is the constant open tag.
+ * @param {any} Cls
+ * @returns {string}
+ */
+export function dsdOpenTag(Cls) {
+  const o = Cls.shadowRootOptions;
+  if (!o) return OPEN_DSD;
+  const mode = o.mode === 'closed' ? 'closed' : 'open';
+  if (mode === 'open' && !o.delegatesFocus && !o.clonable && !o.serializable) return OPEN_DSD;
+  return `<template shadowrootmode="${mode}"` +
+    (o.delegatesFocus ? ' shadowrootdelegatesfocus' : '') +
+    (o.clonable ? ' shadowrootclonable' : '') +
+    (o.serializable ? ' shadowrootserializable' : '') + '>';
+}
+const OPEN_DSD = '<template shadowrootmode="open">';
+
 function styleString(Cls) {
-  const rawStyles = Cls.styles;
-  const styleList = Array.isArray(rawStyles) ? rawStyles : rawStyles && isCSS(rawStyles) ? [rawStyles] : [];
-  return stylesToString(styleList);
+  // `elementStyles` is the class's finalized list (Lit's `finalizeStyles`);
+  // a class not built on WebComponent has none, so flatten its styles here.
+  return stylesToString(Cls.elementStyles ?? finalizeStyles(Cls.styles));
 }
 
+/** Light-DOM classes already reported for `static styles`. @type {WeakSet<Function>} */
+const REPORTED_LIGHT_STYLES = new WeakSet();
+
+/**
+ * A light-DOM component's `static styles` never apply (there is no shadow
+ * root to adopt them into). Report it once per class in dev, on the server,
+ * so the cause shows up in the terminal as well as the browser console.
+ * @param {import('./walk.js').Walker} w
+ * @param {string} tag
+ * @param {any} Cls
+ */
+function reportLightDomStyles(w, tag, Cls) {
+  if (!Cls.styles || REPORTED_LIGHT_STYLES.has(Cls)) return;
+  const dev = w.dev === undefined ? !isProd() : !!w.dev;
+  if (!dev) return;
+  REPORTED_LIGHT_STYLES.add(Cls);
+  console.error(lightDomStylesMessage(tag));
+}
+
+/** Key of the hook the server installs to hear about isolated component failures. */
+const COMPONENT_ERROR_HOOK = Symbol.for('webjs.ssr.componentError');
+
 /**
  * Per-component error isolation (#469). The element renders a
  * component-scoped error state in its place (renderError() customises it;
@@ -228,20 +275,28 @@ async function errorState(w, frame) {
   } else {
     console.error(`[webjs] SSR failed for <${tag}>:`, e);
   }
+  // The page still renders (the failure is isolated to this element), so the
+  // server hears about it only through this hook: @webjsdev/server installs it
+  // and routes it to the current request's dev status.
+  const report = /** @type {any} */ (globalThis)[COMPONENT_ERROR_HOOK];
+  if (typeof report === 'function') {
+    try { report(tag, e); } catch { /* a reporting failure must not affect the render */ }
+  }
   const err = e instanceof Error ? e : new Error(String(e));
   let errorInner = '';
   try {
     let errTpl;
     if (instance && typeof instance.renderError === 'function') errTpl = instance.renderError(err);
     if (errTpl === undefined) errTpl = defaultSSRErrorTemplate(tag, err, w.dev);
-    errorInner = await w.capture(() => w.value(errTpl));
+    w.componentDepth = (w.componentDepth || 0) + 1;
+    try { errorInner = await w.capture(() => w.value(errTpl)); } finally { w.componentDepth -= 1; }
   } catch (renderErrorThrew) {
     console.error(`[webjs] renderError() for <${tag}> also threw:`, renderErrorThrew);
     errorInner = '';
   }
   let opening = frame.opening;
   if (!isShadow) opening = withHostMarker(opening);
-  if (isShadow) return `${opening}<template shadowrootmode="open">${styleString(Cls)}${errorInner}</template>`;
+  if (isShadow) return `${opening}${dsdOpenTag(Cls)}${styleString(Cls)}${errorInner}</template>`;
   return `${opening}<!--webjs-hydrate-->${errorInner}</${tag}>`;
 }
 
@@ -253,14 +308,39 @@ async function errorState(w, frame) {
  * The `slot` attribute value of an element's attribute text, or null when
  * absent. `slot=""` and the reserved alias `default` both mean the default
  * slot (#1015), matching the client record.
+ *
+ * The attributes are read one by one, the way the HTML tokenizer reads them,
+ * rather than by searching for `slot=`. A search has two false matches: the
+ * tail of another name (`data-slot="button"`, which every shadcn-shaped part
+ * carries, since `\b` sits between the hyphen and the `s`) and text inside a
+ * quoted value (`title="a slot=b"`). Either one routed the child to a named
+ * slot the template does not have, and the server dropped it (#1666).
  * @param {string} attrsRaw
  * @returns {string | null}
  */
 export function extractSlotAttr(attrsRaw) {
-  const m = /\bslot\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attrsRaw);
-  if (!m) return null;
-  const value = m[1] ?? m[2] ?? m[3] ?? '';
-  return value === '' || value === 'default' ? null : value;
+  const found = findAttr(attrsRaw, 'slot');
+  if (!found) return null;
+  return found.value === '' || found.value === 'default' ? null : found.value;
+}
+
+/**
+ * Find one attribute by name in an element's attribute text, reading the
+ * attributes in order as the HTML tokenizer does, so a name that merely ENDS
+ * in `attrName` or a quoted value that mentions it never matches. Returns
+ * the value (empty for a bare attribute) and the span of the whole attribute.
+ * @param {string} attrsRaw
+ * @param {string} attrName  lowercase
+ * @returns {{ value: string, start: number, end: number } | null}
+ */
+function findAttr(attrsRaw, attrName) {
+  const attr = /([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let m;
+  while ((m = attr.exec(attrsRaw))) {
+    if (m[1].toLowerCase() !== attrName) continue;
+    return { value: m[2] ?? m[3] ?? m[4] ?? '', start: m.index, end: m.index + m[0].length };
+  }
+  return null;
 }
 
 /**
@@ -278,9 +358,9 @@ export function finishSlot(frame, fallback) {
   let name = null;
   let otherAttrs = '';
   if (NON_BLANK.test(attrsRaw)) {
-    const nameMatch = /\bname\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attrsRaw);
-    name = nameMatch ? (nameMatch[1] ?? nameMatch[2] ?? nameMatch[3]) : null;
-    otherAttrs = attrsRaw.replace(/\bname\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '').trim();
+    const found = findAttr(attrsRaw, 'name');
+    name = found ? found.value : null;
+    otherAttrs = (found ? attrsRaw.slice(0, found.start) + attrsRaw.slice(found.end) : attrsRaw).trim();
   }
   const slotKey = name === 'default' || name === '' ? null : name;
   const projected = owner.partition.get(slotKey);

package/src/render-server/served-attrs.js

@@ -0,0 +1,78 @@
+import { escapeAttr } from '../escape.js';
+import { decodeAttrEntities } from './text.js';
+import { appendReflectedAttrs } from './attrs.js';
+
+/**
+ * Serve a custom element's attributes as the element left them after the
+ * server pass, the way lit-ssr's `ElementRenderer.renderAttributes()` emits
+ * the instance's final attributes rather than the ones the tag was written
+ * with. The browser does the same after upgrade: an element that sets, changes
+ * or removes an attribute during its first update shows the result, so the
+ * served bytes now match the hydrated DOM instead of the source tag.
+ *
+ * Three cases, per attribute:
+ *   - one the element added is appended (`appendReflectedAttrs`, unchanged);
+ *   - one the element CHANGED is served with its new value;
+ *   - one the element REMOVED is dropped from the tag.
+ * An attribute the element left alone keeps its source text BYTE FOR BYTE
+ * (its quoting, its entity spelling, its position), so a page whose
+ * components touch nothing renders exactly as before.
+ *
+ * What stays as written, and why each is safe:
+ *   - `data-webjs-prop-*`: a parent's `.prop=${value}` binding, consumed into
+ *     the property BEFORE the instance existed (`consumePropAttrs`), so the
+ *     instance never holds it and reading it back would drop it. It is kept as
+ *     written, because the browser decodes it again on upgrade.
+ *   - `data-wj-host`: added AFTER this step by `withHostMarker`. When a
+ *     re-processed string already carries it (a streamed boundary's children),
+ *     it was seeded into the instance like any other attribute and is
+ *     unchanged, so it is kept.
+ *   - `data-wj-slot-owner`: the renderer stamps it on `<slot>` elements, not on
+ *     hosts. A host can only carry it in a re-processed string, where it was
+ *     seeded and is unchanged, so it is kept.
+ *   - an attribute that came from a template hole: by this point its value is
+ *     plain text in the opening tag, seeded like a static one, so the same
+ *     rule applies. Serving the element's value cannot desynchronize the hole:
+ *     a host inside a component's template is re-created by that component's
+ *     client render, which writes the hole's value again, and a host written
+ *     by a page or a layout never hydrates its attributes at all.
+ *
+ * @param {string} opening  the element's opening tag, `<tag attrs>`, ending in `>`
+ * @param {any} instance  the server-side instance (the element shim, or a real
+ *   `HTMLElement` when `renderToString` runs in a browser)
+ * @param {Set<string>} presentAttrNames  lowercased names already in the source tag
+ * @returns {string}
+ */
+export function serveInstanceAttrs(opening, instance, presentAttrNames) {
+  if (!instance || typeof instance.getAttribute !== 'function' || typeof instance.getAttributeNames !== 'function') return opening;
+  const nameEnd = opening.search(/[\s>]/);
+  const head = opening.slice(0, nameEnd);
+  const body = opening.slice(nameEnd, -1);
+  // The same attribute grammar `parseAttrs` reads the source with, so every
+  // name seeded into the instance is found again here.
+  const re = /([a-zA-Z_:][\w:.-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let out = '';
+  let last = 0;
+  let changed = false;
+  let m;
+  while ((m = re.exec(body)) !== null) {
+    const raw = m[0];
+    const name = m[1];
+    if (name.toLowerCase().startsWith('data-webjs-prop-')) continue;
+    const written = decodeAttrEntities(m[2] ?? m[3] ?? m[4] ?? '');
+    const now = instance.getAttribute(name);
+    if (now === written) continue;
+    changed = true;
+    if (now === null) {
+      // Removed: drop it together with the whitespace that separated it.
+      let start = m.index;
+      while (start > last && /\s/.test(body[start - 1])) start--;
+      out += body.slice(last, start);
+    } else {
+      out += body.slice(last, m.index) + (now === '' ? name : `${name}="${escapeAttr(String(now))}"`);
+    }
+    last = m.index + raw.length;
+  }
+  const rewritten = changed ? `${head}${out}${body.slice(last)}>` : opening;
+  return appendReflectedAttrs(rewritten, instance, presentAttrNames);
+}