@barefootjs/jsx 0.3.0 → 0.4.0

package/dist/index.js

@@ -1652,6 +1652,9 @@ function irToComponentTemplateWithOpts(node, opts) {
       }
       return `\${${transformExpr(node.expr, node.templateExpr)}}`;
     case "conditional": {
+      if (node.clientOnly && node.slotId) {
+        return `<!--bf-cond-start:${node.slotId}--><!--bf-cond-end:${node.slotId}-->`;
+      }
       const trueBranch = recurse(node.whenTrue);
       const falseBranch = recurse(node.whenFalse);
       const trueHtml = node.slotId ? addCondAttrToTemplate(trueBranch, node.slotId) : trueBranch;
@@ -1882,6 +1885,9 @@ function generateCsrTemplateWithOpts(node, opts) {
         return `\${${expr}}`;
       }
     case "conditional": {
+      if (node.clientOnly && node.slotId) {
+        return `<!--bf-cond-start:${node.slotId}--><!--bf-cond-end:${node.slotId}-->`;
+      }
       const trueBranch = recurse(node.whenTrue);
       const falseBranch = recurse(node.whenFalse);
       const trueHtml = node.slotId ? addCondAttrToTemplate(trueBranch, node.slotId) : trueBranch;

package/dist/ir-to-client-js/html-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-template.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/html-template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"html-template.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/html-template.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,EAAE,MAAM,UAAU,CAAA;AAG9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,EAAwD,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACpG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAI9C;;;;GAIG;AACH,wBAAgB,qBAAqB,IAAI;IACvC,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B,CAaA;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAwBnE;AAED;;;;;GAKG;AACH,wBAAgB,kCAAkC,IAAI;IACpD,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B,CAeA;AA+LD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,YAAY;IAC3B,oEAAoE;IACpE,gBAAgB,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,KAAK,OAAO,CAAA;IACxE,+EAA+E;IAC/E,eAAe,EAAE,OAAO,CAAA;CACzB;AAiFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,SAAS,SAAI,EAAE,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,aAAa,CAAC,EAAE,cAAc,CAAC,EAAE,MAAM,EAAE,UAAU,UAAQ,EAAE,iBAAiB,UAAQ,GAAG,MAAM,CAqM/N;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,SAAS,SAAI,EAAE,UAAU,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,MAAM,CAoG9J;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,CAM7D;AA0ED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAM1E;AAeD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,kBAAkB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC7B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B;;;;;;;;;;;;OAYG;IACH,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC9B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qFAAqF;IACrF,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,EACZ,kBAAkB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EACxC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EAC7B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,GAC9B,MAAM,CAER;AAoPD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,EACtB,kBAAkB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EACxC,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAC7B,OAAO,CA8ET;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EACnD,GAAG,EAAE,eAAe,EACpB,UAAU,CAAC,EAAE,OAAO,EACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EAC7B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,EAC/B,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,GAC7B,MAAM,CAeR;AA4RD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO,CAiBpF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/jsx",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "JSX compiler for BarefootJS - transforms JSX to server HTML + client JS",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,7 +49,7 @@
     "directory": "packages/jsx"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.3.0"
+    "@barefootjs/shared": "0.4.0"
   },
   "peerDependencies": {
     "@barefootjs/client": ">=0.2.0",

package/src/__tests__/auto-defer-brand.test.ts

@@ -201,3 +201,84 @@ describe('auto-defer brand-package reactive bindings (#1638)', () => {
     expect(templateBody).toContain('data-count=')
   })
 })
