) => object>
+{
+ create(
+ _owner: Owner,
+ Component: { new (args: ComponentArgs): object },
+ args: VMArguments | null
+ ) {
+ const instance = new Component(argsProxy(args === null ? EMPTY_ARGS : args.capture()));
+ const self = createConstRef(instance, 'this');
+ return { instance, self };
+ }
+
+ getDebugName() {
+ return 'basic-benchmark-component';
+ }
+
+ didCreate() {
+ //
+ }
+
+ didRenderLayout() {
+ //
+ }
+
+ didUpdate() {
+ //
+ }
+
+ didUpdateLayout() {
+ //
+ }
+
+ getCapabilities() {
+ return BASIC_COMPONENT_CAPABILITIES;
+ }
+
+ getSelf(state: BasicState) {
+ return state.self;
+ }
+
+ getDestroyable(state: BasicState) {
+ return state.instance;
+ }
+
+ getStaticLayout(definition: object): Template {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- @fixme
+ return getComponentTemplate(definition)!();
+ }
+}
+
+const basicComponentManager = new BasicComponentManager();
+
+export default basicComponentManager;
diff --git a/packages/@glimmer-workspace/jsbin/index.html b/packages/@glimmer-workspace/jsbin/index.html
index a78c7c277..52aa5c1ed 100644
--- a/packages/@glimmer-workspace/jsbin/index.html
+++ b/packages/@glimmer-workspace/jsbin/index.html
@@ -12,11 +12,13 @@
renderSync,
on,
} from "@glimmer/runtime";
- import { EvaluationContextImpl } from "@glimmer/opcode-compiler";
+ import { EvaluationContextImpl, templateFactory } from "@glimmer/opcode-compiler";
import { artifacts, RuntimeOpImpl } from "@glimmer/program";
- import { setComponentTemplate } from "@glimmer/manager";
- import { templateFactory } from "@glimmer/opcode-compiler";
+ import { setComponentTemplate, setInternalComponentManager } from "@glimmer/manager";
+ import { precompile, precompileJSON } from "@glimmer/compiler";
import { trackedData } from "@glimmer/validator";
+ import { preprocess, getTemplateLocals } from "@glimmer/syntax";
+ import boilerplateComponentManager from "./boilerplate-example-component-manager";
const scheduledDestructors = [];
const scheduledFinalizers = [];
@@ -46,20 +48,73 @@
increment = () => this.#data["count"]++;
static {
+ setInternalComponentManager(boilerplateComponentManager, this);
setComponentTemplate(
- templateFactory({
- id: null,
- block:
- '[[[1,"\\n "],[10,2],[12],[1,"You have clicked the button "],[1,[30,0,["count"]]],[1," times."],[13],[1,"\\n\\n "],[11,"button"],[4,[32,0],["click",[30,0,["increment"]]],null],[12],[1,"Click"],[13],[1,"\\n "]],[],[]]',
- moduleName: "whatev",
- scope: () => [on],
- isStrictMode: true,
- }),
+ /* Custom Compile Template because Glimmer Standalone is very unergonomic */
+ compileTemplate(
+ `You have clicked the button {{this.count}} times.
+
+ `,
+ { scope: { on } },
+ ),
this,
);
}
}
+ /**
+ *
+ * Copied from limber/ember-repl
+ *
+ * The reason why we can't use precompile directly is because of this:
+ * https://github.com/glimmerjs/glimmer-vm/blob/master/packages/%40glimmer/compiler/lib/compiler.ts#L132
+ *
+ * Support for dynamically compiling templates in strict mode doesn't seem to be fully their yet.
+ * That JSON.stringify (and the lines after) prevent us from easily setting the scope function,
+ * which means that *everything* is undefined.
+ */
+ function compileTemplate(source, { moduleName, scope = {} }) {
+ const localScope = { ...scope };
+ const locals = getTemplateLocals(source);
+
+ const options = {
+ strictMode: true,
+ moduleName,
+ locals,
+ isProduction: false,
+ meta: { moduleName },
+ };
+
+ // Copied from @glimmer/compiler/lib/compiler#precompile
+ const [block, usedLocals] = precompileJSON(source, options);
+
+ const usedScope = usedLocals.map((key) => {
+ const value = localScope[key];
+
+ if (!value) {
+ throw new Error(
+ `Attempt to use ${key} in compiled hbs, but it was not available in scope. ` +
+ `Available scope includes: ${Object.keys(localScope)}`,
+ );
+ }
+
+ return value;
+ });
+
+ const blockJSON = JSON.stringify(block);
+ const templateJSONObject = {
+ id: moduleName,
+ block: blockJSON,
+ moduleName: moduleName ?? "(dynamically compiled component)",
+ scope: () => usedScope,
+ isStrictMode: true,
+ };
+
+ const factory = templateFactory(templateJSONObject);
+
+ return factory;
+ }
+
function render() {
const element = document.body;
const sharedArtifacts = artifacts();
@@ -68,7 +123,16 @@
const helpers = new Map();
const modifiers = new Map();
- const runtime = runtimeOptions({ document }, envDelegate, sharedArtifacts, null);
+ const resolver = {
+ lookupHelper: (name) => helpers.get(name) ?? null,
+ lookupModifier: (name) => modifiers.get(name) ?? null,
+ lookupComponent: (name) => components.get(name) ?? null,
+
+ lookupBuiltInHelper: () => null,
+ lookupBuiltInModifier: () => null,
+ };
+
+ const runtime = runtimeOptions({ document }, envDelegate, sharedArtifacts, resolver);
const context = new EvaluationContextImpl(
sharedArtifacts,
diff --git a/packages/@glimmer-workspace/jsbin/interfaces.ts b/packages/@glimmer-workspace/jsbin/interfaces.ts
new file mode 100644
index 000000000..413482f7d
--- /dev/null
+++ b/packages/@glimmer-workspace/jsbin/interfaces.ts
@@ -0,0 +1,3 @@
+import type { Dict } from '@glimmer/interfaces';
+
+export type ComponentArgs = Readonly;
diff --git a/packages/@glimmer-workspace/jsbin/package.json b/packages/@glimmer-workspace/jsbin/package.json
index eec61602c..8b3f5c83a 100644
--- a/packages/@glimmer-workspace/jsbin/package.json
+++ b/packages/@glimmer-workspace/jsbin/package.json
@@ -1,11 +1,16 @@
{
"private": true,
- "name": "@glimmer-workspace/krausest",
+ "name": "@glimmer-workspace/js-bin",
"type": "module",
"scripts": {
"start": "vite"
},
- "dependencies": {},
+ "dependencies": {
+ "@glimmer/interfaces": "workspace:*",
+ "@glimmer/manager": "workspace:*",
+ "@glimmer/reference": "workspace:*",
+ "@glimmer/runtime": "workspace:*"
+ },
"devDependencies": {
"vite": "^5.4.10"
},
diff --git a/packages/@glimmer-workspace/jsbin/vite.config.ts b/packages/@glimmer-workspace/jsbin/vite.config.ts
index d7a14207f..d05695bf9 100644
--- a/packages/@glimmer-workspace/jsbin/vite.config.ts
+++ b/packages/@glimmer-workspace/jsbin/vite.config.ts
@@ -1,6 +1,7 @@
import { defineConfig } from 'vite';
import path from 'node:path';
const currentPath = import.meta.dirname;
+import virtual from 'vite-plugin-virtual';
const packagesPath = path.resolve(currentPath, '../../../packages');
const packagePath = (name: string) => {
@@ -17,6 +18,7 @@ export default defineConfig({
'@glimmer/program': packagePath('@glimmer/program'),
'@glimmer/validator': packagePath('@glimmer/validator'),
'@glimmer/runtime': packagePath('@glimmer/runtime'),
+ '@glimmer/syntax': packagePath('@glimmer/syntax'),
},
},
});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a77bc9269..8023cc552 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -741,6 +741,19 @@ importers:
version: link:../../../@glimmer/wire-format
packages/@glimmer-workspace/jsbin:
+ dependencies:
+ '@glimmer/interfaces':
+ specifier: workspace:*
+ version: link:../../@glimmer/interfaces
+ '@glimmer/manager':
+ specifier: workspace:*
+ version: link:../../@glimmer/manager
+ '@glimmer/reference':
+ specifier: workspace:*
+ version: link:../../@glimmer/reference
+ '@glimmer/runtime':
+ specifier: workspace:*
+ version: link:../../@glimmer/runtime
devDependencies:
vite:
specifier: ^5.4.10
From a1ff17e38c129f4d92a76756f1e6e2034c27de91 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Thu, 24 Apr 2025 19:41:16 -0400
Subject: [PATCH 3/9] 'this' is undefined?
---
packages/@glimmer-workspace/jsbin/index.html | 63 ++++++--------------
1 file changed, 17 insertions(+), 46 deletions(-)
diff --git a/packages/@glimmer-workspace/jsbin/index.html b/packages/@glimmer-workspace/jsbin/index.html
index 52aa5c1ed..0d6052d13 100644
--- a/packages/@glimmer-workspace/jsbin/index.html
+++ b/packages/@glimmer-workspace/jsbin/index.html
@@ -45,17 +45,18 @@
get count() {
return this.#data["count"];
}
+
increment = () => this.#data["count"]++;
static {
setInternalComponentManager(boilerplateComponentManager, this);
setComponentTemplate(
/* Custom Compile Template because Glimmer Standalone is very unergonomic */
- compileTemplate(
+ createTemplate(
`You have clicked the button {{this.count}} times.
`,
- { scope: { on } },
+ { on },
),
this,
);
@@ -64,55 +65,25 @@
/**
*
- * Copied from limber/ember-repl
- *
- * The reason why we can't use precompile directly is because of this:
- * https://github.com/glimmerjs/glimmer-vm/blob/master/packages/%40glimmer/compiler/lib/compiler.ts#L132
+ * Copied from @glimmer-workspace/integration-tests/lib/compile
*
- * Support for dynamically compiling templates in strict mode doesn't seem to be fully their yet.
- * That JSON.stringify (and the lines after) prevent us from easily setting the scope function,
- * which means that *everything* is undefined.
+ * We don't have a good way to do runtime compilation in glimmer.
*/
- function compileTemplate(source, { moduleName, scope = {} }) {
- const localScope = { ...scope };
- const locals = getTemplateLocals(source);
-
- const options = {
- strictMode: true,
- moduleName,
- locals,
- isProduction: false,
- meta: { moduleName },
- };
-
- // Copied from @glimmer/compiler/lib/compiler#precompile
- const [block, usedLocals] = precompileJSON(source, options);
-
- const usedScope = usedLocals.map((key) => {
- const value = localScope[key];
-
- if (!value) {
- throw new Error(
- `Attempt to use ${key} in compiled hbs, but it was not available in scope. ` +
- `Available scope includes: ${Object.keys(localScope)}`,
- );
- }
-
- return value;
- });
-
- const blockJSON = JSON.stringify(block);
- const templateJSONObject = {
- id: moduleName,
- block: blockJSON,
- moduleName: moduleName ?? "(dynamically compiled component)",
- scope: () => usedScope,
+ function createTemplate(templateSource, scopeValues = {}) {
+ let options = {};
+ options.locals = Object.keys(scopeValues ?? {});
+ let [block, usedLocals] = precompileJSON(templateSource, { strictMode: true, ...options });
+ let reifiedScopeValues = usedLocals.map((key) => scopeValues[key]);
+
+ let templateBlock = {
+ id: `id-${Date.now()}`,
+ block: JSON.stringify(block),
+ moduleName: options.meta?.moduleName ?? "(unknown template module)",
+ scope: reifiedScopeValues.length > 0 ? () => reifiedScopeValues : null,
isStrictMode: true,
};
- const factory = templateFactory(templateJSONObject);
-
- return factory;
+ return templateFactory(templateBlock);
}
function render() {
From 9bf9d84787f8709c851afb718d8e6d4f8b763f78 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Fri, 25 Apr 2025 11:18:02 -0400
Subject: [PATCH 4/9] omg, what a ride
---
packages/@glimmer-workspace/jsbin/index.html | 114 +++++++++++++++++-
.../@glimmer-workspace/jsbin/package.json | 3 +-
.../@glimmer-workspace/jsbin/vite.config.ts | 18 ++-
pnpm-lock.yaml | 3 +
4 files changed, 128 insertions(+), 10 deletions(-)
diff --git a/packages/@glimmer-workspace/jsbin/index.html b/packages/@glimmer-workspace/jsbin/index.html
index 0d6052d13..5ec0b885a 100644
--- a/packages/@glimmer-workspace/jsbin/index.html
+++ b/packages/@glimmer-workspace/jsbin/index.html
@@ -16,9 +16,10 @@
import { artifacts, RuntimeOpImpl } from "@glimmer/program";
import { setComponentTemplate, setInternalComponentManager } from "@glimmer/manager";
import { precompile, precompileJSON } from "@glimmer/compiler";
- import { trackedData } from "@glimmer/validator";
+ import { dirtyTagFor, tagFor, consumeTag } from "@glimmer/validator";
import { preprocess, getTemplateLocals } from "@glimmer/syntax";
import boilerplateComponentManager from "./boilerplate-example-component-manager";
+ import setGlobalContext from "@glimmer/global-context";
const scheduledDestructors = [];
const scheduledFinalizers = [];
@@ -28,6 +29,100 @@
queue.length = 0;
}
+ let result;
+
+ function registerResult(_result) {
+ result = _result;
+ }
+
+ let revalidateScheduled = false;
+
+ setGlobalContext({
+ scheduleRevalidate() {
+ if (!revalidateScheduled) {
+ Promise.resolve()
+ .then(() => {
+ const { env } = result;
+ env.begin();
+ result.rerender();
+ revalidateScheduled = false;
+ env.commit();
+ })
+ .catch((e) => console.error(e));
+ }
+ },
+
+ getProp(obj, prop) {
+ return obj[prop];
+ },
+
+ setProp(obj, prop, value) {
+ obj[prop] = value;
+ },
+
+ getPath(obj, path) {
+ let parts = path.split(".");
+
+ let current = obj;
+
+ for (let part of parts) {
+ if (
+ typeof current === "function" ||
+ (typeof current === "object" && current !== null)
+ ) {
+ current = current[part];
+ }
+ }
+
+ return current;
+ },
+
+ setPath(obj, path, value) {
+ let parts = path.split(".");
+
+ let current = obj;
+ let pathToSet = parts.pop();
+
+ for (let part of parts) {
+ current = current[part];
+ }
+
+ current[pathToSet] = value;
+ },
+
+ toBool(value) {
+ return Boolean(value);
+ },
+
+ toIterator() {
+ return null;
+ },
+
+ warnIfStyleNotTrusted() {
+ // noop
+ },
+
+ scheduleDestroy(destroyable, destructor) {
+ scheduledDestructors.push(() => destructor(destroyable));
+ },
+
+ scheduleDestroyed(fn) {
+ scheduledFinalizers.push(fn);
+ },
+
+ assert(test, msg) {
+ if (!test) {
+ throw new Error(msg);
+ }
+ },
+
+ deprecate(msg, test) {
+ if (!test) {
+ console.warn(msg);
+ }
+ },
+ });
+
function createEnvDelegate(isInteractive) {
return {
isInteractive: true,
@@ -40,13 +135,18 @@
}
class Counter {
- #data = trackedData({ count: 0 });
+ _count = 0;
get count() {
- return this.#data["count"];
+ consumeTag(tagFor(this, "_count"));
+ return this._count;
+ }
+ set count(value) {
+ this._count = value;
+ dirtyTagFor(this, "_count");
}
- increment = () => this.#data["count"]++;
+ increment = () => this.count++;
static {
setInternalComponentManager(boilerplateComponentManager, this);
@@ -55,7 +155,7 @@
createTemplate(
`You have clicked the button {{this.count}} times.
- `,
+ `,
{ on },
),
this,
@@ -115,7 +215,9 @@
const cursor = { element, nextSibling: null };
const treeBuilder = NewTreeBuilder.forInitialRender(env, cursor);
- renderSync(env, renderComponent(context, treeBuilder, {}, Counter, {}));
+ const result = renderSync(env, renderComponent(context, treeBuilder, {}, Counter, {}));
+
+ registerResult(result);
}
render();
diff --git a/packages/@glimmer-workspace/jsbin/package.json b/packages/@glimmer-workspace/jsbin/package.json
index 8b3f5c83a..710df289f 100644
--- a/packages/@glimmer-workspace/jsbin/package.json
+++ b/packages/@glimmer-workspace/jsbin/package.json
@@ -9,7 +9,8 @@
"@glimmer/interfaces": "workspace:*",
"@glimmer/manager": "workspace:*",
"@glimmer/reference": "workspace:*",
- "@glimmer/runtime": "workspace:*"
+ "@glimmer/runtime": "workspace:*",
+ "@glimmer/global-context": "workspace:*"
},
"devDependencies": {
"vite": "^5.4.10"
diff --git a/packages/@glimmer-workspace/jsbin/vite.config.ts b/packages/@glimmer-workspace/jsbin/vite.config.ts
index d05695bf9..ee0000809 100644
--- a/packages/@glimmer-workspace/jsbin/vite.config.ts
+++ b/packages/@glimmer-workspace/jsbin/vite.config.ts
@@ -1,7 +1,6 @@
import { defineConfig } from 'vite';
import path from 'node:path';
const currentPath = import.meta.dirname;
-import virtual from 'vite-plugin-virtual';
const packagesPath = path.resolve(currentPath, '../../../packages');
const packagePath = (name: string) => {
@@ -12,13 +11,26 @@ const packagePath = (name: string) => {
export default defineConfig({
resolve: {
alias: {
- '@glimmer/opcode-compiler': packagePath('@glimmer/opcode-compiler'),
'@glimmer/compiler': packagePath('@glimmer/compiler'),
+ '@glimmer/constants': packagePath('@glimmer/constants'),
+ '@glimmer/debug': packagePath('@glimmer/debug'),
+ '@glimmer/debug-util': packagePath('@glimmer/debug-util'),
+ '@glimmer/destroyable': packagePath('@glimmer/destroyable'),
+ '@glimmer/encoder': packagePath('@glimmer/encoder'),
+ '@glimmer/global-context': packagePath('@glimmer/global-context'),
+ '@glimmer/interfaces': packagePath('@glimmer/interfaces'),
'@glimmer/manager': packagePath('@glimmer/manager'),
+ '@glimmer/node': packagePath('@glimmer/node'),
+ '@glimmer/opcode-compiler': packagePath('@glimmer/opcode-compiler'),
+ '@glimmer/owner': packagePath('@glimmer/owner'),
'@glimmer/program': packagePath('@glimmer/program'),
- '@glimmer/validator': packagePath('@glimmer/validator'),
+ '@glimmer/reference': packagePath('@glimmer/reference'),
'@glimmer/runtime': packagePath('@glimmer/runtime'),
'@glimmer/syntax': packagePath('@glimmer/syntax'),
+ '@glimmer/validator': packagePath('@glimmer/validator'),
+ '@glimmer/util': packagePath('@glimmer/util'),
+ '@glimmer/vm': packagePath('@glimmer/vm'),
+ '@glimmer/wire-format': packagePath('@glimmer/wire-format'),
},
},
});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8023cc552..d190f26ad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -742,6 +742,9 @@ importers:
packages/@glimmer-workspace/jsbin:
dependencies:
+ '@glimmer/global-context':
+ specifier: workspace:*
+ version: link:../../@glimmer/global-context
'@glimmer/interfaces':
specifier: workspace:*
version: link:../../@glimmer/interfaces
From c56f13fa7a540420540cf2467755aafaf3d6fd45 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Fri, 25 Apr 2025 11:25:59 -0400
Subject: [PATCH 5/9] All in the HTML
---
.../@glimmer-workspace/jsbin/args-proxy.ts | 51 ---------
.../boilerplate-example-component-manager.ts | 85 --------------
packages/@glimmer-workspace/jsbin/index.html | 108 +++++++++++++++++-
.../@glimmer-workspace/jsbin/interfaces.ts | 3 -
4 files changed, 106 insertions(+), 141 deletions(-)
delete mode 100644 packages/@glimmer-workspace/jsbin/args-proxy.ts
delete mode 100644 packages/@glimmer-workspace/jsbin/boilerplate-example-component-manager.ts
delete mode 100644 packages/@glimmer-workspace/jsbin/interfaces.ts
diff --git a/packages/@glimmer-workspace/jsbin/args-proxy.ts b/packages/@glimmer-workspace/jsbin/args-proxy.ts
deleted file mode 100644
index 5d0dfb498..000000000
--- a/packages/@glimmer-workspace/jsbin/args-proxy.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { CapturedArguments, CapturedNamedArguments, Reference } from '@glimmer/interfaces';
-import { valueForRef } from '@glimmer/reference';
-
-import type { ComponentArgs } from './interfaces';
-
-class ArgsProxy implements ProxyHandler {
- isExtensible() {
- return false;
- }
-
- ownKeys(target: CapturedNamedArguments): string[] {
- return Object.keys(target);
- }
-
- getOwnPropertyDescriptor(
- target: CapturedNamedArguments,
- p: PropertyKey
- ): PropertyDescriptor | undefined {
- let desc: PropertyDescriptor | undefined;
- if (typeof p === 'string' && p in target) {
- const value = valueForRef(target[p] as Reference);
- desc = {
- enumerable: true,
- configurable: false,
- writable: false,
- value,
- };
- }
- return desc;
- }
-
- has(target: CapturedNamedArguments, p: PropertyKey): boolean {
- return typeof p === 'string' ? p in target : false;
- }
-
- get(target: CapturedNamedArguments, p: PropertyKey): unknown {
- if (typeof p === 'string' && p in target) {
- return valueForRef(target[p] as Reference);
- }
-
- return;
- }
-
- set() {
- return false;
- }
-}
-
-export default function argsProxy(args: CapturedArguments): ComponentArgs {
- return new Proxy(args.named, new ArgsProxy());
-}
diff --git a/packages/@glimmer-workspace/jsbin/boilerplate-example-component-manager.ts b/packages/@glimmer-workspace/jsbin/boilerplate-example-component-manager.ts
deleted file mode 100644
index 4d57223ec..000000000
--- a/packages/@glimmer-workspace/jsbin/boilerplate-example-component-manager.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { Dict, Owner, Template, VMArguments, WithCreateInstance } from '@glimmer/interfaces';
-import type { Reference } from '@glimmer/reference';
-import { getComponentTemplate } from '@glimmer/manager';
-import { createConstRef } from '@glimmer/reference';
-import { EMPTY_ARGS } from '@glimmer/runtime';
-
-import type { ComponentArgs } from './interfaces';
-
-import argsProxy from './args-proxy';
-
-const BASIC_COMPONENT_CAPABILITIES = {
- dynamicLayout: false,
- dynamicTag: false,
- prepareArgs: false,
- createArgs: true,
- attributeHook: false,
- elementHook: false,
- dynamicScope: false,
- createCaller: false,
- updateHook: false,
- createInstance: true,
- wrapped: false,
- willDestroy: false,
- hasSubOwner: false,
-};
-
-interface BasicState {
- self: Reference;
- instance: object;
-}
-
-class BasicComponentManager
- implements WithCreateInstance) => object>
-{
- create(
- _owner: Owner,
- Component: { new (args: ComponentArgs): object },
- args: VMArguments | null
- ) {
- const instance = new Component(argsProxy(args === null ? EMPTY_ARGS : args.capture()));
- const self = createConstRef(instance, 'this');
- return { instance, self };
- }
-
- getDebugName() {
- return 'basic-benchmark-component';
- }
-
- didCreate() {
- //
- }
-
- didRenderLayout() {
- //
- }
-
- didUpdate() {
- //
- }
-
- didUpdateLayout() {
- //
- }
-
- getCapabilities() {
- return BASIC_COMPONENT_CAPABILITIES;
- }
-
- getSelf(state: BasicState) {
- return state.self;
- }
-
- getDestroyable(state: BasicState) {
- return state.instance;
- }
-
- getStaticLayout(definition: object): Template {
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- @fixme
- return getComponentTemplate(definition)!();
- }
-}
-
-const basicComponentManager = new BasicComponentManager();
-
-export default basicComponentManager;
diff --git a/packages/@glimmer-workspace/jsbin/index.html b/packages/@glimmer-workspace/jsbin/index.html
index 5ec0b885a..d74ca7d7e 100644
--- a/packages/@glimmer-workspace/jsbin/index.html
+++ b/packages/@glimmer-workspace/jsbin/index.html
@@ -14,12 +14,116 @@
} from "@glimmer/runtime";
import { EvaluationContextImpl, templateFactory } from "@glimmer/opcode-compiler";
import { artifacts, RuntimeOpImpl } from "@glimmer/program";
- import { setComponentTemplate, setInternalComponentManager } from "@glimmer/manager";
+ import {
+ setComponentTemplate,
+ setInternalComponentManager,
+ getComponentTemplate,
+ } from "@glimmer/manager";
import { precompile, precompileJSON } from "@glimmer/compiler";
import { dirtyTagFor, tagFor, consumeTag } from "@glimmer/validator";
import { preprocess, getTemplateLocals } from "@glimmer/syntax";
- import boilerplateComponentManager from "./boilerplate-example-component-manager";
import setGlobalContext from "@glimmer/global-context";
+ import { createConstRef, valueForRef } from "@glimmer/reference";
+ import { EMPTY_ARGS } from "@glimmer/runtime";
+
+ class ArgsProxy {
+ isExtensible() {
+ return false;
+ }
+
+ ownKeys(target) {
+ return Object.keys(target);
+ }
+
+ getOwnPropertyDescriptor(target, p) {
+ let desc;
+ if (typeof p === "string" && p in target) {
+ const value = valueForRef(target[p]);
+ desc = {
+ enumerable: true,
+ configurable: false,
+ writable: false,
+ value,
+ };
+ }
+ return desc;
+ }
+
+ has(target, p) {
+ return typeof p === "string" ? p in target : false;
+ }
+
+ get(target, p) {
+ if (typeof p === "string" && p in target) {
+ return valueForRef(target[p]);
+ }
+
+ return;
+ }
+
+ set() {
+ return false;
+ }
+ }
+
+ function argsProxy(args) {
+ return new Proxy(args.named, new ArgsProxy());
+ }
+
+ /**
+ This repo has no component managers
+ */
+ class BasicComponentManager {
+ create(_owner, Component, args) {
+ const instance = new Component(argsProxy(args === null ? EMPTY_ARGS : args.capture()));
+ const self = createConstRef(instance, "this");
+ return { instance, self };
+ }
+
+ getDebugName() {
+ return "example";
+ }
+
+ didCreate() {}
+
+ didRenderLayout() {}
+
+ didUpdate() {}
+
+ didUpdateLayout() {}
+
+ getCapabilities() {
+ return {
+ dynamicLayout: false,
+ dynamicTag: false,
+ prepareArgs: false,
+ createArgs: true,
+ attributeHook: false,
+ elementHook: false,
+ dynamicScope: false,
+ createCaller: false,
+ updateHook: false,
+ createInstance: true,
+ wrapped: false,
+ willDestroy: false,
+ hasSubOwner: false,
+ };
+ }
+
+ getSelf(state) {
+ return state.self;
+ }
+
+ getDestroyable(state) {
+ return state.instance;
+ }
+
+ getStaticLayout(definition) {
+ return getComponentTemplate(definition)();
+ }
+ }
+
+ const boilerplateComponentManager = new BasicComponentManager();
const scheduledDestructors = [];
const scheduledFinalizers = [];
diff --git a/packages/@glimmer-workspace/jsbin/interfaces.ts b/packages/@glimmer-workspace/jsbin/interfaces.ts
deleted file mode 100644
index 413482f7d..000000000
--- a/packages/@glimmer-workspace/jsbin/interfaces.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { Dict } from '@glimmer/interfaces';
-
-export type ComponentArgs = Readonly;
From 42d7e33b7828103975aff4bd1ed169e360cde9ac Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Fri, 25 Apr 2025 11:28:17 -0400
Subject: [PATCH 6/9] Lint:fix
---
packages/@glimmer-workspace/jsbin/package.json | 5 +++--
repo-metadata/metadata.json | 12 ++++++++++++
2 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/packages/@glimmer-workspace/jsbin/package.json b/packages/@glimmer-workspace/jsbin/package.json
index 710df289f..7e9812523 100644
--- a/packages/@glimmer-workspace/jsbin/package.json
+++ b/packages/@glimmer-workspace/jsbin/package.json
@@ -1,16 +1,17 @@
{
"private": true,
"name": "@glimmer-workspace/js-bin",
+ "version": "0.92.0",
"type": "module",
"scripts": {
"start": "vite"
},
"dependencies": {
+ "@glimmer/global-context": "workspace:*",
"@glimmer/interfaces": "workspace:*",
"@glimmer/manager": "workspace:*",
"@glimmer/reference": "workspace:*",
- "@glimmer/runtime": "workspace:*",
- "@glimmer/global-context": "workspace:*"
+ "@glimmer/runtime": "workspace:*"
},
"devDependencies": {
"vite": "^5.4.10"
diff --git a/repo-metadata/metadata.json b/repo-metadata/metadata.json
index 67b44db03..d20a87fef 100644
--- a/repo-metadata/metadata.json
+++ b/repo-metadata/metadata.json
@@ -135,6 +135,18 @@
"./package.json": [[["default"], "./package.json"]]
}
},
+ {
+ "root": "packages/@glimmer-workspace/jsbin",
+ "name": "@glimmer-workspace/js-bin",
+ "type": "module",
+ "private": true,
+ "repo-meta": {
+ "built": false
+ },
+ "entryPoints": {
+ "./package.json": [[["default"], "./package.json"]]
+ }
+ },
{
"root": "packages/@glimmer-workspace/test-utils",
"name": "@glimmer-workspace/test-utils",
From c5bebff67be3d7428c51541835b239e40eacfaac Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Fri, 25 Apr 2025 11:42:56 -0400
Subject: [PATCH 7/9] Updates
---
.../@glimmer-workspace/jsbin/vite.config.ts | 61 ++++++++++---------
repo-metadata/metadata.json | 2 +
2 files changed, 35 insertions(+), 28 deletions(-)
diff --git a/packages/@glimmer-workspace/jsbin/vite.config.ts b/packages/@glimmer-workspace/jsbin/vite.config.ts
index ee0000809..7c2ec69e9 100644
--- a/packages/@glimmer-workspace/jsbin/vite.config.ts
+++ b/packages/@glimmer-workspace/jsbin/vite.config.ts
@@ -3,34 +3,39 @@ import path from 'node:path';
const currentPath = import.meta.dirname;
const packagesPath = path.resolve(currentPath, '../../../packages');
-const packagePath = (name: string) => {
- const result = path.join(packagesPath, name, 'dist/dev/index.js');
- return result;
-};
-export default defineConfig({
- resolve: {
- alias: {
- '@glimmer/compiler': packagePath('@glimmer/compiler'),
- '@glimmer/constants': packagePath('@glimmer/constants'),
- '@glimmer/debug': packagePath('@glimmer/debug'),
- '@glimmer/debug-util': packagePath('@glimmer/debug-util'),
- '@glimmer/destroyable': packagePath('@glimmer/destroyable'),
- '@glimmer/encoder': packagePath('@glimmer/encoder'),
- '@glimmer/global-context': packagePath('@glimmer/global-context'),
- '@glimmer/interfaces': packagePath('@glimmer/interfaces'),
- '@glimmer/manager': packagePath('@glimmer/manager'),
- '@glimmer/node': packagePath('@glimmer/node'),
- '@glimmer/opcode-compiler': packagePath('@glimmer/opcode-compiler'),
- '@glimmer/owner': packagePath('@glimmer/owner'),
- '@glimmer/program': packagePath('@glimmer/program'),
- '@glimmer/reference': packagePath('@glimmer/reference'),
- '@glimmer/runtime': packagePath('@glimmer/runtime'),
- '@glimmer/syntax': packagePath('@glimmer/syntax'),
- '@glimmer/validator': packagePath('@glimmer/validator'),
- '@glimmer/util': packagePath('@glimmer/util'),
- '@glimmer/vm': packagePath('@glimmer/vm'),
- '@glimmer/wire-format': packagePath('@glimmer/wire-format'),
+export default defineConfig(({ mode }) => {
+ let subDir = mode === 'production' ? 'prod' : 'dev';
+
+ const packagePath = (name: string) => {
+ const result = path.join(packagesPath, name, 'dist/' + subDir + '/index.js');
+ return result;
+ };
+
+ return {
+ resolve: {
+ alias: {
+ '@glimmer/compiler': packagePath('@glimmer/compiler'),
+ '@glimmer/constants': packagePath('@glimmer/constants'),
+ '@glimmer/debug': packagePath('@glimmer/debug'),
+ '@glimmer/debug-util': packagePath('@glimmer/debug-util'),
+ '@glimmer/destroyable': packagePath('@glimmer/destroyable'),
+ '@glimmer/encoder': packagePath('@glimmer/encoder'),
+ '@glimmer/global-context': packagePath('@glimmer/global-context'),
+ '@glimmer/interfaces': packagePath('@glimmer/interfaces'),
+ '@glimmer/manager': packagePath('@glimmer/manager'),
+ '@glimmer/node': packagePath('@glimmer/node'),
+ '@glimmer/opcode-compiler': packagePath('@glimmer/opcode-compiler'),
+ '@glimmer/owner': packagePath('@glimmer/owner'),
+ '@glimmer/program': packagePath('@glimmer/program'),
+ '@glimmer/reference': packagePath('@glimmer/reference'),
+ '@glimmer/runtime': packagePath('@glimmer/runtime'),
+ '@glimmer/syntax': packagePath('@glimmer/syntax'),
+ '@glimmer/validator': packagePath('@glimmer/validator'),
+ '@glimmer/util': packagePath('@glimmer/util'),
+ '@glimmer/vm': packagePath('@glimmer/vm'),
+ '@glimmer/wire-format': packagePath('@glimmer/wire-format'),
+ },
},
- },
+ };
});
diff --git a/repo-metadata/metadata.json b/repo-metadata/metadata.json
index d20a87fef..43ff66285 100644
--- a/repo-metadata/metadata.json
+++ b/repo-metadata/metadata.json
@@ -138,12 +138,14 @@
{
"root": "packages/@glimmer-workspace/jsbin",
"name": "@glimmer-workspace/js-bin",
+ "version": "0.92.0",
"type": "module",
"private": true,
"repo-meta": {
"built": false
},
"entryPoints": {
+ "./dist/assets/index-Dqd22NCS.js": [[["default"], "./dist/assets/index-Dqd22NCS.js"]],
"./package.json": [[["default"], "./package.json"]]
}
},
From 844f30a0febe93a0b9ae7cc1ff6084bd1356e3e6 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Fri, 25 Apr 2025 11:57:34 -0400
Subject: [PATCH 8/9] We don't need the ArgsProxy
---
packages/@glimmer-workspace/jsbin/index.html | 47 +-------------------
1 file changed, 1 insertion(+), 46 deletions(-)
diff --git a/packages/@glimmer-workspace/jsbin/index.html b/packages/@glimmer-workspace/jsbin/index.html
index d74ca7d7e..bf57db98e 100644
--- a/packages/@glimmer-workspace/jsbin/index.html
+++ b/packages/@glimmer-workspace/jsbin/index.html
@@ -24,58 +24,13 @@
import { preprocess, getTemplateLocals } from "@glimmer/syntax";
import setGlobalContext from "@glimmer/global-context";
import { createConstRef, valueForRef } from "@glimmer/reference";
- import { EMPTY_ARGS } from "@glimmer/runtime";
-
- class ArgsProxy {
- isExtensible() {
- return false;
- }
-
- ownKeys(target) {
- return Object.keys(target);
- }
-
- getOwnPropertyDescriptor(target, p) {
- let desc;
- if (typeof p === "string" && p in target) {
- const value = valueForRef(target[p]);
- desc = {
- enumerable: true,
- configurable: false,
- writable: false,
- value,
- };
- }
- return desc;
- }
-
- has(target, p) {
- return typeof p === "string" ? p in target : false;
- }
-
- get(target, p) {
- if (typeof p === "string" && p in target) {
- return valueForRef(target[p]);
- }
-
- return;
- }
-
- set() {
- return false;
- }
- }
-
- function argsProxy(args) {
- return new Proxy(args.named, new ArgsProxy());
- }
/**
This repo has no component managers
*/
class BasicComponentManager {
create(_owner, Component, args) {
- const instance = new Component(argsProxy(args === null ? EMPTY_ARGS : args.capture()));
+ const instance = new Component(args.capture());
const self = createConstRef(instance, "this");
return { instance, self };
}
From 7188f4449e8f0b453ed64dacf4756f97be6bc1cf Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Fri, 25 Apr 2025 13:17:37 -0400
Subject: [PATCH 9/9] Add comments
---
packages/@glimmer-workspace/jsbin/index.html | 30 +++++++++++++++++++-
1 file changed, 29 insertions(+), 1 deletion(-)
diff --git a/packages/@glimmer-workspace/jsbin/index.html b/packages/@glimmer-workspace/jsbin/index.html
index bf57db98e..15a6c86e1 100644
--- a/packages/@glimmer-workspace/jsbin/index.html
+++ b/packages/@glimmer-workspace/jsbin/index.html
@@ -96,16 +96,29 @@
let revalidateScheduled = false;
+ /**
+ * The Global Context provides some core swappable utilities, feature flag configuration, and some hooks for some of the Render Phases.
+ * This is required to be configured, but could be entirely unneeded in modern code.
+ *
+ *
+ * This feels like it could have been designed to try to allow for different reactivity systems over time.
+ * But we don't need those use cases anymore.
+ * Additionally, we can configure the render phases in scheduleRevalidate
+ * it is *required* to do this, else updates to the DOM do not occur
+ */
setGlobalContext({
scheduleRevalidate() {
if (!revalidateScheduled) {
Promise.resolve()
.then(() => {
const { env } = result;
+ console.log("env.begin");
env.begin();
+ console.log("env.rerender");
result.rerender();
revalidateScheduled = false;
env.commit();
+ console.log("env.commit");
})
.catch((e) => console.error(e));
}
@@ -193,14 +206,23 @@
};
}
+ /**
+ * With the component manager we've configured, we don't need a super class
+ * but also, we don't interact with any args (this.args doesn't exist).
+ */
class Counter {
_count = 0;
+ /**
+ * This is a simplified version of @tracked
+ */
get count() {
+ console.log("read: count");
consumeTag(tagFor(this, "_count"));
return this._count;
}
set count(value) {
+ console.log("set: count");
this._count = value;
dirtyTagFor(this, "_count");
}
@@ -214,7 +236,7 @@
createTemplate(
`You have clicked the button {{this.count}} times.
- `,
+ `,
{ on },
),
this,
@@ -245,6 +267,11 @@
return templateFactory(templateBlock);
}
+ /**
+ * Main entrypoint for the demo.
+ * This configures a whole bunch of legacy features that shouldn't be needed, especially in
+ strict mode.
+ */
function render() {
const element = document.body;
const sharedArtifacts = artifacts();
@@ -274,6 +301,7 @@
const cursor = { element, nextSibling: null };
const treeBuilder = NewTreeBuilder.forInitialRender(env, cursor);
+ console.log("renderSync");
const result = renderSync(env, renderComponent(context, treeBuilder, {}, Counter, {}));
registerResult(result);