@webjsdev/core 0.7.35 → 0.7.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.35",
+  "version": "0.7.36",
   "type": "module",
   "description": "webjs core runtime - html/css tags, WebComponent base, isomorphic renderers",
   "types": "./index.d.ts",

package/src/component.js

@@ -779,6 +779,16 @@ class WebComponentBase extends Base {
     // hydrated element (whose attribute already arrived from SSR) is unchanged.
     this._reflectDeclaredAttributes();
     const Ctor = /** @type any */ (this.constructor);
+    // Mark LIGHT-DOM component hosts so the framework default host rule
+    // (`@layer webjs-host { :where([data-wj-host]) { display: block } }`)
+    // applies. SSR already stamps this on server-rendered light hosts
+    // (idempotent here); this also covers a client-only light component (never
+    // SSR'd) so it does not collapse. Shadow hosts are NOT marked: a document
+    // rule would override the shadow author's own `:host { display: … }`, so
+    // shadow components control their host display via `:host` in `static styles`.
+    if (Ctor.shadow !== true && !this.hasAttribute('data-wj-host')) {
+      this.setAttribute('data-wj-host', '');
+    }
     if (Ctor.shadow === true) {
       const hadSSRShadow = !!this.shadowRoot;
       if (!this.shadowRoot) {

package/src/render-server.js

@@ -502,6 +502,24 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
       // this.hidden on the host). Reading after render() captures all three.
       // Appending keeps the original tag byte-identical when nothing changed.
       opening = appendReflectedAttrs(opening, instance, presentAttrNames);
+      // Mark LIGHT-DOM component hosts so the framework default
+      // `@layer webjs-host { :where([data-wj-host]) { display: block } }`
+      // (injected once in the document head) applies at first paint. A custom
+      // element is `display:inline` by default, which collapses a component used
+      // as a block container (a board / card) until an author style intervenes.
+      // The low-priority `@layer` keeps it overridable by any author style,
+      // INCLUDING Tailwind's layered utilities (`class="flex"` wins). Emitted
+      // uniformly regardless of elision, so the elision on-vs-off differential is
+      // preserved.
+      //
+      // Shadow hosts are NOT marked: a document-level rule targeting the host
+      // beats the shadow tree's own `:host { display: … }` (the encapsulation-
+      // context criterion outranks both layer and specificity for normal
+      // declarations), so marking them would silently override the shadow
+      // author's `:host` display. Shadow components set their own host display
+      // via `:host` in `static styles` (the idiomatic mechanism), which the
+      // framework must not clobber.
+      if (!isShadow) opening = withHostMarker(opening);
       // Render the template to HTML. injectDSD recurses on the result so
       // nested custom elements (e.g. <theme-toggle> inside <blog-shell>)
       // get their own DSD pass.
@@ -635,6 +653,14 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
       // path), not land in light DOM. Otherwise the client renders the error
       // into the shadow root while the light error box lingers underneath.
       const isShadowErr = /** @type any */ (Cls).shadow === true;
+      // Mark the LIGHT host here too, so a component whose SSR render() throws
+      // paints its error state as display:block (not the inline default),
+      // matching the success path. When an `async render()` rejects, it throws
+      // before the success-path withHostMarker (above) ran, so `opening` is still
+      // unmarked; when a later template render throws, the success marker already
+      // ran and this call is a no-op (withHostMarker is idempotent). Shadow hosts
+      // stay unmarked (their :host must win).
+      if (!isShadowErr) opening = withHostMarker(opening);
       let text;
       if (isShadowErr) {
         const rawStyles = /** @type any */ (Cls).styles;
@@ -1032,6 +1058,18 @@ function seedServerAttrs(instance, attrs) {
  * @param {Set<string>} presentAttrNames  lowercased names already in the source tag
  * @returns {string}
  */
+/**
+ * Add the component host marker (`data-wj-host`) to an opening tag, unless it
+ * is already present. Insert before the closing `>` the same way
+ * `appendReflectedAttrs` does. Idempotent so a re-processed tag is unchanged.
+ * @param {string} opening  the element's opening tag, ending in `>`
+ * @returns {string}
+ */
+function withHostMarker(opening) {
+  if (/\sdata-wj-host(?=[\s>=])/i.test(opening)) return opening;
+  return `${opening.slice(0, -1)} data-wj-host>`;
+}
+
 function appendReflectedAttrs(opening, instance, presentAttrNames) {
   if (!instance || typeof instance.getAttributeNames !== 'function') return opening;
   let extra = '';

package/src/router-client.js

@@ -82,10 +82,40 @@ const STREAM_MIME = 'text/vnd.webjs-stream.html';
  * Parse HTML into a Document. Prefers Document.parseHTMLUnsafe (processes
  * Declarative Shadow DOM) over DOMParser (does NOT process DSD).
  *
+ * A partial-nav response (#936) is an INNER fragment that BEGINS with the
+ * `<!--wj:children:<path>-->` layout marker and carries no `<!doctype>`/`<html>`.
+ * Parsing such a fragment as a DOCUMENT hoists that leading comment OUT of
+ * `<body>` (the HTML parser's "before html" insertion mode makes a leading
+ * comment a child of the document, before `<html>`), so
+ * `collectChildrenSlots(doc.body)` never sees the opening marker, finds no
+ * shared slot, and `applySwap` falls to the destructive full-body swap that
+ * strips the head stylesheets and the outer layout. So a fragment is parsed in
+ * BODY (fragment) context instead, keeping the marker with its content.
+ * `body.setHTMLUnsafe` also processes Declarative Shadow DOM, so a shadow
+ * component inside the swapped content still re-attaches its root; the
+ * `<template>` path is the fallback for browsers without it (markers preserved,
+ * DSD not, which matches the pre-`setHTMLUnsafe` baseline).
+ *
  * @param {string} html
  * @returns {Document | null}
  */
 function parseHTML(html) {
+  const isFragment = !/^\s*(?:<!doctype|<html)/i.test(html);
+  if (isFragment && typeof document !== 'undefined' && document.implementation) {
+    try {
+      const doc = document.implementation.createHTMLDocument();
+      if (typeof doc.body.setHTMLUnsafe === 'function') {
+        doc.body.setHTMLUnsafe(html);
+      } else {
+        const t = doc.createElement('template');
+        t.innerHTML = html;
+        doc.body.appendChild(t.content);
+      }
+      return doc;
+    } catch {
+      // Fall through to a document parse (still functional, just the #936 path).
+    }
+  }
   if (typeof Document !== 'undefined' && typeof Document.parseHTMLUnsafe === 'function') {
     return Document.parseHTMLUnsafe(html);
   }
@@ -1279,9 +1309,19 @@ function prefetch(href) {
     return;
   }
 
+  const have = buildHaveHeader();
+  // #936: while the document is still parsing, the closing `<!--/wj:children-->`
+  // marker at the bottom of the body may not exist yet, so `buildHaveHeader()`
+  // returns '' meaning "markers not parsed yet", NOT "this page has no layout".
+  // A touch-device viewport prefetch fires early enough (mid-parse) to hit this
+  // window on real Android Chrome. Caching that empty-`have` response (a full
+  // page) would later drive the destructive full-body swap fallback. Skip the
+  // speculative fetch; the click path re-fetches with a correct `have` once the
+  // document has parsed (and applySwap now falls back to a full load anyway).
+  if (!have && typeof document !== 'undefined' && document.readyState === 'loading') return;
+
   prefetchInflight.add(key);
   const headers = { 'x-webjs-router': '1', 'x-webjs-prefetch': '1' };
-  const have = buildHaveHeader();
   if (have) headers['x-webjs-have'] = have;
 
   fetch(href, { method: 'GET', headers, credentials: 'same-origin' })
@@ -2470,8 +2510,14 @@ function applySwap(doc, frameId, revalidating, href, incomingBuild, incomingSrc)
     return;
   }
 
-  // 3. Full body swap fallback. Use full head merge: different root
-  // layout, so stale head elements should be removed.
+  // 3. Full body swap fallback: no shared layout marker (a genuine root-layout
+  // change, or a same-layout nav whose markers could not be paired). Full head
+  // merge, so a real root-layout change removes stale head elements. `mergeHead`
+  // now PRESERVES stylesheets and `<style>` unconditionally (#936): even if the
+  // client reaches this path with an incoming head that lacks the app's
+  // `<link rel=stylesheet>` (a partial or mangled response, e.g. from a
+  // mid-parse empty-`have` prefetch), the live CSS is never stripped, so the
+  // swap can no longer leave the page unstyled.
   mergeHead(doc.head);
   // Persist permanent elements by node identity across the full-body
   // swap: move each live [data-webjs-permanent][id] node into the matching
@@ -3214,6 +3260,31 @@ function addNewHeadElements(newHead) {
   }
 }
 
+/**
+ * Is `el` a stylesheet the head merge must never remove: a `<style>` or a
+ * `<link rel~="stylesheet">`. WebJs ALWAYS keeps these on a soft nav, with no
+ * opt-out, and that is a deliberate divergence from Turbo. Turbo removes a
+ * stylesheet absent from the new head when it is tagged
+ * `data-turbo-track="dynamic"`, which is sound in Turbo because a Turbo visit
+ * always compares a COMPLETE old head to a COMPLETE new head, so "absent" means
+ * "this page removed it". WebJs's `X-Webjs-Have` optimization returns a REDUCED
+ * head (the shared app stylesheet is omitted because the client already has it),
+ * so "absent from the incoming head" means "optimized away", NOT "removed". A
+ * dynamic-removal opt-out would therefore re-introduce #936 (it would strip a
+ * still-needed sheet on any partial response), and WebJs is Tailwind-first (one
+ * global sheet, no page-specific sheets to drop), so the knob would be unsafe
+ * and unused. Keeping every stylesheet is correct here; a genuinely changed one
+ * is dropped by the deploy-level hard reload (build-id mismatch), not a soft swap.
+ *
+ * @param {Element} el
+ * @returns {boolean}
+ */
+function isPersistentHeadStyle(el) {
+  if (el.tagName === 'STYLE') return true;
+  return el.tagName === 'LINK' &&
+    (el.getAttribute('rel') || '').toLowerCase().split(/\s+/).includes('stylesheet');
+}
+
 /** @param {HTMLHeadElement} newHead */
 function mergeHead(newHead) {
   const currentHead = document.head;
@@ -3239,6 +3310,14 @@ function mergeHead(newHead) {
     if (el.tagName === 'SCRIPT' && el.getAttribute('type') === 'importmap') continue;
     if (el.tagName === 'BASE') continue;
     if (el.tagName === 'TITLE') continue;
+    // #936: NEVER remove a stylesheet or a `<style>` on a soft nav (Turbo's
+    // persistent-CSS model). The incoming head of a full-body-swap fallback can
+    // legitimately lack the app's `<link rel=stylesheet>` (a partial or mangled
+    // response, e.g. from a mid-parse empty-`have` prefetch): removing the live
+    // one there leaves the whole page unstyled until a manual refresh, the
+    // headline #936 symptom. Keeping it is safe: a genuinely stale sheet is
+    // dropped by the deploy-level hard reload (build-id mismatch), not here.
+    if (isPersistentHeadStyle(el)) continue;
     if (!newSet.has(outerHTMLForDiff(el))) el.remove();
   }
 
@@ -3473,11 +3552,13 @@ export {
   clearFormBusy as _clearFormBusy,
   collectChildrenSlots as _collectChildrenSlots,
   longestSharedPath as _longestSharedPath,
+  parseHTML as _parseHTML,
   keyOf as _keyOf,
   diffElementInPlace as _diffElementInPlace,
   reconcileChildren as _reconcileChildren,
   onPopState as _onPopState,
   applySwap as _applySwap,
+  buildHaveHeader as _buildHaveHeader,
   snapshotCache as _snapshotCache,
   prefetchCache as _prefetchCache,
   LIVE_ATTRS as _LIVE_ATTRS,