Skip to content

Instantly share code, notes, and snippets.

@lifeart
Last active July 24, 2022 11:39
Show Gist options
  • Save lifeart/73775fbc9c8b21592be6aafb6917ad5b to your computer and use it in GitHub Desktop.
Save lifeart/73775fbc9c8b21592be6aafb6917ad5b to your computer and use it in GitHub Desktop.
Lazy glimmer 2 components
import { createTemplate, setComponentTemplate, templateOnlyComponent } from '@glimmer/core';
export default setComponentTemplate(
createTemplate(`<h1 ...attributes>AMA LAZY [{{@name}}]</h1>`),
templateOnlyComponent()
);
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
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment