@webjsdev/core 0.7.58 → 0.7.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.58",
+  "version": "0.7.60",
   "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,5 +1,5 @@
 import { render as clientRender } from '../render-client.js';
-import { readAttributeValue, resolveAttributeProperty } from '../attribute-reader.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';
@@ -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() {

package/src/lazy-loader.js

@@ -22,6 +22,17 @@
  *     // ...
  *   }
  *   MyWidget.register('my-lazy-widget');
+ *
+ * A component that another shipping module imports for registration
+ * (`import './my-lazy-widget.ts'`) stays lazy too (#1524): the server keeps
+ * that import for SSR, and the browser copy of the importer is served with
+ * the line rewritten to an `observeLazy({...})` call, so the module loads
+ * when an element with the tag is first visible: a hidden tab panel when it
+ * shows, a dialog's content when it opens, an element added later by a
+ * client render (the MutationObserver below catches it).
+ *
+ * The scan reads the light DOM (`document.querySelectorAll`), so a lazy tag
+ * rendered inside another component's shadow root is not found.
  */
 
 /** @type {Map<string, string>} tag → module URL */
@@ -30,6 +41,14 @@ const pending = new Map();
 /** @type {IntersectionObserver | null} */
 let observer = null;
 
+/**
+ * ONE MutationObserver for the whole page, however often `observeLazy` runs
+ * (#1524): the boot script calls it, and so does every served module whose
+ * side-effect import of a `static lazy` component was deferred to it.
+ * @type {MutationObserver | null}
+ */
+let mutations = null;
+
 /** @type {Map<string, Promise<unknown>>} in-flight module loads, keyed by URL */
 const inflight = new Map();
 
@@ -78,15 +97,18 @@ export function observeLazy(entries) {
   scan();
 
   // Also watch for dynamically added elements via MutationObserver.
-  if (typeof MutationObserver !== 'undefined') {
-    const mo = new MutationObserver(() => scan());
-    mo.observe(document.body, { childList: true, subtree: true });
+  if (!mutations && typeof MutationObserver !== 'undefined') {
+    mutations = new MutationObserver(() => scan());
+    mutations.observe(document.body, { childList: true, subtree: true });
   }
 }
 
 function scan() {
   if (!observer || !pending.size) return;
   for (const tag of pending.keys()) {
+    // Already defined some other way (an eager import elsewhere): nothing
+    // left to load for this tag.
+    if (customElements.get(tag)) { pending.delete(tag); continue; }
     for (const el of document.querySelectorAll(tag)) {
       observer.observe(el);
     }