@barefootjs/jsx 0.18.2 → 0.18.3

package/dist/free-refs.d.ts

@@ -37,5 +37,15 @@ export interface BindingEnvironment {
  * through a local constant are recursively expanded so the consumer sees
  * the constant's *kind composition*, not just the local name.
  */
+/**
+ * Whether `name` is bound by anything in the environment — an import, a
+ * local const/function, a prop param, a signal/memo, or an active loop
+ * param. Used by Phase 1's render-nothing-literal fold to distinguish
+ * the global `undefined` (renders nothing per JSX semantics) from a
+ * shadowed local binding named `undefined` (legal, if inadvisable — the
+ * shadowed VALUE must render). Cheap: the binding map is memoized per
+ * environment.
+ */
+export declare function isNameBound(name: string, env: BindingEnvironment): boolean;
 export declare function resolveFreeRefs(node: ts.Node, env: BindingEnvironment): FreeReference[];
 //# sourceMappingURL=free-refs.d.ts.map

package/dist/free-refs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"free-refs.d.ts","sourceRoot":"","sources":["../src/free-refs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAEV,aAAa,EAEb,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAY,EACb,MAAM,YAAY,CAAA;AAInB;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC1B,WAAW,EAAE,SAAS,SAAS,EAAE,CAAA;IACjC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,cAAc,EAAE,SAAS,YAAY,EAAE,CAAA;IACvC,cAAc,EAAE,SAAS,YAAY,EAAE,CAAA;IACvC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACnC,6EAA6E;IAC7E,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAChC,OAAO,EAAE,EAAE,CAAC,WAAW,GAAG,IAAI,CAAA;CAC/B;AA2VD;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,GAAG,EAAE,kBAAkB,GACtB,aAAa,EAAE,CAEjB"}
+{"version":3,"file":"free-refs.d.ts","sourceRoot":"","sources":["../src/free-refs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAEV,aAAa,EAEb,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAY,EACb,MAAM,YAAY,CAAA;AAInB;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC1B,WAAW,EAAE,SAAS,SAAS,EAAE,CAAA;IACjC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,cAAc,EAAE,SAAS,YAAY,EAAE,CAAA;IACvC,cAAc,EAAE,SAAS,YAAY,EAAE,CAAA;IACvC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACnC,6EAA6E;IAC7E,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAChC,OAAO,EAAE,EAAE,CAAC,WAAW,GAAG,IAAI,CAAA;CAC/B;AA2VD;;;;;GAKG;AACH;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,kBAAkB,GAAG,OAAO,CAE1E;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,GAAG,EAAE,kBAAkB,GACtB,aAAa,EAAE,CAEjB"}

package/dist/index.js

@@ -8026,6 +8026,9 @@ function resolveFreeRefsInternal(node, env, visited) {
   }
   return out;
 }
+function isNameBound(name, env) {
+  return buildBindingMap(env).has(name);
+}
 function resolveFreeRefs(node, env) {
   return resolveFreeRefsInternal(node, env, new Set);
 }
@@ -8468,7 +8471,7 @@ function clientBuiltinTags(ctx) {
   ctx._clientBuiltinTags = map;
   return map;
 }
-function isNameBound(ctx, name) {
+function isNameBound2(ctx, name) {
   const a = ctx.analyzer;
   if (a.ambientGlobals.has(name))
     return true;
@@ -8503,7 +8506,7 @@ function dispatchClientBuiltin(tagName, ctx, diagNode, transformAsync, transform
     return transformAsync();
   if (builtin === "Region")
     return transformRegion();
-  if (isClientBuiltinName(tagName) && !isNameBound(ctx, tagName)) {
+  if (isClientBuiltinName(tagName) && !isNameBound2(ctx, tagName)) {
     reportBuiltinNotImported(ctx, diagNode, tagName);
   }
   return null;
@@ -8818,6 +8821,13 @@ function transformChildren(children, ctx) {
   }
   return result;
 }
+function isRenderNothingLiteral(expr, ctx) {
+  let e = expr;
+  while (ts11.isParenthesizedExpression(e) || ts11.isAsExpression(e) || ts11.isSatisfiesExpression(e) || ts11.isNonNullExpression(e)) {
+    e = e.expression;
+  }
+  return e.kind === ts11.SyntaxKind.NullKeyword || e.kind === ts11.SyntaxKind.TrueKeyword || e.kind === ts11.SyntaxKind.FalseKeyword || ts11.isIdentifier(e) && e.text === "undefined" && !isNameBound("undefined", makeBindingEnv(ctx));
+}
 function transformText(node, ctx) {
   const text = node.text.replace(/\s+/g, " ");
   if (text.trim() === "") {
@@ -8838,6 +8848,9 @@ function transformExpression(node, ctx) {
 }
 function transformExpressionInner(expr, ctx, node, isClientOnly) {
   expr = tryDesugarInterleaveTaggedTemplate(expr, ctx);
+  if (isRenderNothingLiteral(expr, ctx)) {
+    return null;
+  }
   checkBareSignalOrMemoIdentifier(expr, ctx);
   if (ts11.isIdentifier(expr)) {
     const jsxNode = ctx.analyzer.jsxConstants.get(expr.text);

package/package.json

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

package/src/__tests__/render-nothing-literals.test.ts

@@ -0,0 +1,108 @@
+/**
+ * JSX render-nothing literal folding (#2171).
+ *
+ * Per JSX semantics, `{null}` / `{undefined}` / `{true}` / `{false}` in
+ * child position render NOTHING, while `{0}` renders "0" and `{''}`
+ * renders the empty string. Historically the literals fell through to
+ * the scalar IRExpression fallback and each adapter stringified them
+ * its own way (Hono emitted the text "null" for `{null}`; the template
+ * adapters emitted "false" for `{false}`) — the Priority-12 sweep's
+ * `falsy-text-values` fixture pinned that three-way divergence. Folding
+ * in Phase 1 means the IR simply carries no node for these children,
+ * so every adapter agrees by construction.
+ */
+
+import { describe, expect, test } from 'bun:test'
+import { analyzeComponent } from '../analyzer'
+import { jsxToIR } from '../jsx-to-ir'
+import type { IRElement, IRNode } from '../types'
+
+function irFor(source: string): IRNode {
+  const analyzer = analyzeComponent(source, 'test.tsx')
+  const ir = jsxToIR(analyzer)
+  if (!ir) throw new Error('no IR produced')
+  return ir
+}
+
+function childrenOf(ir: IRNode): IRNode[] {
+  return (ir as IRElement).children ?? []
+}
+
+describe('render-nothing literal children fold in Phase 1', () => {
+  test.each(['null', 'undefined', 'true', 'false'])(
+    '{%s} child produces no IR node',
+    (literal) => {
+      const ir = irFor(`
+        export function C() {
+          return <div><span>a</span>{${literal}}<span>b</span></div>
+        }
+      `)
+      const children = childrenOf(ir)
+      expect(children).toHaveLength(2)
+      expect(children.every(c => c.type === 'element')).toBe(true)
+    },
+  )
+
+  test('transparently wrapped spellings fold too', () => {
+    for (const wrapped of ['(null)', 'null as unknown', 'undefined!']) {
+      const ir = irFor(`
+        export function C() {
+          return <div>{${wrapped}}</div>
+        }
+      `)
+      expect(childrenOf(ir)).toHaveLength(0)
+    }
+  })
+
+  test('{0} and {""} still produce expression children', () => {
+    const ir = irFor(`
+      export function C() {
+        return <div>{0}{''}</div>
+      }
+    `)
+    const children = childrenOf(ir)
+    expect(children).toHaveLength(2)
+    expect(children.every(c => c.type === 'expression')).toBe(true)
+  })
+
+  test('a dynamic expression that may evaluate to null is NOT folded', () => {
+    const ir = irFor(`
+      export function C(props: { name?: string }) {
+        return <div>{props.name}</div>
+      }
+    `)
+    expect(childrenOf(ir)).toHaveLength(1)
+    expect(childrenOf(ir)[0].type).toBe('expression')
+  })
+
+  test('a SHADOWED `undefined` binding is not folded (renders the value)', () => {
+    // `const undefined = …` is lint-hostile but legal JS — the shadowed
+    // binding's value must render, so the fold checks the binding
+    // environment before treating the identifier as the global.
+    const ir = irFor(`
+      export function C() {
+        const undefined = 'shadowed'
+        return <div>{undefined}</div>
+      }
+    `)
+    const children = childrenOf(ir)
+    expect(children).toHaveLength(1)
+    expect(children[0].type).toBe('expression')
+  })
+
+  test('conditional null branches keep their existing handling', () => {
+    // `cond ? <a/> : null` routes through the conditional transformer,
+    // not the JSX-child scalar path — the fold must not disturb it.
+    const ir = irFor(`
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      export function C() {
+        const [show] = createSignal(false)
+        return <div>{show() ? <span>on</span> : null}</div>
+      }
+    `)
+    const children = childrenOf(ir)
+    expect(children).toHaveLength(1)
+    expect(children[0].type).toBe('conditional')
+  })
+})

package/src/free-refs.ts

@@ -397,6 +397,19 @@ function resolveFreeRefsInternal(
  * through a local constant are recursively expanded so the consumer sees
  * the constant's *kind composition*, not just the local name.
  */
+/**
+ * Whether `name` is bound by anything in the environment — an import, a
+ * local const/function, a prop param, a signal/memo, or an active loop
+ * param. Used by Phase 1's render-nothing-literal fold to distinguish
+ * the global `undefined` (renders nothing per JSX semantics) from a
+ * shadowed local binding named `undefined` (legal, if inadvisable — the
+ * shadowed VALUE must render). Cheap: the binding map is memoized per
+ * environment.
+ */
+export function isNameBound(name: string, env: BindingEnvironment): boolean {
+  return buildBindingMap(env).has(name)
+}
+
 export function resolveFreeRefs(
   node: ts.Node,
   env: BindingEnvironment

package/src/jsx-to-ir.ts

@@ -44,7 +44,7 @@ import {
   rewriteBarePropRefs as rewriteBarePropRefsCore,
   collectAstPropRefs,
 } from './prop-rewrite.ts'
-import { resolveFreeRefs, type BindingEnvironment } from './free-refs.ts'
+import { resolveFreeRefs, isNameBound as isNameBoundInEnv, type BindingEnvironment } from './free-refs.ts'
 import { computeFileScope } from './ir-to-client-js/component-scope.ts'
 import { extractFreeIdentifiersFromNode, initializerShapeContainsJsx } from './analyzer.ts'
 import { iterateJsTokens, replaceInExprContexts } from './scanner/js-scanner.ts'
@@ -1517,6 +1517,41 @@ function transformChildren(
 // Text Transformation
 // =============================================================================
 
+/**
+ * True for the literals that render NOTHING in JSX child position per
+ * JSX semantics: `null`, `undefined`, `true`, `false` — including
+ * transparently wrapped spellings (`{(null)}`, `{null as any}`,
+ * `{undefined!}`). Deliberately narrow: `0`, `NaN`, and `''` are NOT
+ * here (`0` renders "0"; `''` renders empty by stringification), and a
+ * dynamic expression that EVALUATES to null is a runtime concern the
+ * client runtime / adapters own, not a compile-time fold.
+ *
+ * `undefined` is an Identifier, not a keyword, and CAN be legally
+ * shadowed (`const undefined = 1` — lint-hostile but valid JS); the
+ * shadowed binding's VALUE must render, so the identifier only folds
+ * when nothing in the binding environment (imports, locals, props,
+ * signals, memos, active loop params) binds the name.
+ */
+function isRenderNothingLiteral(expr: ts.Expression, ctx: TransformContext): boolean {
+  let e = expr
+  while (
+    ts.isParenthesizedExpression(e) ||
+    ts.isAsExpression(e) ||
+    ts.isSatisfiesExpression(e) ||
+    ts.isNonNullExpression(e)
+  ) {
+    e = e.expression
+  }
+  return (
+    e.kind === ts.SyntaxKind.NullKeyword ||
+    e.kind === ts.SyntaxKind.TrueKeyword ||
+    e.kind === ts.SyntaxKind.FalseKeyword ||
+    (ts.isIdentifier(e) &&
+      e.text === 'undefined' &&
+      !isNameBoundInEnv('undefined', makeBindingEnv(ctx)))
+  )
+}
+
 function transformText(node: ts.JsxText, ctx: TransformContext): IRText | null {
   // Normalize whitespace (React-like behavior)
   const text = node.text.replace(/\s+/g, ' ')
@@ -1576,6 +1611,20 @@ function transformExpressionInner(
   // scalar fallback's `ctx.getJS`) sees the untagged template literal.
   expr = tryDesugarInterleaveTaggedTemplate(expr, ctx)
 
+  // JSX render-nothing literals (#2171): `{null}` / `{undefined}` /
+  // `{true}` / `{false}` in child position render NOTHING per JSX
+  // semantics (`{0}` and `{''}` still render their stringification).
+  // Folding here — Phase 1, before any adapter sees the node — is what
+  // makes every backend agree: previously the literal fell through to
+  // the scalar IRExpression fallback and each adapter stringified it
+  // its own way (the Hono reference emitted the text "null" for
+  // `{null}`, template adapters emitted "false" for `{false}`). The
+  // conditional-branch path (`cond ? <a/> : null`) is NOT routed
+  // through here and keeps its own null-branch handling.
+  if (isRenderNothingLiteral(expr, ctx)) {
+    return null
+  }
+
   // Check for bare signal/memo identifier (BF044)
   checkBareSignalOrMemoIdentifier(expr, ctx)