@pyreon/preact-compat 0.13.1 → 0.15.0

package/src/hooks.ts

@@ -32,30 +32,45 @@ function depsChanged(a: unknown[] | undefined, b: unknown[] | undefined): boolea
   return false
 }
 
+function shallowEqual<P extends Record<string, unknown>>(a: P, b: P): boolean {
+  const keysA = Object.keys(a)
+  const keysB = Object.keys(b)
+  if (keysA.length !== keysB.length) return false
+  for (const k of keysA) {
+    if (!Object.is(a[k], b[k])) return false
+  }
+  return true
+}
+
 // ─── useState ────────────────────────────────────────────────────────────────
 
 /**
  * Preact-compatible `useState` — returns `[value, setter]`.
  * Triggers a component re-render when the setter is called.
+ *
+ * The setter has stable identity across renders (same reference every time).
  */
 export function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T)) => void] {
   const ctx = requireCtx()
   const idx = getHookIndex()
 
   if (ctx.hooks.length <= idx) {
-    ctx.hooks.push(typeof initial === 'function' ? (initial as () => T)() : initial)
-  }
-
-  const value = ctx.hooks[idx] as T
-  const setter = (v: T | ((prev: T) => T)) => {
-    const current = ctx.hooks[idx] as T
-    const next = typeof v === 'function' ? (v as (prev: T) => T)(current) : v
-    if (Object.is(current, next)) return
-    ctx.hooks[idx] = next
-    ctx.scheduleRerender()
+    const val = typeof initial === 'function' ? (initial as () => T)() : initial
+    // Store both value and a STABLE setter in one hook slot so setter identity
+    // never changes across renders (Preact/React guarantee).
+    const entry = { value: val, setter: null as unknown as (v: T | ((prev: T) => T)) => void }
+    entry.setter = (v: T | ((prev: T) => T)) => {
+      const current = entry.value
+      const next = typeof v === 'function' ? (v as (prev: T) => T)(current) : v
+      if (Object.is(current, next)) return
+      entry.value = next
+      ctx.scheduleRerender()
+    }
+    ctx.hooks.push(entry)
   }
 
-  return [value, setter]
+  const entry = ctx.hooks[idx] as { value: T; setter: (v: T | ((prev: T) => T)) => void }
+  return [entry.value, entry.setter]
 }
 
 // ─── useEffect ───────────────────────────────────────────────────────────────
