@webjsdev/server 0.8.59 → 0.8.60

package/src/js-scan.js

@@ -632,28 +632,46 @@ export function matchClosingParenthesis(s, start) {
  * `}` inside `'…'`, `"…"`, or backtick templates don't decrement depth.
  * Returns -1 if no balanced brace is found.
  *
+ * A template hole is a CODE context nested inside a template, not a brace in
+ * the enclosing block, so it gets its own frame on the stack: `${` pushes,
+ * and the `}` that returns that frame to depth zero pops back into the
+ * template rather than counting toward the block being matched. An earlier
+ * version incremented the outer depth at `${` and then never decremented it
+ * (the closing `}` arrived while still in template state), so depth could
+ * never return to zero and a class body holding `` html`…${x}…` `` was
+ * unmatchable. Every caller passes a masked source in which holes are already
+ * blanked, so the bug is invisible until one passes raw source.
+ *
  * @param {string} s
  * @param {number} start
  */
 export function matchClosingBrace(s, start) {
-  let depth = 1;
+  // Innermost first. `tpl` frames are template literals (no brace counting);
+  // `!tpl` frames are code, each with its own depth.
+  /** @type {Array<{ tpl: boolean, depth: number }>} */
+  const stack = [{ tpl: false, depth: 1 }];
   let i = start;
-  let str = ''; // '', "'", '"', or backtick
   while (i < s.length) {
+    const top = stack[stack.length - 1];
     const c = s[i];
-    if (str) {
+    if (top.tpl) {
       if (c === '\\') { i += 2; continue; }
-      if (c === str) str = '';
-      else if (str === '`' && c === '$' && s[i + 1] === '{') {
-        // template hole, count its closing `}` toward our brace depth.
-        depth++;
-        i += 2;
-        continue;
-      }
+      if (c === '`') { stack.pop(); i++; continue; }
+      if (c === '$' && s[i + 1] === '{') { stack.push({ tpl: false, depth: 1 }); i += 2; continue; }
       i++;
       continue;
     }
-    if (c === "'" || c === '"' || c === '`') { str = c; i++; continue; }
+    if (c === "'" || c === '"') {
+      i++;
+      while (i < s.length) {
+        if (s[i] === '\\') { i += 2; continue; }
+        const d = s[i];
+        i++;
+        if (d === c || d === '\n') break;   // closed, or unterminated at EOL
+      }
+      continue;
+    }
+    if (c === '`') { stack.push({ tpl: true, depth: 0 }); i++; continue; }
     if (c === '/' && s[i + 1] === '/') { // line comment
       while (i < s.length && s[i] !== '\n') i++;
       continue;
@@ -664,8 +682,18 @@ export function matchClosingBrace(s, start) {
       i += 2;
       continue;
     }
-    if (c === '{') depth++;
-    else if (c === '}') { depth--; if (depth === 0) return i; }
+    if (c === '{') { top.depth++; i++; continue; }
+    if (c === '}') {
+      top.depth--;
+      // Depth zero closes this frame: the outermost one is the answer, an inner
+      // one is a template hole ending and hands control back to its template.
+      if (top.depth === 0) {
+        if (stack.length === 1) return i;
+        stack.pop();
+      }
+      i++;
+      continue;
+    }
     i++;
   }
   return -1;

package/src/ssr.js

@@ -6,7 +6,7 @@ import { withBasePath } from './base-path.js';
 import { withAssetHash } from './asset-hash.js';
 import { jsonForScriptTag } from './script-tag-json.js';
 import { transitiveDeps, bareImports } from './module-graph.js';
-import { seedingEnabled, collectSeeds, buildSeedScript } from './action-seed.js';
+import { seedingEnabled, collectSeeds, buildSeedScript, SEED_DROP_BLOCK } from './action-seed.js';
 import { BUFFERED_MARKER, STREAM_MARKER } from './conditional-get.js';
 import {
   readRevalidate,
@@ -57,7 +57,15 @@ export async function ssrPage(route, params, url, opts) {
       revalidateSeconds = readRevalidate(pageMod);
       if (revalidateSeconds !== null) {
         const hit = await readHtmlCache(url);
-        if (hit) return cachedHtmlResponse(hit, opts.req, url);
+        if (hit) {
+          const cached = cachedHtmlResponse(hit, opts.req, url);
+          // A cache hit returns before any seed work runs, so it would otherwise
+          // report nothing at all, which reads as "seeding is broken" when it is
+          // really the cache answering (#1309). The seed block rides INSIDE the
+          // cached bytes, so the seeds are exactly as fresh as the HTML.
+          if (opts.dev) cached.headers.set('X-Webjs-Seed', 'html-cache');
+          return cached;
+        }
       }
     } catch {
       // A load / store failure falls through to a normal fresh render: the
@@ -288,9 +296,33 @@ export async function ssrPage(route, params, url, opts) {
     // block (those slow regions keep the stale-while-revalidate refetch). An
     // empty collector yields '' so the output stays byte-identical.
     let outBody = streamBody;
-    if (seedCollector && suspenseCtx.pending.length === 0) {
-      const seedScript = await buildSeedScript(seedCollector);
+    // Dev-only seeding diagnostics (#1309). `off` (seeding disabled) is kept
+    // DISTINCT from `collected=0` on purpose: the counting lives with the
+    // collector rather than behind the seed gate, so a seeding-DISABLED app
+    // never looks like a seeding-BROKEN one.
+    let seedHeader = 'off';
+    const streamed = suspenseCtx.pending.length > 0;
+    if (seedCollector && streamed) {
+      // A streamed render's deferred boundaries resolve AFTER the first flush,
+      // so their results cannot ride this block and none is emitted in prod. In
+      // DEV emit the marker alone, so the client reports the CAUSE instead of
+      // leaving the developer to guess why every action call went to the network.
+      seedHeader = `collected=${seedCollector.size}, emitted=0, streamed`;
+      if (opts.dev) {
+        const marker = await buildSeedScript(null, { dev: true, reason: 'streamed' });
+        if (marker) outBody = streamBody + marker;
+      }
+    } else if (seedCollector) {
+      const seedScript = await buildSeedScript(seedCollector, { dev: opts.dev });
       if (seedScript) outBody = streamBody + seedScript;
+      // `emitted` differs from `collected` exactly when the serializer threw and
+      // dropped the whole block, which is otherwise a completely invisible
+      // failure. In DEV that throw still emits a marker-only block, so the
+      // browser can name the cause; it carries no seeds, so it must NOT count as
+      // emitted or the header would report a total success on the very failure
+      // it exists to expose.
+      const dropped = seedScript === SEED_DROP_BLOCK;
+      seedHeader = `collected=${seedCollector.size}, emitted=${seedScript && !dropped ? seedCollector.size : 0}`;
     }
     const res = streamingHtmlResponse(
       prefix,
@@ -307,6 +339,11 @@ export async function ssrPage(route, params, url, opts) {
       nonce,
       opts.dev,
     );
+    // Dev-only seeding diagnostics (#1309). A miss is indistinguishable from a
+    // hit from the outside, so an app whose seeding silently broke looks exactly
+    // like one where it works. Dev only: a production header would publish how
+    // many server calls a page made, for no benefit.
+    if (opts.dev) res.headers.set('X-Webjs-Seed', seedHeader);
     // REDUCED response (#1009): the X-Webjs-Have short-circuit omitted the
     // outer-layout chrome, so these bytes are only valid for a request that
     // sent a matching `have`. Left shared-cacheable, a CDN edge could store the
@@ -2072,7 +2109,7 @@ function reachedVendorSpecifiers(graph, entryFiles, componentUrls, appDir, elida
  * @param {string} prefix
  * @param {string} bodyHtml
  * @param {string} closer
- * @param {{ pending: {id: string, promise: Promise<unknown>, formScope?: 'none'|'unbound'|'bound'|'unknown'}[], nextId: number }} ctx
+ * @param {{ pending: {id: string, promise: Promise<unknown>}[], nextId: number }} ctx
  * @param {number} status
  * @param {Request | undefined} req
  * @param {URL | undefined} url
@@ -2128,15 +2165,14 @@ function streamingHtmlResponse(prefix, bodyHtml, closer, ctx, status, req, url,
               try {
                 const resolved = await p.promise;
                 const sub = { pending: [], nextId: ctx.nextId, dev: ctx.dev };
-                // Carry the boundary's form scope (#1207). This is a fresh scan
-                // that cannot see the shell the boundary sits in, so without it
-                // a `<button formaction=${fn}>` inside a bound form's boundary
-                // reads as form-less and is refused, and the catch below turns
-                // that into an empty boundary on a 200 in production. 'unknown'
-                // when the entry predates the field: defer rather than refuse.
-                const html = await renderToString(resolved, {
-                  ssr: true, suspenseCtx: sub, formScope: p.formScope || 'unknown',
-                });
+                // A fresh scan that cannot see the shell the boundary sits in.
+                // That used to require carrying the boundary's form scope
+                // (#1207), or a `<button formaction=${fn}>` inside a bound
+                // form's boundary read as form-less, was refused, and the catch
+                // below turned it into an empty boundary on a 200 in
+                // production. #1307 made a bound submitter self-sufficient, so
+                // there is nothing left to carry.
+                const html = await renderToString(resolved, { ssr: true, suspenseCtx: sub });
                 ctx.nextId = sub.nextId;
                 for (const n of sub.pending) ctx.pending.push(n);
                 return { id: p.id, html };