How to use the @glimmer/runtime.renderAot function in @glimmer/runtime

static _renderComponent(name, cursor, compilable, data) {
        let state = State(data);
        const artifact = artifacts(Application.context);
        const runtime = AotRuntime(Application.document, artifact, Application.resolver);
        let iterator = renderAot(runtime, compilable, cursor, state);
        // const treeBuilder = NewElementBuilder.forInitialRender(runtime.env, cursor);
        // let iterator = renderAotMain(runtime, state, treeBuilder, compilable);
        try {
            const result = renderSync(runtime.env, iterator);
            console.log(`Component ${name} Rendered`);
            let node = result.firstNode();
            while (node && !node._nativeElement) {
                node = node.nextSibling;
            }
            const component = new NativeComponentResult(name, result, state, runtime);
            if (!Application.currentPageNode.listViewItems) {
                Application.currentPageNode.listViewItems = [];
            }
            Application.currentPageNode.listViewItems.push({ component, cursor });
            // const listViewWrapperElement = node.parentNode;
            // if (!listViewWrapperElement.parentNode) {

static _renderComponent(name: string, cursor: Cursor, compilable: number, data: {}): ElementNode {
        let state = State(data);
        const artifact = artifacts(Application.context);
        const runtime = AotRuntime(Application.document as any, artifact, Application.resolver);
        let iterator = renderAot(runtime, compilable, cursor, state);
        // const treeBuilder = NewElementBuilder.forInitialRender(runtime.env, cursor);
        // let iterator = renderAotMain(runtime, state, treeBuilder, compilable);
        try {
            const result = renderSync(runtime.env, iterator);
            console.log(`Component ${name} Rendered`);
            let node = result.firstNode() as any;
            while (!node._nativeView) {
                node = node.nextSibling;
            }
            node.meta.component = new NativeComponentResult(name, result, state, runtime);
            return node as any;
        } catch (error) {
            console.log(`Error rendering component ${name}: ${error}`);
        }
    }

static _renderPage(name, containerElement, nextSibling, compilable, data = {}) {
        let state = State(data);
        const artifact = artifacts(Application.context);
        Application.aotRuntime = AotRuntime(Application.document, artifact, Application.resolver);
        const cursor = { element: containerElement ? containerElement : Application.rootFrame, nextSibling };
        let iterator = renderAot(Application.aotRuntime, compilable, cursor, state);
        try {
            const result = renderSync(Application.aotRuntime.env, iterator);
            console.log(`Page ${name} Rendered`);
            Application.result = result;
            Application._rendered = true;
            let node = result.firstNode();
            while (node && !node._nativeElement) {
                node = node.nextSibling;
            }
            // (node as PageElement).parentNode = containerElement;
            Application.currentPageNode = node;
            Application.currentPageNode.listViewItems = [];
            // containerElement.childNodes.push(node);
            node.component = new NativeComponentResult(name, result, state, Application.aotRuntime);
            return node;
        }

*/
let runtime = runtime_1.Runtime(document, payload, env_1.RUNTIME_RESOLVER);
/**
 * Create an `UpdatableReference` for the value of `this` in the module. Using an
 * UpdatableReference allows us to change it later and re-render the output.
 */
let state = object_reference_1.State({ suffix: '!', num: 5 });
/**
 * Create a new element to render into.
 */
let element = document.createElement('main');
/**
 * Create a cursor position for the rendering, which is just the element itself.
 */
let cursor = { element, nextSibling: null };
let iterator = runtime_1.renderAot(runtime, main, cursor, state);
let result = runtime_1.renderSync(runtime.env, iterator);
console.log(serialize(element));
state.update({ suffix: '?', num: 10 });
result.rerender();
console.log(serialize(element));
function serialize(element) {
    return new serializer_1.default(void_map_1.default).serialize(element);
}

* Create an `UpdatableReference` for the value of `this` in the module. Using an
 * UpdatableReference allows us to change it later and re-render the output.
 */
let state = State({ suffix: '!', num: 5 });

/**
 * Create a new element to render into.
 */
let element = document.createElement('main');

/**
 * Create a cursor position for the rendering, which is just the element itself.
 */
let cursor: Cursor = { element, nextSibling: null };

let iterator = renderAot(runtime, main, cursor, state);

let result = renderSync(runtime.env, iterator);

console.log(serialize(element));

state.update({ suffix: '?', num: 10 });

result.rerender();
console.log(serialize(element));

function serialize(element: SimpleElement) {
  return new Serializer(voidMap).serialize(element);
}

static _renderPage(name, containerElement, nextSibling, compilable, data = {}): ElementNode {
        let state = State(data);
        const artifact = artifacts(Application.context);
        Application.aotRuntime = AotRuntime(Application.document as any, artifact, Application.resolver);
        const cursor = { element: containerElement ? containerElement : Application.rootFrame, nextSibling };
        let iterator = renderAot(Application.aotRuntime, compilable, cursor, state);
        try {
            const result = renderSync(Application.aotRuntime.env, iterator);
            console.log(`Page ${name} Rendered`);
            Application.result = result;
            Application._rendered = true;
            let node = result.firstNode() as any;
            while (!node._nativeView) {
                node = node.nextSibling;
            }
            node._meta.component = new NativeComponentResult(name, result, state, Application.aotRuntime);
            return node as any;
        } catch (error) {
            console.log(`Error rendering page ${name}: ${error}`);
        }
    }