-
-
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 1 commit
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,16 +1,11 @@ | ||
import { precompileTemplate } from '@ember/template-compilation'; | ||
import { hbs } from '@lifeart/gxt'; | ||
import { outletHelper } from '../syntax/outlet'; | ||
import Outlet from './outlet-helper-component'; | ||
|
||
|
||
export default (owner) => { | ||
console.log('outlet factory', owner); | ||
globalThis.owner = owner; | ||
return function(args) { | ||
console.log('outlet', this, owner, ...arguments); | ||
return function (args) { | ||
return hbs`{{#let (component Outlet state=(args.state)) as |Outlet|}} | ||
<div>[main outlet template]<Outlet /></div> | ||
<Outlet /> | ||
{{/let}}`; | ||
} | ||
} | ||
}; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
module.exports = { | ||
plugins: { | ||
tailwindcss: {}, | ||
autoprefixer: {}, | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,21 @@ | ||
import { Component } from '@lifeart/gxt'; | ||
import { LinkTo } from '@ember/routing'; | ||
|
||
export default class ApplicationTemplate extends Component { | ||
<template> | ||
<div> | ||
Hello world - this is application template; {{(Date.now)}} | ||
{{#each @model as |item|}} | ||
{{item}} | ||
{{/each}} | ||
<div>place for outlet | ||
<div class="outlet">{{outlet}}</div> | ||
</div> | ||
</div> | ||
<header class="bg-blue-600 p-4"> | ||
<nav class="container mx-auto flex justify-between items-center"> | ||
<div class="text-white text-lg font-bold"> | ||
Ember.js | ||
</div> | ||
<div class="space-x-4"> | ||
<LinkTo @route="main" class="underline text-white hover:text-gray-300">Home</LinkTo> | ||
<LinkTo @route="profile" class="underline text-white hover:text-gray-300">Profile</LinkTo> | ||
</div> | ||
</nav> | ||
</header> | ||
<main class="container mx-auto mt-8"> | ||
{{outlet}} | ||
</main> | ||
</template> | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,20 @@ | ||
import { Component } from '@lifeart/gxt'; | ||
import { LinkTo } from '@ember/routing'; | ||
|
||
console.log('link-to', LinkTo); | ||
import { Textarea } from '@ember/-internals/glimmer'; | ||
|
||
export default class MainTemplate extends Component { | ||
<template> | ||
<div> | ||
Hello world - this is main template; | ||
{{#each @model as |item|}} | ||
{{item}} | ||
{{/each}} | ||
<div>place for outlet | ||
<div class="outlet">{{outlet}}</div> | ||
</div> | ||
</div> | ||
<LinkTo @route="profile">Profile</LinkTo> | ||
<section class="bg-white p-6 rounded shadow"> | ||
<h1 class="text-2xl font-bold mb-4">List of Items</h1> | ||
<ul class="list-disc list-inside"> | ||
{{#each @model as |item|}} | ||
<li class="mb-2">{{item}}</li> | ||
{{/each}} | ||
</ul> | ||
</section> | ||
<section class="bg-white p-6 rounded shadow mt-8"> | ||
<h2 class="text-xl font-bold mb-4">Leave a Comment</h2> | ||
<Textarea class="w-full p-4 border rounded" rows="5" placeholder="Write your comment here..."></Textarea> | ||
</section> | ||
</template> | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,38 @@ | ||
import { Component } from '@lifeart/gxt'; | ||
import { Input } from '@ember/-internals/glimmer'; | ||
|
||
function formatTimeForReadability(value) { | ||
return new Date(value).toLocaleTimeString(); | ||
} | ||
|
||
export default class ProfileTemplate extends Component { | ||
<template> | ||
Profile {{this.now}} [{{this.q}}] | ||
{{#each @model as |item|}} | ||
{{item}} | ||
{{/each}} | ||
{{yield}} | ||
<Input @value={{this.q}} {{on "change" this.onInputChange}} /> | ||
<button type="button" {{on "click" this.toMain}}>to main</button> | ||
<button type="button" {{on "click" this.incrementQp}}>+ qp</button> | ||
<button type="button" {{on "click" this.decrementQp}}>- qp</button> | ||
<section class="bg-white p-6 rounded shadow"> | ||
<h1 class="text-2xl font-bold mb-4">List of Items</h1> | ||
<ul class="list-disc list-inside"> | ||
{{#each @model as |item|}} | ||
<li class="mb-2">{{item}}</li> | ||
{{/each}} | ||
</ul> | ||
</section> | ||
|
||
<section class="bg-white p-6 rounded shadow mt-8"> | ||
<h1 class="text-2xl font-bold mb-4">Profile Page</h1> | ||
<div class="mb-4"> | ||
<strong>Current Time:</strong> <span>{{formatTimeForReadability this.now}}</span> | ||
</div> | ||
<div class="mb-4"> | ||
<strong>Query Param Value:</strong> <span>{{this.q}}</span> | ||
</div> | ||
<div class="mb-4"> | ||
<label for="param-input" class="block text-gray-700">Update Value:</label> | ||
<Input type="text" id="param-input" class="w-full p-2 border rounded" @value={{this.q}} {{on "change" this.onInputChange}} /> | ||
</div> | ||
<div class="flex space-x-4"> | ||
<button type="button" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700" {{on "click" this.toMain}}>Go to Main</button> | ||
<button type="button" id="increment-btn" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700" {{on "click" this.incrementQp}}>Increment</button> | ||
<button type="button" id="decrement-btn" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700" {{on "click" this.decrementQp}}>Decrement</button> | ||
</div> | ||
</section> | ||
</template> | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/** @type {import('tailwindcss').Config} */ | ||
export default { | ||
content: ['./index.html', './src/**/*.{js,ts,gjs,gts}'], | ||
theme: { | ||
extend: {}, | ||
}, | ||
plugins: [], | ||
}; |
Large diffs are not rendered by default.
Unchanged files with check annotations Beta
import type { Reference } from '@glimmer/reference'; | ||
import { childRefFor, createComputeRef, createPrimitiveRef, valueForRef } from '@glimmer/reference'; | ||
import { reifyPositional } from '@glimmer/runtime'; | ||
import { unwrapTemplate } from '@glimmer/utils'; | ||
Check failure on line 31 in packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
|
||
import { | ||
beginTrackFrame, | ||
beginUntrackFrame, | ||
export const ARGS = enumerableSymbol('ARGS'); | ||
export const HAS_BLOCK = enumerableSymbol('HAS_BLOCK'); | ||
const EMPTY_ARRAY = []; | ||
Check failure on line 57 in packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
|
||
export const DIRTY_TAG = Symbol('DIRTY_TAG'); | ||
export const IS_DISPATCHING_ATTRS = Symbol('IS_DISPATCHING_ATTRS'); | ||
return null; | ||
} | ||
return { positional: EMPTY_ARRAY as readonly Reference[], named }; | ||
} | ||
/* |
import { capabilityFlagsFrom } from '@glimmer/manager'; | ||
import type { Reference } from '@glimmer/reference'; | ||
import { createConstRef, valueForRef } from '@glimmer/reference'; | ||
import { unwrapTemplate } from '@glimmer/utils'; | ||
Check failure on line 24 in packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
|
||
import type RuntimeResolver from '../resolver'; | ||
interface EngineState { |
import type { Reference } from '@glimmer/reference'; | ||
import { createConstRef, valueForRef } from '@glimmer/reference'; | ||
import { EMPTY_ARGS } from '@glimmer/runtime'; | ||
import { unwrapTemplate } from '@glimmer/utils'; | ||
Check failure on line 24 in packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
|
||
import type { DynamicScope } from '../renderer'; | ||
import type { OutletState } from '../utils/outlet'; |
} | ||
} | ||
const Input = opaquify(_Input, InputTemplate) as Input; | ||
Check failure on line 274 in packages/@ember/-internals/glimmer/lib/components/input.ts
|
||
interface Input extends Opaque<'component:input'>, OpaqueInternalComponentConstructor {} | ||
export default Input; |
} from '@glimmer/interfaces'; | ||
import { setComponentTemplate, setInternalComponentManager } from '@glimmer/manager'; | ||
import type { Reference } from '@glimmer/reference'; | ||
import { reference } from '@lifeart/gxt/glimmer-compatibility'; | ||
Check failure on line 18 in packages/@ember/-internals/glimmer/lib/components/internal.ts
|
||
// import { createConstRef, isConstRef, valueForRef } from '@glimmer/reference'; | ||
import { untrack } from '@glimmer/validator'; | ||
} | ||
function valueForRef(ref) { | ||
if (!ref) { | ||
debugger; | ||
} | ||
return ref.value; | ||
} |
export function internalHelper(helper: Helper<InternalOwner>): HelperDefinitionState { | ||
return function () { | ||
console.log('internal helper', this, [...arguments]); | ||
return helper(...arguments); | ||
} | ||
} |
DOMChanges, | ||
DOMTreeConstruction, | ||
inTransaction, | ||
renderMain, | ||
runtimeContext, | ||
} from '@glimmer/runtime'; | ||
import { unwrapTemplate } from '@glimmer/utils'; | ||
import { CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator'; | ||
import type { SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface'; | ||
import RSVP from 'rsvp'; |
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.
TODO: move to glimmer component