@barefootjs/jsx 0.19.1 → 0.21.0

package/src/compiler.ts

@@ -24,6 +24,7 @@ import { applyCssLayerPrefix } from './css-layer-prefixer.ts'
 import { preprocessInlineJsxCallbacks } from './preprocess-inline-jsx-callbacks.ts'
 import { extractSsrDefaults } from './ssr-defaults.ts'
 import { computeSsrSeedPlan } from './ssr-seed-plan.ts'
+import { checkRichTypeMethodCalls } from './rich-type-refusal.ts'
 
 /**
  * Extended compile options with required adapter
@@ -137,6 +138,7 @@ function compileMultipleComponents(
     }
 
     componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR)
+    checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors)
 
     if (options.cssLayerPrefix) {
       applyCssLayerPrefix(componentIR, options.cssLayerPrefix)
@@ -615,6 +617,7 @@ export function compileJSX(
 
   // Pre-compute client JS analysis for adapter optimization
   componentIR.metadata.clientAnalysis = analyzeClientNeeds(componentIR)
+  checkRichTypeMethodCalls(componentIR.root, componentIR.metadata, errors)
 
   // Cross-file @client signal sources: identify which import sources
   // need `.client.js` path rewriting in the client bundle.

package/src/date-lowering.ts

@@ -0,0 +1,117 @@
+/**
+ * `Date` lowering plugin (#2274) — the first catalogued entry in the rich-type
+ * lowering seam #2273 left open (`rich-type-refusal.ts`'s module doc: "the
+ * seam #2274 and later plugins use to catalogue a rich-type API without
+ * touching this module"). A zero-arg call to one of `DATE_METHODS` on a
+ * receiver resolved (via `resolveReceiverType`) to a `Date`-typed prop lowers
+ * to a backend-neutral `helper-call` node on the `date` helper
+ * (`date(recv, op)`, spec/template-helpers.md); every adapter already renders
+ * `helper-call` generically (#2069), so no adapter-specific code is needed
+ * here — only the runtime `date` helper each backend ships.
+ *
+ * v1 scope is deliberately prop-rooted only: the matcher resolves receivers
+ * with `EMPTY_BINDINGS` (no loop-item / arrow-param context), mirroring
+ * `rich-type-refusal.ts`'s own top-level walk. A loop item's `.toISOString()`
+ * therefore stays BF021-refused rather than silently falling back to a
+ * generic (and wrong) lowering — widening to loop bindings is a deliberate
+ * future step, not an oversight.
+ */
+
+import type { IRMetadata, TypeInfo } from './types.ts'
+import type { ParsedExpr } from './expression-parser.ts'
+import type { LoweringNode, LoweringPlugin } from './lowering-registry.ts'
+import { resolveReceiverType, baseTypeName, stripUnion, derefNamedType } from './rich-type-evidence.ts'
+
+/**
+ * Host rich-type names (`rich-type-evidence.ts`'s `HOST_RICH_TYPE_NAMES`)
+ * that additionally have a catalogued lowering — currently just `Date`.
+ * `analyzer.ts`'s `collectMemberTypes` widening keys off this set (not
+ * `HOST_RICH_TYPE_NAMES` wholesale) so a destructured prop only gets a real
+ * TypeInfo when a plugin actually exists to consume it; adding a future
+ * lowering (`Map`, …) is a one-line addition here, not a second gate to keep
+ * in sync.
+ */
+export const CATALOGUED_RICH_TYPE_NAMES: ReadonlySet<string> = new Set(['Date'])
+
+/** Zero-arg `Date.prototype` methods the `date` helper catalogues (spec/template-helpers.md). */
+export const DATE_METHODS: ReadonlySet<string> = new Set([
+  'getUTCFullYear',
+  'getUTCMonth',
+  'getUTCDate',
+  'getUTCHours',
+  'getUTCMinutes',
+  'getUTCSeconds',
+  'getTime',
+  'toISOString',
+])
+
+type Bindings = ReadonlyMap<string, TypeInfo | null>
+const EMPTY_BINDINGS: Bindings = new Map()
+
+/**
+ * Whether `type` (or a property reachable from it through non-array,
+ * non-computed member chains) can ever resolve to a `Date` — the same
+ * receiver shapes `resolveReceiverType` walks for an actual call site. Used
+ * only as `prepare`'s cheap activation gate: a `false` here must never miss a
+ * receiver the matcher could later prove Date-typed (that would silently drop
+ * the lowering and mis-flag BF021), so this over-approximates by recursing
+ * into every nested object-shaped property, not just direct ones.
+ *
+ * `seen` guards a self-referential named type (`interface Tree { self: Tree
+ * }`) from an infinite walk; keyed by the type's own name so two distinct
+ * properties of the SAME named type aren't short-circuited against each
+ * other.
+ */
+function typeReachesDate(type: TypeInfo | null, meta: IRMetadata, seen: Set<string>): boolean {
+  const stripped = stripUnion(type)
+  if (!stripped) return false
+  // `kind: 'object'` is an INLINE type literal (`{ createdAt: Date }` — the
+  // shape `propsType` itself takes for the common case) and already carries
+  // `properties` directly; `kind: 'interface'` is a NAMED reference (`Date`
+  // itself, or a local `interface Props { … }`) that needs the Date-name
+  // check plus `derefNamedType` to reach its member list. Anything else
+  // (primitive/array/union/…) is a dead end.
+  if (stripped.kind === 'interface') {
+    const name = baseTypeName(stripped.raw)
+    if (name === 'Date') return true
+    if (seen.has(name)) return false
+    seen.add(name)
+  } else if (stripped.kind !== 'object') {
+    return false
+  }
+  const deref = derefNamedType(stripped, meta)
+  if (!deref.properties) return false
+  return deref.properties.some((p) => typeReachesDate(p.type, meta, seen))
+}
+
+/**
+ * `datePlugin`'s matcher: recognises `<Date-typed receiver>.<method>()` per
+ * the module doc, or declines (null) for anything else — a non-member
+ * callee, a non-catalogued method name, a call with arguments (every
+ * catalogued method is zero-arg on `Date.prototype`), or a receiver that
+ * doesn't resolve to `Date` (unknown, a different host rich type, or a
+ * same-named local `typeDefinitions` entry shadowing the built-in — mirrors
+ * `rich-type-refusal.ts`'s `inFileShadow` check).
+ */
+function matchDateCall(callee: ParsedExpr, args: readonly ParsedExpr[], metadata: IRMetadata): LoweringNode | null {
+  if (callee.kind !== 'member' || callee.computed) return null
+  if (args.length !== 0 || !DATE_METHODS.has(callee.property)) return null
+  const receiverType = resolveReceiverType(callee.object, metadata, EMPTY_BINDINGS)
+  if (!receiverType || receiverType.kind !== 'interface') return null
+  const typeName = baseTypeName(receiverType.raw)
+  if (typeName !== 'Date') return null
+  if (metadata.typeDefinitions.some((d) => d.name === typeName)) return null
+  return {
+    kind: 'helper-call',
+    helper: 'date',
+    args: [callee.object, { kind: 'literal', value: callee.property, literalType: 'string' }],
+  }
+}
+
+export const datePlugin: LoweringPlugin = {
+  name: 'date',
+  prepare(metadata) {
+    if (!metadata.propsType || !typeReachesDate(metadata.propsType, metadata, new Set())) return null
+    return (callee, args) => matchDateCall(callee, args, metadata)
+  },
+}

