@webjsdev/core 0.7.64 → 0.7.65

package/index-browser.js

@@ -26,7 +26,7 @@
 export { html, isTemplate, MARKER } from './src/html.js';
 export { css, isCSS, adoptStyles, stylesToString } from './src/css.js';
 export { WebComponent, prop } from './src/component.js';
-export { register, lookup, lookupModuleUrl, isLazy, allTags, primeModuleUrl, tagOf } from './src/registry.js';
+export { lookup, lookupModuleUrl, isLazy, allTags, primeModuleUrl, tagOf } from './src/registry.js';
 export { render } from './src/render-client.js';
 export { escapeText, escapeAttr } from './src/escape.js';
 export { notFound, redirect, forbidden, unauthorized, isNotFound, isRedirect, isForbidden, isUnauthorized } from './src/nav.js';

package/index.d.ts

@@ -80,7 +80,7 @@ export { html, isTemplate, MARKER } from './src/html.js';
 // docs/website can annotate a value as `TemplateResult` (#772).
 export type { TemplateResult } from './src/html.js';
 export { css, isCSS, adoptStyles, stylesToString } from './src/css.js';
-export { register, lookup, lookupModuleUrl, isLazy, allTags, primeModuleUrl, tagOf } from './src/registry.js';
+export { lookup, lookupModuleUrl, isLazy, allTags, primeModuleUrl, tagOf } from './src/registry.js';
 export { renderToString, renderToStream } from './src/render-server.js';
 export { render } from './src/render-client.js';
 export { escapeText, escapeAttr } from './src/escape.js';
@@ -152,7 +152,7 @@ export function optimistic<State>(
 ): OptimisticState<State, State>;
 
 
