Lazy glimmer 2 components

readme.md

base taken from https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/keyed/glimmer-2/src

Lazy.ts

import { createTemplate, setComponentTemplate, templateOnlyComponent } from '@glimmer/core';

export default setComponentTemplate(
  createTemplate(`<h1 ...attributes>AMA LAZY [{{@name}}]</h1>`),
  templateOnlyComponent()
);

table.ts

import Component from '@glimmer/component';
import { action, on } from '@glimmer/modifier';
import { tracked } from '@glimmer/tracking';
import { createTemplate, setComponentTemplate } from '@glimmer/core';
import { fn } from '@glimmer/helper';
import BsButton from './BsButton';

export default class MyTable extends Component {
  @tracked showLazyComponent = false;
  @action toggle() {
    this.showLazyComponent = !this.showLazyComponent;
  }
}


function lazyComponent(modulePromise) {
  let L = null;

  const pTpl = createTemplate({get Item() {
    return L;
  }},`<Item @foo={{@args.foo}} ...attributes/>`);

  class FinalWrapper extends Component {};

  const tpl = createTemplate({
    get L() {
      return FinalWrapper;
    }
  }, `
  {{#if this.isLoaded}}
    <L @args={{this.args}} ...attributes />
  {{else}}
    {{#if this.isError}}Error{{else}}Loading...{{/if}}
  {{/if}}`);

  const InitialWrapper = class LazyComponent extends Component {
    @tracked isLoaded = false;
    @tracked isError = false;
    constructor(owner: unknown, args: {}) {
      super(owner, args);
      const keys = Object.keys(args);
      pTpl.block = JSON.parse(pTpl.block);
      // we need this patch to forward arguments
      //@ts-ignore
      pTpl.block.statements[0][3][0] = keys.map((el)=>`@${el}`);
      //@ts-ignore
      pTpl.block.statements[0][3][1] = keys.map((el)=>{
        return [32, 1, [el]];
      });
      pTpl.block = JSON.stringify(pTpl.block);
      setComponentTemplate(pTpl, FinalWrapper);
      modulePromise.then((k: { default: any; })=>{
        L = k.default;
        this.isLoaded = true;
      }).catch(()=>{
        this.isError = true;
      });
    }
  }

  setComponentTemplate(tpl, InitialWrapper);
  return  InitialWrapper;
}

setComponentTemplate(
  createTemplate(
    { on, fn, BsButton, get Lazy() {
      return lazyComponent(import('./Lazy'));
    }},
    `
<div class="jumbotron">
  <div class="row">
    <div class="col-md-6">
      <h1>Glimmer v2</h1>
      {{#if this.showLazyComponent}}
        <Lazy @name="Tom" class="sample" />
      {{/if}}
      <BsButton {{on 'click' this.toggle}}>
     ToggleLazy
    </BsButton>
    </div>
  </div>
</div>
`), MyTable
);