Skip to content
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

Draft
wants to merge 23 commits into
base: main
Choose a base branch
from
Prev Previous commit
Next Next commit
+
lifeart committed Jul 1, 2024
commit ff9ba28bbd85edaa3d4e8ccae094070c60507fca
13 changes: 4 additions & 9 deletions packages/@ember/-internals/glimmer/lib/templates/outlet.ts
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}}`;
}
}
};
};
9 changes: 7 additions & 2 deletions packages/demo/package.json
Original file line number Diff line number Diff line change
@@ -3,7 +3,9 @@
"private": true,
"type": "module",
"scripts": {
"dev": "vite"
"dev": "vite",
"clean": "rm -rf ./node_modules/.vite",
"start": "pnpm run clean && pnpm dev"
},
"dependencies": {
"@ember/-internals": "workspace:*",
@@ -13,7 +15,6 @@
"@ember/component": "workspace:*",
"@ember/controller": "workspace:*",
"@ember/debug": "workspace:*",
"ember": "workspace:*",
"@ember/destroyable": "workspace:*",
"@ember/engine": "workspace:*",
"@ember/enumerable": "workspace:*",
@@ -40,14 +41,18 @@
"@glimmer/util": "0.92.0",
"@glimmer/validator": "0.92.0",
"@lifeart/gxt": "0.0.50",
"autoprefixer": "^10.4.19",
"backburner.js": "^2.7.0",
"dag-map": "^2.0.2",
"ember": "workspace:*",
"ember-template-compiler": "workspace:*",
"ember-testing": "workspace:*",
"expect-type": "^0.15.0",
"internal-test-helpers": "workspace:*",
"postcss": "^8.4.39",
"router_js": "^8.0.5",
"rsvp": "^4.8.5",
"tailwindcss": "^3.4.4",
"vite": "^5.0.10"
}
}
6 changes: 6 additions & 0 deletions packages/demo/postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
24 changes: 15 additions & 9 deletions packages/demo/src/components/Application.gts
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">
Copy link
Contributor Author

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

<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>
}
25 changes: 13 additions & 12 deletions packages/demo/src/components/Main.gts
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>
}
40 changes: 31 additions & 9 deletions packages/demo/src/components/Profile.gts
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>
}
8 changes: 4 additions & 4 deletions packages/demo/src/controllers/profile.ts
Original file line number Diff line number Diff line change
@@ -11,9 +11,10 @@ export class ProfileController extends Controller {
@tracked now = new Date().toISOString();
@service router!: RouterService;

onInputChange = ( e) => {
console.log('onInputChange', e);
}
onInputChange = (e) => {
this.q = parseInt(e.target.value) || 0;
};

toMain = () => {
this.router.transitionTo('main');
};
@@ -28,7 +29,6 @@ export class ProfileController extends Controller {

constructor(...args: ConstructorParameters<typeof Controller>) {
super(...args);
// cellFor(this, 'now').update(new Date().toISOString());
setInterval(() => {
this.now = new Date().toISOString();
}, 1000);
8 changes: 8 additions & 0 deletions packages/demo/tailwind.config.js
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: [],
};
1,090 changes: 864 additions & 226 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions tsconfig/compiler-options.json
Original file line number Diff line number Diff line change
@@ -23,6 +23,8 @@
"allowSyntheticDefaultImports": false,
"isolatedModules": true,

"allowImportingTsExtensions": true,

"newLine": "LF",

"allowJs": true,

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

GitHub Actions / Type Checking (current version)

Cannot find module '@glimmer/utils' or its corresponding type declarations.

Check failure on line 31 in packages/@ember/-internals/glimmer/lib/component-managers/curly.ts

GitHub Actions / Linting

Unable to resolve path to module '@glimmer/utils'
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

GitHub Actions / Type Checking (current version)

Variable 'EMPTY_ARRAY' implicitly has type 'any[]' in some locations where its type cannot be determined.

Check failure on line 57 in packages/@ember/-internals/glimmer/lib/component-managers/curly.ts

GitHub Actions / Linting

Delete `·`
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 };

Check failure on line 236 in packages/@ember/-internals/glimmer/lib/component-managers/curly.ts

GitHub Actions / Type Checking (current version)

Variable 'EMPTY_ARRAY' implicitly has an 'any[]' type.
}
/*
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

GitHub Actions / Type Checking (current version)

Cannot find module '@glimmer/utils' or its corresponding type declarations.

Check failure on line 24 in packages/@ember/-internals/glimmer/lib/component-managers/mount.ts

GitHub Actions / Linting

Unable to resolve path to module '@glimmer/utils'
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

GitHub Actions / Type Checking (current version)

Cannot find module '@glimmer/utils' or its corresponding type declarations.

Check failure on line 24 in packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts

GitHub Actions / Linting

Unable to resolve path to module '@glimmer/utils'
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

GitHub Actions / Type Checking (current version)

Argument of type '() => { nodes: never[]; ctx: null; tpl: TemplateStringsArray; }' is not assignable to parameter of type 'TemplateFactory'.
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

GitHub Actions / Type Checking (current version)

Cannot find module '@lifeart/gxt/glimmer-compatibility' or its corresponding type declarations.

Check failure on line 18 in packages/@ember/-internals/glimmer/lib/components/internal.ts

GitHub Actions / Linting

Unable to resolve path to module '@lifeart/gxt/glimmer-compatibility'
// import { createConstRef, isConstRef, valueForRef } from '@glimmer/reference';
import { untrack } from '@glimmer/validator';
}
function valueForRef(ref) {
if (!ref) {
debugger;

Check failure on line 28 in packages/@ember/-internals/glimmer/lib/components/internal.ts

GitHub Actions / Linting

Unexpected 'debugger' statement
}
return ref.value;
}
export function internalHelper(helper: Helper<InternalOwner>): HelperDefinitionState {
return function () {
console.log('internal helper', this, [...arguments]);

Check failure on line 7 in packages/@ember/-internals/glimmer/lib/helpers/internal-helper.ts

GitHub Actions / Linting

Unexpected console statement
return helper(...arguments);
}

Check failure on line 9 in packages/@ember/-internals/glimmer/lib/helpers/internal-helper.ts

GitHub Actions / Linting

Insert `;`
}
DOMChanges,
DOMTreeConstruction,
inTransaction,
renderMain,

Check failure on line 39 in packages/@ember/-internals/glimmer/lib/renderer.ts

GitHub Actions / Linting

'renderMain' is defined but never used. Allowed unused vars must match /^_/u
runtimeContext,
} from '@glimmer/runtime';
import { unwrapTemplate } from '@glimmer/utils';

Check failure on line 42 in packages/@ember/-internals/glimmer/lib/renderer.ts

GitHub Actions / Linting

Unable to resolve path to module '@glimmer/utils'
import { CURRENT_TAG, validateTag, valueForTag } from '@glimmer/validator';
import type { SimpleDocument, SimpleElement, SimpleNode } from '@simple-dom/interface';
import RSVP from 'rsvp';