@webjsdev/core 0.7.62 → 0.7.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.62",
+  "version": "0.7.63",
   "type": "module",
   "description": "The runtime for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Ships the html and css template tags, the WebComponent base class, signals, directives, and the isomorphic renderers.",
   "types": "./index.d.ts",

package/src/binding-prefixes.js

@@ -40,3 +40,31 @@ export const BINDING_PREFIXES = Object.freeze({
 export function isBindingPrefix(ch) {
   return Object.prototype.hasOwnProperty.call(BINDING_PREFIXES, ch);
 }
+
+/**
+ * What a PLAIN attribute hole (`name=${value}`, unquoted, the whole value)
+ * writes, or `null` when the attribute is omitted. The one rule both renderers
+ * follow, so the server never serves an attribute the client then removes
+ * (#1573):
+ *
+ *   - `null` / `undefined` omit the attribute. This is the "omit" value, so a
+ *     conditional attribute is `aria-current=${active ? 'page' : null}`.
+ *   - `false` omits it too, EXCEPT on an `aria-*` attribute, where it writes
+ *     `"false"`. For a tri-state ARIA attribute (`aria-expanded`,
+ *     `aria-pressed`, `aria-checked`) `"false"` and absent mean different
+ *     things, so the value an author passes is the value the user agent gets.
+ *   - anything else is `String(value)`.
+ *
+ * A quoted or mixed value (`title="${x}"`, `class="a ${x}"`) is not a plain
+ * hole: the author wrote the attribute statically, so it stays and a nullish
+ * piece reads as empty text.
+ *
+ * @param {string} name the attribute name as written
+ * @param {unknown} value the hole's value (`live()` already unwrapped)
+ * @returns {string | null}
+ */
+export function attrHoleValue(name, value) {
+  if (value == null) return null;
+  if (value === false) return /^aria-/i.test(name) ? 'false' : null;
+  return String(value);
+}

package/src/render-client/parts.js

@@ -11,6 +11,7 @@ import {
   SLOT_FALLBACK_FRAG, SLOT_STATE, SLOT_OWNER, applySlotAssignments, withRendererWrites,
 } from '../slot.js';
 import { compile, templateCache } from './template-compiler.js';
+import { attrHoleValue } from '../binding-prefixes.js';
 
 /**
  * The container the in-progress `render()` is committing into, or null
@@ -203,7 +204,10 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
       applyChild(part, value, reconcileFormActionsCb);
       break;
     case 'attr': {
-      if (value == null || value === false) part.el.removeAttribute(part.name);
+      // #1573: the shared rule, so this agrees with SSR. `null` / `undefined`
+      // remove, `false` removes except on aria-*, where it writes "false".
+      const written = attrHoleValue(part.name, value);
+      if (written === null) part.el.removeAttribute(part.name);
       else if (isBoundFormAction(value, part.name, part.el.localName)) {
         // #1155: the ONE supported form-action binding, applied to the live
         // form exactly as SSR wrote it. A component that ships re-renders its
@@ -220,7 +224,7 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
         // (mirrors the SSR guard, so a client re-render cannot write a
         // server action's source into the live DOM).
         assertNotFunctionActionAttr(value, part.name, part.el.localName);
-        part.el.setAttribute(part.name, String(value));
+        part.el.setAttribute(part.name, written);
       }
       break;
     }

package/src/render-client/reconciler.js

@@ -7,6 +7,7 @@ import {
   assertIdentifiableAction, FORM_ACTION_FIELD,
 } from '../form-action.js';
 import { isLive } from '../directives.js';
+import { attrHoleValue } from '../binding-prefixes.js';
 import { RENDERING, SLOT_OWNER, SLOT_STATE, drainRendererBackstop, rescueAssignedNodes } from '../slot.js';
 import { compile, submitterActionBindings, INSTANCE } from './template-compiler.js';
 import {
@@ -132,13 +133,17 @@ function reconcileFormActions(formActions, bound, values) {
           rec,
         );
       } else {
-        // What SSR would have emitted for this pass. An attribute hole always
-        // emits (even `name=${null}`, as `name=""`); a boolean hole emits only
-        // when truthy. Both identity channels ask the same question, through
-        // one predicate, so they cannot drift apart again.
+        // What SSR would have emitted for this pass. A plain attribute hole
+        // emits unless `attrHoleValue` omits it (`null` / `undefined` /
+        // `false`, since `name` and `value` are not aria-*, #1573), a mixed
+        // one always emits, and a boolean hole emits only when truthy. Both
+        // identity channels ask the same question, through one predicate, so
+        // they cannot drift apart again.
         const emits = (parts) => parts.some((np) => (np.kind === 'bool'
           ? !!resolveHoleValue(values[np.i])
-          : true));
+          : np.kind === 'attr'
+            ? attrHoleValue('name', resolveHoleValue(values[np.i])) !== null
+            : true));
         reconcileSubmitterAction(
           /** @type any */ (part.el), val, rec,
           emits(rec.nameParts), emits(rec.valueParts),
@@ -267,8 +272,10 @@ function effectiveFormAttr(attrParts, staticValue, values) {
   for (const p of attrParts) {
     if (p.kind === 'bool') return resolveHoleValue(values[p.i]) ? '' : ABSENT;
     if (p.kind === 'attr') {
-      const v = resolveHoleValue(values[p.i]);
-      return v == null ? '' : String(v);
+      // #1573: an omitted plain hole is ABSENT, exactly as SSR emits it, so
+      // `method=${null}` leaves the framework to supply `method="post"`.
+      const w = attrHoleValue('method', resolveHoleValue(values[p.i]));
+      return w === null ? ABSENT : w;
     }
     // A mixed attribute is the concatenation of its static pieces and EVERY one
     // of its holes, so the anchor's own value is only part of the answer.

package/src/render-client/template-compiler.js

@@ -440,9 +440,9 @@ function buildFormActionRecord(el, onEl, parts) {
   /** Prop bindings that cannot converge with SSR; refused when actually bound. */
   const propAttrs = [];
   // `name` holes on a submitter, recorded WITH their kind. Whether one occupies
-  // the identity's channel is not a property of the hole alone: SSR emits
-  // `name=""` for an attribute hole whatever it resolved to, but emits nothing
-  // at all for a FALSY boolean hole and nothing for an `@name` listener. Asking
+  // the identity's channel is not a property of the hole alone: SSR omits an
+  // attribute hole that resolved to `null` / `undefined` / `false` (#1573),
+  // emits nothing for a FALSY boolean hole, and nothing for an `@name` listener. Asking
   // only "is there a part called name" therefore refused templates SSR renders
   // happily, which is the render-on-the-server-throw-on-hydration direction.
   // The kinds travel with the record and `reconcileFormActions` resolves them.

package/src/render-server/template-renderer.js

@@ -1,5 +1,5 @@
 import { html, isTemplate } from '../html.js';
-import { BINDING_PREFIXES } from '../binding-prefixes.js';
+import { BINDING_PREFIXES, attrHoleValue } from '../binding-prefixes.js';
 import { escapeText, escapeAttr } from '../escape.js';
 import {
   assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
@@ -542,7 +542,12 @@ export async function renderTemplate(tr, ctx) {
           // #1154: never stringify a function into action=/formaction= (it
           // would serialize a server action's source into the served HTML).
           assertNotFunctionActionAttr(val, attrName, currentTag);
-          out += `"${escapeAttr(String(val ?? ''))}"`;
+          // #1573: the client's rule, not a stringify. `null` / `undefined`
+          // (and `false` off an aria-* name) omit the attribute, which is
+          // already in `out` from `attrStart`, so slice it back off.
+          const written = attrHoleValue(attrName, val);
+          if (written === null) out = out.slice(0, attrStart);
+          else out += `"${escapeAttr(written)}"`;
           state = 'in-tag';
           attrName = '';
         }
@@ -922,7 +927,10 @@ export async function streamTemplate(tr, ctx, controller) {
           // `renderToStream(v, { ssr: false })`, which no page render uses, so
           // this covers the public API surface rather than a page leak.
           assertNotFunctionActionAttr(val, attrName, currentTag);
-          buf += `"${escapeAttr(String(val ?? ''))}"`;
+          // #1573: the same omission rule as the buffered renderer above.
+          const written = attrHoleValue(attrName, val);
+          if (written === null) buf = buf.slice(0, attrStart);
+          else buf += `"${escapeAttr(written)}"`;
           state = 'in-tag';
           attrName = '';
         }