@pyreon/vue-compat 0.13.1 → 0.15.0

package/src/jsx-runtime.ts

@@ -15,7 +15,7 @@
  */
 
 import type { ComponentFn, Props, VNode, VNodeChild } from '@pyreon/core'
-import { Fragment, h, onUnmount } from '@pyreon/core'
+import { Fragment, h, isNativeCompat, onUnmount } from '@pyreon/core'
 import { runUntracked, signal } from '@pyreon/reactivity'
 
 export { Fragment }
@@ -159,12 +159,36 @@ 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 framework components (context Provider, RouterView,
+    // QueryClientProvider, etc.) skip compat wrapping — they manage their
+    // own reactivity via signals + Pyreon's lifecycle, and wrapping them
+    // would run their setup body inside the compat layer's render context
+    // instead of Pyreon's, breaking `provide()` / `onMount()` / `onUnmount()`.
+    // See `@pyreon/core`'s `nativeCompat()` for the contract.
+    if (isNativeCompat(type)) {
+      return h(type as ComponentFn, componentProps)
+    }
     // Wrap Vue-style component for re-render support
     const wrapped = wrapCompatComponent(type)
-    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey
     return h(wrapped, componentProps)
   }
 
+  // DOM element: convert Vue ref ({ value }) to callback ref for Pyreon's runtime-dom
+  if (typeof type === 'string' && propsWithKey.ref != null) {
+    const r = propsWithKey.ref
+    if (
+      typeof r === 'object' &&
+      r !== null &&
+      (r as Record<symbol, unknown>)[Symbol.for('__v_isRef')] === true
+    ) {
+      const vueRef = r as { value: unknown }
+      propsWithKey.ref = (el: Element | null) => {
+        vueRef.value = el
+      }
+    }
+  }
+
   // DOM element or symbol (Fragment): children go in vnode.children
   const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]
 

package/src/tests/jsx-runtime-wrapper.test.ts

