@ipxjs/refract 0.5.0 → 0.6.0

package/README.md

@@ -121,6 +121,11 @@ export default defineConfig({
 The compat layer is intentionally separate from core so users who do not need
 React ecosystem compatibility keep the smallest and fastest Refract bundles.
 
+Compatibility status (last verified February 17, 2026):
+- `yarn test`: 14 files passed, 85 tests passed
+- Compat-focused suites passed: `tests/compat.test.ts` (10), `tests/poc-compat.test.ts` (2), `tests/react-router-smoke.test.ts` (3)
+- Verified behaviors include `forwardRef`, portals, `createRoot`, JSX runtimes, `useSyncExternalStore`, `flushSync`, and react-router tree construction/dispatcher bridging
+
 ## API
 
 ### createElement(type, props, ...children)
@@ -215,24 +220,26 @@ image requests blocked.
 
 ### Bundle Size Snapshot
 
-The values below are from a local run on February 15, 2026.
+The values below are from a local run on February 17, 2026.
 
 | Framework                  | JS bundle (raw) | JS bundle (gzip) |
 |---------------------------|----------------:|-----------------:|
-| Refract (`core`)          | 8.36 kB         | 3.16 kB          |
-| Refract (`core+hooks`)    | 9.76 kB         | 3.65 kB          |
-| Refract (`core+context`)  | 8.85 kB         | 3.38 kB          |
-| Refract (`core+memo`)     | 9.03 kB         | 3.39 kB          |
-| Refract (`core+security`) | 9.27 kB         | 3.46 kB          |
-| Refract (`refract`)       | 14.64 kB        | 5.34 kB          |
-| React                     | 189.74 kB       | 59.52 kB         |
-| Preact                    | 14.46 kB        | 5.95 kB          |
+| Refract (`core`)          | 8.62 kB         | 3.24 kB          |
+| Refract (`core+hooks`)    | 10.27 kB        | 3.84 kB          |
+| Refract (`core+context`)  | 9.12 kB         | 3.47 kB          |
+| Refract (`core+memo`)     | 9.29 kB         | 3.47 kB          |
+| Refract (`core+security`) | 9.53 kB         | 3.54 kB          |
+| Refract (`refract`)       | 15.20 kB        | 5.55 kB          |
+| React                     | 189.74 kB       | 59.58 kB         |
+| Preact                    | 14.46 kB        | 5.96 kB          |
 
 Load-time metrics are machine-dependent, so the benchmark script prints a fresh
 per-run timing table (median, p95, min/max, sd) for every framework.
+The CI preset (`make bench-ci`, 40 measured + 5 warmup runs) also passed on
+February 17, 2026 with default guardrails (`DCL p95 <= 16ms`, `DCL sd <= 2ms`).
 
-From this snapshot, Refract `core` gzip JS is about 18.8x smaller than React,
-and the full `refract` entrypoint is about 11.1x smaller.
+From this snapshot, Refract `core` gzip JS is about 18.4x smaller than React,
+and the full `refract` entrypoint is about 10.7x smaller.
 
 ### Component Combination Benchmarks (Vitest)
 
@@ -242,15 +249,15 @@ Higher `hz` is better.
 
 | Component usage profile | Mount (hz) | Mount vs base | Reconcile (hz) | Reconcile vs base |
 |-------------------------|------------|---------------|----------------|-------------------|
-| `base` | 5068.40 | baseline | 4144.37 | baseline |
-| `memo` | 5883.23 | +16.1% | 5154.56 | +24.4% |
-| `context` | 3521.54 | -30.5% | 5063.92 | +22.2% |
-| `fragment` | 4880.23 | -3.7% | 4079.08 | -1.6% |
-| `keyed` | 5763.70 | +13.7% | 4844.23 | +16.9% |
-| `memo+context` | 6173.01 | +21.8% | 5144.98 | +24.1% |
-| `memo+context+keyed` | 5606.73 | +10.6% | 4732.23 | +14.2% |
-
-In this run, `memo+context` was the fastest mount profile, while
+| `base` | 6570.25 | baseline | 3413.29 | baseline |
+| `memo` | 7257.38 | +10.5% | 7541.91 | +120.9% |
+| `context` | 6427.45 | -2.2% | 7119.35 | +108.6% |
+| `fragment` | 5935.06 | -9.7% | 3437.54 | +0.7% |
+| `keyed` | 9022.55 | +37.3% | 6535.55 | +91.5% |
+| `memo+context` | 7015.37 | +6.8% | 6782.87 | +98.7% |
+| `memo+context+keyed` | 7992.82 | +21.7% | 6803.09 | +99.3% |
+
+In this run, `keyed` was the fastest mount profile, while
 `memo` was the fastest reconcile profile.
 
 ### Running the Benchmark
@@ -301,24 +308,27 @@ How Refract compares to React and Preact:
 | **Hooks**                      |         |       |        |
 | useState                       | Yes     | Yes   | Yes    |
 | useEffect                      | Yes     | Yes   | Yes    |
-| useLayoutEffect                | No      | Yes   | Yes    |
+| useLayoutEffect                | Yes     | Yes   | Yes    |
+| useInsertionEffect             | Yes     | Yes   | Yes    |
 | useRef                         | Yes     | Yes   | Yes    |
 | useMemo / useCallback          | Yes     | Yes   | Yes    |
 | useReducer                     | Yes     | Yes   | Yes    |
 | useContext                     | Yes     | Yes   | Yes    |
-| useId                          | No      | Yes   | Yes    |
-| useTransition / useDeferredValue | No    | Yes   | No     |
+| useId                          | Yes     | Yes   | Yes    |
+| useSyncExternalStore           | Yes     | Yes   | Yes    |
+| useImperativeHandle            | Yes     | Yes   | Yes    |
+| useTransition / useDeferredValue | Partial⁵ | Yes | Partial⁷ |
 | **State & Data Flow**          |         |       |        |
 | Built-in state management      | Yes     | Yes   | Yes    |
 | Context API                    | Yes     | Yes   | Yes    |
 | Refs (createRef / ref prop)    | Yes     | Yes   | Yes    |
-| forwardRef                     | No      | Yes   | Yes    |
+| forwardRef                     | Yes⁶    | Yes   | Yes    |
 | **Rendering**                  |         |       |        |
 | Event handling                 | Yes     | Yes   | Yes    |
 | Style objects                  | Yes     | Yes   | Yes    |
 | className prop                 | Yes     | Yes   | Yes¹   |
 | dangerouslySetInnerHTML        | Yes     | Yes   | Yes    |
-| Portals                        | No      | Yes   | Yes    |
+| Portals                        | Yes     | Yes   | Yes    |
 | Suspense / lazy                | No      | Yes   | Yes²   |
 | Error boundaries               | Yes³    | Yes   | Yes    |
 | Server-side rendering          | No      | Yes   | Yes    |
@@ -333,13 +343,16 @@ How Refract compares to React and Preact:
 | memo / PureComponent           | Yes     | Yes   | Yes    |
 | **Ecosystem**                  |         |       |        |
 | DevTools                       | Basic (hook API) | Yes   | Yes    |
-| React compatibility layer      | N/A     | N/A   | Yes    |
-| **Bundle Size (gzip, JS)**     | ~2.9-5.0 kB⁴ | ~59.5 kB | ~6.0 kB |
+| React compatibility layer      | Yes⁶    | N/A   | Yes⁷   |
+| **Bundle Size (gzip, JS)**     | ~3.2-5.6 kB⁴ | ~59.5 kB | ~6.0 kB |
 
 ¹ Preact supports both `class` and `className`.
 ² Preact has partial Suspense support via `preact/compat`.
 ³ Refract uses the `useErrorBoundary` hook rather than class-based error boundaries.
 ⁴ Refract size depends on entrypoint (`refract/core` vs `refract` full).
+⁵ Refract exposes `useTransition` / `useDeferredValue` but currently runs both synchronously (no concurrent scheduling).
+⁶ Available via opt-in compat entrypoints (`refract/compat/react*`).
+⁷ Preact compatibility is provided through `preact/compat`.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A minimal React-like virtual DOM library with an optional React compat layer",
   "type": "module",
   "main": "src/refract/index.ts",

package/src/refract/compat/react-jsx-runtime.ts

@@ -1,5 +1,6 @@
 import { createElement, Fragment } from "../createElement.js";
 import type { VNode, VNodeType } from "../types.js";
+import { isClassComponent, wrapClassComponent, getWrappedHandler } from "./react.js";
 
 type JsxProps = Record<string, unknown> | null | undefined;
 type JsxChild = VNode | string | number | boolean | null | undefined | JsxChild[];
@@ -18,6 +19,8 @@ function normalizeVNodeChildren(vnode: VNode): VNode {
 }
 
 function createJsxElement(type: VNodeType, rawProps: JsxProps, key?: string): ReturnType<typeof createElement> {
+  const effectiveType = isClassComponent(type) ? wrapClassComponent(type as Function) : type;
+  
   const props = { ...(rawProps ?? {}) };
   if (key !== undefined) {
     props.key = key;
@@ -25,13 +28,22 @@ function createJsxElement(type: VNodeType, rawProps: JsxProps, key?: string): Re
   const children = props.children as JsxChild | JsxChild[] | undefined;
   delete props.children;
 
+  // Wrap event handlers
+  if (typeof type === 'string') {
+    for (const key in props) {
+      if (key.startsWith('on') && typeof props[key] === 'function') {
+        props[key] = getWrappedHandler(props[key] as Function);
+      }
+    }
+  }
+
   let vnode: VNode;
   if (children === undefined) {
-    vnode = createElement(type, props);
+    vnode = createElement(effectiveType as VNodeType, props);
   } else if (Array.isArray(children)) {
-    vnode = createElement(type, props, ...(children as JsxChild[]));
+    vnode = createElement(effectiveType as VNodeType, props, ...(children as JsxChild[]));
   } else {
-    vnode = createElement(type, props, children as JsxChild);
+    vnode = createElement(effectiveType as VNodeType, props, children as JsxChild);
   }
   return normalizeVNodeChildren(vnode);
 }
@@ -44,4 +56,4 @@ export function jsxs(type: VNodeType, props: JsxProps, key?: string): ReturnType
   return createJsxElement(type, props, key);
 }
 
-export { Fragment };
+export { Fragment };

package/src/refract/compat/react.ts

@@ -1,10 +1,11 @@
-import { createElement, Fragment } from "../createElement.js";
+import { createElement as createElementImpl, Fragment } from "../createElement.js";
 import { memo } from "../memo.js";
-import { createContext } from "../features/context.js";
+import { createContext as createContextImpl } from "../features/context.js";
 import {
   createRef,
+  useErrorBoundary,
 } from "../features/hooks.js";
-import type { Component, Props, VNode } from "../types.js";
+import type { Component as RefractComponent, Props, VNode } from "../types.js";
 import {
   __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
@@ -31,8 +32,8 @@ function parseChildrenArgs(children: unknown[]): unknown {
 
 export function forwardRef<T, P extends Record<string, unknown> = Record<string, unknown>>(
   render: (props: P, ref: { current: T | null } | ((value: T | null) => void) | null) => VNode,
-): Component {
-  const ForwardRefComponent: Component = (props: Props) => {
+): RefractComponent {
+  const ForwardRefComponent: RefractComponent = (props: Props) => {
     const { ref, ...rest } = props as Props & { ref?: { current: T | null } | ((value: T | null) => void) | null };
     return render(rest as unknown as P, ref ?? null);
   };
@@ -199,7 +200,287 @@ export function useDeferredValue<T>(value: T, initialValue?: T): T {
   return resolveDispatcher().useDeferredValue(value, initialValue);
 }
 
-export { createElement, Fragment, createContext, memo };
+// ---------------------------------------------------------------------------
+// Context Wrapper
+// ---------------------------------------------------------------------------
+
+export function createContext<T>(defaultValue: T): any {
+  const ctx = createContextImpl(defaultValue) as any;
+  ctx._currentValue = defaultValue;
+  ctx._currentValue2 = defaultValue;
+  ctx.displayName = undefined;
+  ctx.Consumer = ctx;
+  if (ctx.Provider) {
+    ctx.Provider._context = ctx;
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Class Component Support
+// ---------------------------------------------------------------------------
+
+export function Component(this: any, props: any, context?: any) {
+  this.props = props;
+  this.state = {};
+  this.context = context ?? undefined;
+  this._forceUpdate = null;
+}
+Component.prototype.setState = function (
+  this: any,
+  partial: any,
+  callback?: () => void,
+): void {
+  if (typeof partial === 'function') {
+    const result = partial(this.state, this.props);
+    if (result != null) {
+      this.state = { ...this.state, ...result };
+    }
+  } else {
+    this.state = { ...this.state, ...partial };
+  }
+  if (this._forceUpdate) {
+    this._forceUpdate();
+  }
+  if (callback) queueMicrotask(callback);
+};
+Component.prototype.forceUpdate = function (this: any, callback?: () => void): void {
+  if (this._forceUpdate) {
+    this._forceUpdate();
+  }
+  if (callback) queueMicrotask(callback);
+};
+Component.prototype.render = function (): unknown {
+  return null;
+};
+Component.prototype.isReactComponent = {};
+
+export function PureComponent(this: any, props: any) {
+  Component.call(this, props);
+}
+PureComponent.prototype = Object.create(Component.prototype);
+PureComponent.prototype.constructor = PureComponent;
+PureComponent.prototype.isPureReactComponent = true;
+
+// ---------------------------------------------------------------------------
+// Suspense / Lazy
+// ---------------------------------------------------------------------------
+
+export function Suspense(props: { children?: unknown; fallback?: unknown }): unknown {
+  return props.children ?? null;
+}
+
+export function lazy<T extends { default: (...args: any[]) => any }>(
+  factory: () => Promise<T>,
+): (props: any) => unknown {
+  let resolved: ((...args: any[]) => any) | null = null;
+  let promise: Promise<void> | null = null;
+  const LazyComponent = (props: any) => {
+    if (resolved) return createElementImpl(resolved as any, props);
+    if (!promise) {
+      promise = factory().then((mod) => {
+        resolved = mod.default;
+      });
+    }
+    throw promise;
+  };
+  return LazyComponent;
+}
+
+// ---------------------------------------------------------------------------
+// Class Wrapper Logic
+// ---------------------------------------------------------------------------
+
+const classWrapperCache = new WeakMap<Function, Function>();
+
+export function isClassComponent(type: unknown): boolean {
+  return (
+    typeof type === 'function' &&
+    (type as any).prototype != null &&
+    typeof (type as any).prototype.render === 'function'
+  );
+}
+
+export function wrapClassComponent(ClassComp: Function): (props: any) => unknown {
+  const cached = classWrapperCache.get(ClassComp);
+  if (cached) return cached as (props: any) => unknown;
+
+  const Ctor = ClassComp as any;
+  const hasErrorBoundary = typeof Ctor.getDerivedStateFromError === 'function';
+  const hasLifecycles =
+    typeof Ctor.prototype.componentDidMount === 'function' ||
+    typeof Ctor.prototype.componentDidUpdate === 'function';
+  const hasWillUnmount = typeof Ctor.prototype.componentWillUnmount === 'function';
+  const contextType = Ctor.contextType ?? null;
+
+  const Wrapper = (rawProps: any): unknown => {
+    const props = Ctor.defaultProps ? { ...Ctor.defaultProps, ...rawProps } : rawProps;
+    const [, setTick] = useState(0);
+    const forceUpdate = useCallback(() => setTick((t: number) => t + 1), []);
+    const instanceRef = useRef<any>(null);
+
+    if (!instanceRef.current) {
+      instanceRef.current = new (ClassComp as any)(props);
+    }
+    const instance = instanceRef.current;
+    instance.props = props;
+    instance._forceUpdate = forceUpdate;
+
+    if (contextType) {
+      instance.context = useContext(contextType);
+    }
+
+    if (typeof Ctor.getDerivedStateFromProps === 'function') {
+      const derived = Ctor.getDerivedStateFromProps(props, instance.state);
+      if (derived != null) {
+        instance.state = { ...instance.state, ...derived };
+      }
+    }
+
+    if (hasErrorBoundary) {
+      const [error, resetError] = useErrorBoundary();
+      if (error) {
+        const newState = Ctor.getDerivedStateFromError(error);
+        instance.state = { ...instance.state, ...newState };
+        if (typeof (instance as any).componentDidCatch === 'function') {
+          (instance as any).componentDidCatch(error, { componentStack: '' });
+        }
+        resetError();
+      }
+    }
+
+    if (hasLifecycles) {
+      const mountedRef = useRef(false);
+      const prevPropsRef = useRef<any>(null);
+      const prevStateRef = useRef<any>(null);
+
+      useLayoutEffect(() => {
+        if (!mountedRef.current) {
+          mountedRef.current = true;
+          if (typeof instance.componentDidMount === 'function') {
+            instance.componentDidMount();
+          }
+        } else {
+          if (typeof instance.componentDidUpdate === 'function') {
+            instance.componentDidUpdate(prevPropsRef.current, prevStateRef.current);
+          }
+        }
+        prevPropsRef.current = instance.props;
+        prevStateRef.current = { ...instance.state };
+      });
+    }
+
+    if (hasWillUnmount) {
+      useEffect(() => {
+        return () => {
+          instance.componentWillUnmount();
+        };
+      }, []);
+    }
+
+    return instance.render();
+  };
+
+  Object.defineProperty(Wrapper, 'name', {
+    value: (ClassComp as any).displayName || ClassComp.name || 'ClassWrapper',
+  });
+
+  classWrapperCache.set(ClassComp, Wrapper);
+  return Wrapper;
+}
+
+// ---------------------------------------------------------------------------
+// Event Wrapping
+// ---------------------------------------------------------------------------
+
+export function createSyntheticEvent(nativeEvent: Event) {
+  let isPropagationStopped = false;
+  let isDefaultPrevented = false;
+
+  const syntheticEvent = {
+    nativeEvent,
+    currentTarget: nativeEvent.currentTarget,
+    target: nativeEvent.target,
+    bubbles: nativeEvent.bubbles,
+    cancelable: nativeEvent.cancelable,
+    defaultPrevented: nativeEvent.defaultPrevented,
+    eventPhase: nativeEvent.eventPhase,
+    isTrusted: nativeEvent.isTrusted,
+    preventDefault: () => {
+      isDefaultPrevented = true;
+      nativeEvent.preventDefault();
+    },
+    isDefaultPrevented: () => isDefaultPrevented,
+    stopPropagation: () => {
+      isPropagationStopped = true;
+      nativeEvent.stopPropagation();
+    },
+    isPropagationStopped: () => isPropagationStopped,
+    persist: () => {},
+    timeStamp: nativeEvent.timeStamp,
+    type: nativeEvent.type,
+  };
+
+  return new Proxy(syntheticEvent, {
+    get: (target, prop) => {
+      if (prop in target) return (target as any)[prop];
+      const val = (nativeEvent as any)[prop];
+      if (typeof val === 'function') return val.bind(nativeEvent);
+      return val;
+    }
+  });
+}
+
+const wrappedHandlerCache = new WeakMap<Function, Function>();
+
+export function getWrappedHandler(handler: Function) {
+  if (wrappedHandlerCache.has(handler)) return wrappedHandlerCache.get(handler);
+
+  const wrapped = (nativeEvent: Event) => {
+    if ((nativeEvent as any).nativeEvent && typeof (nativeEvent as any).isPropagationStopped === 'function') {
+      return handler(nativeEvent);
+    }
+    const synthetic = createSyntheticEvent(nativeEvent);
+    return handler(synthetic);
+  };
+  wrappedHandlerCache.set(handler, wrapped);
+  return wrapped;
+}
+
+function normalizeChildrenSingle(vnode: any): any {
+  if (!vnode || !vnode.props) return vnode;
+  const c = vnode.props.children;
+  if (Array.isArray(c) && c.length === 1) {
+    vnode.props.children = c[0];
+  }
+  return vnode;
+}
+
+export function createElement(type: unknown, props?: unknown, ...children: unknown[]): VNode {
+  const effectiveType = isClassComponent(type) ? wrapClassComponent(type as Function) : type;
+
+  if (typeof type === 'string' && props && typeof props === 'object') {
+    const newProps = { ...props } as Record<string, unknown>;
+    let hasChanges = false;
+    for (const key in newProps) {
+      if (key.startsWith('on') && typeof newProps[key] === 'function') {
+         newProps[key] = getWrappedHandler(newProps[key] as Function);
+         hasChanges = true;
+      }
+    }
+    if (hasChanges) {
+        return normalizeChildrenSingle(createElementImpl(effectiveType as any, newProps, ...(children as any[])));
+    }
+  }
+
+  return normalizeChildrenSingle(createElementImpl(effectiveType as any, props as any, ...(children as any[])));
+}
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export { Fragment, memo };
 export {
   createRef,
   registerExternalReactModule,
@@ -212,6 +493,10 @@ export const version = "19.0.0-refract-compat";
 const ReactCompat = {
   Children,
   Fragment,
+  Component,
+  PureComponent,
+  Suspense,
+  lazy,
   createContext,
   createElement,
   cloneElement,
@@ -242,4 +527,4 @@ const ReactCompat = {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
 };
 
-export default ReactCompat;
+export default ReactCompat;

package/src/refract/dom.ts

@@ -146,7 +146,19 @@ export function applyProps(
         break;
       default:
         if (key.startsWith("on")) {
-          const event = key.slice(2).toLowerCase();
+          let event = key.slice(2).toLowerCase();
+          if (reactCompatEventMode && event === "change") {
+            const tagName = el.tagName;
+            if (tagName === "TEXTAREA") {
+              event = "input";
+            } else if (tagName === "INPUT") {
+              const type = (el as HTMLInputElement).type;
+              if (type !== "checkbox" && type !== "radio" && type !== "file") {
+                event = "input";
+              }
+            }
+          }
+
           if (oldProps[key]) {
             el.removeEventListener(event, getEventListener(oldProps[key]));
           }

package/src/refract/features/hooks.ts

@@ -257,12 +257,17 @@ export function useSyncExternalStore<T>(
   // snapshots (e.g. zustand selectors returning store actions) as updaters.
   const [snapshot, setSnapshot] = useState<T>(() => getSnapshot());
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const handleStoreChange = () => {
       setSnapshot(() => getSnapshot());
     };
     const unsubscribe = subscribe(handleStoreChange);
-    handleStoreChange();
+    
+    // Check if snapshot changed between render and effect
+    if (getSnapshot() !== snapshot) {
+      handleStoreChange();
+    }
+
     return () => {
       unsubscribe();
     };

package/tests/createElement.test.ts

@@ -14,8 +14,8 @@ describe("createElement", () => {
   it("creates an element with string children as text nodes", () => {
     const vnode = createElement("span", null, "hello");
     expect(vnode.props.children).toHaveLength(1);
-    expect(vnode.props.children![0].type).toBe("TEXT");
-    expect(vnode.props.children![0].props.nodeValue).toBe("hello");
+    expect((vnode.props.children as unknown as any[])[0].type).toBe("TEXT");
+    expect((vnode.props.children as unknown as any[])[0].props.nodeValue).toBe("hello");
   });
 
   it("creates nested elements", () => {
@@ -27,8 +27,8 @@ describe("createElement", () => {
     );
     expect(vnode.type).toBe("div");
     expect(vnode.props.children).toHaveLength(2);
-    expect(vnode.props.children![0].type).toBe("img");
-    expect(vnode.props.children![1].type).toBe("span");
+    expect((vnode.props.children as unknown as any[])[0].type).toBe("img");
+    expect((vnode.props.children as unknown as any[])[1].type).toBe("span");
   });
 
   it("flattens array children", () => {
@@ -44,7 +44,7 @@ describe("createElement", () => {
   it("filters out null, undefined, and boolean children", () => {
     const vnode = createElement("div", null, null, undefined, false, true, "text");
     expect(vnode.props.children).toHaveLength(1);
-    expect(vnode.props.children![0].type).toBe("TEXT");
+    expect((vnode.props.children as unknown as any[])[0].type).toBe("TEXT");
   });
 
   it("retains function type for components (deferred)", () => {
@@ -60,7 +60,7 @@ describe("createElement", () => {
   it("converts numbers to text nodes", () => {
     const vnode = createElement("span", null, 42);
     expect(vnode.props.children).toHaveLength(1);
-    expect(vnode.props.children![0].props.nodeValue).toBe("42");
+    expect((vnode.props.children as unknown as any[])[0].props.nodeValue).toBe("42");
   });
 
   it("extracts key from props", () => {

package/tests/poc-compat.test.ts

@@ -0,0 +1,69 @@
+
+import { describe, test, expect, vi } from "vitest";
+import { render } from "../src/refract/render.js";
+import { createElement } from "../src/refract/createElement.js";
+import { useSyncExternalStore, useState } from "../src/refract/compat/react.js";
+import { setReactCompatEventMode } from "../src/refract/dom.js";
+
+// Enable compat mode
+setReactCompatEventMode(true);
+
+describe("POC Compatibility", () => {
+  test("useSyncExternalStore basic subscription", async () => {
+    let listeners: (() => void)[] = [];
+    const store = {
+      value: 0,
+      subscribe(l: () => void) {
+        listeners.push(l);
+        return () => {
+          listeners = listeners.filter(x => x !== l);
+        };
+      },
+      getSnapshot() {
+        return store.value;
+      },
+      increment() {
+        store.value++;
+        listeners.forEach(l => l());
+      }
+    };
+
+    function StoreComponent() {
+      const val = useSyncExternalStore(store.subscribe, store.getSnapshot);
+      return createElement("div", {}, `Value: ${val}`);
+    }
+
+    const container = document.createElement("div");
+    render(createElement(StoreComponent, null), container);
+
+    expect(container.textContent).toBe("Value: 0");
+
+    store.increment();
+    // Wait for microtasks/updates
+    await new Promise(r => setTimeout(r, 0));
+    
+    expect(container.textContent).toBe("Value: 1");
+  });
+
+  test("onChange maps to input for text inputs", async () => {
+    const handleChange = vi.fn();
+
+    function InputComponent() {
+      return createElement("input", { type: "text", onChange: handleChange });
+    }
+
+    const container = document.createElement("div");
+    render(createElement(InputComponent, null), container);
+
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+
+    // Simulate input event (which React treats as change)
+    const event = new Event("input", { bubbles: true });
+    input?.dispatchEvent(event);
+
+    // In standard DOM, onChange doesn't fire on input, but React compat should handle this?
+    // If not implemented, this will fail, confirming the need for the fix.
+    expect(handleChange).toHaveBeenCalled();
+  });
+});

package/tests/react-router-smoke.test.ts

@@ -38,7 +38,7 @@ describe("react-router-dom compatibility smoke", () => {
       ),
     );
     expect(tree.type).toBe(MemoryRouter);
-    expect((tree.props.children as unknown[]).length).toBe(1);
+    expect(React.Children.count(tree.props.children)).toBe(1);
   });
 
   it("supports hook dispatcher bridging for externally-resolved React", async () => {