-// Legacy Imperative Signature (Signal-based rollback)
+// Imperative signature (signal-based rollback)
 export function optimistic<T, R>(
   signal: { get(): T; set(v: T): void },
   value: T,

package/index.js

@@ -9,7 +9,7 @@
 export { html, isTemplate, MARKER } from './src/html.js';
 export { css, isCSS, adoptStyles, stylesToString } from './src/css.js';
 export { WebComponent, prop } from './src/component.js';
-export { register, lookup, lookupModuleUrl, isLazy, allTags, primeModuleUrl, tagOf } from './src/registry.js';
+export { lookup, lookupModuleUrl, isLazy, allTags, primeModuleUrl, tagOf } from './src/registry.js';
 export { renderToString, renderToStream } from './src/render-server.js';
 export { render } from './src/render-client.js';
 export { escapeText, escapeAttr } from './src/escape.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.64",
+  "version": "0.7.65",
   "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

@@ -212,6 +212,26 @@ export function observedAttributeNames(Cls) {
  * @returns {{ propName: string, def: PropertyDeclaration, primary: string, alias: string | undefined }[]}
  */
 function attributeBackedProps(Cls) {
+  // Memoized per class (#1646): the SSR walk resolves every source attribute
+  // of every instance through this list, and rebuilding it (one hyphenate per
+  // declared prop) was a measurable share of a component's render. A class's
+  // declarations never change after it is defined (a `static properties`
+  // block throws at runtime, and the factory fixes the set), so the first
+  // walk is the only one.
+  if (Cls && typeof Cls === 'function') {
+    const hit = BACKED_PROPS.get(Cls);
+    if (hit) return hit;
+    const built = buildAttributeBackedProps(Cls);
+    BACKED_PROPS.set(Cls, built);
+    return built;
+  }
+  return buildAttributeBackedProps(Cls);
+}
+
+/** @type {WeakMap<Function, { propName: string, def: any, primary: string, alias: string | undefined }[]>} */
+const BACKED_PROPS = new WeakMap();
+
+function buildAttributeBackedProps(Cls) {
   const props = (Cls && Cls.properties) || {};
   const out = [];
   for (const [k, decl] of Object.entries(props)) {

package/src/component/lifecycle.js

@@ -115,6 +115,56 @@ const FACTORY_PROPS = Symbol('webjs.factoryProps');
 // Per-class memo so the constructor-time enforcement walk runs once per class.
 const _propsChecked = new WeakSet();
 
+/** A settled `updateComplete` shared by every instance until its first update. */
+const RESOLVED_TRUE = Promise.resolve(true);
+/** Iterated in place of a controller set no instance has created. */
+const NO_CONTROLLERS = new Set();
+
+/**
+ * Per class, the declared reactive properties with their accessors installed
+ * on the prototype.
+ * @type {WeakMap<Function, { propName: string, decl: any }[]>}
+ */
+const _accessorPlans = new WeakMap();
+
+/**
+ * Define the getter/setter pair for every declared property on the class's
+ * prototype, once, and record the plan the constructor applies per instance
+ * (own-value capture and `default`). The setter coerces nothing itself (the
+ * attribute readers do), runs `hasChanged`, reflects, and schedules an update.
+ * @param {any} Ctor
+ * @param {Record<string, unknown>} props
+ */
+function installAccessors(Ctor, props) {
+  /** @type {{ propName: string, decl: any }[]} */
+  const plan = [];
+  for (const [propName, decl] of Object.entries(props)) {
+    const d = typeof decl === 'object' && decl !== null ? decl : { type: decl };
+    plan.push({ propName, decl: d });
+    const changedCheck = d.hasChanged || defaultHasChanged;
+    Object.defineProperty(Ctor.prototype, propName, {
+      configurable: true,
+      enumerable: true,
+      get() { return this.__propValues[propName]; },
+      set(newVal) {
+        const oldVal = this.__propValues[propName];
+        if (!changedCheck(newVal, oldVal)) return;
+        this.__propValues[propName] = newVal;
+        // Reflect to attribute if requested (and not internal state).
+        if (d.reflect && !d.state && this._connected) {
+          this._reflectAttribute(propName, newVal, d);
+        }
+        // requestUpdate records the (name, oldValue) entry AND schedules a
+        // render. During the update phase the scheduler short-circuits and
+        // the entry folds into the current cycle's changedProperties.
+        this.requestUpdate(propName, oldVal);
+      },
+    });
+  }
+  _accessorPlans.set(Ctor, plan);
+  return plan;
+}
+
 class WebComponentBase extends Base {
   /** Whether to use shadow DOM. Default: false (light DOM). @type {boolean} */
   static shadow = false;
@@ -199,10 +249,12 @@ class WebComponentBase extends Base {
     this._connected = false;
 
     /**
-     * Set of attached reactive controllers.
-     * @type {Set<ReactiveController>}
+     * Set of attached reactive controllers, created by the first
+     * `addController` (#1646: most instances never attach one, and the SSR
+     * walk constructs an instance per rendered element).
+     * @type {Set<ReactiveController> | null}
      */
-    this.__controllers = new Set();
+    this.__controllers = null;
 
     /**
      * Whether the component has completed its first render.
@@ -235,7 +287,7 @@ class WebComponentBase extends Base {
      * @type {Promise<boolean>}
      * @private
      */
-    this._updatePromise = Promise.resolve(true);
+    this._updatePromise = RESOLVED_TRUE;
 
     /**
      * Set while the component is inside the update phase (between
@@ -288,13 +340,14 @@ class WebComponentBase extends Base {
   }
 
   /**
-   * For every key in `static properties`, create a getter/setter pair on
-   * the instance that coerces values, runs `hasChanged`, schedules updates,
-   * and optionally reflects to the HTML attribute.
+   * Give the instance its reactive-property backing store and make sure the
+   * class's getter/setter pairs (which run `hasChanged`, schedule updates and
+   * optionally reflect to the HTML attribute) are installed on its PROTOTYPE,
+   * once per class. Per instance this only lifts a value written before the
+   * element upgraded and applies the declared `default`s.
    *
-   * This is called once from the constructor. The backing store is a plain
-   * object (`this.__propValues`) so accessors don't collide with the
-   * prototype.
+   * Called once from the constructor. The backing store is a plain object
+   * (`this.__propValues`), so the accessors never collide with it.
    * @private
    */
   _initializeProperties() {
@@ -305,35 +358,24 @@ class WebComponentBase extends Base {
     /** @type {Record<string, unknown>} */
     this.__propValues = {};
 
-    for (const [propName, decl] of Object.entries(props)) {
-      const d = typeof decl === 'object' ? decl : { type: decl };
-      // Capture any value set before the accessor was installed (e.g. via
-      // attribute or property assignment before `super()` returns).
-      const initial = /** @type {any} */ (this)[propName];
-
-      Object.defineProperty(this, propName, {
-        configurable: true,
-        enumerable: true,
-        get: () => this.__propValues[propName],
-        set: (newVal) => {
-          const oldVal = this.__propValues[propName];
-          const changed = (d.hasChanged || defaultHasChanged)(newVal, oldVal);
-          if (!changed) return;
-          this.__propValues[propName] = newVal;
-
-          // Reflect to attribute if requested (and not internal state).
-          if (d.reflect && !d.state && this._connected) {
-            this._reflectAttribute(propName, newVal, d);
-          }
-
-          // requestUpdate records the (name, oldValue) entry AND schedules
-          // a render. When called during the update phase (willUpdate /
-          // hostUpdate / update / hostUpdated), the scheduler short-circuits
-          // and the entry folds into the current cycle's changedProperties.
-          this.requestUpdate(propName, oldVal);
-        },
-      });
-
+    // The accessors live on the PROTOTYPE, installed once per class (#1646).
+    // They used to be defined on every instance, two closures and a
+    // defineProperty per declared property, which was the largest single
+    // cost of constructing a component on the SSR path (one instance per
+    // rendered element) and a measurable one on upgrade in the browser.
+    let plan = _accessorPlans.get(Ctor);
+    if (plan === undefined) plan = installAccessors(Ctor, props);
+
+    for (let i = 0; i < plan.length; i++) {
+      const { propName, decl: d } = plan[i];
+      // Capture any value set before the accessor could apply (an own data
+      // property written on the element before it upgraded). It shadows the
+      // prototype accessor, so it is lifted into the backing store.
+      let initial;
+      if (Object.hasOwn(this, propName)) {
+        initial = /** @type {any} */ (this)[propName];
+        delete (/** @type {any} */ (this))[propName];
+      }
       if (initial !== undefined) {
         this.__propValues[propName] = initial;
       } else if (d.default !== undefined) {
@@ -596,7 +638,7 @@ class WebComponentBase extends Base {
       // b. SSR hydration (first mount, <!--webjs-hydrate--> marker
       //    present). Children are already inside their
       //    <slot data-webjs-light data-projection="actual"> elements
-      //    (injectDSD placed them). Adopt those assignments BEFORE
+      //    (the SSR walk placed them). Adopt those assignments BEFORE
       //    _performRender so we retain references to the SSR'd nodes;
       //    the renderer's createInstance().replaceChildren() will
       //    detach them, but the slot-apply step re-attaches the same
@@ -648,7 +690,7 @@ class WebComponentBase extends Base {
     }
 
     // Notify all controllers that the host is connected.
-    for (const c of this.__controllers) {
+    for (const c of this.__controllers || NO_CONTROLLERS) {
       if (c.hostConnected) c.hostConnected();
     }
 
@@ -735,7 +777,7 @@ class WebComponentBase extends Base {
       this.__signalWatcher.dispose();
       this.__signalWatcher = undefined;
     }
-    for (const c of this.__controllers) {
+    for (const c of this.__controllers || NO_CONTROLLERS) {
       if (c.hostDisconnected) c.hostDisconnected();
     }
   }
@@ -862,7 +904,7 @@ class WebComponentBase extends Base {
         this.willUpdate(changedProperties);
 
         // --- 4. controllers' hostUpdate ---
-        for (const c of this.__controllers) {
+        for (const c of this.__controllers || NO_CONTROLLERS) {
           if (c.hostUpdate) c.hostUpdate();
         }
 
@@ -890,7 +932,7 @@ class WebComponentBase extends Base {
 
         if (!pendingCommit) {
           // --- 6. controllers' hostUpdated (sync commit) ---
-          for (const c of this.__controllers) {
+          for (const c of this.__controllers || NO_CONTROLLERS) {
             if (c.hostUpdated) c.hostUpdated();
           }
           didCommit = true;
@@ -926,7 +968,7 @@ class WebComponentBase extends Base {
         // A newer render superseded this one; let the newer cycle finish.
         if (token !== this.__renderToken) return;
         // --- 6. controllers' hostUpdated (after the async commit) ---
-        for (const c of this.__controllers) {
+        for (const c of this.__controllers || NO_CONTROLLERS) {
           if (c.hostUpdated) c.hostUpdated();
         }
         // --- 7-8 + updateComplete ---
@@ -1018,7 +1060,7 @@ class WebComponentBase extends Base {
     this._isUpdating = true;
     try {
       this.willUpdate(changedProperties);
-      for (const c of this.__controllers) {
+      for (const c of this.__controllers || NO_CONTROLLERS) {
         if (c.hostUpdate) c.hostUpdate();
       }
       this._reflectDeclaredAttributes();
@@ -1374,7 +1416,7 @@ class WebComponentBase extends Base {
    * @param {ReactiveController} controller
    */
   addController(controller) {
-    this.__controllers.add(controller);
+    (this.__controllers ??= new Set()).add(controller);
     if (this._connected && controller.hostConnected) {
       controller.hostConnected();
     }
@@ -1393,7 +1435,7 @@ class WebComponentBase extends Base {
    * @param {ReactiveController} controller
    */
   removeController(controller) {
-    this.__controllers.delete(controller);
+    if (this.__controllers) this.__controllers.delete(controller);
   }
 
   /**

package/src/escape.js

@@ -1,6 +1,14 @@
+// Both escapers skip the three replaces when the string carries none of the
+// characters they rewrite, which is the common case for a template value and
+// was measurable on the SSR hot path (#1646).
+const TEXT_SPECIAL = /[&<>]/;
+const ATTR_SPECIAL = /[&"<]/;
+
 /** @param {string} s */
 export function escapeText(s) {
-  return String(s)
+  const str = String(s);
+  if (!TEXT_SPECIAL.test(str)) return str;
+  return str
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;');
@@ -8,7 +16,9 @@ export function escapeText(s) {
 
 /** @param {string} s */
 export function escapeAttr(s) {
-  return String(s)
+  const str = String(s);
+  if (!ATTR_SPECIAL.test(str)) return str;
+  return str
     .replace(/&/g, '&amp;')
     .replace(/"/g, '&quot;')
     .replace(/</g, '&lt;');

package/src/form-action.js

@@ -87,10 +87,10 @@ import { escapeAttr } from './escape.js';
  * it looks like from any one file and are easy to change one at a time. That
  * is why the predicates live here rather than at each site.
  *
- * The second SSR machine (`streamTemplate`) is reached only through
- * `renderToStream(v, { ssr: false })`, which no page render uses: the server
- * renders every page, Suspense included, via `renderToString`. It is kept in
- * lockstep for the public API surface rather than for a live page.
+ * Since #1646 there is ONE SSR interpreter (`render-server/walk.js`), shared
+ * by the buffered page render and `renderToStream(v, { ssr: false })`, so the
+ * two can no longer drift; the predicates still live here because the CLIENT
+ * renderer applies the same rules.
  */
 
 /**
@@ -967,9 +967,9 @@ function ensureIdentityField(form, id) {
 /**
  * SSR: judge one submitter's emitted START TAG, at its `>`.
  *
- * Called from BOTH state machines so the rules cannot drift between them, which
- * is the failure #1154 already had once (a guard shipped in `renderTemplate`
- * and not in `streamTemplate`). Judged at the `>` rather than at the hole
+ * Called from the one SSR interpreter (`render-server/walk.js`, #1646); there
+ * used to be two hand-synchronised state machines, which is the failure #1154
+ * had once (a guard shipped in one and not the other). Judged at the `>` rather than at the hole
  * because every input is an attribute the author may have written AFTER the
  * binding.
  *

package/src/optimistic.js

@@ -44,7 +44,7 @@ class OptimisticState {
   }
 }
 
-async function runLegacyOptimistic(signal, value, action) {
+async function runImperativeOptimistic(signal, value, action) {
   const prev = signal.get();
   signal.set(value);
   let result;
@@ -105,7 +105,7 @@ async function runLegacyOptimistic(signal, value, action) {
  *   4. The returned `release()` fn removes the update by ID and re-renders.
  *   5. Concurrent updates stack; each release removes only its own entry.
  *
- * Backward-compatible imperative API (signal-based rollback):
+ * Imperative form (signal-based rollback), for a one-shot toggle:
  *   await optimistic(signal, value, () => likePost(postId));
  *
  * Client-only: it calls `host.requestUpdate()` (client work), so a component
@@ -119,7 +119,7 @@ async function runLegacyOptimistic(signal, value, action) {
  */
 export function optimistic(first, second, third) {
   if (first && typeof first.get === 'function' && typeof first.set === 'function') {
-    return runLegacyOptimistic(first, second, third);
+    return runImperativeOptimistic(first, second, third);
   }
   return new OptimisticState(first, second);
 }

package/src/registry.d.ts

@@ -15,3 +15,8 @@ export function lookupModuleUrl(tag: string): string | undefined;
 export function isLazy(tag: string): boolean;
 export function tagOf(cls: WebComponentInstanceConstructor): string | undefined;
 export function allTags(): string[];
+/**
+ * The registry's tag-set version: bumped on a first-time registration, so a
+ * memo keyed on it (the SSR scanner's tag regex) is valid while it is unchanged.
+ */
+export function registryVersion(): number;

package/src/registry.js

@@ -31,7 +31,7 @@
  *   user-app:  ThemeToggle.register('theme-toggle')   → instance-A registry
  *   server:    lookup('theme-toggle')                  → instance-B registry (empty)
  *
- * SSR's `injectDSD` would then skip the tag and emit bare
+ * The SSR walk's `lookup(tag)` would then find no class and emit bare
  * `<theme-toggle></theme-toggle>` even though the user registered it
  * correctly. Symptom: components render with no children server-side
  * and only "appear" after the browser hydrates.
@@ -50,6 +50,21 @@ const registry = _g[REGISTRY_KEY] || (_g[REGISTRY_KEY] = new Map());
 /** @type {WeakMap<Function, string>} */
 const classToTag = _g[CLASS_TO_TAG_KEY] || (_g[CLASS_TO_TAG_KEY] = new WeakMap());
 
+/**
+ * The registry's tag-set version (#1644): bumped whenever a NEW key enters
+ * the registry, by a class registration OR by `primeModuleUrl` (the prod
+ * component scan creates the entry before the class arrives), so the SSR
+ * scanner can memoize the regex it builds from every registered tag and
+ * rebuild it only when the set changed. Shared on
+ * `globalThis` like the registry itself, because under `bun --hot` the app
+ * imports a fresh copy of this module while the first run's server keeps
+ * rendering through the old one; a copy-local counter would leave that server
+ * blind to a tag the new copy registered.
+ * @type {{ v: number }}
+ */
+const REGISTRY_VERSION_KEY = Symbol.for('webjs:registryVersion');
+const version = _g[REGISTRY_VERSION_KEY] || (_g[REGISTRY_VERSION_KEY] = { v: 0 });
+
 const isBrowser =
   typeof window !== 'undefined' && typeof customElements !== 'undefined';
 
@@ -76,6 +91,8 @@ function registerInternal(tag, cls) {
     entry.lazy = lazy;
   } else {
     registry.set(tag, { cls, moduleUrl: null, lazy, tag });
+    // A new tag changes the set the SSR scanner matches on (#1644).
+    version.v += 1;
   }
   classToTag.set(cls, tag);
 }
@@ -126,9 +143,10 @@ if (!isBrowser) {
  * ------------------------------------------------------------------ */
 
 /**
- * @deprecated Low-level internal: prefer `customElements.define(tag, cls)`.
- * Kept as a minimal wrapper for back-compat with any framework code that
- * calls it directly.
+ * Register a component class under a tag. The primitive behind
+ * `Class.register('tag')` (the app-facing idiom): `customElements.define` in
+ * the browser, the SSR registry on the server. Reachable as
+ * `@webjsdev/core/registry` for framework tooling; apps use the static method.
  *
  * @param {string} tag
  * @param {typeof import('./component.js').WebComponent} cls
@@ -163,6 +181,10 @@ export function primeModuleUrl(tag, moduleUrl) {
     lazy: false,
     tag,
   });
+  // A primed tag is a new KEY, and `allTags()` lists keys: the SSR scanner's
+  // pattern must include it before its class arrives, or a pattern memoized
+  // while the registry was empty would stay empty for the process (#1644).
+  version.v += 1;
 }
 
 /** @param {string} tag */
@@ -188,3 +210,12 @@ export function tagOf(cls) {
 export function allTags() {
   return [...registry.keys()];
 }
+
+/**
+ * The current tag-set version: moves only when a tag is registered for the
+ * first time. A memo keyed on it is valid for as long as it is unchanged.
+ * @returns {number}
+ */
+export function registryVersion() {
+  return version.v;
+}

package/src/render-client/parts.js

@@ -453,8 +453,8 @@ export function applyElement(part, value) {
       }
     }
     partAny.__refElement = part.el;
-    // Keep the legacy `lastTarget` field in sync for clearInstance /
-    // disposeInstance which read it for template-disposal cleanup.
+    // Keep `lastTarget` in sync for clearInstance / disposeInstance, which
+    // read it for template-disposal cleanup.
     part.lastTarget = nextTarget;
   }
 }

package/src/render-server/attrs.js

@@ -42,8 +42,8 @@ export function parseAttrs(attrStr) {
  */
 export function seedServerAttrs(instance, attrs) {
   if (!instance || typeof instance.setAttribute !== 'function') return;
-  for (const [name, raw] of Object.entries(attrs)) {
-    instance.setAttribute(name, decodeAttrEntities(raw));
+  for (const name in attrs) {
+    instance.setAttribute(name, decodeAttrEntities(attrs[name]));
   }
 }
 
@@ -55,7 +55,7 @@ export function seedServerAttrs(instance, attrs) {
  * @returns {string}
  */
 export function withHostMarker(opening) {
-  if (/\sdata-wj-host(?=[\s>=])/i.test(opening)) return opening;
+  if (opening.includes('data-wj-host') && /\sdata-wj-host(?=[\s>=])/i.test(opening)) return opening;
   return `${opening.slice(0, -1)} data-wj-host>`;
 }
 
@@ -94,7 +94,8 @@ export function appendReflectedAttrs(opening, instance, presentAttrNames) {
  * based on its static `properties` declaration.
  */
 export function applyAttrsToInstance(instance, attrs, Cls) {
-  for (const [sourceName, sourceValue] of Object.entries(attrs)) {
+  for (const sourceName in attrs) {
+    const sourceValue = attrs[sourceName];
     // The browser LOWERCASES every attribute name while parsing an HTML
     // document, so `cfgData="x"` reaches the client reader as `cfgdata` and a
     // camelCase name can never match anything in `observedAttributes`.