@webjsdev/server 0.8.73 → 0.8.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/server",
-  "version": "0.8.73",
+  "version": "0.8.75",
   "type": "module",
   "description": "The server for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Provides the file-based router, SSR, server actions, route handlers, middleware, and live reload on Node 24+ or Bun.",
   "main": "index.js",

package/src/auth.js

@@ -13,6 +13,8 @@ import { readTextBounded, readFormDataBounded, payloadTooLarge, DEFAULT_MAX_BODY
 
 const enc = new TextEncoder();
 const dec = new TextDecoder();
+// Base names. In production each is sent with the `__Host-` prefix
+// (cookieName below); development over http keeps the plain name.
 const AUTH_COOKIE = 'webjs.auth';
 const STATE_COOKIE = 'webjs.auth.state';
 // Carries the post-sign-in target across the OAuth round trip (#1495). Signed
@@ -104,14 +106,33 @@ function parseCookies(header) {
   return out;
 }
 
+/**
+ * The name a cookie is sent under. In production it carries the `__Host-`
+ * prefix (#1538): a browser stores a `__Host-` cookie only when it is
+ * `Secure`, has `Path=/` and has NO `Domain` attribute, so an app on a sibling
+ * subdomain (two apps on `a.example.app` and `b.example.app`, with
+ * `example.app` not on the Public Suffix List) can no longer plant its own
+ * `webjs.auth` with `Domain=.example.app` and sign a visitor in to the wrong
+ * account (cookie tossing, session fixation). Production never reads the
+ * unprefixed name: a fallback would reopen exactly that hole.
+ * Development over http keeps the plain name, since `__Host-` needs `Secure`.
+ *
+ * @param {string} base @param {boolean} secure
+ */
+export function cookieName(base, secure) {
+  return secure ? `__Host-${base}` : base;
+}
+
 function setCookie(name, value, maxAge, secure) {
   let s = `${name}=${encodeURIComponent(value)}; Max-Age=${Math.floor(maxAge / 1000)}; Path=/; HttpOnly; SameSite=Lax`;
   if (secure) s += '; Secure';
   return s;
 }
 
-function clearCookie(name) {
-  return `${name}=; Max-Age=0; Path=/; HttpOnly; SameSite=Lax`;
+// A `__Host-` cookie is cleared only by a Set-Cookie that also says Secure;
+// a browser ignores one without it, and the cookie would stay.
+function clearCookie(name, secure = false) {
+  return `${name}=; Max-Age=0; Path=/; HttpOnly; SameSite=Lax${secure ? '; Secure' : ''}`;
 }
 
 // -- JWT --------------------------------------------------------------------
@@ -260,7 +281,7 @@ export function createAuth(config) {
     // page cacheable so a logged-in body could be served to the next visitor.
     markDynamicAccess();
     const cookies = parseCookies(req.headers.get('cookie') || '');
-    const raw = cookies[AUTH_COOKIE];
+    const raw = cookies[cookieName(AUTH_COOKIE, secure())];
     if (!raw) return null;
 
     if (strategy === 'jwt') {
@@ -284,11 +305,11 @@ export function createAuth(config) {
     if (strategy === 'jwt') {
       let token = { sub: user.id, name: user.name, email: user.email, image: user.image, role: user.role, iat: Math.floor(Date.now() / 1000), exp: Math.floor(Date.now() / 1000) + maxAge };
       if (cb.jwt) token = await cb.jwt({ token, user });
-      return setCookie(AUTH_COOKIE, await encodeJwt(token, secret), maxAgeMs, secure());
+      return setCookie(cookieName(AUTH_COOKIE, secure()), await encodeJwt(token, secret), maxAgeMs, secure());
     }
     const sid = randomId();
     await dbStore.save(sid, user, maxAgeMs);
-    return setCookie(AUTH_COOKIE, await sign(sid, secret), maxAgeMs, secure());
+    return setCookie(cookieName(AUTH_COOKIE, secure()), await sign(sid, secret), maxAgeMs, secure());
   }
 
   // -- auth() ---------------------------------------------------------------
@@ -333,12 +354,12 @@ export function createAuth(config) {
   async function signOutFn(opts = {}) {
     const hdrs = new Headers();
     hdrs.set('location', opts.redirectTo || pages.signOut || '/');
-    hdrs.append('set-cookie', clearCookie(AUTH_COOKIE));
+    hdrs.append('set-cookie', clearCookie(cookieName(AUTH_COOKIE, secure()), secure()));
 
     if (strategy === 'database' && dbStore) {
       const r = opts.req || getRequest();
       if (r) {
-        const raw = parseCookies(r.headers.get('cookie') || '')[AUTH_COOKIE];
+        const raw = parseCookies(r.headers.get('cookie') || '')[cookieName(AUTH_COOKIE, secure())];
         if (raw) { const sid = await unsign(raw, secret); if (sid) await dbStore.destroy(sid); }
       }
     }
@@ -361,14 +382,14 @@ export function createAuth(config) {
 
     const hdrs = new Headers();
     hdrs.set('location', url.toString());
-    hdrs.append('set-cookie', setCookie(STATE_COOKIE, await sign(state, secret), 600_000, secure()));
+    hdrs.append('set-cookie', setCookie(cookieName(STATE_COOKIE, secure()), await sign(state, secret), 600_000, secure()));
     // The post-sign-in target rides in its own signed cookie (#1495). With no
     // valid target, any leftover cookie from an abandoned earlier attempt is
     // cleared so it cannot steer this sign-in somewhere stale.
     const target = safeRedirectPath(opts.redirectTo);
     hdrs.append('set-cookie', target
-      ? setCookie(REDIRECT_COOKIE, await sign(target, secret), 600_000, secure())
-      : clearCookie(REDIRECT_COOKIE));
+      ? setCookie(cookieName(REDIRECT_COOKIE, secure()), await sign(target, secret), 600_000, secure())
+      : clearCookie(cookieName(REDIRECT_COOKIE, secure()), secure()));
     return new Response(null, { status: 302, headers: hdrs });
   }
 
@@ -381,7 +402,7 @@ export function createAuth(config) {
    * @returns {Promise<string | null>}
    */
   async function readRedirectCookie(req) {
-    const raw = parseCookies(req.headers.get('cookie') || '')[REDIRECT_COOKIE];
+    const raw = parseCookies(req.headers.get('cookie') || '')[cookieName(REDIRECT_COOKIE, secure())];
     if (!raw) return null;
     return safeRedirectPath(await unsign(raw, secret));
   }
@@ -392,7 +413,7 @@ export function createAuth(config) {
     const state = url.searchParams.get('state');
     if (!code || !state) return new Response('Missing code or state', { status: 400 });
 
-    const rawState = parseCookies(req.headers.get('cookie') || '')[STATE_COOKIE];
+    const rawState = parseCookies(req.headers.get('cookie') || '')[cookieName(STATE_COOKIE, secure())];
     if (!rawState) return new Response('Missing state cookie', { status: 403 });
     const verified = await unsign(rawState, secret);
     if (!verified || verified !== state) return new Response('Invalid state', { status: 403 });
@@ -430,8 +451,8 @@ export function createAuth(config) {
       if (ok === false) {
         const denied = new Headers();
         denied.set('location', pages.error || '/?error=AccessDenied');
-        denied.append('set-cookie', clearCookie(STATE_COOKIE));
-        denied.append('set-cookie', clearCookie(REDIRECT_COOKIE));
+        denied.append('set-cookie', clearCookie(cookieName(STATE_COOKIE, secure()), secure()));
+        denied.append('set-cookie', clearCookie(cookieName(REDIRECT_COOKIE, secure()), secure()));
         return new Response(null, { status: 302, headers: denied });
       }
     }
@@ -439,8 +460,8 @@ export function createAuth(config) {
     const hdrs = new Headers();
     hdrs.set('location', (await readRedirectCookie(req)) || '/');
     hdrs.append('set-cookie', await writeSession(user));
-    hdrs.append('set-cookie', clearCookie(STATE_COOKIE));
-    hdrs.append('set-cookie', clearCookie(REDIRECT_COOKIE));
+    hdrs.append('set-cookie', clearCookie(cookieName(STATE_COOKIE, secure()), secure()));
+    hdrs.append('set-cookie', clearCookie(cookieName(REDIRECT_COOKIE, secure()), secure()));
     return new Response(null, { status: 302, headers: hdrs });
   }
 

package/src/dev/helpers.js

@@ -492,10 +492,16 @@ function __webjsApplyReload(verdict) {
       // overlay comes back describing the CURRENT error. Dismissing afterwards
       // would race that push and wipe a legitimately new overlay.
       dismissDevOverlay();
-      refresh(verdict).then(function (ok) {
-        if (!ok) { location.reload(); return; }
-        refreshStyles();
-      }, function () { location.reload(); });
+      // Load the rebuilt stylesheets FIRST and swap the markup in only once
+      // they are in (#1535): a \`webjs.dev.regenerate\` compile takes 100ms to
+      // seconds, and markup swapped in before it lands paints a new class with
+      // no rule. The old sheets stay applied until the swap, then go.
+      preloadStyles().then(function (styles) {
+        return refresh(verdict).then(function (ok) {
+          if (!ok) { location.reload(); return; }
+          styles.commit();
+        });
+      }).then(null, function () { location.reload(); });
       return;
     }
     location.reload();

package/src/dev-styles.js

@@ -17,39 +17,42 @@
  */
 
 /**
- * Re-request every same-origin stylesheet under `root`, cache-busted.
+ * Load the rebuilt stylesheets BEFORE the in-place refresh swaps the markup in
+ * (#1535), so a new class never paints without its rule.
  *
- * The replacement is inserted BESIDE the old link, and which of the two
- * survives depends on how the request went. That asymmetry is the whole point
- * and must not be collapsed into one shared handler:
+ * The re-request used to run AFTER the swap, and that order was the flash: the new
+ * markup is on screen while its stylesheet is still being rebuilt and fetched
+ * (a `webjs.dev.regenerate` compile is 100ms to seconds), so an element that
+ * gained a utility class shows with no rule for it until the sheet lands.
+ * Measured on a fixture with an 800ms compile: 56 animation frames (about
+ * 0.9s) painted the edited element unstyled. A full reload never had the
+ * problem, because a `<head>` stylesheet is render-blocking and the browser
+ * holds the old page until it loads.
  *
- * - On `load` the OLD link is dropped, so the page is never briefly unstyled.
- * - On `error` the NEW link is dropped and the old one kept. A re-request can
- *   fail (the server is mid-restart, the file was renamed or deleted), and
- *   removing the last working sheet there would leave the page permanently
- *   unstyled, which is exactly the failure #936 and #1400 exist to prevent.
- *
- * Duplicates are collapsed to one link per IDENTITY, where the identity is
- * every attribute except the href's query. The duplicate being collapsed is the
- * one the head merge re-appends (the incoming bare-href link beside the busted
- * one), so the head would otherwise gain a link on every refresh. Keying on the
- * path alone would be wrong in the other direction: it would delete an author's
- * second, legitimately distinct link to the same file, such as a `media="print"`
- * sheet.
+ * So the cache-busted replacements go in first, BESIDE the current links
+ * (both apply meanwhile, the same rules twice), and the returned promise
+ * resolves once each has loaded or failed, or after `timeoutMs` for one that
+ * hangs. The caller swaps the markup in and then calls `commit()`, which drops
+ * each old link whose replacement loaded, plus any same-identity copy the head
+ * merge appended, keeping the replacement. A replacement that failed is
+ * removed and the old link kept (#936, #1400: never take the last working
+ * sheet down). One still pending at commit finishes the same way when it
+ * settles.
  *
  * @param {ParentNode} [root]  where to scan, defaulting to the whole document.
- *   Injectable so a browser test can scope itself to its own container.
  * @param {() => number} [now]  cache-buster source, injectable for tests.
- * @returns {Element[]} the replacement links, so a caller (a test) can await them.
+ * @param {number} [timeoutMs]  the longest to hold the swap for a stylesheet.
+ * @returns {Promise<{ links: Element[], commit: () => void }>}
  */
-export function refreshStyles(root, now) {
+export function preloadStyles(root, now, timeoutMs) {
   const scope = root || (typeof document !== 'undefined' ? document : null);
-  if (!scope) return [];
+  const limit = typeof timeoutMs === 'number' ? timeoutMs : 10000;
+  if (!scope) return Promise.resolve({ links: [], commit: function () {} });
   const stamp = now || Date.now;
   /** @type {Record<string, { el: Element, url: URL }>} */
   const kept = Object.create(null);
-  const links = [].slice.call(scope.querySelectorAll('link[rel~="stylesheet"][href]'));
-  for (const el of links) {
+  const current = [].slice.call(scope.querySelectorAll('link[rel~="stylesheet"][href]'));
+  for (const el of current) {
     let url;
     try { url = new URL(el.getAttribute('href'), location.href); } catch (_) { continue; }
     if (url.origin !== location.origin) continue;
@@ -57,7 +60,21 @@ export function refreshStyles(root, now) {
     if (kept[key]) { if (el.parentNode) el.parentNode.removeChild(el); continue; }
     kept[key] = { el, url };
   }
-  const added = [];
+  let committed = false;
+  /** @type {Array<{ key: string, old: Element, next: Element, state: string }>} */
+  const pairs = [];
+  // Drop every other copy of this sheet (the old link, a copy the head merge
+  // re-appended) so exactly the replacement is left.
+  const settleLoaded = function (pair) {
+    const links = [].slice.call(scope.querySelectorAll('link[rel~="stylesheet"][href]'));
+    for (const el of links) {
+      if (el === pair.next) continue;
+      let url;
+      try { url = new URL(el.getAttribute('href'), location.href); } catch (_) { continue; }
+      if (url.origin === location.origin && identityKey(el, url) === pair.key && el.parentNode) el.parentNode.removeChild(el);
+    }
+  };
+  const waits = [];
   for (const key of Object.keys(kept)) {
     const old = kept[key].el;
     const url = kept[key].url;
@@ -65,17 +82,34 @@ export function refreshStyles(root, now) {
     url.searchParams.set('__webjs_dev', String(stamp()));
     const next = /** @type {Element} */ (old.cloneNode(false));
     next.setAttribute('href', url.pathname + url.search);
-    next.addEventListener('load', function () {
-      if (old.parentNode) old.parentNode.removeChild(old);
-    });
-    next.addEventListener('error', function () {
-      // Keep the sheet that still works rather than the one that just failed.
-      if (next.parentNode) next.parentNode.removeChild(next);
-    });
+    const pair = { key, old, next, state: 'pending' };
+    pairs.push(pair);
+    waits.push(new Promise(function (resolve) {
+      next.addEventListener('load', function () {
+        pair.state = 'load';
+        if (committed) settleLoaded(pair);
+        resolve(undefined);
+      });
+      next.addEventListener('error', function () {
+        pair.state = 'error';
+        if (next.parentNode) next.parentNode.removeChild(next);
+        resolve(undefined);
+      });
+    }));
     old.parentNode.insertBefore(next, old.nextSibling);
-    added.push(next);
   }
-  return added;
+  const commit = function () {
+    committed = true;
+    for (const pair of pairs) if (pair.state === 'load') settleLoaded(pair);
+  };
+  const links = pairs.map(function (p) { return p.next; });
+  if (!waits.length) return Promise.resolve({ links, commit });
+  return new Promise(function (resolve) {
+    let done = false;
+    const finish = function () { if (!done) { done = true; resolve({ links, commit }); } };
+    Promise.all(waits).then(finish);
+    setTimeout(finish, limit);
+  });
 }
 
 /**