-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[experiment]: Demo app for glimmer-next renderer #20711
base: main
Are you sure you want to change the base?
Changes from 6 commits
b88ce4b
7da51d5
ef64ae2
248aaaa
31f7374
070794d
29ac367
efa1163
87a7472
511e886
c6d7d20
f8ffb26
70ead93
571fd62
ff9ba28
aa7e20c
5bbc717
2e87bc2
ec30635
a9e1f56
54354f7
e5d57e1
90bf7d3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,10 @@ | ||
import type { InternalOwner } from '@ember/-internals/owner'; | ||
import type { Helper, HelperDefinitionState } from '@glimmer/interfaces'; | ||
import { setInternalHelperManager } from '@glimmer/manager'; | ||
// import { setInternalHelperManager } from '@glimmer/manager'; | ||
|
||
export function internalHelper(helper: Helper<InternalOwner>): HelperDefinitionState { | ||
return setInternalHelperManager(helper, {}); | ||
return function () { | ||
console.log('internal helper', this, [...arguments]); | ||
return helper(...arguments); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,4 @@ | ||
import { precompileTemplate } from '@ember/template-compilation'; | ||
export default precompileTemplate('', { | ||
moduleName: 'packages/@ember/-internals/glimmer/lib/templates/empty.hbs', | ||
strictMode: true, | ||
}); | ||
import { hbs } from '@lifeart/gxt'; | ||
export default function emptyTemplate() { | ||
return hbs``; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,30 +1,21 @@ | ||
import { precompileTemplate } from '@ember/template-compilation'; | ||
import { on } from '@ember/modifier'; | ||
import { hbs } from '@lifeart/gxt'; | ||
|
||
export default precompileTemplate( | ||
`<a | ||
{{!-- for compatibility --}} | ||
id={{this.id}} | ||
class={{this.class}} | ||
export default function LinkToTemplate() { | ||
return hbs`<a | ||
{{!-- for compatibility --}} | ||
id={{this.id}} | ||
class={{this.class}} | ||
|
||
{{!-- deprecated attribute bindings --}} | ||
role={{this.role}} | ||
title={{this.title}} | ||
rel={{this.rel}} | ||
tabindex={{this.tabindex}} | ||
target={{this.target}} | ||
{{!-- deprecated attribute bindings --}} | ||
role={{this.role}} | ||
title={{this.title}} | ||
rel={{this.rel}} | ||
tabindex={{this.tabindex}} | ||
target={{this.target}} | ||
|
||
...attributes | ||
...attributes | ||
|
||
href={{this.href}} | ||
href={{this.href}} | ||
|
||
{{on 'click' this.click}} | ||
>{{yield}}</a>`, | ||
{ | ||
moduleName: 'packages/@ember/-internals/glimmer/lib/templates/link-to.hbs', | ||
strictMode: true, | ||
scope() { | ||
return { on }; | ||
}, | ||
} | ||
); | ||
{{on 'click' this.click}} >{{yield}}</a>`; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
import { Component } from '@lifeart/gxt'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why not There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. need to do some copy-paste from non-released branch - lifeart/glimmer-next#25 |
||
|
||
interface State { | ||
outlets: { | ||
main: State | undefined, | ||
}, | ||
render: { | ||
template(): () => unknown, | ||
controller: unknown, | ||
name: string, | ||
} | ||
} | ||
|
||
export default class OutletHelper extends Component { | ||
get state() { | ||
return this.args.state().outlets.main || this.args.state(); | ||
} | ||
get nextState() { | ||
return () => { | ||
return this.hasNext; | ||
} | ||
} | ||
get hasNext() { | ||
return this.state.outlets.main; | ||
} | ||
get canRender() { | ||
return !!this?.state?.render; | ||
} | ||
get MyComponent() { | ||
|
||
const state = this.state; | ||
const render = state.render; | ||
const tpl = render.template(); | ||
const args = { | ||
get model() { | ||
return render.model; | ||
} | ||
} | ||
if (tpl.instance) { | ||
return tpl.instance.template; | ||
} | ||
render.controller['args'] = args; | ||
const tplComponentInstance = new tpl(args); | ||
tplComponentInstance.template = tplComponentInstance.template.bind(render.controller); | ||
// we need to provide stable refs here to avoid re-renders | ||
tpl.instance = tplComponentInstance; | ||
return tplComponentInstance.template; | ||
} | ||
get model() { | ||
const state = this.state; | ||
const render = state.render; | ||
return render.model; | ||
} | ||
<template> | ||
{{#if this.canRender}} | ||
<this.MyComponent @model={{this.model}}> | ||
{{#if this.hasNext}} | ||
<OutletHelper @state={{this.nextState}} @root={{false}} /> | ||
{{/if}} | ||
</this.MyComponent> | ||
|
||
{{/if}} | ||
</template> | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,16 @@ | ||
import { precompileTemplate } from '@ember/template-compilation'; | ||
import { hbs } from '@lifeart/gxt'; | ||
import { outletHelper } from '../syntax/outlet'; | ||
import Outlet from './outlet-helper-component'; | ||
|
||
export default precompileTemplate(`{{component (outletHelper)}}`, { | ||
moduleName: 'packages/@ember/-internals/glimmer/lib/templates/outlet.hbs', | ||
strictMode: true, | ||
scope() { | ||
return { outletHelper }; | ||
}, | ||
}); | ||
|
||
export default (owner) => { | ||
console.log('outlet factory', owner); | ||
globalThis.owner = owner; | ||
return function(args) { | ||
console.log('outlet', this, owner, ...arguments); | ||
return hbs`{{#let (component Outlet state=(args.state)) as |Outlet|}} | ||
<div>[main outlet template]<Outlet /></div> | ||
{{/let}}`; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,22 @@ | ||
import { precompileTemplate } from '@ember/template-compilation'; | ||
export default precompileTemplate(`{{component this}}`, { | ||
moduleName: 'packages/@ember/-internals/glimmer/lib/templates/root.hbs', | ||
strictMode: true, | ||
}); | ||
import { hbs, $_fin } from '@lifeart/gxt'; | ||
export default function(owner) { | ||
console.log('root-template init', owner); | ||
return function(rootState) { | ||
// console.log('root-template - render', [this], [...arguments]); | ||
// temp1.root.template | ||
// console.log(...arguments); | ||
// return function() { | ||
// console.log(...arguments); | ||
// return $_fin([...rootState.root.template()], this); | ||
// } | ||
// debugger; | ||
const state = rootState.root.ref; | ||
console.log('rootState', state); | ||
return hbs` | ||
{{log 'root-template-create' this rootState}} | ||
{{#let (component rootState.root.template state=state root=true) as |Layout|}} | ||
<Layout /> | ||
{{/let}} | ||
`; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why comment this out?
If we need to re-define the implementation, I think that could happen in this PR (like, if it's copying from glimmer-next, for example)