@webjsdev/core 0.7.57 → 0.7.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.57",
+  "version": "0.7.59",
   "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/attribute-reader.js

@@ -109,9 +109,8 @@ export function readAttributeValue(def, value) {
     //
     // The two readers now see the SAME attribute set, so this fallback is not
     // the only thing they agree on (#1341). Both resolve a name through
-    // `resolveAttributeProperty` below, which matches the same
-    // `d.attribute || hyphenate(k)` expression `observedAttributes` maps over
-    // and nothing else, so it skips a `state: true` prop and ignores a name that
+    // `resolveAttributeProperty` below, which matches the same names
+    // `observedAttributes` lists (via `observedAttributeNames`) and nothing else, so it skips a `state: true` prop and ignores a name that
     // maps to no attribute-backed property exactly as the observed list does.
     // The SSR caller lowercases its source name first, because the browser
     // lowercases while parsing. And both are handed a value with every
@@ -148,8 +147,9 @@ function hyphenate(s) {
  * SSR read MORE than a browser can deliver, which is the bug this function
  * exists to remove, so do not add it.
  *
- * The match is EXACTLY `d.attribute || hyphenate(k)`, the same expression
- * `observedAttributes` maps over, and nothing else. A `props[attrName] ||
+ * The match is EXACTLY the names `observedAttributeNames` lists (the
+ * `d.attribute || hyphenate(k)` primary plus, for a camelCase prop with no
+ * custom attribute, its lowercased alias, #1540), and nothing else. A `props[attrName] ||
  * props[camelCase(attrName)]` fallback used to sit after the loop, so a prop
  * declaring a custom attribute also answered to its PROPERTY name. Both readers
  * carried that code, which read like an agreement and was not one: the browser
@@ -168,11 +168,59 @@ function hyphenate(s) {
  *   which case the caller must IGNORE the attribute entirely (#1341).
  */
 export function resolveAttributeProperty(Cls, attrName) {
+  // Primary names first, so a prop literally named `foobar` keeps `foobar`
+  // even when a sibling `fooBar` would answer to it as an alias.
+  let aliasHit;
+  for (const { propName, def, primary, alias } of attributeBackedProps(Cls)) {
+    if (primary === attrName) return { propName, def };
+    if (aliasHit === undefined && alias === attrName) aliasHit = { propName, def };
+  }
+  return aliasHit;
+}
+
+/**
+ * Every attribute name the browser must observe for `Cls`, the list
+ * `observedAttributes` returns. Built from the same `attributeBackedProps` walk
+ * `resolveAttributeProperty` matches against, so a name is observed exactly
+ * when it resolves, on both sides (#1341, #1540).
+ *
+ * @param {any} Cls  the component class
+ * @returns {string[]}
+ */
+export function observedAttributeNames(Cls) {
+  const names = new Set();
+  const entries = attributeBackedProps(Cls);
+  for (const { primary } of entries) names.add(primary);
+  for (const { alias } of entries) if (alias) names.add(alias);
+  return [...names];
+}
+
+/**
+ * The attribute-backed props of `Cls` with the names each answers to.
+ *
+ * `primary` is the custom `attribute` option, matched VERBATIM, or else the
+ * kebab-cased property name. `alias` is the LOWERCASED property name, lit's
+ * default attribute name, present only when the prop has no custom `attribute`
+ * and the lowercased name differs from the kebab one. Without it,
+ * `<quiz-player quizId=${id}>` against `{ quizId: Number }` reached neither
+ * side: the parser lowercases the name to `quizid`, which matched nothing, so
+ * the prop silently stayed undefined on the server AND the client (#1540).
+ * The alias is only ever lowercase, which is the one form the platform can
+ * deliver, so this does not reopen the SSR-reads-more gap #1341 closed.
+ *
+ * @param {any} Cls
+ * @returns {{ propName: string, def: PropertyDeclaration, primary: string, alias: string | undefined }[]}
+ */
+function attributeBackedProps(Cls) {
   const props = (Cls && Cls.properties) || {};
+  const out = [];
   for (const [k, decl] of Object.entries(props)) {
     const d = typeof decl === 'object' && decl !== null ? decl : { type: decl };
     if (d.state) continue;
-    if ((d.attribute || hyphenate(k)) === attrName) return { propName: k, def: d };
+    const primary = d.attribute || hyphenate(k);
+    const lower = k.toLowerCase();
+    const alias = !d.attribute && lower !== primary ? lower : undefined;
+    out.push({ propName: k, def: d, primary, alias });
   }
-  return undefined;
+  return out;
 }

package/src/component/lifecycle.js

@@ -1,6 +1,6 @@
 import { render as clientRender } from '../render-client.js';
-import { readAttributeValue, resolveAttributeProperty } from '../attribute-reader.js';
-import { setActiveActionSignal } from '../action-abort-client.js';
+import { readAttributeValue, resolveAttributeProperty, observedAttributeNames } from '../attribute-reader.js';
+import { setActiveActionSignal, activeActionSignal } from '../action-abort-client.js';
 import { carriesFunction } from '../form-action.js';
 import { isCSS, adoptStyles } from '../css.js';
 import { register, tagOf } from '../registry.js';
@@ -184,10 +184,12 @@ class WebComponentBase extends Base {
    * @returns {string[]}
    */
   static get observedAttributes() {
-    const props = this.properties || {};
-    return Object.keys(props)
-      .filter((k) => !(typeof props[k] === 'object' && props[k].state))
-      .map((k) => (typeof props[k] === 'object' && props[k].attribute) || hyphenate(k));
+    // Derived from the same walk `resolveAttributeProperty` matches against, so
+    // every observed name resolves and nothing else does. A camelCase prop with
+    // no custom `attribute` is observed under its kebab name AND its lowercased
+    // name (lit's default), since the parser turns `quizId=` into `quizid`
+    // (#1540).
+    return observedAttributeNames(this);
   }
 
   constructor() {
@@ -872,23 +874,18 @@ class WebComponentBase extends Base {
         // by-sync case (#469); a shouldUpdate=false cycle never reaches here,
         // so it does not invalidate an in-flight async render.
         this.__renderToken = (this.__renderToken || 0) + 1;
-        // Abort the superseded render's in-flight action fetches (#492), start a
-        // fresh controller for this render, and bind it as the active signal so
-        // the RPC stub ties its fetches to this render. A superseded fetch's
-        // AbortError is dropped by the render-token guard in _commitAsync.
+        // Abort the superseded render's in-flight action fetches (#492) and
+        // start a fresh controller for this render. update() binds its signal
+        // around render() alone (see there), never the DOM commit. A
+        // superseded fetch's AbortError is dropped by the render-token guard
+        // in _commitAsync.
         if (this.__renderAbort) this.__renderAbort.abort();
         this.__renderAbort = typeof AbortController !== 'undefined' ? new AbortController() : null;
-        setActiveActionSignal(this.__renderAbort ? this.__renderAbort.signal : null);
         try {
           const r = this.update(changedProperties);
           if (r && typeof r.then === 'function') pendingCommit = r;
         } catch (error) {
           this._handleRenderError(/** @type {Error} */ (error));
-        } finally {
-          // The synchronous portion of render() has run; actions invoked there
-          // already captured the signal. Clear it so a later event handler is
-          // not bound to a stale render's controller.
-          setActiveActionSignal(null);
         }
 
         if (!pendingCommit) {
@@ -1126,7 +1123,21 @@ class WebComponentBase extends Base {
       });
     }
     let tpl;
-    this.__signalWatcher.observe(() => { tpl = this.render(); });
+    // Bind this render's abort signal (#492) around the synchronous part of
+    // render() ONLY, so the RPC stub ties an action called there to this
+    // render and the next render cancels it. The commit below runs unbound:
+    // it connects the child elements this template creates, and an action a
+    // child starts in its connectedCallback belongs to the child, not to this
+    // render, so the parent's next render must not cancel it (#1514). The
+    // previous binding is restored rather than cleared, so a render nested
+    // inside another's synchronous work leaves the outer one intact.
+    const outer = activeActionSignal();
+    setActiveActionSignal(this.__renderAbort ? this.__renderAbort.signal : null);
+    try {
+      this.__signalWatcher.observe(() => { tpl = this.render(); });
+    } finally {
+      setActiveActionSignal(outer || null);
+    }
     // Bare-await async render (#469): render() returned a promise. Use
     // stale-while-revalidate: keep the current DOM (the SSR first paint on
     // hydration, or the prior content on a re-fetch) visible until the new