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

let locator = locatorFor({ module: 'ui/components/main', name: 'default' });
    // bundleCompiler.add(locator, template);
    this.addRegisteredComponents(bundleCompiler);

    let compilationResult = bundleCompiler.compile();

    let handle = compilationResult.table.vmHandleByModuleLocator.get(locator)!;

    let cursor = { element, nextSibling: null };
    let runtime = this.getRuntimeContext(compilationResult);
    let builder = this.getElementBuilder(runtime.env, cursor);
    let self = this.getSelf(context);

    let iterator = renderAotMain(runtime, self, builder, handle);

    return renderSync(runtime.env, iterator);
  }
}

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) {
            //     Application.currentPageNode.childNodes.push(listViewWrapperElement);
            //     listViewWrapperElement.parentNode = Application.currentPageNode;
            // }
            node.component = component;

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;
        }
        catch (error) {
            console.log(`Error rendering page ${name}: ${error}`);

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}`);
        }
    }

export function renderTemplate(
  src: string,
  { runtime, syntax }: JitTestDelegateContext,
  self: PathReference,
  builder: ElementBuilder
): RenderResult {
  let template = preprocess(src);
  let iterator = renderJitMain(runtime, syntax, self, builder, template.asLayout().compile(syntax));
  return renderSync(runtime.env, iterator);
}

this.addRegisteredComponents(bundleCompiler);
    let compilationResult = bundleCompiler.compile();

    let cursor = { element, nextSibling: null };
    let runtime = this.getRuntimeContext(compilationResult);
    let builder = this.getElementBuilder(runtime.env, cursor);
    let iterator = renderAotComponent(
      runtime,
      builder,
      compilationResult.main,
      name,
      args,
      dyanmicScope
    );

    return renderSync(runtime.env, iterator);
  }

export function renderTemplate(
  src: string,
  { runtime, syntax }: JitTestDelegateContext,
  self: VersionedPathReference,
  builder: ElementBuilder
): RenderResult {
  let template = preprocess(src);
  let handle = unwrapTemplate(template)
    .asLayout()
    .compile(syntax);

  let iterator = renderJitMain(runtime, syntax, self, builder, unwrapHandle(handle));
  return renderSync(runtime.env, iterator);
}

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);
}

*/
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}`);
        }
    }