@@ -0,0 +1,158 @@
+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, vi } from 'vitest'
+import { onMounted, onUnmounted } from '../index'
+import { jsx } from '../jsx-runtime'
+
+// Coverage gap closed in PR #323. Exercises the Vue-compat wrapper
+// (`wrapCompatComponent`) end-to-end: JSX → mount → lifecycle hooks
+// → unmount cleanup. Pins the wrapper's setup-and-teardown contract;
+// fine-grained reactivity behavior is covered by the broader
+// vue-compat.test.ts integration suite.
+
+function container(): HTMLElement {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  return el
+}
+
+const tick = () => new Promise<void>((r) => queueMicrotask(() => r()))
+
+describe('vue-compat — wrapCompatComponent (jsx-runtime)', () => {
+  it('caches the wrapper per source-fn identity (same wrapper on repeat jsx calls)', () => {
+    const Comp = () => jsx('div', { children: 'hi' })
+    const a = jsx(Comp, {})
+    const b = jsx(Comp, {})
+    // Both vnodes should reference the same wrapped component (the
+    // _wrapperCache WeakMap reuses by source-fn identity)
+    expect(a.type).toBe(b.type)
+  })
+
+  it('produces distinct wrappers for distinct source functions', () => {
+    const A = () => jsx('div', { children: 'a' })
+    const B = () => jsx('div', { children: 'b' })
+    expect(jsx(A, {}).type).not.toBe(jsx(B, {}).type)
+  })
+
+  it('mounts a Vue-style component and renders into the container', () => {
+    const Comp = () => jsx('div', { children: 'mounted-via-vue-compat' })
+    const c = container()
+    mount(jsx(Comp, {}), c)
+    expect(c.textContent).toContain('mounted-via-vue-compat')
+  })
+
+  it('runs onMounted callback after first render', async () => {
+    const mountedSpy = vi.fn()
+    const Comp = () => {
+      onMounted(mountedSpy)
+      return jsx('div', { children: 'hi' })
+    }
+
+    const c = container()
+    mount(jsx(Comp, {}), c)
+    await tick()
+    await tick()
+    expect(mountedSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('runs onUnmounted callback after disposal', async () => {
+    const unmountedSpy = vi.fn()
+    const Comp = () => {
+      onUnmounted(unmountedSpy)
+      return jsx('div', { children: 'hi' })
+    }
+
+    const c = container()
+    const dispose = mount(jsx(Comp, {}), c)
+    await tick()
+    expect(unmountedSpy).not.toHaveBeenCalled()
+
+    dispose()
+    expect(unmountedSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('handles components with children prop (passes children through to wrapped fn)', () => {
+    const Wrapper = (props: { children?: string }) =>
+      jsx('section', { children: props.children ?? '' })
+    const c = container()
+    mount(jsx(Wrapper, { children: 'inner' }), c)
+    expect(c.textContent).toContain('inner')
+  })
+
+  it('handles components with no props', () => {
+    const Comp = () => jsx('div', { children: 'noprops' })
+    const c = container()
+    mount(jsx(Comp, {}), c)
+    expect(c.textContent).toContain('noprops')
+  })
+
+  it('skips wrapping for components marked via nativeCompat() (Vue-side parity with React/Preact/Solid compat)', () => {
+    // Pre-PR-2 vue-compat's jsx() had no NATIVE marker check — even marked
+    // components got wrapCompatComponent applied, which broke Pyreon framework
+    // components composed inside Vue-style code (their `provide()` /
+    // `onMount()` calls fired outside Pyreon's setup frame). PR 2 added the
+    // missing check at the same site as react/preact/solid compat.
+    //
+    // Bisect-verified: removing the `if (isNativeCompat(type))` branch from
+    // jsx-runtime.ts puts vue-compat back in the broken state — this test
+    // fails because the wrapped component's identity no longer matches the
+    // native source fn.
+    const Native = () => jsx('div', { children: 'native' })
+    nativeCompat(Native)
+    const vnode = jsx(Native, {})
+    // Marker hit: jsx() routes through h() directly with the SOURCE fn,
+    // never through wrapCompatComponent. So vnode.type === Native.
+    expect(vnode.type).toBe(Native)
+  })
+
+  it('jsx() wraps UNMARKED components (control — bypass is selective)', () => {
+    // Sibling assertion to "skips wrapping for marked components": proves the
+    // marker check is selective (only marked components bypass), not blanket.
+    // Without this, a regression that accidentally wraps EVERYTHING would
+    // still pass the "marked component" test as a coincidence.
+    const Unmarked = () => jsx('div', { children: 'wrapped' })
+    const vnode = jsx(Unmarked, {})
+    // Wrapper: vnode.type is the cached wrapCompatComponent, NOT the source fn.
+    expect(vnode.type).not.toBe(Unmarked)
+    expect(typeof vnode.type).toBe('function')
+  })
+
+  it('marked Provider mounts cleanly through compat-mode jsx() — provide() reaches descendants', () => {
+    // PR 5 mount-integration smoke (parity with react/preact/solid-compat
+    // suites). Sanity check that a marked Provider mounts cleanly through
+    // compat-mode jsx() and its `provide()` reaches the descendant Consumer.
+    //
+    // Note: this assertion is NOT bisect-load-bearing for the marker check
+    // itself. Synchronous mount preserves provide() context even WITH the
+    // wrapper (provide() pushes onto the global context stack regardless),
+    // so removing `nativeCompat(Provider)` here won't fail this test. The
+    // genuine multi-render-cycle bug PR #425 prevents (signal change re-fires
+    // the wrapper's accessor → provide() in re-run lands in stale stack) is
+    // covered by PR #427's e2e gate against real router state.
+    //
+    // The bisect-load-bearing assertion is the bypass-identity test above
+    // (`vnode.type === Native`) — that one fails when the marker check is
+    // removed from `jsx-runtime.ts`.
+    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')
+  })
+})