@webjsdev/core 0.7.46 → 0.7.47

package/src/render-server.js

@@ -1,7 +1,14 @@
 import { html, isTemplate } from './html.js';
 import { BINDING_PREFIXES } from './binding-prefixes.js';
 import { escapeText, escapeAttr } from './escape.js';
-import { assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp } from './form-action.js';
+import {
+  assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
+  assertIdentifiableAction, bindFormActionStartTag, isBoundFormAction, resolveFormActionId,
+  assertConvergentBoundForm, assertSubmitterHasNoName, assertSubmitterHasNoValue,
+  assertSubmitterFormIsBound, assertSubmitterHasNoFormAttribute,
+  assertSingleSubmitterAction, assertSubmitterStartTag, parseStartTagAttrs,
+  isSubmitterReflectedProp, FORM_ACTION_FIELD,
+} from './form-action.js';
 import { lookup, lookupModuleUrl, allTags } from './registry.js';
 import { stylesToString, isCSS } from './css.js';
 import { isRepeat } from './repeat.js';
@@ -24,10 +31,19 @@ import { cspNonce } from './csp-nonce.js';
  * Suspense still works but we fall back to emitting only the fallback
  * (the promise is dropped: appropriate for static pre-render).
  *
- * @typedef {{ pending: {id: string, promise: Promise<unknown>}[], nextId: number }} SuspenseCtx
+ * @typedef {{ pending: {id: string, promise: Promise<unknown>, formScope?: 'none'|'unbound'|'bound'|'unknown'}[], nextId: number }} SuspenseCtx
+ *
+ * `formScope` (#1207) is how a caller that resolves a Suspense boundary ITSELF
+ * tells this render what the boundary's surroundings were. The page pipeline in
+ * `@webjsdev/server` drains `ctx.pending` and re-renders each resolved child
+ * through here, which is a fresh scan with no view of the shell it belongs to,
+ * so without the recorded scope a `<button formaction=${fn}>` inside a bound
+ * form's Suspense boundary reads as form-less and is refused. That refusal is
+ * caught and replaced by the empty string in production, so the whole boundary
+ * would silently disappear from a page that still returned 200.
  *
  * @param {unknown} value
- * @param {{ ssr?: boolean, suspenseCtx?: SuspenseCtx }} [opts]
+ * @param {{ ssr?: boolean, suspenseCtx?: SuspenseCtx, dev?: boolean, formScope?: 'none'|'unbound'|'bound'|'unknown' }} [opts]
  * @returns {Promise<string>}
  */
 export async function renderToString(value, opts = { ssr: true }) {
@@ -38,20 +54,23 @@ export async function renderToString(value, opts = { ssr: true }) {
   // sharing it see the same flag. Undefined stays undefined (NODE_ENV fallback).
   const dev = opts && opts.dev !== undefined ? opts.dev : ctx && ctx.dev;
   if (ctx && ctx.dev === undefined && dev !== undefined) ctx.dev = dev;
-  const html = await render(value, ctx);
+  // A caller that knows the scope passes it. Absent, this is a top-level render
+  // and 'none' is the honest answer: there is conclusively no enclosing form.
+  const html = await render(value, ctx, (opts && opts.formScope) || 'none');
   return opts && opts.ssr === false ? html : await injectDSD(html, ctx, [], dev);
 }
 
 /**
  * @param {unknown} value
  * @param {SuspenseCtx} [ctx]
+ * @param {'none'|'unbound'|'bound'|'unknown'} [formScope] enclosing form scope, as seen from THIS scan
  * @returns {Promise<string>}
  */
-async function render(value, ctx) {
+async function render(value, ctx, formScope = 'none') {
   if (value == null || value === false || value === true) return '';
   if (value && typeof /** @type any */ (value).then === 'function') {
     value = await value;
-    return render(value, ctx);
+    return render(value, ctx, formScope);
   }
   // unsafeHTML: inject raw HTML string without escaping.
   if (isUnsafeHTML(value)) {
@@ -59,21 +78,21 @@ async function render(value, ctx) {
   }
   // live() on the server just unwraps and renders the inner value.
   if (isLive(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, formScope);
   }
   // watch() on the server reads the signal once and inlines the
   // result. Subscription is a client-only concern; the SSR HTML
   // freezes a snapshot of the current value.
   if (isWatch(value)) {
-    return render(/** @type any */ (value).signal.get(), ctx);
+    return render(/** @type any */ (value).signal.get(), ctx, formScope);
   }
   // keyed() on the server: render the wrapped template; key is client-only.
   if (isKeyed(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, formScope);
   }
   // guard() on the server: always invoke the value function (no cache on SSR).
   if (isGuard(value)) {
-    return render(/** @type any */ (value).fn(), ctx);
+    return render(/** @type any */ (value).fn(), ctx, formScope);
   }
   // templateContent() on the server: emit the template's innerHTML verbatim.
   if (isTemplateContent(value)) {
@@ -86,7 +105,7 @@ async function render(value, ctx) {
   }
   // cache() on the server: pass-through to the inner value.
   if (isCache(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, formScope);
   }
   // until() on the server: render the first synchronous candidate, or
   // await the first Promise to settle when all candidates are Promises.
@@ -96,13 +115,13 @@ async function render(value, ctx) {
     const args = /** @type any */ (value).args;
     for (const a of args) {
       if (!a || typeof (/** @type any */ (a).then) !== 'function') {
-        return render(a, ctx);
+        return render(a, ctx, formScope);
       }
     }
     if (args.length > 0) {
       try {
         const winner = await Promise.race(args.map((p) => Promise.resolve(p).catch(() => undefined)));
-        return render(winner, ctx);
+        return render(winner, ctx, formScope);
       } catch {
         return '';
       }
@@ -115,34 +134,35 @@ async function render(value, ctx) {
     return '';
   }
   if (Array.isArray(value)) {
-    const parts = await Promise.all(value.map((v) => render(v, ctx)));
+    const parts = await Promise.all(value.map((v) => render(v, ctx, formScope)));
     return parts.join('');
   }
   if (isRepeat(value)) {
     const r = /** @type any */ (value);
-    const parts = await Promise.all(r.items.map((it, i) => render(r.templateFn(it, i), ctx)));
+    const parts = await Promise.all(r.items.map((it, i) => render(r.templateFn(it, i), ctx, formScope)));
     return parts.join('');
   }
   if (isSuspense(value)) {
     const s = /** @type any */ (value);
-    const fallback = await render(s.fallback, ctx);
+    const fallback = await render(s.fallback, ctx, formScope);
     if (ctx) {
       const id = `s${ctx.nextId++}`;
-      ctx.pending.push({ id, promise: Promise.resolve(s.children) });
+      ctx.pending.push({ id, promise: Promise.resolve(s.children), formScope });
       return `<webjs-boundary id="${id}">${fallback}</webjs-boundary>`;
     }
     return fallback;
   }
-  if (isTemplate(value)) return renderTemplate(/** @type any */ (value), ctx);
+  if (isTemplate(value)) return renderTemplate(/** @type any */ (value), ctx, formScope);
   return escapeText(String(value));
 }
 
 /**
  * @param {import('./html.js').TemplateResult} tr
  * @param {SuspenseCtx} [ctx]
+ * @param {'none'|'unbound'|'bound'|'unknown'} [formScopeAtStart]
  * @returns {Promise<string>}
  */
-async function renderTemplate(tr, ctx) {
+async function renderTemplate(tr, ctx, formScopeAtStart = 'none') {
   const { strings, values } = tr;
   let out = '';
   let state = 'text';
@@ -152,6 +172,135 @@ async function renderTemplate(tr, ctx) {
   let commentDashes = 0;
   let currentTag = '';   // lowercased tag name currently being parsed
   let rawTail = '';      // rolling lowercased tail, tracks </script>/</style>
+  let tagStart = -1;     // index in `out` of the `<` opening the current tag
+  /** @type {string | null} */
+  let pendingActionId = null;  // identity of a bound form action, until the tag closes
+  /** @type {string | null} */
+  let pendingSubmitterTag = null;  // tag of a bound submitter, until it closes
+  // Shapes on the CURRENT start tag that a bound form may not carry (#1155).
+  // Collected as the tag is scanned and judged at its `>`, because the action
+  // hole may come after them.
+  let pendingActionCount = 0;
+  /** @type {string[]} */
+  let pendingPropAttrs = [];
+  /** @type {string[]} */
+  let pendingSubmitterProps = [];
+  // Whether the tag stream is currently inside a form that BOUND an action
+  // (#1207), as THIS scan can see it. Three states, and the third is the point:
+  //   'bound'   an enclosing <form> opened here and bound an action
+  //   'unbound' an enclosing <form> opened here and bound nothing
+  //   'none'    there is conclusively no enclosing <form>
+  //   'unknown' there may be one, but this scan cannot see it
+  //
+  // The last two look alike and must not be merged, which is what a boolean did.
+  // A component's template is rendered by a SEPARATE pass (`injectDSD` calls
+  // `render` on it), so a `<button formaction=${fn}>` inside a component inside
+  // a bound form read as "no form", was refused, and in production vanished
+  // from a page that still returned 200. That pass now says 'unknown' and the
+  // boundness question is skipped, exactly as the client skips it when it
+  // cannot reach the form, so both renderers are best effort in the same place
+  // and for the same reason. A top-level scan that simply contains no form
+  // stays 'none' and is still refused, because there the answer IS known.
+  //
+  // Seeded from the caller so a nested template rendered into a form's children
+  // inherits the scope, since each template is its own scan.
+  let formScope = formScopeAtStart;
+  let isCloseTag = false;
+
+  // A bound `action=${fn}` is committed at its hole, but the edits it implies
+  // (forcing `method` / `enctype`, and the hidden identity field) are only
+  // possible once the whole start tag is known: an attribute the author wrote
+  // AFTER the action hole still counts, and the hidden field belongs INSIDE
+  // the form, after the `>`. So the hole records the identity and this runs at
+  // the `>`, rewriting the start tag that was just emitted.
+  const closeBoundFormTag = () => {
+    // Reset per tag whether or not this one was bound, so a later form is never
+    // judged on an earlier tag's shapes.
+    const propAttrs = pendingPropAttrs;
+    const submitterProps = pendingSubmitterProps;
+    const duplicateAction = pendingActionCount > 1;
+    const submitterTag = pendingSubmitterTag;
+    pendingPropAttrs = [];
+    pendingSubmitterProps = [];
+    pendingActionCount = 0;
+    pendingSubmitterTag = null;
+    if (pendingActionId != null) {
+      assertConvergentBoundForm({ duplicateAction, propAttrs });
+      const bound = bindFormActionStartTag(out.slice(tagStart), pendingActionId);
+      out = out.slice(0, tagStart) + bound.tag + bound.hidden;
+      pendingActionId = null;
+      formScope = 'bound';
+    }
+    // A form that opened and bound NOTHING still opens a scope: a submitter
+    // inside it must be refused, which is a different answer from 'none'.
+    if (!isCloseTag && currentTag === 'form' && formScope !== 'bound') formScope = 'unbound';
+    if (submitterTag != null) {
+      assertSubmitterStartTag(out.slice(tagStart), submitterTag, { bound: true, duplicateAction, propAttrs: submitterProps });
+    } else if (formScope === 'bound' && !isCloseTag && (currentTag === 'button' || currentTag === 'input')) {
+      // Part B (#1207): an ordinary submitter inside a bound form, whose own
+      // `formmethod` / `formenctype` can defeat the binding without carrying an
+      // action of its own. Neither renderer used to look at those. Gated on
+      // 'bound' because that is the only scope in which the sweep has anything
+      // to protect: under 'unknown' the enclosing form is not this scan's to
+      // judge, and under 'none' / 'unbound' there is no binding to defeat.
+      assertSubmitterStartTag(out.slice(tagStart), currentTag, { bound: false, propAttrs: submitterProps });
+    }
+  };
+  // #1155: a `.method` / `.enctype` / `.encoding` prop on a form is dropped
+  // here but applied for real in the browser, where all three are reflected IDL
+  // attributes, so a bound form carrying one submits differently with JS than
+  // without it. Recorded and refused at the `>`, once the tag's action hole is
+  // known.
+  const notePropAttr = (name, tag) => {
+    const t = String(tag).toLowerCase();
+    if (t === 'button' || t === 'input') {
+      // #1207: the submitter twin. `name` / `value` / `formAction` / `formMethod`
+      // / `formEnctype` all reflect on a submitter, so a `.prop` spelling is
+      // dropped here and written to the attribute in the browser.
+      if (isSubmitterReflectedProp(name)) pendingSubmitterProps.push(String(name));
+      return;
+    }
+    if (t !== 'form') return;
+    let n = String(name).toLowerCase();
+    if (n === 'encoding') n = 'enctype';
+    if (n === 'method' || n === 'enctype') pendingPropAttrs.push(String(name));
+  };
+  const noteActionHole = (name, tag) => {
+    const t = String(tag).toLowerCase();
+    const n = String(name).toLowerCase();
+    if ((t === 'form' && n === 'action') ||
+        ((t === 'button' || t === 'input') && n === 'formaction')) {
+      pendingActionCount += 1;
+    }
+  };
+
+  // Every `>` in a tag state funnels through here, so the bound-form bookkeeping
+  // stays in one place rather than at five call sites. `</form>` closes the form
+  // scope: a submitter after it is outside.
+  //
+  // `allowRawtext` is NOT a preference. Only two of those five call sites ever
+  // entered rawtext: the `tag-name` and `in-tag` exits. The three attribute
+  // exits (`attr-name`, `after-eq`, `attr-unquoted`) always forced `text`, so
+  // `<script defer>` and `<style media=print>`, whose start tags end on a bare
+  // or unquoted attribute, escaped their bodies. Switching them to rawtext here
+  // would silently turn `<script defer>${userInput}</script>` from escaped into
+  // raw script, which is an XSS mitigation this change has no business
+  // touching. Whether that escaping is the RIGHT behaviour is a separate
+  // question from #1207; this preserves it exactly.
+  const handleTagEnd = (allowRawtext) => {
+    closeBoundFormTag();
+    if (isCloseTag && currentTag === 'form') {
+      // Back to the scope this scan STARTED in, not a flat 'none'. Under an
+      // 'unknown' seed (the component pass) the scan never learned whether the
+      // host page has a bound form, and closing a form of its own teaches it
+      // nothing about that, so asserting 'none' here would downgrade a
+      // cannot-tell into a conclusive refusal.
+      formScope = formScopeAtStart === 'unknown' ? 'unknown' : 'none';
+    }
+    isCloseTag = false;
+    state = allowRawtext && isRawtextTag(currentTag) ? 'rawtext' : 'text';
+    if (state === 'rawtext') rawTail = '';
+  };
 
   for (let i = 0; i < strings.length; i++) {
     const s = strings[i];
@@ -160,12 +309,12 @@ async function renderTemplate(tr, ctx) {
       switch (state) {
         case 'text':
           out += c;
-          if (c === '<') state = 'tag-open';
+          if (c === '<') { state = 'tag-open'; tagStart = out.length - 1; isCloseTag = false; }
           break;
         case 'tag-open':
           out += c;
           if (c === '!') state = 'bang-1';
-          else if (c === '/') { state = 'tag-name'; currentTag = ''; }
+          else if (c === '/') { state = 'tag-name'; currentTag = ''; isCloseTag = true; }
           else if (/[a-zA-Z]/.test(c)) { state = 'tag-name'; currentTag = c.toLowerCase(); }
           else state = 'text';
           break;
@@ -187,16 +336,14 @@ async function renderTemplate(tr, ctx) {
         case 'tag-name':
           out += c;
           if (c === '>') {
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd(true);
           } else if (/\s/.test(c)) state = 'in-tag';
           else currentTag += c.toLowerCase();
           break;
         case 'in-tag':
           out += c;
           if (c === '>') {
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd(true);
           } else if (!/\s/.test(c) && c !== '/') {
             state = 'attr-name';
             attrName = c;
@@ -215,18 +362,18 @@ async function renderTemplate(tr, ctx) {
         case 'attr-name':
           if (c === '=') { state = 'after-eq'; out += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(false); }
           else { attrName += c; out += c; }
           break;
         case 'after-eq':
           if (c === '"' || c === "'") { state = 'attr-quoted'; attrQuote = c; out += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(false); }
           else { state = 'attr-unquoted'; out += c; }
           break;
         case 'attr-unquoted':
           if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(false); }
           else out += c;
           break;
         case 'attr-quoted':
@@ -254,7 +401,7 @@ async function renderTemplate(tr, ctx) {
         out += String(val ?? '');
         rawTail = '';
       } else if (state === 'text') {
-        out += await render(val, ctx);
+        out += await render(val, ctx, formScope);
       } else if (state === 'after-eq') {
         const prefix = attrName[0];
         const name = attrName.slice(1);
@@ -283,7 +430,7 @@ async function renderTemplate(tr, ctx) {
           // fallback to HTML now and carry it as data-webjs-fallback, which the
           // injectDSD streaming pre-pass reads as the boundary placeholder.
           if (currentTag === 'webjs-suspense' && name === 'fallback') {
-            const fbHtml = await render(val, ctx);
+            const fbHtml = await render(val, ctx, formScope);
             out += `data-webjs-fallback="${escapeAttr(fbHtml)}"`;
             state = 'in-tag';
             attrName = '';
@@ -301,6 +448,7 @@ async function renderTemplate(tr, ctx) {
             // property is a plain expando that reflects nothing, so refusing
             // it would be a false positive.
             assertNotFunctionReflectedActionProp(val, name, currentTag);
+            notePropAttr(name, currentTag);
             state = 'in-tag';
             attrName = '';
             continue;
@@ -338,7 +486,55 @@ async function renderTemplate(tr, ctx) {
           if (val) out += `${name}=""`;
           state = 'in-tag';
           attrName = '';
+        } else if (isBoundFormAction(val, attrName, currentTag)) {
+          noteActionHole(attrName, currentTag);
+          if (currentTag === 'form') {
+            // #1155: the form-level binding. Drop the `action=` attribute
+            // entirely so the form posts to the page's own url (an omitted
+            // attribute, not `action=""`, which the spec calls a conformance
+            // error), and remember the identity so the `>` can force the
+            // submission attributes and emit the hidden field.
+            pendingActionId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            // Trailing whitespace goes with the attribute: every injected
+            // attribute carries its own leading space, so keeping the old one
+            // would double it in the emitted tag.
+            out = out.slice(0, attrStart).replace(/\s+$/, '');
+          } else {
+            // #1207: the submitter binding. The identity replaces the
+            // `formaction=` hole IN PLACE with the button's own name/value
+            // pair, the one channel a browser submits for the pressed button
+            // alone. No `formaction` url is emitted, so the submission still
+            // targets the page and the form-level identity is simply overridden
+            // by this later entry.
+            //
+            // Refused here rather than at the `>` only where the answer cannot
+            // change later: boundness of the ENCLOSING form is already decided
+            // (its start tag is emitted), and an attribute written BEFORE the
+            // hole is already in `out`. Everything else waits for the close,
+            // where `assertSubmitterStartTag` sees the whole tag.
+            // A second binding hole on this same tag, refused here so the
+            // author gets the duplicate message rather than a confusing
+            // complaint about the `name` the FIRST hole just injected.
+            assertSingleSubmitterAction(pendingSubmitterTag != null, currentTag);
+            // Only 'unknown' defers: a component renders its own template in a
+            // separate pass that cannot see the enclosing form, so the question
+            // is not this scan's to answer. 'none' and 'unbound' are known
+            // answers and are still refused.
+            if (formScope !== 'unknown') assertSubmitterFormIsBound(formScope === 'bound', currentTag);
+            const attrs = parseStartTagAttrs(out.slice(tagStart));
+            if (attrs.has('name')) assertSubmitterHasNoName(attrs.get('name') || '', currentTag, false);
+            if (attrs.has('value')) assertSubmitterHasNoValue(currentTag);
+            if (attrs.has('form')) assertSubmitterHasNoFormAttribute(currentTag);
+            const subId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            pendingSubmitterTag = currentTag;
+            out = out.slice(0, attrStart) + `name="${FORM_ACTION_FIELD}" value="${escapeAttr(subId)}"`;
+          }
+          state = 'in-tag';
+          attrName = '';
         } else {
+          // A second `action` hole that resolved to a plain url still COUNTS,
+          // so the duplicate refusal fires whatever the values happen to be.
+          noteActionHole(attrName, currentTag);
           // #1154: never stringify a function into action=/formaction= (it
           // would serialize a server action's source into the served HTML).
           assertNotFunctionActionAttr(val, attrName, currentTag);
@@ -864,7 +1060,14 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
       // 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.
-      const rawInner = await render(tpl, ctx);
+      // 'unknown' for the form scope (#1207): this is a SEPARATE render pass
+      // over one component's own template, driven by walking the already-emitted
+      // HTML, so it has no idea whether the host tag sits inside a bound
+      // `<form>`. Passing the default 'none' claimed there was no form at all,
+      // which refused a perfectly good `<button formaction=${fn}>` in a
+      // component inside a bound form and, because component SSR errors are
+      // isolated, made the button vanish from a page that still returned 200.
+      const rawInner = await render(tpl, ctx, 'unknown');
 
       if (isShadow) {
         // Shadow DOM: native <slot> stays as-is in the DSD template. The
@@ -1657,7 +1860,7 @@ export function renderToStream(value, opts = { ssr: true }) {
       try {
         if (opts && opts.ssr === false) {
           // No DSD injection: just stream the raw rendered chunks.
-          await streamRender(value, ctx, controller);
+          await streamRender(value, ctx, controller, 'none');
         } else {
           // Render to string first to run DSD injection (which operates on
           // the full HTML), then enqueue the result. This matches the
@@ -1686,28 +1889,29 @@ export function renderToStream(value, opts = { ssr: true }) {
  * @param {unknown} value
  * @param {SuspenseCtx} [ctx]
  * @param {ReadableStreamDefaultController<string>} controller
+ * @param {'none'|'unbound'|'bound'|'unknown'} [formScope] enclosing form scope, as seen from THIS scan
  */
-async function streamRender(value, ctx, controller) {
+async function streamRender(value, ctx, controller, formScope = 'none') {
   if (value == null || value === false || value === true) return;
   if (value && typeof /** @type any */ (value).then === 'function') {
     value = await value;
-    return streamRender(value, ctx, controller);
+    return streamRender(value, ctx, controller, formScope);
   }
   if (isUnsafeHTML(value)) {
     controller.enqueue(String(/** @type any */ (value).value ?? ''));
     return;
   }
   if (isLive(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, formScope);
   }
   if (isWatch(value)) {
-    return streamRender(/** @type any */ (value).signal.get(), ctx, controller);
+    return streamRender(/** @type any */ (value).signal.get(), ctx, controller, formScope);
   }
   if (isKeyed(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, formScope);
   }
   if (isGuard(value)) {
-    return streamRender(/** @type any */ (value).fn(), ctx, controller);
+    return streamRender(/** @type any */ (value).fn(), ctx, controller, formScope);
   }
   if (isTemplateContent(value)) {
     const tpl = /** @type any */ (value).template;
@@ -1718,19 +1922,19 @@ async function streamRender(value, ctx, controller) {
     return;
   }
   if (isCache(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, formScope);
   }
   if (isUntil(value)) {
     const args = /** @type any */ (value).args;
     for (const a of args) {
       if (!a || typeof (/** @type any */ (a).then) !== 'function') {
-        return streamRender(a, ctx, controller);
+        return streamRender(a, ctx, controller, formScope);
       }
     }
     if (args.length > 0) {
       try {
         const winner = await Promise.race(args.map((p) => Promise.resolve(p).catch(() => undefined)));
-        return streamRender(winner, ctx, controller);
+        return streamRender(winner, ctx, controller, formScope);
       } catch {
         return;
       }
@@ -1741,13 +1945,13 @@ async function streamRender(value, ctx, controller) {
     return;
   }
   if (Array.isArray(value)) {
-    for (const v of value) await streamRender(v, ctx, controller);
+    for (const v of value) await streamRender(v, ctx, controller, formScope);
     return;
   }
   if (isRepeat(value)) {
     const r = /** @type any */ (value);
     for (let i = 0; i < r.items.length; i++) {
-      await streamRender(r.templateFn(r.items[i], i), ctx, controller);
+      await streamRender(r.templateFn(r.items[i], i), ctx, controller, formScope);
     }
     return;
   }
@@ -1756,16 +1960,16 @@ async function streamRender(value, ctx, controller) {
     if (ctx) {
       const id = `s${ctx.nextId++}`;
       controller.enqueue(`<webjs-boundary id="${id}">`);
-      await streamRender(s.fallback, ctx, controller);
+      await streamRender(s.fallback, ctx, controller, formScope);
       controller.enqueue(`</webjs-boundary>`);
-      ctx.pending.push({ id, promise: Promise.resolve(s.children) });
+      ctx.pending.push({ id, promise: Promise.resolve(s.children), formScope });
     } else {
-      await streamRender(s.fallback, ctx, controller);
+      await streamRender(s.fallback, ctx, controller, formScope);
     }
     return;
   }
   if (isTemplate(value)) {
-    await streamTemplate(/** @type any */ (value), ctx, controller);
+    await streamTemplate(/** @type any */ (value), ctx, controller, formScope);
     return;
   }
   controller.enqueue(escapeText(String(value)));
@@ -1778,8 +1982,9 @@ async function streamRender(value, ctx, controller) {
  * @param {import('./html.js').TemplateResult} tr
  * @param {SuspenseCtx} [ctx]
  * @param {ReadableStreamDefaultController<string>} controller
+ * @param {'none'|'unbound'|'bound'|'unknown'} [formScopeAtStart]
  */
-async function streamTemplate(tr, ctx, controller) {
+async function streamTemplate(tr, ctx, controller, formScopeAtStart = 'none') {
   const { strings, values } = tr;
   let state = 'text';
   let attrName = '';
@@ -1790,6 +1995,101 @@ async function streamTemplate(tr, ctx, controller) {
   let rawTail = '';
   // Buffer used for attribute handling where we may need to backtrack.
   let buf = '';
+  let tagStart = -1;
+  /** @type {string | null} */
+  let pendingActionId = null;
+  // Shapes on the CURRENT start tag that a bound form may not carry (#1155).
+  // Collected as the tag is scanned and judged at its `>`, because the action
+  // hole may come after them.
+  let pendingActionCount = 0;
+  /** @type {string[]} */
+  let pendingPropAttrs = [];
+  /** @type {string[]} */
+  let pendingSubmitterProps = [];
+  /** @type {string | null} */
+  let pendingSubmitterTag = null;  // tag of a bound submitter, until it closes
+  // See the buffered machine: seeded from the caller so a nested template
+  // rendered into a bound form's children knows it is inside one.
+  let formScope = formScopeAtStart;
+  let isCloseTag = false;
+
+  // See the buffered machine for why this runs at the `>` rather than at the
+  // hole. `tagStart` indexes into `buf`, which is safe because `buf` is only
+  // flushed on a `text`-state hole and a start tag contains none.
+  const closeBoundFormTag = () => {
+    // Reset per tag whether or not this one was bound, so a later form is never
+    // judged on an earlier tag's shapes.
+    const propAttrs = pendingPropAttrs;
+    const submitterProps = pendingSubmitterProps;
+    const duplicateAction = pendingActionCount > 1;
+    const submitterTag = pendingSubmitterTag;
+    pendingPropAttrs = [];
+    pendingSubmitterProps = [];
+    pendingActionCount = 0;
+    pendingSubmitterTag = null;
+    if (pendingActionId != null) {
+      assertConvergentBoundForm({ duplicateAction, propAttrs });
+      const bound = bindFormActionStartTag(buf.slice(tagStart), pendingActionId);
+      buf = buf.slice(0, tagStart) + bound.tag + bound.hidden;
+      pendingActionId = null;
+      formScope = 'bound';
+    }
+    // A form that opened and bound NOTHING still opens a scope: a submitter
+    // inside it must be refused, which is a different answer from 'none'.
+    if (!isCloseTag && currentTag === 'form' && formScope !== 'bound') formScope = 'unbound';
+    if (submitterTag != null) {
+      assertSubmitterStartTag(buf.slice(tagStart), submitterTag, { bound: true, duplicateAction, propAttrs: submitterProps });
+    } else if (formScope === 'bound' && !isCloseTag && (currentTag === 'button' || currentTag === 'input')) {
+      // Part B (#1207), the SAME sweep as the buffered machine, through the
+      // same helper, so this second state machine cannot drift from it.
+      assertSubmitterStartTag(buf.slice(tagStart), currentTag, { bound: false, propAttrs: submitterProps });
+    }
+  };
+  // #1155: a `.method` / `.enctype` / `.encoding` prop on a form is dropped
+  // here but applied for real in the browser, where all three are reflected IDL
+  // attributes, so a bound form carrying one submits differently with JS than
+  // without it. Recorded and refused at the `>`, once the tag's action hole is
+  // known.
+  const notePropAttr = (name, tag) => {
+    const t = String(tag).toLowerCase();
+    if (t === 'button' || t === 'input') {
+      // #1207: the submitter twin. `name` / `value` / `formAction` / `formMethod`
+      // / `formEnctype` all reflect on a submitter, so a `.prop` spelling is
+      // dropped here and written to the attribute in the browser.
+      if (isSubmitterReflectedProp(name)) pendingSubmitterProps.push(String(name));
+      return;
+    }
+    if (t !== 'form') return;
+    let n = String(name).toLowerCase();
+    if (n === 'encoding') n = 'enctype';
+    if (n === 'method' || n === 'enctype') pendingPropAttrs.push(String(name));
+  };
+  const noteActionHole = (name, tag) => {
+    const t = String(tag).toLowerCase();
+    const n = String(name).toLowerCase();
+    if ((t === 'form' && n === 'action') ||
+        ((t === 'button' || t === 'input') && n === 'formaction')) {
+      pendingActionCount += 1;
+    }
+  };
+
+  // Same contract as the buffered machine, `allowRawtext` included: only the
+  // `tag-name` and `in-tag` exits ever entered rawtext here either, so a start
+  // tag ending on a bare or unquoted attribute must keep escaping its body.
+  const handleTagEnd = (allowRawtext) => {
+    closeBoundFormTag();
+    if (isCloseTag && currentTag === 'form') {
+      // Back to the scope this scan STARTED in, not a flat 'none'. Under an
+      // 'unknown' seed (the component pass) the scan never learned whether the
+      // host page has a bound form, and closing a form of its own teaches it
+      // nothing about that, so asserting 'none' here would downgrade a
+      // cannot-tell into a conclusive refusal.
+      formScope = formScopeAtStart === 'unknown' ? 'unknown' : 'none';
+    }
+    isCloseTag = false;
+    state = allowRawtext && isRawtextTag(currentTag) ? 'rawtext' : 'text';
+    if (state === 'rawtext') rawTail = '';
+  };
 
   for (let i = 0; i < strings.length; i++) {
     const s = strings[i];
@@ -1798,12 +2098,12 @@ async function streamTemplate(tr, ctx, controller) {
       switch (state) {
         case 'text':
           buf += c;
-          if (c === '<') state = 'tag-open';
+          if (c === '<') { state = 'tag-open'; tagStart = buf.length - 1; isCloseTag = false; }
           break;
         case 'tag-open':
           buf += c;
           if (c === '!') state = 'bang-1';
-          else if (c === '/') { state = 'tag-name'; currentTag = ''; }
+          else if (c === '/') { state = 'tag-name'; currentTag = ''; isCloseTag = true; }
           else if (/[a-zA-Z]/.test(c)) { state = 'tag-name'; currentTag = c.toLowerCase(); }
           else state = 'text';
           break;
@@ -1825,16 +2125,14 @@ async function streamTemplate(tr, ctx, controller) {
         case 'tag-name':
           buf += c;
           if (c === '>') {
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd(true);
           } else if (/\s/.test(c)) state = 'in-tag';
           else currentTag += c.toLowerCase();
           break;
         case 'in-tag':
           buf += c;
           if (c === '>') {
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd(true);
           } else if (!/\s/.test(c) && c !== '/') {
             state = 'attr-name';
             attrName = c;
@@ -1853,18 +2151,18 @@ async function streamTemplate(tr, ctx, controller) {
         case 'attr-name':
           if (c === '=') { state = 'after-eq'; buf += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(false); }
           else { attrName += c; buf += c; }
           break;
         case 'after-eq':
           if (c === '"' || c === "'") { state = 'attr-quoted'; attrQuote = c; buf += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(false); }
           else { state = 'attr-unquoted'; buf += c; }
           break;
         case 'attr-unquoted':
           if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(false); }
           else buf += c;
           break;
         case 'attr-quoted':
@@ -1891,7 +2189,7 @@ async function streamTemplate(tr, ctx, controller) {
       } else if (state === 'text') {
         // Flush the buffered static content before streaming the value.
         if (buf) { controller.enqueue(buf); buf = ''; }
-        await streamRender(val, ctx, controller);
+        await streamRender(val, ctx, controller, formScope);
       } else if (state === 'after-eq') {
         const prefix = attrName[0];
         const name = attrName.slice(1);
@@ -1905,10 +2203,25 @@ async function streamTemplate(tr, ctx, controller) {
           // (and `.formAction` on a button or input) the client assignment
           // writes the source into the DOM, so refusing at SSR keeps a page
           // from rendering clean on the server and throwing on hydration.
-          // Elsewhere, including a custom element, the property reflects
-          // nothing and a function stays legal.
+          // Elsewhere the property reflects nothing and a function stays
+          // legal, which is why the check below is gated on a hyphen-free
+          // tag. A custom element is excluded for a different reason than
+          // "it does not reflect": a prop declared `reflect: true` DOES
+          // reflect there, and used to write the source from its own setter.
+          // #1169 guards that at the setter (a function removes the
+          // attribute; an array carrying one does too, except under an
+          // Object/Array type, where JSON drops it losslessly), so it
+          // needs no commit-site check here.
+          //
+          // Unlike the buffered machine this drops EVERY prop, including
+          // `<webjs-suspense .fallback>`: there is no injectDSD pre-pass on
+          // this path (it is reached only through `renderToStream(v, { ssr:
+          // false })`), so there is no consumer for a `data-webjs-fallback`
+          // and emitting one would put an attribute in the markup that nothing
+          // reads.
           if (kind === 'prop' && !currentTag.includes('-')) {
             assertNotFunctionReflectedActionProp(val, name, currentTag);
+            notePropAttr(name, currentTag);
           }
           buf = buf.slice(0, attrStart);
           state = 'in-tag';
@@ -1923,7 +2236,33 @@ async function streamTemplate(tr, ctx, controller) {
           if (val) buf += `${name}=""`;
           state = 'in-tag';
           attrName = '';
+        } else if (isBoundFormAction(val, attrName, currentTag)) {
+          noteActionHole(attrName, currentTag);
+          // The SAME bindings as the buffered renderer (#1155, #1207), in the
+          // second machine, so `renderToStream(v, { ssr: false })` emits an
+          // identical form rather than refusing one the page renderer accepts.
+          if (currentTag === 'form') {
+            pendingActionId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            buf = buf.slice(0, attrStart).replace(/\s+$/, '');
+          } else {
+            assertSingleSubmitterAction(pendingSubmitterTag != null, currentTag);
+            // Only 'unknown' defers: a component renders its own template in a
+            // separate pass that cannot see the enclosing form, so the question
+            // is not this scan's to answer. 'none' and 'unbound' are known
+            // answers and are still refused.
+            if (formScope !== 'unknown') assertSubmitterFormIsBound(formScope === 'bound', currentTag);
+            const attrs = parseStartTagAttrs(buf.slice(tagStart));
+            if (attrs.has('name')) assertSubmitterHasNoName(attrs.get('name') || '', currentTag, false);
+            if (attrs.has('value')) assertSubmitterHasNoValue(currentTag);
+            if (attrs.has('form')) assertSubmitterHasNoFormAttribute(currentTag);
+            const subId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            pendingSubmitterTag = currentTag;
+            buf = buf.slice(0, attrStart) + `name="${FORM_ACTION_FIELD}" value="${escapeAttr(subId)}"`;
+          }
+          state = 'in-tag';
+          attrName = '';
         } else {
+          noteActionHole(attrName, currentTag);
           // The SAME guard as the buffered renderer above. This is a second,
           // independent state machine, so it inherits nothing from that one;
           // a change to the rule has to land in both. Reached only via
@@ -1967,10 +2306,10 @@ async function streamSuspenseBoundaries(ctx, controller, dev) {
   while (ctx.pending.length) {
     const batch = ctx.pending.splice(0);
     await Promise.all(
-      batch.map(async ({ id, promise }) => {
+      batch.map(async ({ id, promise, formScope }) => {
         try {
           const resolved = await promise;
-          const html = await render(resolved, ctx);
+          const html = await render(resolved, ctx, formScope);
           const full = await injectDSD(html, ctx, [], dev);
           controller.enqueue(
             `<template data-webjs-resolve="${id}">${full}</template>` +