utils_react-nexacro_root.js

import { NexacroReconciler } from "./reconciler";

/**
 * @typedef {Object} NexacroRoot
 * @property {function(React.ReactElement): void} render
 * React 엘리먼트를 넥사크로 컨테이너에 렌더링합니다.
 * @property {function(): void} unmount
 * 렌더링된 컴포넌트를 제거하고 루트를 해제합니다.
 */

/**
 * 넥사크로 컴포넌트 트리의 렌더 루트를 생성합니다.
 * React DOM의 `createRoot`와 유사한 인터페이스를 제공합니다.
 *
 * @function createNexacroRoot
 * @param {nexacro.Div | nexacro.Form} container
 * - 렌더링 대상 넥사크로 컨테이너 (Div 또는 Form)
 * @returns {NexacroRoot}
 * 렌더링 및 해제를 위한 루트 객체
 * @memberof $react
 * @example
 * const root = createNexacroRoot(this.div_container);
 * root.render(React.createElement(MyApp));
 *
 */
export function createNexacroRoot(container) {
    const root = NexacroReconciler.createContainer(
        container,
        0, // ConcurrentMode 아님
        null,
        false,
        null,
        "",
        () => {},
        null,
    );

    return {
        render(element) {
            // updateContainerSync: 동기적으로 즉시 커밋 (넥사크로 환경에서 스케줄러 미동작 대응)
            if (typeof NexacroReconciler.updateContainerSync === "function") {
                NexacroReconciler.updateContainerSync(
                    element,
                    root,
                    null,
                    null,
                );
            } else {
                NexacroReconciler.updateContainer(element, root, null, null);
            }
        },
        unmount() {
            NexacroReconciler.updateContainer(null, root, null, null);
        },
    };
}