How to use @glimmer/runtime - 10 common examples

constructor(options: TestEnvironmentOptions = {}) {
    // let document = options.document || window.document;
    // let appendOperations = options.appendOperations || new DOMTreeConstruction(document);
    super({
      appendOperations: options.appendOperations || new DOMTreeConstruction(options.document as Document || window.document),
      updateOperations: new DOMChanges((options.document || window.document) as Document)
    });

    // recursive field, so "unsafely" set one half late (but before the resolver is actually used)
    this.resolver['options'] = this.compileOptions;
    this.lookup = new LookupResolver(this.resolver);
    let document = options.document || window.document;

    this.uselessAnchor = document.createElement('a') as HTMLAnchorElement;
    this.registerHelper("if", ([cond, yes, no]) => cond ? yes : no);
    this.registerHelper("unless", ([cond, yes, no]) => cond ? no : yes);
    this.registerInternalHelper("-get-dynamic-var", getDynamicVar);
    this.registerModifier("action", new InertModifierManager());

    this.registerInternalHelper("hash", (_vm: VM, args: Arguments) => args.capture().named);
  }

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

constructor(options: TestEnvironmentOptions = {}) {
    // let document = options.document || window.document;
    // let appendOperations = options.appendOperations || new DOMTreeConstruction(document);
    super({
      appendOperations: options.appendOperations || new DOMTreeConstruction(options.document as Document || window.document),
      updateOperations: new DOMChanges((options.document || window.document) as Document)
    });

    // recursive field, so "unsafely" set one half late (but before the resolver is actually used)
    this.resolver['options'] = this.compileOptions;
    this.lookup = new LookupResolver(this.resolver);
    let document = options.document || window.document;

    this.uselessAnchor = document.createElement('a') as HTMLAnchorElement;
    this.registerHelper("if", ([cond, yes, no]) => cond ? yes : no);
    this.registerHelper("unless", ([cond, yes, no]) => cond ? no : yes);
    this.registerInternalHelper("-get-dynamic-var", getDynamicVar);
    this.registerModifier("action", new InertModifierManager());

    this.registerInternalHelper("hash", (_vm: VM, args: Arguments) => args.capture().named);
  }

renderMain(
    template: Template,
    self: PathReference,
    builder: ElementBuilder
  ): TemplateIterator {
    let layout = template.asLayout();
    let handle = layout.compile(this.context);
    // TODO, figure out runtime program stuff
    return renderJitMain(
      { program: this.program, env: this, resolver: this.resolver },
      this.context,
      self,
      builder,
      handle
    );
  }

constructor(options: TestEnvironmentOptions = {}) {
    // let document = options.document || window.document;
    // let appendOperations = options.appendOperations || new DOMTreeConstruction(document);
    super({
      appendOperations: options.appendOperations || new DOMTreeConstruction(options.document as Document || window.document),
      updateOperations: new DOMChanges((options.document || window.document) as Document)
    });

    // recursive field, so "unsafely" set one half late (but before the resolver is actually used)
    this.resolver['options'] = this.compileOptions;
    this.lookup = new LookupResolver(this.resolver);
    let document = options.document || window.document;

    this.uselessAnchor = document.createElement('a') as HTMLAnchorElement;
    this.registerHelper("if", ([cond, yes, no]) => cond ? yes : no);
    this.registerHelper("unless", ([cond, yes, no]) => cond ? no : yes);
    this.registerInternalHelper("-get-dynamic-var", getDynamicVar);
    this.registerModifier("action", new InertModifierManager());

    this.registerInternalHelper("hash", (_vm: VM, args: Arguments) => args.capture().named);
  }

}

      return false;
    });
  }
}

export class TestEnvironment extends Environment {
  public resolver = new TestResolver();
  private program = new Program(this.resolver);
  private uselessAnchor: HTMLAnchorElement;
  public compiledLayouts = dict();
  private lookup: LookupResolver;

  public compileOptions: TemplateOptions = {
    lookup: new LookupResolver(this.resolver),
    program: this.program,
    macros: new TestMacros(),
    Builder: LazyOpcodeBuilder
  };

  constructor(options: TestEnvironmentOptions = {}) {
    // let document = options.document || window.document;
    // let appendOperations = options.appendOperations || new DOMTreeConstruction(document);
    super({
      appendOperations: options.appendOperations || new DOMTreeConstruction(options.document as Document || window.document),
      updateOperations: new DOMChanges((options.document || window.document) as Document)
    });

    // recursive field, so "unsafely" set one half late (but before the resolver is actually used)
    this.resolver['options'] = this.compileOptions;
    this.lookup = new LookupResolver(this.resolver);

install(
    _element: Simple.Element,
    component: Component,
    rootRef: RootReference,
    parsed: [string, string, boolean],
    operations: ElementOperations
  ) {
    let [prop, attribute, isSimple] = parsed;

    if (attribute === 'id') {
      let elementId = get(component, prop);
      if (elementId === undefined || elementId === null) {
        elementId = component.elementId;
      }
      elementId = PrimitiveReference.create(elementId);
      operations.setAttribute('id', elementId, true, null);
      // operations.addStaticAttribute(element, 'id', elementId);
      return;
    }

    let isPath = prop.indexOf('.') > -1;
    let reference = isPath
      ? referenceForParts(rootRef, prop.split('.'))
      : referenceForKey(rootRef, prop);

    assert(
      `Illegal attributeBinding: '${prop}' is not a valid attribute name.`,
      !(isSimple && isPath)
    );

    if (

install(
    _element: Simple.Element,
    rootRef: RootReference,
    microsyntax: string,
    operations: ElementOperations
  ) {
    let [prop, truthy, falsy] = microsyntax.split(':');
    let isStatic = prop === '';

    if (isStatic) {
      operations.setAttribute('class', PrimitiveReference.create(truthy), true, null);
    } else {
      let isPath = prop.indexOf('.') > -1;
      let parts = isPath ? prop.split('.') : [];
      let value = isPath ? referenceForParts(rootRef, parts) : referenceForKey(rootRef, prop);
      let ref;

      if (truthy === undefined) {
        ref = new SimpleClassNameBindingReference(value, isPath ? parts[parts.length - 1] : prop);
      } else {
        ref = new ColonClassNameBindingReference(value, truthy, falsy);
      }

      operations.setAttribute('class', ref, false, null);
      // // the upstream type for addDynamicAttribute's `value` argument
      // // appears to be incorrect. It is currently a Reference, I
      // // think it should be a Reference.

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