package/src/ir-to-client-js/emit-reactive.ts

@@ -4,11 +4,15 @@
  * client-only expressions, and reactive component prop bindings.
  */
 
-import type { AttrMeta } from '../types.ts'
+import ts from 'typescript'
+import type { AttrMeta, IRMetadata } from '../types.ts'
 import { isBooleanAttr } from '../html-constants.ts'
 import type { ClientJsContext } from './types.ts'
 import { toHtmlAttrName, varSlotId, PROPS_PARAM } from './utils.ts'
 import { createTemplateAwareStringProtector } from './html-template.ts'
+import { datePlugin, DATE_METHODS } from '../date-lowering.ts'
+import { tsNodeToParsedExpr } from '../expression-parser.ts'
+import type { LoweringMatcher } from '../lowering-registry.ts'
 
 /**
  * Profile mode (#1690, SR3/SR4): the id appended to a DOM-binding effect so the
@@ -95,8 +99,104 @@ export function rewriteDestructuredPropsInExpr(expr: string, ctx: ClientJsContex
   return restore(result)
 }
 
+/**
+ * Bind `datePlugin`'s matcher (#2292) for this component's reactive-text
+ * emission. Reads the same four `EvidenceMetadata` fields
+ * (`rich-type-evidence.ts`) `jsx-to-ir.ts`'s `getDateLoweringMatcher` reads
+ * off the analyzer for the STATIC template path, so a prop-method call
+ * re-evaluated inside a `createEffect` lowers to the `date` helper under
+ * the exact same evidence the static template and every SSR adapter use.
+ * `ctx.propsType` is optional on `ClientJsContext` (threaded through only
+ * for this purpose, `index.ts`'s `createContext`); a context predating
+ * #2292 — or a hand-built test fixture — simply carries no Date evidence,
+ * so this returns null and callers emit the expression unchanged.
+ */
+function getReactiveDateLoweringMatcher(ctx: ClientJsContext): LoweringMatcher | null {
+  if (!ctx.propsType) return null
+  const metadataSlice: Pick<IRMetadata, 'propsType' | 'propsObjectName' | 'propsParams' | 'typeDefinitions'> = {
+    propsType: ctx.propsType,
+    propsObjectName: ctx.propsObjectName,
+    propsParams: ctx.propsParams,
+    typeDefinitions: ctx.typeDefinitions ?? [],
+  }
+  return datePlugin.prepare(metadataSlice as unknown as IRMetadata)
+}
+
+/**
+ * Reactive-path counterpart to `jsx-to-ir.ts`'s `lowerDateCalls` (#2292):
+ * without this, a Date-typed prop's catalogued accessor call re-evaluated
+ * inside `createEffect` (the Solid-style wrap-by-default fallback for any
+ * expression containing a function call, #937) still called the RAW
+ * `.toISOString()` / etc. on the hydrated STRING prop value and threw —
+ * the static template alone wasn't enough to fix hydration.
+ *
+ * `expr` here (`IRExpression.expr`, threaded through
+ * `ctx.dynamicElements`) is ALREADY the bare-identifier source form the
+ * SAME `createEffect` body closes over via the destructured-prop shim
+ * (`const createdAt = _p.createdAt ?? {}` at the top of `init()`) — so
+ * unlike the static-template path, the receiver does NOT need a `_p.`
+ * prefix: swapping the raw call for `date(<receiver>, "<op>")` is enough.
+ *
+ * No live `ts.Node` survives into this phase (`expr` is a plain string),
+ * so this re-parses it fresh via `ts.createSourceFile` — the same
+ * technique `expression-parser.ts`'s `parseExpression` uses — rather than
+ * a regex scan (per CLAUDE.md's structural-parsing rule): every candidate
+ * span comes from walking the freshly-parsed AST, and `matcher(...)` is
+ * the SAME `datePlugin` matcher the static path and every SSR adapter
+ * bind, so a call lowers here iff it would lower there too.
+ */
+function lowerDateCallsInReactiveExpr(expr: string, matcher: LoweringMatcher | null): string {
+  if (!matcher) return expr
+  let sourceFile: ts.SourceFile
+  try {
+    sourceFile = ts.createSourceFile('__reactive_expr__.ts', `(${expr});`, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS)
+  } catch {
+    return expr
+  }
+  const stmt = sourceFile.statements[0]
+  if (!stmt || !ts.isExpressionStatement(stmt)) return expr
+  const root = ts.isParenthesizedExpression(stmt.expression) ? stmt.expression.expression : stmt.expression
+
+  const candidates: ts.CallExpression[] = []
+  const visit = (n: ts.Node): void => {
+    if (
+      ts.isCallExpression(n) &&
+      n.arguments.length === 0 &&
+      ts.isPropertyAccessExpression(n.expression) &&
+      !n.expression.questionDotToken &&
+      DATE_METHODS.has(n.expression.name.text)
+    ) {
+      candidates.push(n)
+    }
+    ts.forEachChild(n, visit)
+  }
+  visit(root)
+  if (candidates.length === 0) return expr
+
+  // Template-aware: protect quoted strings AND template-literal static
+  // segments (leaving `${…}` interpolations exposed) so the non-global
+  // `.replace` can't rewrite a backtick constant that coincidentally
+  // matches the call text before the real call site (Copilot review, #2294).
+  const { protect, restore } = createTemplateAwareStringProtector()
+  let result = protect(expr)
+  for (const call of candidates) {
+    const propAccess = call.expression as ts.PropertyAccessExpression
+    const node = matcher(tsNodeToParsedExpr(propAccess), [])
+    if (!node || node.kind !== 'helper-call' || node.helper !== 'date') continue
+    const op = propAccess.name.text
+    const receiverText = propAccess.expression.getText(sourceFile)
+    const matchText = call.getText(sourceFile)
+    // Replacer-function form: a `$` sequence in `receiverText` would
+    // otherwise be reinterpreted as a `String.replace` pattern token and
+    // corrupt the output (repo precedent, #2285).
+    result = result.replace(matchText, () => `date(${receiverText}, "${op}")`)
+  }
+  return restore(result)
+}
+
 /** Emit createEffect blocks that update text nodes for reactive expressions. */
 export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): void {
+  const dateLoweringMatcher = getReactiveDateLoweringMatcher(ctx)
   // Group elements by expression to consolidate effects with same dependencies
   const byExpression = new Map<string, typeof ctx.dynamicElements>()
   for (const elem of ctx.dynamicElements) {
@@ -107,7 +207,8 @@ export function emitDynamicTextUpdates(lines: string[], ctx: ClientJsContext): v
     byExpression.get(key)!.push(elem)
   }
 
-  for (const [expr, elems] of byExpression) {
+  for (const [rawExpr, elems] of byExpression) {
+    const expr = lowerDateCallsInReactiveExpr(rawExpr, dateLoweringMatcher)
     // Separate conditional vs non-conditional elements
     const conditionalElems = elems.filter(e => e.insideConditional)
     const normalElems = elems.filter(e => !e.insideConditional)

package/src/ir-to-client-js/generate-init.ts

@@ -99,16 +99,23 @@ export function generateInitFunction(
   let generatedCode = rewritePropsObjectRef(lines.join('\n'), ctx.propsObjectName)
   generatedCode += '\n' + hydrateLine
 
-  const allImportLines = resolveFinalImports(generatedCode, ir, localImportPrefixes)
+  // Substitute module-level declarations BEFORE import detection: a
+  // module-level helper's body (e.g. `buildSheetVMs` calling
+  // `computeSheetGeometry`) only exists in `moduleConstantsCode`, so
+  // scanning `generatedCode` first would miss any import referenced
+  // only from that body and silently drop it (#2283).
   const moduleConstantsCode = emitModuleLevelDeclarations(
     classification.moduleLevelConstants,
     classification.moduleLevelFunctions,
     classification.moduleLevelSignals,
     classification.moduleLevelMemos,
   )
+  // Replacer-function form: a plain replacement string would let literal
+  // `$&`/`$1`/`$$` sequences in user helper bodies or import paths be
+  // reinterpreted by `String.replace`'s special-pattern handling.
+  const codeWithModuleConstants = generatedCode.replace(MODULE_CONSTANTS_PLACEHOLDER, () => moduleConstantsCode)
+  const allImportLines = resolveFinalImports(codeWithModuleConstants, ir, localImportPrefixes)
 
-  return generatedCode
-    .replace(IMPORT_PLACEHOLDER, allImportLines)
-    .replace(MODULE_CONSTANTS_PLACEHOLDER, moduleConstantsCode)
+  return codeWithModuleConstants.replace(IMPORT_PLACEHOLDER, () => allImportLines)
 }
 

package/src/ir-to-client-js/imports.ts

@@ -17,6 +17,10 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   'tAfter',
   // Profile mode (#1690, SR3) — turn-boundary markers around event handlers.
   'beginTurn', 'endTurn',
+  // Catalogued `Date` lowering (#2274/#2292) — the client counterpart to
+  // every SSR adapter's `date` runtime helper (`date-lowering.ts`'s
+  // `datePlugin`).
+  'date',
 ] as const
 
 /** @deprecated Use RUNTIME_IMPORT_CANDIDATES */

package/src/ir-to-client-js/index.ts

@@ -175,6 +175,8 @@ function createContext(
     propsParams: ir.metadata.propsParams,
     propsObjectName: ir.metadata.propsObjectName,
     restPropsName: ir.metadata.restPropsName,
+    propsType: ir.metadata.propsType,
+    typeDefinitions: ir.metadata.typeDefinitions,
 
     interactiveElements: [],
     dynamicElements: [],

package/src/ir-to-client-js/reactivity.ts

@@ -529,8 +529,19 @@ export function collectLoopChildReactiveTexts(
       const originFreeIds = freeIdsFromRefs(n.origin?.freeRefs)
       const expanded = expandConstantForReactivity(n.expr, ctx, originFreeIds)
       // Include if expression reads signals OR references the loop parameter
-      // (loop param becomes a signal accessor via per-item signals).
-      if (classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === 'none') return
+      // (loop param becomes a signal accessor via per-item signals). Falls
+      // back to the Solid-style AST-flag wrap decision — mirroring
+      // `collectLoopChildReactiveAttrs`'s `callsReactiveGetters` /
+      // `hasFunctionCalls` fallback (#1673) and the top-level text path's
+      // `decideWrapFromAstFlags` gate (`collectElements`'s `expression`
+      // handler) — so a loop-item text read through an opaque helper
+      // (`textAt(i)` where `const textAt = (i) => rows()[i]`, which
+      // `classifyReactivity` can't see through) still gets an update
+      // effect instead of silently freezing at its SSR value (#2282).
+      const reactive =
+        classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== 'none'
+        || decideWrapFromAstFlags(n).wrap
+      if (!reactive) return
       texts.push({
         slotId: n.slotId,
         expression: expanded.expr,

package/src/ir-to-client-js/types.ts

@@ -20,6 +20,8 @@ import type {
   ParamInfo,
   CompilerError,
   ImportInfo,
+  TypeInfo,
+  TypeDefinition,
 } from '../types.ts'
 import type { CsrInlinabilityMap } from './csr-substitute.ts'
 import type { SkeletonSlotPaths } from './html-template.ts'
@@ -67,6 +69,19 @@ export interface ClientJsContext {
   propsParams: ParamInfo[]
   propsObjectName: string | null
   restPropsName: string | null
+  /**
+   * Threaded through (alongside `propsParams` above) so the reactive-effect
+   * emitter can bind its own `datePlugin` matcher (#2292) — see
+   * `emit-reactive.ts`'s `getReactiveDateLoweringMatcher`. Mirrors the
+   * `EvidenceMetadata` slice (`rich-type-evidence.ts`) the SSR adapters and
+   * `jsx-to-ir.ts`'s static-template lowering both consult; nothing else in
+   * this file reads a Date-typed prop's shape. Optional (rather than a hard
+   * requirement alongside `propsParams`) so existing hand-built
+   * `ClientJsContext` test fixtures that predate #2292 keep type-checking
+   * without every call site listing these two fields.
+   */
+  propsType?: TypeInfo | null
+  typeDefinitions?: TypeDefinition[]
 
   // Collected elements
   interactiveElements: InteractiveElement[]

package/src/jsx-to-ir.ts

@@ -30,6 +30,7 @@ import {
   type SourceLocation,
   type TypeInfo,
   type OriginInfo,
+  type IRMetadata,
   isReactiveOrigin,
   AttrValueOf,
 } from './types.ts'
@@ -46,6 +47,9 @@ import {
 } from './prop-rewrite.ts'
 import { resolveFreeRefs, isNameBound as isNameBoundInEnv, type BindingEnvironment } from './free-refs.ts'
 import { computeFileScope } from './ir-to-client-js/component-scope.ts'
+import { createTemplateAwareStringProtector } from './ir-to-client-js/html-template.ts'
+import { datePlugin, DATE_METHODS } from './date-lowering.ts'
+import type { LoweringMatcher } from './lowering-registry.ts'
 import { extractFreeIdentifiersFromNode, initializerShapeContainsJsx } from './analyzer.ts'
 import { iterateJsTokens, replaceInExprContexts } from './scanner/js-scanner.ts'
 import { toHTMLAttrName, decodeEntities } from '@barefootjs/shared'
@@ -164,6 +168,13 @@ interface TransformContext {
    * aliased `import { Async as Boundary }` maps `<Boundary>` to the built-in.
    */
   _clientBuiltinTags?: Map<string, ClientBuiltinTag>
+  /**
+   * Cached `datePlugin` matcher (#2292), bound once to this component's
+   * metadata. `undefined` = not yet computed; `null` = computed and
+   * inactive (this component's props never reach a `Date`, `datePlugin`'s
+   * own `prepare` gate). See `getDateLoweringMatcher`.
+   */
+  _dateLoweringMatcher?: LoweringMatcher | null
 }
 
 /**
@@ -285,14 +296,128 @@ function exprHasFunctionCalls(expr: ts.Expression): boolean {
   return found
 }
 
+/**
+ * Bind (and cache on `ctx`) `datePlugin`'s matcher (#2292) for this
+ * component. Reuses the SAME `LoweringPlugin` the SSR adapters bind via
+ * `prepareLoweringMatchers` — not a re-implementation of its receiver-type
+ * resolution — so a call lowers on the client iff `datePlugin` would lower
+ * it on the SSR path (parity is mandatory per #2292).
+ *
+ * `datePlugin.prepare` only reads `propsType` / `propsObjectName` /
+ * `propsParams` / `typeDefinitions` off its `IRMetadata` parameter (see
+ * `rich-type-evidence.ts`'s `EvidenceMetadata` — the `Pick` of exactly
+ * those four fields). `ctx.analyzer` carries live, fully-populated values
+ * for all four by the time any expression is transformed (analysis runs
+ * to completion before `jsxToIR`'s AST walk begins), so a slice of just
+ * those fields is sufficient — the cast bridges that narrower shape to
+ * the wider `IRMetadata` parameter type every lowering plugin declares.
+ */
+function getDateLoweringMatcher(ctx: TransformContext): LoweringMatcher | null {
+  if (ctx._dateLoweringMatcher === undefined) {
+    const a = ctx.analyzer
+    const metadataSlice: Pick<IRMetadata, 'propsType' | 'propsObjectName' | 'propsParams' | 'typeDefinitions'> = {
+      propsType: a.propsType,
+      propsObjectName: a.propsObjectName,
+      propsParams: a.propsParams,
+      typeDefinitions: a.typeDefinitions,
+    }
+    ctx._dateLoweringMatcher = datePlugin.prepare(metadataSlice as unknown as IRMetadata)
+  }
+  return ctx._dateLoweringMatcher
+}
+
+/**
+ * Client-side counterpart to `datePlugin` (#2274 was SSR-only; #2292
+ * closes the gap). The client emitter (`ir-to-client-js/`) emits raw,
+ * prop-rewritten source strings and never consults the lowering registry
+ * (its module doc) — so left alone, a Date-typed prop's catalogued
+ * accessor call leaks through as `_p.createdAt.toISOString()`, which
+ * throws at hydration: props are JSON round-tripped with no type-aware
+ * revival (`hydrate.ts`'s `parseProps`), so the prop arrives as its ISO
+ * string, not a `Date` instance.
+ *
+ * Walks `expr`'s AST for zero-arg calls to a `DATE_METHODS` name (a cheap
+ * syntactic pre-filter) and confirms each candidate against the SAME
+ * `datePlugin` matcher the SSR adapters use, via `tsNodeToParsedExpr` —
+ * the identical receiver-type resolution, not a re-implementation, so a
+ * call lowers here iff it would lower on the SSR path. A match splices
+ * `date(<receiver>, "<op>")` in place of the raw call; `imports.ts`'s
+ * `detectUsedImports` regex-scans the emitted `date(` call against
+ * `RUNTIME_IMPORT_CANDIDATES` to auto-import the runtime helper.
+ *
+ * The splice is a plain (non-global) text `.replace` per candidate, run
+ * in AST (left-to-right, source) order — not a JS-parsing regex, since
+ * every candidate span comes from walking `expr`'s real AST first. This
+ * is safe specifically because any call the matcher accepts has, by
+ * construction, no TS-only syntax anywhere in its own span: the matcher
+ * only resolves evidence through a bare identifier or a non-computed
+ * member chain (`resolveReceiverType`'s two supported `ParsedExpr`
+ * shapes), and the call itself takes zero arguments. So `ctx.getJS` of
+ * that one sub-node — which strips only type syntax — is guaranteed
+ * byte-identical to its raw source slice, and thus guaranteed to appear
+ * verbatim as a contiguous substring of `text` regardless of unrelated
+ * type-stripping elsewhere in the enclosing expression. String spans in
+ * `text` are protected first (`createTemplateAwareStringProtector` — both
+ * quoted strings AND template-literal *static* segments, leaving `${…}`
+ * interpolations exposed) so a coincidentally-identical string constant —
+ * e.g. a backtick `` `createdAt.toISOString()` `` sitting before the real
+ * call — can never be mistaken for a call site by the non-global
+ * `.replace`.
+ */
+function lowerDateCalls(text: string, expr: ts.Node, ctx: TransformContext): string {
+  const matcher = getDateLoweringMatcher(ctx)
+  if (!matcher) return text
+
+  const candidates: ts.CallExpression[] = []
+  function visit(n: ts.Node) {
+    if (
+      ts.isCallExpression(n) &&
+      n.arguments.length === 0 &&
+      ts.isPropertyAccessExpression(n.expression) &&
+      !n.expression.questionDotToken &&
+      DATE_METHODS.has(n.expression.name.text)
+    ) {
+      candidates.push(n)
+    }
+    ts.forEachChild(n, visit)
+  }
+  visit(expr)
+  if (candidates.length === 0) return text
+
+  const { protect, restore } = createTemplateAwareStringProtector()
+  let result = protect(text)
+  for (const call of candidates) {
+    const propAccess = call.expression as ts.PropertyAccessExpression
+    const node = matcher(tsNodeToParsedExpr(propAccess), [])
+    if (!node || node.kind !== 'helper-call' || node.helper !== 'date') continue
+    const op = propAccess.name.text
+    const receiverText = ctx.getJS(propAccess.expression)
+    const matchText = ctx.getJS(call)
+    // Replacer-function form: a `$` sequence in `receiverText` (a prop named
+    // `$1`, say) would otherwise be reinterpreted as a `String.replace`
+    // pattern token and corrupt the output (repo precedent, #2285).
+    result = result.replace(matchText, () => `date(${receiverText}, "${op}")`)
+  }
+  return restore(result)
+}
+
 /**
  * Rewrite bare destructured prop references in expression text.
  * Thin wrapper that caches prop names on ctx and delegates to the shared core.
  * Returns undefined if no rewriting is needed (SolidJS-style or no props).
  */
 function rewriteBarePropRefs(text: string, expr: ts.Node, ctx: TransformContext): string | undefined {
+  // #2292: lower a Date-typed prop's catalogued accessor call BEFORE the
+  // bare-prop-name rewrite below, so the receiver identifier still picks
+  // up the usual `_p.` prefix (destructured mode) or falls through to the
+  // CSR template emitter's separate `props.` → `_p.` rewrite
+  // (`html-template.ts`'s `transformExpr`, props-object mode). Runs
+  // unconditionally — ahead of the `propNames` gate — because Date
+  // evidence comes from `ctx.analyzer.propsType`, independent of whether
+  // this component destructures its props.
+  const dateLowered = lowerDateCalls(text, expr, ctx)
   let propNames = getDestructuredPropNames(ctx)
-  if (!propNames) return undefined
+  if (!propNames) return dateLowered === text ? undefined : dateLowered
   // #2222: a name bound as an enclosing loop callback's item/index param
   // refers to the loop binding, not the prop, at THIS transform position —
   // `ctx.loopParams` is the live loop-param set (destructured binding
@@ -303,7 +428,7 @@ function rewriteBarePropRefs(text: string, expr: ts.Node, ctx: TransformContext)
   // its set on ctx and must not be mutated.
   if (ctx.loopParams.size > 0) {
     const filtered = new Set([...propNames].filter(n => !ctx.loopParams.has(n)))
-    if (filtered.size === 0) return undefined
+    if (filtered.size === 0) return dateLowered === text ? undefined : dateLowered
     propNames = filtered
   }
   // #1425: union any prop refs that `expr` reaches via branch-local
@@ -316,7 +441,7 @@ function rewriteBarePropRefs(text: string, expr: ts.Node, ctx: TransformContext)
   // `_branchScopePropDeps` at branch entry; here we just walk `expr`
   // for references to those locals and union the matching dep sets.
   const extraPropRefs = collectBranchLocalPropRefsViaSubstitution(expr, ctx)
-  return rewriteBarePropRefsCore(text, expr, propNames, extraPropRefs)
+  return rewriteBarePropRefsCore(dateLowered, expr, propNames, extraPropRefs)
 }
 
 /**