+
+describe('client hydrate template defers brand conditionals (#1645)', () => {
+  // The `template: (_p) => ...` lambda runs at module scope when the
+  // component is client-rendered via `createComponent` (not when hydrating
+  // existing SSR DOM). It cannot reproduce per-instance `createForm` state,
+  // so an auto-deferred conditional must emit empty cond markers — exactly
+  // like the SSR adapter — and let `init`'s `insert()` populate the branch.
+
+  test('non-inlinable createForm (onSubmit): no undefined.field, emits cond markers', () => {
+    const { templateBody } = compileWithBrand(`
+      'use client'
+      import { createForm } from './_form-defs'
+
+      export function SignupForm() {
+        const form = createForm({
+          onSubmit: async (data) => { await fetch('/signup', { method: 'POST', body: JSON.stringify(data) }) },
+        })
+        const email = form.field('email')
+        return (
+          <form>
+            <input value={email.value()} />
+            {email.error() && <p>{email.error()}</p>}
+          </form>
+        )
+      }
+    `)
+
+    // Never re-derive the form at module scope: `undefined.field(...)` throws.
+    expect(templateBody).not.toContain('undefined.field')
+    expect(templateBody).not.toContain('.field(')
+    // The deferred conditional collapses to the same empty markers SSR emits.
+    expect(templateBody).toMatch(/<!--bf-cond-start:s\d+--><!--bf-cond-end:s\d+-->/)
+  })
+
+  test('inlinable createForm (no onSubmit): no re-inlined createForm in template', () => {
+    const { templateBody } = compileWithBrand(`
+      'use client'
+      import { createForm } from './_form-defs'
+
+      export function SignupForm() {
+        const form = createForm({ defaultValues: { email: '' } })
+        const email = form.field('email')
+        return (
+          <form>
+            <input value={email.value()} />
+            {email.error() && <p>{email.error()}</p>}
+          </form>
+        )
+      }
+    `)
+
+    // A re-inlined `createForm({...})` would build a throwaway instance on
+    // every template render (error always '', never the live instance).
+    expect(templateBody).not.toContain('createForm(')
+    expect(templateBody).not.toContain('undefined.field')
+    expect(templateBody).toMatch(/<!--bf-cond-start:s\d+--><!--bf-cond-end:s\d+-->/)
+  })
+
+  test('init still wires the deferred conditional via insert()', () => {
+    const { initBody } = compileWithBrand(`
+      'use client'
+      import { createForm } from './_form-defs'
+
+      export function SignupForm() {
+        const form = createForm()
+        const email = form.field('email')
+        return (
+          <form>
+            <input value={email.value()} />
+            {email.error() && <p>{email.error()}</p>}
+          </form>
+        )
+      }
+    `)
+
+    // The reactive binding lives in init (where `email`/`form` are in scope),
+    // not in the module-scope template lambda.
+    expect(initBody).toMatch(/insert\(/)
+    expect(initBody).toContain('email.error()')
+  })
+})

package/src/ir-to-client-js/html-template.ts

@@ -1040,6 +1040,14 @@ function irToComponentTemplateWithOpts(node: IRNode, opts: TemplateOptions): str
       return `\${${transformExpr(node.expr, node.templateExpr)}}`
 
     case 'conditional': {
+      // A client-only conditional (auto-deferred brand read or manual
+      // `/* @client */`) is owned by init's `insert()`, not the module-scope
+      // template lambda. Match the SSR adapter: emit empty cond markers so
+      // the client-render path (`createComponent`) produces the same DOM SSR
+      // does, instead of evaluating an init-scope condition here (#1645).
+      if (node.clientOnly && node.slotId) {
+        return `<!--bf-cond-start:${node.slotId}--><!--bf-cond-end:${node.slotId}-->`
+      }
       const trueBranch = recurse(node.whenTrue)
       const falseBranch = recurse(node.whenFalse)
       const trueHtml = node.slotId ? addCondAttrToTemplate(trueBranch, node.slotId) : trueBranch
@@ -1418,6 +1426,15 @@ function generateCsrTemplateWithOpts(node: IRNode, opts: TemplateOptions): strin
       }
 
     case 'conditional': {
+      // An auto-deferred conditional (e.g. `{form.field('x').error() && …}`)
+      // reads per-instance init-scope state the module-scope template lambda
+      // can't evaluate — re-deriving it here yields `undefined.field(...)` or
+      // a throwaway re-inlined `createForm({...})`. Match the SSR adapter:
+      // emit empty cond markers and let init's `insert()` populate the branch
+      // at hydrate time via the reactive binding (#1645).
+      if (node.clientOnly && node.slotId) {
+        return `<!--bf-cond-start:${node.slotId}--><!--bf-cond-end:${node.slotId}-->`
+      }
       const trueBranch = recurse(node.whenTrue)
       const falseBranch = recurse(node.whenFalse)
       const trueHtml = node.slotId ? addCondAttrToTemplate(trueBranch, node.slotId) : trueBranch