@roku-sdk/solid 0.0.0-stage → 2.18.0

package/src/solid.ts

@@ -0,0 +1,860 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { logger } from "@roku-sdk/common";
+import { createSDHelper } from "@roku-sdk/common/sd-helper";
+import { stringInterner } from "@roku-sdk/common/string-interner";
+import { registerPreCommitHook, transactionManager } from "@roku-sdk/common/transaction";
+import {
+    AnNodeRef,
+    DomNode,
+    NodeFieldChangeEvent,
+    PropValue,
+    StructuredDataApi,
+    TmArrayRef,
+    TmNodeRef,
+    TmObjectRef,
+    TmStringRef,
+    TmValue,
+    TreeManipulationApi
+} from "@roku-sdk/interfaces";
+import type { Component, JSX } from "solid-js";
+import { createMemo, splitProps, untrack } from "solid-js";
+import { createRenderer } from "solid-js/universal";
+export {
+    // Store — immutable
+    createStore,
+
+    // Store — mutable
+    createMutable,
+    modifyMutable,
+
+    // Store — modifiers
+    produce,
+    reconcile,
+    unwrap,
+
+    // Types
+    type ArrayFilterFn,
+    type DeepMutable,
+    type DeepReadonly,
+    type NotWrappable,
+    type Part,
+    type ReconcileOptions,
+    type SetStoreFunction,
+    type SolidStore,
+    type Store,
+    type StoreNode,
+    type StorePathRange,
+    type StoreSetter
+} from "solid-js/store";
+
+// Re-export solid-js APIs that are functional within the solid-js/universal renderer model.
+// Platform-incompatible features (SSR hydration, lazy dynamic imports, concurrent mode,
+// internal symbols) are explicitly excluded — see EXPORTS.md for the full rationale.
+export {
+    // Reactive primitives
+    createSignal,
+    createEffect,
+    createMemo,
+    createResource,
+    createComputed,
+    batch,
+    untrack,
+
+    // Secondary primitives
+    createSelector,
+    createReaction,
+    createRenderEffect,
+
+    // Transitions (deferred reactive commits; microtask-batched without a scheduler)
+    startTransition,
+    useTransition,
+
+    // Dependency helpers
+    on,
+    from,
+    observable,
+
+    // Array helpers (low-level primitives underlying <For> and <Index>)
+    mapArray,
+    indexArray,
+
+    // Lifecycle
+    onMount,
+    onCleanup,
+
+    // Error handling
+    catchError,
+    resetErrorBoundaries,
+
+    // Context
+    createContext,
+    useContext,
+
+    // Owner management
+    getOwner,
+    runWithOwner,
+
+    // Dev-mode API (undefined in production builds)
+    DEV,
+
+    // Props utilities
+    mergeProps,
+    splitProps,
+
+    // Components and JSX
+    Show,
+    For,
+    Index,
+    children,
+    ErrorBoundary,
+    Suspense,
+    Switch,
+    Match,
+    createRoot,
+    createUniqueId
+} from "solid-js";
+
+export type {
+    Accessor,
+    AccessorArray,
+    ChildrenReturn,
+    Component,
+    ComponentProps,
+    Context,
+    ContextProviderComponent,
+    EffectFunction,
+    EffectOptions,
+    FlowComponent,
+    FlowProps,
+    InitializedResource,
+    InitializedResourceOptions,
+    InitializedResourceReturn,
+    JSX,
+    JSXElement,
+    MemoOptions,
+    MergeProps,
+    NoInfer,
+    ObservableObserver,
+    OnOptions,
+    Owner,
+    ParentComponent,
+    ParentProps,
+    Ref,
+    ResolvedChildren,
+    ResolvedJSXElement,
+    Resource,
+    ResourceActions,
+    ResourceFetcher,
+    ResourceFetcherInfo,
+    ResourceOptions,
+    ResourceReturn,
+    ResourceSource,
+    Setter,
+    Signal,
+    SignalOptions,
+    SplitProps,
+    Transition,
+    ValidComponent,
+    VoidComponent,
+    VoidProps
+} from "solid-js";
+
+import { createDomNode, isDomNode, setBlurHandler, setFocusHandler, setSetPropertyHandler } from "./dom-node";
+import { commitFocus, focusNodeRemoved, initFocus, releaseFocus, requestFocus, resetFocus } from "./focus";
+const solidLogger = logger.getLogger("fwk");
+
+type TmTransaction = {
+    createElement(tag: string): DomNode;
+    setProperty(node: DomNode, name: string, value: TmValue, prev?: TmValue): void;
+    insertNode(parent: DomNode, node: DomNode, anchor?: DomNode): void;
+    removeNode(parent: DomNode, child: DomNode): void;
+    preCommit(): void;
+};
+
+export interface Renderer<NodeType> {
+    render(code: () => NodeType, node: NodeType): () => void;
+    effect<T>(fn: (prev?: T) => T, init?: T): void;
+    memo<T>(fn: () => T, equal: boolean): () => T;
+    createComponent<T>(Comp: (props: T) => NodeType, props: T): NodeType;
+    createElement(tag: string): NodeType;
+    createTextNode(value: string): NodeType;
+    insertNode(parent: NodeType, node: NodeType, anchor?: NodeType): void;
+    insert<T>(parent: NodeType, accessor: (() => T) | T, marker?: NodeType | null): NodeType;
+    spread<T>(node: NodeType, accessor: (() => T) | T, skipChildren?: boolean): void;
+    setProp<T>(node: NodeType, name: string, value: T, prev?: T): T;
+    use<A, T>(fn: (element: NodeType, arg: A) => T, element: NodeType, arg: A): T;
+}
+
+type EventCallback = (...args: unknown[]) => void;
+export interface SolidRenderer {
+    renderer: Renderer<DomNode>;
+    tmFieldChangeHandlerApi: NodeFieldChangeEvent;
+}
+export interface MakeRenderer {
+    createRenderer: () => Renderer<DomNode>;
+    destroyRenderer: () => void;
+    tmFieldChangeHandlerApi: NodeFieldChangeEvent;
+}
+
+type DynamicFnProps<T extends object> = {
+    component: Component<T> | null | undefined;
+} & Omit<T, "component">;
+
+type DynamicIntrinsicProps<K extends keyof JSX.IntrinsicElements> = {
+    component: K;
+} & JSX.IntrinsicElements[K];
+
+export function Dynamic<T extends object>(props: DynamicFnProps<T>): JSX.Element;
+export function Dynamic<K extends keyof JSX.IntrinsicElements>(props: DynamicIntrinsicProps<K>): JSX.Element;
+export function Dynamic(props: { component: unknown }): JSX.Element {
+    const [local, others] = splitProps(props, ["component"] as const);
+
+    return createMemo(() => {
+        const component = local.component;
+
+        if (typeof component === "function") {
+            return untrack(() =>
+                createComponent(component as unknown as (componentProps: typeof others) => DomNode, others)
+            );
+        }
+
+        if (typeof component === "string") {
+            const node = createElement(component);
+            untrack(() => spread(node, others, false));
+            return node;
+        }
+
+        return null;
+    }) as unknown as JSX.Element;
+}
+
+let tmApi: TreeManipulationApi;
+let createFullArray: (array: unknown[]) => TmArrayRef;
+let createFullObject: (props: object) => TmObjectRef;
+let sdCommit: () => void;
+const observerCallbacks = new WeakMap<TmNodeRef, WeakMap<TmStringRef, EventCallback>>();
+
+// Tree calls identify their target by node refs; anchor node ref is ignored.
+const NO_ANCHOR: AnNodeRef = Object.freeze({});
+
+// Local to the transaction.
+const nodesToRemove = new Set<DomNode>();
+
+// PanelSet orders children by append sequence and ignores the position passed to
+// insertChild, so its children are attached natively in preCommit, in final order.
+// Entries are never evicted early: a node that was removed or re-parented no longer
+// has the pending parent as `parent`, and flushPendingAppends skips it.
+// The tag is compared as a literal because the check runs on every insert.
+const pendingAppendParents = new Set<DomNode>();
+const pendingAppendChildren = new Set<DomNode>();
+// Mirrors "pendingAppendParents is non-empty" without a Map/Set size getter on hot paths.
+let appendsPending = false;
+
+/** First child at or after `start` that is already attached natively. */
+function nextNativeSibling(children: DomNode[], start: number): DomNode | undefined {
+    for (let i = start; i < children.length; i++) {
+        const child = children[i];
+        if (child && !pendingAppendChildren.has(child)) {
+            return child;
+        }
+    }
+    return undefined;
+}
+
+function warnUnorderedAppendOnlyInsert(parent: DomNode, node: DomNode, anchor: DomNode): void {
+    solidLogger.warn(
+        () =>
+            `${parent.t} only appends children: ${node.t} placed before ${anchor.t} may not keep that position in SceneGraph`
+    );
+}
+
+function insertIntoAppendOnlyParent(parent: DomNode, node: DomNode, anchor: DomNode | undefined): void {
+    const children = (parent.c = parent.c || []);
+    const nodeIdx = children.indexOf(node);
+    if (nodeIdx !== -1) {
+        children.splice(nodeIdx, 1);
+    }
+    node.parent = parent;
+    let anchorIdx = anchor ? children.indexOf(anchor) : -1;
+    if (anchorIdx === -1) {
+        anchorIdx = children.length;
+    }
+    children.splice(anchorIdx, 0, node);
+
+    if (nodeIdx === -1 || (appendsPending && pendingAppendChildren.has(node))) {
+        appendsPending = true;
+        pendingAppendChildren.add(node);
+        pendingAppendParents.add(parent);
+        solidLogger.trace(() => `insertNode: ${node.t} deferred to commit in parent: ${parent.t}`);
+        return;
+    }
+
+    // Moving an attached child: pending siblings are not in SceneGraph yet, so anchor on the next attached one.
+    const next = nextNativeSibling(children, anchorIdx + 1);
+    if (next) {
+        warnUnorderedAppendOnlyInsert(parent, node, next);
+        tmApi.insertNodeBefore(NO_ANCHOR, parent.r, node.r, next.r);
+    } else {
+        tmApi.appendNode(NO_ANCHOR, parent.r, node.r);
+    }
+    solidLogger.trace(() => `insertNode: moved ${node.t} in parent: ${parent.t}`);
+}
+
+function resetPendingAppends(): void {
+    pendingAppendParents.clear();
+    pendingAppendChildren.clear();
+    appendsPending = false;
+}
+
+function flushPendingAppends(): void {
+    pendingAppendParents.forEach(parent => {
+        const children = parent.c ?? [];
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (!child || child.parent !== parent || !pendingAppendChildren.delete(child)) {
+                continue;
+            }
+            const next = nextNativeSibling(children, i + 1);
+            if (next) {
+                warnUnorderedAppendOnlyInsert(parent, child, next);
+                tmApi.insertNodeBefore(NO_ANCHOR, parent.r, child.r, next.r);
+            } else {
+                tmApi.appendNode(NO_ANCHOR, parent.r, child.r);
+            }
+        }
+    });
+    resetPendingAppends();
+}
+
+function getParent(node: DomNode): DomNode | undefined {
+    return node.parent;
+}
+
+// TODO: Time this operation
+const removeNodeRecursively = (node: DomNode) => {
+    const attachParent = node.parent;
+    const stack = [node];
+    while (stack.length > 0) {
+        const currentNode = stack.pop();
+        if (!currentNode) {
+            continue;
+        }
+        if (currentNode.c) {
+            stack.push(...currentNode.c);
+        }
+
+        focusNodeRemoved(currentNode, attachParent);
+
+        if (currentNode.r) {
+            observerCallbacks.delete(currentNode.r);
+            // NOTE: We can call unregisterFieldHandler here.
+            // We are not doing it because removeNode must anyway unregister all the field handlers on native side
+
+            // clear parent pointer
+            currentNode.parent = undefined;
+        }
+    }
+};
+
+// Invoked only from unit tests
+export function cleanUp(): void {
+    nodesToRemove.clear();
+    resetPendingAppends();
+    resetFocus();
+}
+
+// Cache for event handler property name classification
+const isEventHandlerCache = new Map<string, boolean>();
+const eventNameTransformCache = new Map<string, string>();
+
+function isEventHandler(key: string): boolean {
+    let result = isEventHandlerCache.get(key);
+    if (result === undefined) {
+        // Pattern: on[A-Z] - onStatus, onFocus, etc.
+        // Use charAt so noUncheckedIndexedAccess does not widen key[i] to string | undefined.
+        result =
+            key.length > 2 &&
+            key.charAt(0) === "o" &&
+            key.charAt(1) === "n" &&
+            key.charAt(2) >= "A" &&
+            key.charAt(2) <= "Z";
+        isEventHandlerCache.set(key, result);
+    }
+    return result;
+}
+
+function transformEventName(eventName: string): string {
+    let transformed = eventNameTransformCache.get(eventName);
+    if (transformed === undefined) {
+        // onFocus -> focus, onLoadStatus -> loadStatus
+        transformed = eventName.slice(2).charAt(0).toLowerCase() + eventName.slice(3);
+        eventNameTransformCache.set(eventName, transformed);
+    }
+    return transformed;
+}
+
+const tagAliases = new Map<string, () => string>();
+
+/**
+ * Route a JSX tag to a different SceneGraph node type, decided when each node is created.
+ * `resolve` runs on every creation of `tag`, so it must be cheap; it may throw to refuse
+ * creation outright. A later registration for the same tag replaces the earlier one.
+ *
+ * The created node's `t` is the resolved type, not `tag`: a check such as `node.t === "tween"`
+ * misses a node created as its shim, so match every type the alias can resolve to.
+ *
+ * @param tag - The JSX tag as written in source, e.g. `"tween"`.
+ * @param resolve - Returns the SceneGraph node type to create for `tag`.
+ */
+export const registerTagAlias = (tag: string, resolve: () => string): void => {
+    tagAliases.set(tag, resolve);
+};
+
+/** Whether {@link registerTagAlias} has been called for `tag`. */
+export const hasTagAlias = (tag: string): boolean => tagAliases.has(tag);
+
+export const tmTransaction: TmTransaction = {
+    createElement: (tag: string): DomNode => {
+        const sgType = tagAliases.size === 0 ? tag : (tagAliases.get(tag)?.() ?? tag);
+        const tagRef: TmStringRef | undefined = stringInterner.internString(sgType);
+        if (tagRef === undefined) {
+            throw new Error(`Tag not interned: ${sgType}`);
+        }
+        const nodeRef: TmNodeRef = tmApi.createNode(NO_ANCHOR, tagRef);
+        const element: DomNode = createDomNode(sgType, nodeRef);
+        solidLogger.trace(() => `createElement: ${tag === sgType ? tag : `${tag} as ${sgType}`}`);
+        return element;
+    },
+    setProperty: (node: DomNode, name: string, value: TmValue, prev?: TmValue): void => {
+        const nodeRef = node.r;
+        let eventProp = false;
+        if (isEventHandler(name)) {
+            name = transformEventName(name);
+            eventProp = true;
+        }
+        const propRef: TmStringRef | undefined = stringInterner.internString(name);
+        if (propRef === undefined) {
+            throw new Error(`Property not interned: ${name}`);
+        }
+
+        solidLogger.trace(() => `setProperty: node: ${node.t}, name: ${name}, value: ${value}, prev: ${prev}`);
+        if (eventProp) {
+            if (typeof prev === "function") {
+                tmApi.unregisterFieldHandler(NO_ANCHOR, node.r, propRef);
+            }
+
+            if (typeof value === "function") {
+                tmApi.registerFieldChangeHandler(NO_ANCHOR, node.r, propRef);
+            }
+
+            let callbacks = observerCallbacks.get(nodeRef);
+
+            if (!callbacks) {
+                callbacks = new WeakMap<TmStringRef, EventCallback>();
+                observerCallbacks.set(nodeRef, callbacks);
+            }
+            callbacks.set(propRef, value as () => void);
+            return;
+        } else {
+            switch (typeof value) {
+                case "boolean":
+                    if (name === "gainFocus") {
+                        if (value) {
+                            requestFocus(node);
+                        } else {
+                            releaseFocus(node);
+                        }
+                        break;
+                    }
+                    tmApi.setNodePropBool(NO_ANCHOR, nodeRef, propRef, value);
+                    break;
+                case "number":
+                    if (Number.isInteger(value)) {
+                        tmApi.setNodePropInt(NO_ANCHOR, nodeRef, propRef, value);
+                    } else {
+                        tmApi.setNodePropFloat(NO_ANCHOR, nodeRef, propRef, value);
+                    }
+                    break;
+                case "string":
+                    tmApi.setNodePropString(NO_ANCHOR, nodeRef, propRef, value);
+                    break;
+                case "object":
+                    if (value === null) {
+                        tmApi.setNodePropNull(NO_ANCHOR, nodeRef, propRef);
+                    } else if (Array.isArray(value)) {
+                        const arrayRef = createFullArray(value);
+                        tmApi.setNodePropArray(NO_ANCHOR, nodeRef, propRef, arrayRef);
+                    } else if (isDomNode(value as DomNode)) {
+                        tmApi.setNodePropNodeRef(NO_ANCHOR, nodeRef, propRef, (value as DomNode).r);
+                    } else {
+                        const objectRef: TmObjectRef = createFullObject(value);
+                        tmApi.setNodePropObject(NO_ANCHOR, nodeRef, propRef, objectRef);
+                    }
+                    break;
+            }
+        }
+
+        if (typeof prev === "object" && isDomNode(prev as DomNode)) {
+            nodesToRemove.add(prev as DomNode);
+        }
+    },
+    insertNode: (parent: DomNode, node: DomNode, anchor?: DomNode): void => {
+        // Do nothing if the node is anchor itself
+        if (node === anchor) {
+            return;
+        }
+        if (parent.t === "panelSet") {
+            insertIntoAppendOnlyParent(parent, node, anchor);
+            nodesToRemove.delete(node);
+            return;
+        }
+        // Remove the node if its already in the parent
+        if (parent.c) {
+            const nodeIdx = parent.c.indexOf(node);
+            if (nodeIdx !== -1) {
+                parent.c.splice(nodeIdx, 1);
+            }
+        }
+
+        // Plain assignment — `parent` slot is pre-defined as non-enumerable
+        // in createDomNode, so this hits the fast IC path.
+        node.parent = parent;
+        if (anchor && parent.c) {
+            const anchorIdx = parent.c.indexOf(anchor);
+            if (anchorIdx !== -1) {
+                parent.c.splice(anchorIdx, 0, node);
+            }
+            tmApi.insertNodeBefore(NO_ANCHOR, parent.r, node.r, anchor.r);
+            solidLogger.trace(() => `insertNode: ${node.t} before anchor: ${anchor.t} in parent: ${parent.t}`);
+        } else {
+            parent.c = parent.c || [];
+            parent.c.push(node);
+            tmApi.appendNode(NO_ANCHOR, parent.r, node.r);
+            solidLogger.trace(() => `appendNode: ${node.t} to parent: ${parent.t}`);
+        }
+
+        if (nodesToRemove.has(node)) {
+            nodesToRemove.delete(node);
+        }
+    },
+    removeNode: (parent: DomNode, child: DomNode): void => {
+        if (parent.c) {
+            const childIdx = parent.c.indexOf(child);
+            if (childIdx !== -1) {
+                parent.c.splice(childIdx, 1);
+            }
+        }
+
+        nodesToRemove.add(child);
+    },
+    // Note: Precomit is used to remove nodes & set focus.
+    // Node removal is done later as solid.js can remove & attach nodes in the same transaction.
+    // Focus is set at the end of the transaction as focus changes are lost of setFocus is called in middle of the transaction.
+    preCommit: () => {
+        nodesToRemove.forEach(node => {
+            const parent = getParent(node);
+            // NOTE: Parent might be missing if the node is assigned as as prop
+            if (parent && !(appendsPending && parent.t === "panelSet" && pendingAppendChildren.has(node))) {
+                tmApi.removeNode(NO_ANCHOR, parent.r, node.r);
+                solidLogger.trace(() => `removeNode: ${node.t} from parent: ${parent.t}`);
+            }
+            removeNodeRecursively(node);
+        });
+        if (appendsPending) {
+            flushPendingAppends();
+        }
+
+        commitFocus();
+
+        nodesToRemove.clear();
+        sdCommit();
+    }
+};
+
+registerPreCommitHook(tmTransaction.preCommit);
+setSetPropertyHandler((node, name, value) => {
+    transactionManager.startTransaction();
+    tmTransaction.setProperty(node, name, value);
+});
+setFocusHandler((focusNode: DomNode) => {
+    transactionManager.startTransaction();
+    requestFocus(focusNode);
+});
+setBlurHandler((blurNode: DomNode) => {
+    transactionManager.startTransaction();
+    releaseFocus(blurNode);
+    solidLogger.trace(() => `setBlur: ${blurNode.t}`);
+});
+
+function createSolidRenderer(): Renderer<DomNode> {
+    return createRenderer<DomNode>({
+        createElement(tag: string): DomNode {
+            transactionManager.startTransaction();
+            return tmTransaction.createElement(tag);
+        },
+        createTextNode(value: string): DomNode {
+            if (value !== "") {
+                solidLogger.warn(
+                    () => `Text content "${value}" is not rendered on Roku SceneGraph. Use <label> for text display.`
+                );
+            }
+            transactionManager.startTransaction();
+            return tmTransaction.createElement("group");
+        },
+        replaceText(textNode: DomNode, value: string): void {
+            solidLogger.trace(() => `replaceText: textNode: ${textNode} value: ${value}`);
+            return;
+        },
+        isTextNode(node: DomNode): boolean {
+            solidLogger.trace(() => `isTextNode node: ${JSON.stringify(node)}`);
+            return false;
+        },
+        setProperty<T>(node: DomNode, name: string, value: T, prev?: T): void {
+            transactionManager.startTransaction();
+            tmTransaction.setProperty(node, name, value as TmValue, prev as TmValue);
+        },
+        insertNode(parent: DomNode, node: DomNode, anchor?: DomNode): void {
+            transactionManager.startTransaction();
+            tmTransaction.insertNode(parent, node, anchor);
+        },
+        removeNode(parent: DomNode, child: DomNode): void {
+            transactionManager.startTransaction();
+            tmTransaction.removeNode(parent, child);
+        },
+        getParentNode(node: DomNode): DomNode | undefined {
+            return getParent(node);
+        },
+        getFirstChild(node: DomNode): DomNode | undefined {
+            return node?.c?.[0] ?? undefined;
+        },
+        getNextSibling(node: DomNode): DomNode | undefined {
+            const parent = getParent(node);
+            if (parent && parent.c) {
+                return parent.c[parent.c.indexOf(node) + 1] ?? undefined;
+            }
+            return undefined;
+        }
+    });
+}
+
+function destroySolidRenderer(): void {
+    // no-op
+}
+
+function makeRendererFactory(
+    type: string,
+    api: TreeManipulationApi,
+    incomingSDApi: StructuredDataApi,
+    outgoingSDApi: StructuredDataApi
+): MakeRenderer {
+    tmApi = api;
+    initFocus(api, solidLogger, NO_ANCHOR);
+    ({ createFullArray, createFullObject, commit: sdCommit } = createSDHelper(outgoingSDApi));
+
+    const fieldChangeHandler = (() => {
+        const invokeCallback = (_anRef: AnNodeRef, nodeRef: TmNodeRef, fieldRef: TmStringRef, value: PropValue) => {
+            const callbacks = observerCallbacks.get(nodeRef);
+            if (callbacks) {
+                const callback = callbacks.get(fieldRef);
+                if (callback && typeof callback === "function") {
+                    callback(value);
+                }
+            }
+        };
+
+        return {
+            onNodeNullFieldChange: (anRef: AnNodeRef, nodeRef: TmNodeRef, fieldRef: TmStringRef) => {
+                invokeCallback(anRef, nodeRef, fieldRef, null);
+            },
+            onNodeBoolFieldChange: (anRef: AnNodeRef, nodeRef: TmNodeRef, fieldRef: TmStringRef, value: boolean) => {
+                invokeCallback(anRef, nodeRef, fieldRef, value);
+            },
+            onNodeIntFieldChange: (anRef: AnNodeRef, nodeRef: TmNodeRef, fieldRef: TmStringRef, value: number) => {
+                invokeCallback(anRef, nodeRef, fieldRef, value);
+            },
+            onNodeFloatFieldChange: (anRef: AnNodeRef, nodeRef: TmNodeRef, fieldRef: TmStringRef, value: number) => {
+                invokeCallback(anRef, nodeRef, fieldRef, value);
+            },
+            onNodeStringFieldChange: (anRef: AnNodeRef, nodeRef: TmNodeRef, fieldRef: TmStringRef, value: string) => {
+                invokeCallback(anRef, nodeRef, fieldRef, value);
+            },
+            onNodeObjectFieldChange: (
+                anRef: AnNodeRef,
+                nodeRef: TmNodeRef,
+                fieldRef: TmStringRef,
+                valueRef: TmObjectRef
+            ) => {
+                const data = incomingSDApi.getObject(valueRef);
+                if (!data) {
+                    solidLogger.error(() => `Failed to get object from ref`);
+                    return;
+                }
+                invokeCallback(anRef, nodeRef, fieldRef, data as PropValue);
+            },
+            onNodeArrayFieldChange: (
+                anRef: AnNodeRef,
+                nodeRef: TmNodeRef,
+                fieldRef: TmStringRef,
+                valueRef: TmArrayRef
+            ) => {
+                const data = incomingSDApi.getArray(valueRef);
+                if (!data) {
+                    solidLogger.error(() => `Failed to get array from ref`);
+                    return;
+                }
+                invokeCallback(anRef, nodeRef, fieldRef, data as PropValue);
+            }
+        };
+    })();
+
+    return {
+        createRenderer: createSolidRenderer,
+        destroyRenderer: destroySolidRenderer,
+        tmFieldChangeHandlerApi: fieldChangeHandler
+    };
+}
+
+function throwUninitializedRendererHook(hookName: string): never {
+    throw new Error(
+        `@roku-sdk/solid internal hook "${hookName}" was called before renderer initialization. ` +
+            `Ensure makeSolidRenderer() runs via @roku-sdk/rsg-ts setUp() before rendering JSX.`
+    );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function uninitializedHook(name: string): (...args: any[]) => never {
+    return () => throwUninitializedRendererHook(name);
+}
+
+export let effect: <T>(fn: (prev?: T) => T, init?: T) => void,
+    memo: <T>(fn: () => T, equal: boolean) => () => T,
+    createComponent: <T>(Comp: (props: T) => DomNode, props: T) => DomNode,
+    createElement: (tag: string) => DomNode,
+    createTextNode: (value: string) => DomNode,
+    insertNode: (parent: DomNode, node: DomNode, anchor?: DomNode) => void,
+    insert: <T>(parent: DomNode, accessor: (() => T) | T, marker?: DomNode | null) => DomNode,
+    spread: <T>(node: DomNode, accessor: (() => T) | T, skipChildren?: boolean) => void,
+    setProp: <T>(node: DomNode, name: string, value: T, prev?: T) => T,
+    use: <A, T>(fn: (element: DomNode, arg: A) => T, element: DomNode, arg: A) => T;
+
+// Guard all hooks against accidental use before makeSolidRenderer() wires them.
+effect = uninitializedHook("effect") as typeof effect;
+memo = uninitializedHook("memo") as typeof memo;
+createComponent = uninitializedHook("createComponent") as typeof createComponent;
+createElement = uninitializedHook("createElement") as typeof createElement;
+createTextNode = uninitializedHook("createTextNode") as typeof createTextNode;
+insertNode = uninitializedHook("insertNode") as typeof insertNode;
+insert = uninitializedHook("insert") as typeof insert;
+spread = uninitializedHook("spread") as typeof spread;
+setProp = uninitializedHook("setProp") as typeof setProp;
+use = uninitializedHook("use") as typeof use;
+
+export function makeSolidRenderer(
+    api: TreeManipulationApi,
+    incomingSDApi: StructuredDataApi,
+    outgoingSDApi: StructuredDataApi
+): SolidRenderer {
+    // No reason to destroy the renderer. Dispose function need to be called to clean up the resources
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { createRenderer, destroyRenderer, tmFieldChangeHandlerApi } = makeRendererFactory(
+        "solid",
+        api,
+        incomingSDApi,
+        outgoingSDApi
+    );
+    const renderer = createRenderer();
+    ({ effect, memo, createComponent, createElement, createTextNode, insertNode, insert, spread, setProp, use } =
+        renderer);
+
+    // Wrap spread to ensure event handlers are registered before regular props
+    const originalSpread = spread;
+    spread = <T>(node: DomNode, accessor: (() => T) | T, skipChildren?: boolean) => {
+        // Helper to create reordered proxy from props object
+        const createReorderedProxy = (propsObj: Record<string, unknown>) => {
+            const keys = Object.keys(propsObj);
+
+            // If empty object or only one property, no need to reorder
+            if (keys.length <= 1) {
+                return propsObj;
+            }
+
+            const eventHandlers: string[] = [];
+            const regularProps: string[] = [];
+            let needsReorder = false;
+            let seenRegularProp = false;
+
+            // Partition using cached results and check if already ordered
+            for (let i = 0; i < keys.length; i++) {
+                const key = keys[i];
+                if (key === undefined) {
+                    continue;
+                }
+                if (isEventHandler(key)) {
+                    // If we've already seen a regular prop, order is wrong
+                    if (seenRegularProp) {
+                        needsReorder = true;
+                    }
+                    eventHandlers.push(key);
+                } else {
+                    seenRegularProp = true;
+                    regularProps.push(key);
+                }
+            }
+
+            // If all same type, no need to reorder
+            if (eventHandlers.length === 0 || regularProps.length === 0) {
+                return propsObj;
+            }
+
+            // If already in correct order, return original object
+            if (!needsReorder) {
+                return propsObj;
+            }
+
+            // Create ordered keys array: event handlers first, then regular props
+            const orderedKeys = [...eventHandlers, ...regularProps];
+
+            // Create a Proxy that preserves reactive getters but controls key iteration order
+            return new Proxy(propsObj, {
+                ownKeys: () => orderedKeys,
+                get: (target, prop) => target[prop as keyof typeof target],
+                getOwnPropertyDescriptor: (target, prop) => {
+                    // Return original descriptor to preserve references and avoid breaking equality checks
+                    if (orderedKeys.includes(prop as string)) {
+                        return Object.getOwnPropertyDescriptor(target, prop);
+                    }
+                    return undefined;
+                }
+            });
+        };
+
+        // Handle function accessors - defer evaluation to preserve reactive tracking
+        if (typeof accessor === "function") {
+            const wrappedAccessor = () => {
+                const props = (accessor as () => T)();
+                if (props && typeof props === "object" && !Array.isArray(props)) {
+                    return createReorderedProxy(props as Record<string, unknown>);
+                }
+                return props;
+            };
+            originalSpread(node, wrappedAccessor, skipChildren);
+        } else {
+            // Handle static objects
+            if (accessor && typeof accessor === "object" && !Array.isArray(accessor)) {
+                const reordered = createReorderedProxy(accessor as Record<string, unknown>);
+                originalSpread(node, reordered, skipChildren);
+            } else {
+                originalSpread(node, accessor, skipChildren);
+            }
+        }
+    };
+
+    // Update the renderer object with the wrapped spread
+    renderer.spread = spread;
+    return {
+        renderer,
+        tmFieldChangeHandlerApi
+    };
+}