fix: support memo/forwardRef tag interpolation. (#96)

Author: knightedcodemonkey

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.13.1",
+  "version": "1.13.2-rc.0",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere with or without a build step.",
   "keywords": [
     "jsx runtime",

package.json

@@ -24,6 +24,9 @@ import {
   type DOMAttributes,
   type EventHandler,
   type JSX as ReactJSX,
+  type LazyExoticComponent,
+  type MemoExoticComponent,
+  type ForwardRefExoticComponent,
   type PropsWithChildren,
   type ReactElement,
   type ReactNode,
@@ -35,6 +38,13 @@ export type ReactJsxComponent<Props = Record<string, unknown>> = ComponentType<
   PropsWithChildren<Props>
 >
 
+type ReactJsxExoticComponent =
+  | MemoExoticComponent<ReactJsxComponent>
+  | ForwardRefExoticComponent<Record<string, unknown>>
+  | LazyExoticComponent<ReactJsxComponent>
+
+type ReactJsxTagComponent = ReactJsxComponent | ReactJsxExoticComponent
+
 export type ReactJsxRenderable = ReactNode
 export type ReactJsxChildren = ReactJsxRenderable | ReactJsxRenderable[]
 export type ReactJsxRef<T> = Ref<T>
@@ -44,7 +54,7 @@ export type ReactJsxIntrinsicElements = ReactJSX.IntrinsicElements
 export type ReactJsxIntrinsicElement<Tag extends keyof ReactJsxIntrinsicElements> =
   ReactJsxIntrinsicElements[Tag]
 
-type ReactJsxContext = TemplateContext<ReactJsxComponent>
+type ReactJsxContext = TemplateContext<ReactJsxTagComponent>
 
 const isIterable = (value: unknown): value is Iterable<unknown> => {
   if (!value || typeof value === 'string') {
@@ -172,13 +182,34 @@ const evaluateReactJsxChildren = (children: JSXChild[], ctx: ReactJsxContext) =>
 }
 
 const createReactElement = (
-  type: string | ReactJsxComponent,
+  type: string | ReactJsxTagComponent,
   props: Record<string, unknown>,
   children: ReactNode[],
 ) => {
   return createElement(type as never, props, ...children)
 }
 
+const reactMemoSymbol = Symbol.for('react.memo')
+const reactForwardRefSymbol = Symbol.for('react.forward_ref')
+const reactLazySymbol = Symbol.for('react.lazy')
+
+const isReactTagBindingValue = (value: unknown): value is ReactJsxTagComponent => {
+  if (typeof value === 'function') {
+    return true
+  }
+
+  if (typeof value !== 'object' || value === null) {
+    return false
+  }
+
+  const candidate = value as { $$typeof?: unknown }
+  return (
+    candidate.$$typeof === reactMemoSymbol ||
+    candidate.$$typeof === reactForwardRefSymbol ||
+    candidate.$$typeof === reactLazySymbol
+  )
+}
+
 const evaluateReactJsxElement = (
   element: JSXElement,
   ctx: ReactJsxContext,
@@ -218,7 +249,9 @@ export const reactJsx = (
   templates: TemplateStringsArray,
   ...values: unknown[]
 ): ReactElement => {
-  const build = buildTemplate<ReactJsxComponent>(templates, values)
+  const build = buildTemplate<ReactJsxTagComponent>(templates, values, {
+    isTagNameBindingValue: isReactTagBindingValue,
+  })
   const result = parseSync('inline.jsx', build.source, parserOptions)
 
   if (result.errors.length > 0) {

src/react/react-jsx.ts

@@ -68,6 +68,10 @@ export type TemplateBuildResult<TComponent extends TemplateComponent> = {
   diagnostics: TemplateDiagnostics
 }
 
+export type TemplateBuildOptions<TComponent extends TemplateComponent> = {
+  isTagNameBindingValue?: (value: unknown) => value is TComponent
+}
+
 export type TemplateContext<TComponent extends TemplateComponent> = {
   source: string
   placeholders: Map<string, unknown>
@@ -272,6 +276,7 @@ export const ensureBinding = <TComponent extends TemplateComponent>(
 export const buildTemplate = <TComponent extends TemplateComponent>(
   strings: TemplateStringsArray,
   values: unknown[],
+  options?: TemplateBuildOptions<TComponent>,
 ): TemplateBuildResult<TComponent> => {
   const raw = strings.raw ?? strings
   const placeholders = new Map<string, unknown>()
@@ -281,6 +286,9 @@ export const buildTemplate = <TComponent extends TemplateComponent>(
   const templateId = invocationCounter++
   let placeholderIndex = 0
   const expressionRanges: TemplateExpressionRange[] = []
+  const isTagNameBindingValue =
+    options?.isTagNameBindingValue ??
+    ((value: unknown): value is TComponent => typeof value === 'function')
 
   for (let idx = 0; idx < values.length; idx++) {
     const chunk = raw[idx] ?? ''
@@ -290,11 +298,15 @@ export const buildTemplate = <TComponent extends TemplateComponent>(
     const isTagNamePosition = OPEN_TAG_RE.test(chunk) || CLOSE_TAG_RE.test(chunk)
     let insertion: string
 
-    if (isTagNamePosition && typeof value === 'function') {
+    if (isTagNamePosition && isTagNameBindingValue(value)) {
       const binding = ensureBinding(value as TComponent, bindings, bindingLookup)
       insertion = binding.name
     } else if (isTagNamePosition && typeof value === 'string') {
       insertion = value
+    } else if (isTagNamePosition) {
+      throw new Error(
+        'Invalid tag interpolation value. Expected a component, class, or string tag name.',
+      )
     } else {
       const placeholder = `${PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`
       placeholders.set(placeholder, value)

src/runtime/shared.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { createRoot } from 'react-dom/client'
-import { Children, act } from 'react'
+import { Children, act, forwardRef, memo } from 'react'
 import type { ReactNode } from 'react'
 
 import { reactJsx, type ReactJsxComponent } from '../src/react/index.js'
@@ -102,6 +102,77 @@ describe('reactJsx template tag', () => {
     })
   })
 
+  it('supports memo-wrapped components in tag interpolation', () => {
+    const Button = memo(function Button({ label }: { label: string }) {
+      return reactJsx`<button type="button">{${label}}</button>`
+    })
+
+    const tree = reactJsx`
+      <section>
+        <${Button} label={${'Click Me'}} />
+      </section>
+    `
+
+    const container = document.createElement('div')
+    document.body.append(container)
+    const root = createRoot(container)
+
+    act(() => {
+      root.render(tree)
+    })
+
+    expect(container.querySelector('button')?.textContent).toBe('Click Me')
+    expect(container.innerHTML).not.toContain('__KX_EXPR__')
+
+    act(() => {
+      root.unmount()
+    })
+  })
+
+  it('supports forwardRef components in tag interpolation', () => {
+    const Field = forwardRef<HTMLInputElement, { value: string }>(function Field(
+      { value },
+      ref,
+    ) {
+      return reactJsx`<input ref={${ref}} value={${value}} readOnly />`
+    })
+
+    const tree = reactJsx`
+      <section>
+        <${Field} value={${'rc-check'}} />
+      </section>
+    `
+
+    const container = document.createElement('div')
+    document.body.append(container)
+    const root = createRoot(container)
+
+    act(() => {
+      root.render(tree)
+    })
+
+    const input = container.querySelector('input') as HTMLInputElement | null
+    expect(input?.value).toBe('rc-check')
+    expect(container.innerHTML).not.toContain('__KX_EXPR__')
+
+    act(() => {
+      root.unmount()
+    })
+  })
+
+  it('does not treat React elements as tag interpolation components', () => {
+    const readyElement = reactJsx`<button type="button">ready</button>`
+
+    expect(
+      () =>
+        reactJsx`
+          <section>
+            <${readyElement} />
+          </section>
+        `,
+    ).toThrow('Invalid tag interpolation value')
+  })
+
   it('throws when encountering unknown component names', () => {
     expect(() => reactJsx`<MissingComponent />`).toThrow(
       'Unknown component "MissingComponent"',