@@ -159,28 +174,42 @@ export function useRef<T>(initial?: T): { current: T | null } {
 
 /**
  * Preact-compatible `useReducer` — returns `[state, dispatch]`.
+ * Supports the 3-argument form: `useReducer(reducer, initialArg, init)`.
+ *
+ * Dispatch has stable identity across renders (same reference every time).
  */
 export function useReducer<S, A>(
   reducer: (state: S, action: A) => S,
-  initial: S | (() => S),
+  initialArg: S | (() => S),
+  init?: (arg: S) => S,
 ): [S, (action: A) => void] {
   const ctx = requireCtx()
   const idx = getHookIndex()
 
   if (ctx.hooks.length <= idx) {
-    ctx.hooks.push(typeof initial === 'function' ? (initial as () => S)() : initial)
-  }
-
-  const state = ctx.hooks[idx] as S
-  const dispatch = (action: A) => {
-    const current = ctx.hooks[idx] as S
-    const next = reducer(current, action)
-    if (Object.is(current, next)) return
-    ctx.hooks[idx] = next
-    ctx.scheduleRerender()
+    let initial: S
+    if (init) {
+      initial = init(initialArg as S)
+    } else if (typeof initialArg === 'function') {
+      initial = (initialArg as () => S)()
+    } else {
+      initial = initialArg
+    }
+    // Store both value and a STABLE dispatch in one hook slot so dispatch identity
+    // never changes across renders (Preact/React guarantee).
+    const entry = { value: initial, dispatch: null as unknown as (action: A) => void }
+    entry.dispatch = (action: A) => {
+      const current = entry.value
+      const next = reducer(current, action)
+      if (Object.is(current, next)) return
+      entry.value = next
+      ctx.scheduleRerender()
+    }
+    ctx.hooks.push(entry)
   }
 
-  return [state, dispatch]
+  const entry = ctx.hooks[idx] as { value: S; dispatch: (action: A) => void }
+  return [entry.value, entry.dispatch]
 }
 
 // ─── useId ───────────────────────────────────────────────────────────────────
@@ -206,34 +235,120 @@ export function useId(): string {
 /**
  * Preact-compatible `memo` — wraps a component to skip re-render when props
  * are shallowly equal.
+ *
+ * Each component INSTANCE gets its own props/result cache via a hook slot,
+ * so two `<MemoComp />` usages don't share memoization state.
  */
 export function memo<P extends Record<string, unknown>>(
   component: (props: P) => VNodeChild,
   areEqual?: (prevProps: P, nextProps: P) => boolean,
 ): (props: P) => VNodeChild {
-  const compare =
-    areEqual ??
-    ((a: P, b: P) => {
-      const keysA = Object.keys(a)
-      const keysB = Object.keys(b)
-      if (keysA.length !== keysB.length) return false
-      for (const k of keysA) {
-        if (!Object.is(a[k], b[k])) return false
+  const compare = areEqual ?? shallowEqual
+
+  // Fallback closure-level cache for calls outside a compat render context
+  // (e.g. direct function calls in tests). Inside a render context, each
+  // component instance gets its own cache via a hook slot.
+  let _fallbackPrevProps: P | null = null
+  let _fallbackPrevResult: VNodeChild = null
+
+  const memoized = (props: P) => {
+    const ctx = getCurrentCtx()
+    if (ctx) {
+      // Per-instance cache via hook slot
+      const idx = getHookIndex()
+      if (ctx.hooks.length <= idx) {
+        ctx.hooks.push({ prevProps: null as P | null, prevResult: null as VNodeChild })
       }
-      return true
-    })
+      const cache = ctx.hooks[idx] as { prevProps: P | null; prevResult: VNodeChild }
+      if (cache.prevProps !== null && compare(cache.prevProps, props)) {
+        return cache.prevResult
+      }
+      cache.prevProps = props
+      cache.prevResult = component(props)
+      return cache.prevResult
+    }
+    // No compat context — use closure-level fallback cache
+    if (_fallbackPrevProps !== null && compare(_fallbackPrevProps, props)) {
+      return _fallbackPrevResult
+    }
+    _fallbackPrevProps = props
+    _fallbackPrevResult = component(props)
+    return _fallbackPrevResult
+  }
+  memoized.displayName =
+    (component as unknown as { displayName?: string }).displayName || component.name || 'Memo'
+  return memoized
+}
 
-  let prevProps: P | null = null
-  let prevResult: VNodeChild = null
+// ─── forwardRef ─────────────────────────────────────────────────────────────
 
-  return (props: P) => {
-    if (prevProps !== null && compare(prevProps, props)) {
-      return prevResult
-    }
-    prevProps = props
-    prevResult = (component as (p: P) => VNodeChild)(props)
-    return prevResult
+/**
+ * Preact-compatible `forwardRef` — pass-through in Pyreon.
+ * Refs are regular props in Pyreon, so no wrapper is needed.
+ * The render function receives (props, ref) — we merge ref into props.
+ */
+export function forwardRef<P extends Record<string, unknown>>(
+  render: (props: P, ref: { current: unknown } | null) => VNodeChild,
+): (props: P & { ref?: { current: unknown } | null }) => VNodeChild {
+  const forwarded = (props: P & { ref?: { current: unknown } | null }) => {
+    const { ref, ...rest } = props
+    return render(rest as P, ref ?? null)
   }
+  forwarded.displayName =
+    (render as unknown as { displayName?: string }).displayName || render.name || 'ForwardRef'
+  return forwarded
+}
+
+// ─── useImperativeHandle ────────────────────────────────────────────────────
+
+/**
+ * Preact-compatible `useImperativeHandle`.
+ */
+export function useImperativeHandle<T>(
+  ref: { current: T | null } | null | undefined,
+  init: () => T,
+  deps?: unknown[],
+): void {
+  useLayoutEffect(() => {
+    if (ref) ref.current = init()
+    return () => {
+      if (ref) ref.current = null
+    }
+  }, deps)
+}
+
+// ─── useDebugValue ──────────────────────────────────────────────────────────
+
+/**
+ * Preact-compatible `useDebugValue` — no-op in Pyreon (no Preact DevTools integration).
+ */
+export function useDebugValue<T>(_value: T, _format?: (v: T) => unknown): void {}
+
+// ─── useTransition ──────────────────────────────────────────────────────
+
+/**
+ * Preact-compatible `useTransition` — returns `[isPending, startTransition]`.
+ *
+ * In Pyreon's signal-based reactivity there is no concept of concurrent
+ * rendering lanes. The callback is executed synchronously and `isPending`
+ * is always `false`. This shim exists so Preact/React code that uses
+ * `useTransition` compiles and runs without changes.
+ */
+export function useTransition(): [boolean, (fn: () => void) => void] {
+  return [false, (fn) => fn()]
+}
+
+// ─── useDeferredValue ───────────────────────────────────────────────────
+
+/**
+ * Preact-compatible `useDeferredValue` — returns the value as-is.
+ *
+ * In Pyreon's signal-based reactivity there are no concurrent rendering lanes,
+ * so the value is never "deferred". This shim exists so Preact/React code that
+ * uses `useDeferredValue` compiles and runs without changes.
+ */
+export function useDeferredValue<T>(value: T): T {
+  return value
 }
 
 // ─── useErrorBoundary ────────────────────────────────────────────────────────

package/src/index.ts

@@ -4,8 +4,9 @@
  * Preact-compatible API shim that runs on Pyreon's reactive engine.
  *
  * Provides the core Preact API surface: h, Fragment, render, hydrate,
- * Component class, createContext, createRef, cloneElement, toChildArray,
- * isValidElement, and the options hook object.
+ * Component class, PureComponent, createContext, createRef, cloneElement,
+ * toChildArray, isValidElement, createPortal, lazy, Suspense, ErrorBoundary,
+ * and the options hook object.
  *
  * For hooks, import from "@pyreon/preact-compat/hooks".
  * For signals, import from "@pyreon/preact-compat/signals".
@@ -14,8 +15,13 @@
 import type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'
 import {
   createRef,
+  ErrorBoundary,
   Fragment,
+  lazy,
+  nativeCompat,
+  Portal,
   provide,
+  Suspense,
   createContext as pyreonCreateContext,
   h as pyreonH,
   useContext,
@@ -68,6 +74,8 @@ export function createContext<T>(defaultValue: T): PreactContext<T> {
     provide(ctx, props.value)
     return props.children
   }) as ComponentFn<{ value: T; children?: VNodeChild }>
+  // Mark as native so jsx() doesn't wrap it with wrapCompatComponent
+  nativeCompat(Provider)
   return { ...ctx, Provider }
 }
 
@@ -91,7 +99,14 @@ export class Component<
 > {
   props: P
   state: S
-  private _stateSignal: ReturnType<typeof signal<S>>
+  _stateSignal: ReturnType<typeof signal<S>>
+  _lastResult?: VNodeChild
+
+  // Lifecycle methods (overridden by subclasses)
+  componentDidMount?(): void
+  componentDidUpdate?(): void
+  componentWillUnmount?(): void
+  shouldComponentUpdate?(nextProps: P, nextState: S): boolean
 
   constructor(props: P) {
     this.props = props
@@ -129,13 +144,25 @@ export class Component<
   }
 }
 
+// ─── PureComponent ──────────────────────────────────────────────────────────
+
+/**
+ * Preact-compatible PureComponent — extends Component.
+ * In Pyreon's compat layer this behaves identically to Component
+ * (signal-based reactivity already avoids unnecessary re-renders).
+ */
+export class PureComponent<
+  P extends Props = Props,
+  S extends Record<string, unknown> = Record<string, unknown>,
+> extends Component<P, S> {}
+
 // ─── cloneElement ────────────────────────────────────────────────────────────
 
 /**
  * Clone a VNode with merged props (like Preact's cloneElement).
  */
 export function cloneElement(vnode: VNode, props?: Props, ...children: VNodeChild[]): VNode {
-  const mergedProps = { ...vnode.props, ...(props ?? {}) }
+  const mergedProps = props ? { ...vnode.props, ...props } : { ...vnode.props }
   const mergedChildren = children.length > 0 ? children : vnode.children
   return {
     type: vnode.type,
@@ -185,6 +212,19 @@ export function isValidElement(x: unknown): x is VNode {
   )
 }
 
+// ─── createPortal ───────────────────────────────────────────────────────────
+
+/**
+ * Preact-compatible `createPortal(children, target)`.
+ */
+export function createPortal(children: VNodeChild, target: Element): VNodeChild {
+  return Portal({ target, children })
+}
+
+// ─── Suspense / lazy / ErrorBoundary ─────────────────────────────────────────
+
+export { ErrorBoundary, lazy, Suspense }
+
 // ─── options ─────────────────────────────────────────────────────────────────
 
 /**
@@ -192,3 +232,7 @@ export function isValidElement(x: unknown): x is VNode {
  * with libraries that check for `options._hook`, `options.vnode`, etc.
  */
 export const options: Record<string, unknown> = {}
+
+// ─── version ────────────────────────────────────────────────────────────────
+
+export const version = '10.0.0-pyreon'

package/src/jsx-runtime.ts

@@ -10,8 +10,9 @@
  */
 
 import type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'
-import { Fragment, h } from '@pyreon/core'
+import { Fragment, h, isNativeCompat, onUnmount } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
+import type { Component } from './index'
 
 export { Fragment }
 
@@ -79,6 +80,80 @@ function scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {
   })
 }
 
+// ─── Class component detection ──────────────────────────────────────────────
+
+function isClassComponent(type: Function): boolean {
+  return type.prototype != null && typeof type.prototype.render === 'function'
+}
+
+// ─── Class component wrapping ───────────────────────────────────────────────
+
+function wrapClassComponent(ClassComp: Function): ComponentFn {
+  const wrapped = ((props: Props) => {
+    const instance = new (ClassComp as new (props: Props) => Component)(props)
+    const version = signal(0)
+    let updateScheduled = false
+
+    // Override setState to trigger re-render via version signal
+    const origSetState = instance.setState.bind(instance)
+    instance.setState = (partial: Partial<Record<string, unknown>>) => {
+      origSetState(partial)
+      if (!updateScheduled) {
+        updateScheduled = true
+        queueMicrotask(() => {
+          updateScheduled = false
+          version.set(version.peek() + 1)
+        })
+      }
+    }
+
+    // Override forceUpdate
+    instance.forceUpdate = () => {
+      version.set(version.peek() + 1)
+    }
+
+    // Lifecycle: componentWillUnmount
+    let didMountFired = false
+    onUnmount(() => {
+      if (typeof instance.componentWillUnmount === 'function') {
+        instance.componentWillUnmount()
+      }
+    })
+
+    // Return reactive accessor for re-renders
+    return () => {
+      const ver = version() // track for re-renders
+      instance.props = props // update props on re-render
+
+      // shouldComponentUpdate only applies after mount (ver > 0 means setState/forceUpdate)
+      if (didMountFired && ver > 0 && typeof instance.shouldComponentUpdate === 'function') {
+        if (!instance.shouldComponentUpdate(props, instance.state)) {
+          return instance._lastResult // skip render
+        }
+      }
+
+      const result = instance.render()
+      instance._lastResult = result
+
+      // componentDidMount fires once after the initial render settles
+      if (!didMountFired) {
+        didMountFired = true
+        if (typeof instance.componentDidMount === 'function') {
+          queueMicrotask(() => instance.componentDidMount!())
+        }
+      } else if (ver > 0) {
+        // componentDidUpdate only fires on explicit re-renders (setState/forceUpdate)
+        if (typeof instance.componentDidUpdate === 'function') {
+          queueMicrotask(() => instance.componentDidUpdate!())
+        }
+      }
+
+      return result
+    }
+  }) as unknown as ComponentFn
+  return wrapped
+}
+
 // ─── Component wrapping ──────────────────────────────────────────────────────
 
 const _wrapperCache = new WeakMap<Function, ComponentFn>()
@@ -87,6 +162,13 @@ function wrapCompatComponent(preactComponent: Function): ComponentFn {
   let wrapped = _wrapperCache.get(preactComponent)
   if (wrapped) return wrapped
 
+  // Handle class components (those with prototype.render)
+  if (isClassComponent(preactComponent)) {
+    wrapped = wrapClassComponent(preactComponent)
+    _wrapperCache.set(preactComponent, wrapped)
+    return wrapped
+  }
+
   // The wrapper returns a reactive accessor (() => VNodeChild) which Pyreon's
   // mountChild treats as a reactive expression via mountReactive.
   wrapped = ((props: Props) => {
@@ -112,6 +194,17 @@ function wrapCompatComponent(preactComponent: Function): ComponentFn {
       })
     }
 
+    // Register cleanup for all hooks on unmount
+    onUnmount(() => {
+      ctx.unmounted = true
+      for (const hook of ctx.hooks) {
+        if (hook && typeof hook === 'object' && 'cleanup' in hook) {
+          const entry = hook as EffectEntry
+          if (typeof entry.cleanup === 'function') entry.cleanup()
+        }
+      }
+    })
+
     // Return reactive accessor — Pyreon's mountChild calls mountReactive
     return () => {
       version() // tracked read — triggers re-execution when state changes
@@ -143,15 +236,65 @@ export function jsx(
   const propsWithKey = (key != null ? { ...rest, key } : rest) as Props
 
   if (typeof type === 'function') {
+    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
+    // Native Pyreon components (context Provider, RouterView, QueryClientProvider,
+    // etc.) skip compat wrapping — see `@pyreon/core`'s `nativeCompat()` for the
+    // full contract.
+    if (isNativeCompat(type)) {
+      return h(type as ComponentFn, componentProps)
+    }
     // Wrap Preact-style component for re-render support
     const wrapped = wrapCompatComponent(type)
-    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
     return h(wrapped, componentProps)
   }
 
   // DOM element or symbol (Fragment): children go in vnode.children
   const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]
 
+  // Map Preact-style attributes to standard HTML attributes
+  if (typeof type === 'string') {
+    if (propsWithKey.className !== undefined) {
+      propsWithKey.class = propsWithKey.className
+      delete propsWithKey.className
+    }
+    if (propsWithKey.htmlFor !== undefined) {
+      propsWithKey.for = propsWithKey.htmlFor
+      delete propsWithKey.htmlFor
+    }
+
+    // Preact's onChange fires on every keystroke for form elements (like onInput)
+    if (
+      (type === 'input' || type === 'textarea' || type === 'select') &&
+      propsWithKey.onChange !== undefined
+    ) {
+      if (propsWithKey.onInput === undefined) {
+        propsWithKey.onInput = propsWithKey.onChange
+      }
+      delete propsWithKey.onChange
+    }
+
+    // autoFocus → autofocus
+    if (propsWithKey.autoFocus !== undefined) {
+      propsWithKey.autofocus = propsWithKey.autoFocus
+      delete propsWithKey.autoFocus
+    }
+
+    // defaultValue / defaultChecked → value / checked when no controlled value
+    if (type === 'input' || type === 'textarea') {
+      if (propsWithKey.defaultValue !== undefined && propsWithKey.value === undefined) {
+        propsWithKey.value = propsWithKey.defaultValue
+        delete propsWithKey.defaultValue
+      }
+      if (propsWithKey.defaultChecked !== undefined && propsWithKey.checked === undefined) {
+        propsWithKey.checked = propsWithKey.defaultChecked
+        delete propsWithKey.defaultChecked
+      }
+    }
+
+    // Strip Preact-only props that have no DOM equivalent
+    delete propsWithKey.suppressHydrationWarning
+  }
+
   return h(type, propsWithKey, ...(childArray as VNodeChild[]))
 }
 

package/src/preact-compat.browser.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { mountInBrowser } from '@pyreon/test-utils/browser'
+import { createElement, Fragment } from './index'
+
+/**
+ * Real-browser smoke test for `@pyreon/preact-compat`.
+ *
+ * Per the test-environment-parity rule (`pyreon/require-browser-smoke-test`),
+ * every browser-categorized package must ship at least one
+ * `*.browser.test.*` file. This catches regressions that happy-dom unit
+ * tests can hide: importing the public API and mounting through Preact's
+ * `h` shim in real Chromium.
+ */
+describe('@pyreon/preact-compat — browser smoke', () => {
+  it('mounts a Preact-style element via createElement', () => {
+    const vnode = createElement('div', { id: 'preact', class: 'shim' }, 'hello, preact')
+    const { container, unmount } = mountInBrowser(vnode)
+    const el = container.querySelector('#preact')!
+    expect(el.textContent).toBe('hello, preact')
+    expect(el.classList.contains('shim')).toBe(true)
+    unmount()
+    expect(document.getElementById('preact')).toBeNull()
+  })
+
+  it('mounts a Fragment with multiple children', () => {
+    const vnode = createElement(
+      Fragment,
+      null,
+      createElement('span', { id: 'a' }, 'A'),
+      createElement('span', { id: 'b' }, 'B'),
+    )
+    const { container, unmount } = mountInBrowser(vnode)
+    expect(container.querySelector('#a')?.textContent).toBe('A')
+    expect(container.querySelector('#b')?.textContent).toBe('B')
+    unmount()
+  })
+})

package/src/signals.ts

@@ -10,6 +10,7 @@ import {
   batch as pyreonBatch,
   computed as pyreonComputed,
   effect as pyreonEffect,
+  runUntracked as pyreonRunUntracked,
   signal as pyreonSignal,
 } from '@pyreon/reactivity'
 
@@ -63,8 +64,7 @@ export function computed<T>(fn: () => T): ReadonlySignal<T> {
       return c()
     },
     peek(): T {
-      // computed doesn't have peek — just read the value untracked
-      return c()
+      return pyreonRunUntracked(() => c())
     },
   }
 }

package/src/tests/native-marker-bypass.test.tsx

@@ -0,0 +1,63 @@
+import type { ComponentFn } from '@pyreon/core'
+import { createContext, h, nativeCompat, provide, useContext } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
+import { describe, expect, it } from 'vitest'
+import { jsx } from '../jsx-runtime'
+
+// Per-compat unit-level regression test for the marker-bypass contract.
+// See `react-compat/src/tests/native-marker-bypass.test.tsx` for the full
+// rationale + bisect-verification notes — same shape, four parallel files
+// (one per compat layer) so a regression in any one doesn't go unnoticed.
+//
+// Bisect-verified per file: removing the `if (isNativeCompat(type))` branch
+// from preact-compat's jsx-runtime causes test #1 to fail with
+// `expected [Function wrapped] to be [Function Native]`.
+
+function container(): HTMLElement {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  return el
+}
+
+describe('preact-compat — nativeCompat() marker bypass', () => {
+  it('jsx() routes marked components through h() directly (no wrapper)', () => {
+    const Native = (props: { children?: unknown }) => h('div', null, props.children as never)
+    nativeCompat(Native)
+
+    const vnode = jsx(Native, {})
+
+    expect(vnode.type).toBe(Native)
+  })
+
+  it('jsx() wraps UNMARKED components (control — bypass is selective)', () => {
+    const Unmarked = (props: { children?: unknown }) => h('div', null, props.children as never)
+
+    const vnode = jsx(Unmarked, {})
+
+    expect(vnode.type).not.toBe(Unmarked)
+    expect(typeof vnode.type).toBe('function')
+  })
+
+  it('marked Provider mounts inside Pyreon setup frame — provide() reaches descendants', () => {
+    const Ctx = createContext<string>('default')
+
+    const Provider: ComponentFn = (props) => {
+      provide(Ctx, props.value as string)
+      return props.children as never
+    }
+    nativeCompat(Provider)
+
+    const Consumer: ComponentFn = () => {
+      const value = useContext(Ctx)
+      return h('span', { 'data-value': value }, value)
+    }
+    nativeCompat(Consumer)
+
+    const el = container()
+    mount(jsx(Provider, { value: 'native', children: jsx(Consumer, {}) }), el)
+
+    const span = el.querySelector('span')
+    expect(span?.getAttribute('data-value')).toBe('native')
+    expect(span?.textContent).toBe('native')
+  })
+})