Streamline append VM implementation (#1646)

.vscode/settings.json

@@ -28,6 +28,7 @@
       "mode": "auto"
     }
   ],
+  "eslint.validate": ["javascript", "typescript", "json", "jsonc"],
   "files.exclude": {
     "**/.DS_Store": true,
     "**/.git": true
@@ -40,17 +41,16 @@
   },
   "javascript.updateImportsOnFileMove.enabled": "always",
   "typescript.updateImportsOnFileMove.enabled": "always",
-
   "javascript.preferences.importModuleSpecifier": "project-relative",
   "typescript.preferences.importModuleSpecifier": "project-relative",
-
-  "typescript.preferences.importModuleSpecifierEnding": "index",
+  "typescript.preferences.importModuleSpecifierEnding": "auto",
   "typescript.preferences.useAliasesForRenames": false,
-
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+  "typescript.tsserver.experimental.enableProjectDiagnostics": false,
   "typescript.workspaceSymbols.scope": "currentProject",
+  "typescript.experimental.updateImportsOnPaste": true,
   "eslint.problems.shortenToSingleLine": true,
+  "typescript.experimental.expandableHover": true,
   "inline-bookmarks.expert.custom.words.mapping": {
     "warn": ["@premerge(\\s|$)"],
     "active": ["@active(\\s|$)"],

benchmark/benchmarks/krausest/package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "@types/node": "^20.9.4",
     "eslint": "^8.52.0",
-    "vite": "^5.0.12"
+    "vite": "^5.4.10"
   },
   "engines": {
     "node": ">=18.0.0"

bin/run-tests.mjs

@@ -1,12 +1,10 @@
-
 // @ts-check
 
 import child from 'child_process';
 import { resolve } from 'path';
 import PCR from 'puppeteer-chromium-resolver';
 import { fileURLToPath } from 'url';
 
-
 const { puppeteer, executablePath } = await PCR({});
 
 const __root = fileURLToPath(new URL('..', import.meta.url));

bin/setup-bench.mjs

@@ -5,6 +5,7 @@ import chalk from 'chalk';
 
 const ROOT = new URL('..', import.meta.url).pathname;
 $.verbose = true;
+const REUSE_CONTROL = !!process.env['REUSE_CONTROL'];
 
 /*
 
@@ -19,8 +20,8 @@ $.verbose = true;
 
 */
 
-const experimentBranchName =
-  process.env['EXPERIMENT_BRANCH_NAME'] || (await $`git rev-parse --abbrev-ref HEAD`).stdout.trim();
+const experimentRef =
+  process.env['EXPERIMENT_BRANCH_NAME'] || (await $`git rev-parse HEAD`).stdout.trim();
 const controlBranchName = process.env['CONTROL_BRANCH_NAME'] || 'main';
 
 // same order as in benchmark/benchmarks/krausest/lib/index.ts
@@ -75,9 +76,12 @@ const benchmarkFolder = 'benchmark';
 await $`rm -rf ${join(pwd, benchmarkFolder, 'node_modules')}`;
 await $`rm -rf ${join(pwd, benchmarkFolder, 'benchmarks', 'krausest', 'node_modules')}`;
 
-await $`rm -rf ${CONTROL_DIR}`;
+if (!REUSE_CONTROL) {
+  await $`rm -rf ${CONTROL_DIR}`;
+  await $`mkdir ${CONTROL_DIR}`;
+}
+
 await $`rm -rf ${EXPERIMENT_DIR}`;
-await $`mkdir ${CONTROL_DIR}`;
 await $`mkdir ${EXPERIMENT_DIR}`;
 
 const isMacOs = os.platform() === 'darwin';
@@ -91,18 +95,56 @@ const EXPERIMENT_URL = `http://localhost:${EXPERIMENT_PORT}`;
 
 // we can't do it in parallel on CI,
 
+if (!REUSE_CONTROL) {
+  // setup control
+  await within(async () => {
+    await $`git fetch origin`;
+    const mainRef = await $`git rev-parse origin/main`;
+    await cd(CONTROL_DIR);
+    await $`git clone ${join(ROOT, '.git')} .`;
+    await $`git reset --hard ${mainRef}`;
+    await $`rm -rf ./benchmark`;
+    await $`cp -r ${BENCHMARK_FOLDER} ./benchmark`;
+
+    console.info(`$ pnpm install --no-frozen-lockfile ${chalk.gray('[control]')}`);
+
+    await $`pwd`;
+    const result = await $`pnpm install`;
+    console.log(result);
+
+    console.info(`$ pnpm build ${chalk.gray('[control]')}`);
+
+    await $`pnpm build`;
+
+    if (isMacOs) {
+      await $`find ./packages -name 'package.json' -exec sed -i '' 's|"main": "index.ts",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
+      await $`find ./packages -name 'package.json' -exec sed -i '' 's|"main": "./dist/index.js",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
+      await $`find ./packages -name 'package.json' -exec sed -i '' 's|"import": "./dist/index.js"|"import": "./dist/prod/index.js"|g' {} \\;`;
+    } else {
+      await $`find ./packages -name 'package.json' -exec sed -i 's|"main": "index.ts",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
+      await $`find ./packages -name 'package.json' -exec sed -i 's|"main": "./dist/index.js",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
+      await $`find ./packages -name 'package.json' -exec sed -i 's|"import": "./dist/index.js"|"import": "./dist/prod/index.js"|g' {} \\;`;
+    }
+
+    await cd(CONTROL_BENCH_DIR);
+    await $`pnpm vite build`;
+  });
+}
+
 // setup experiment
 await within(async () => {
   await cd(EXPERIMENT_DIR);
   await $`git clone ${join(ROOT, '.git')} .`;
-  await $`git checkout ${experimentBranchName}`;
+  await $`git checkout --force ${experimentRef}`;
   await $`rm -rf ./benchmark`;
   await $`cp -r ${BENCHMARK_FOLDER} ./benchmark`;
 
-  console.info(`$ pnpm install --frozen-lockfile ${chalk.gray('[experiment]')}`);
-  await $`pnpm install --frozen-lockfile`.quiet();
+  console.info(`$ pnpm install --no-frozen-lockfile ${chalk.gray('[experiment]')}`);
+  const install = () => $`pnpm install --no-frozen-lockfile`.pipe(process.stderr);
+  await spinner(install);
   console.info(`$ pnpm build ${chalk.gray('[experiment]')}`);
-  await spinner(() => $`pnpm build`.quiet());
+  const build = () => $`pnpm build`.pipe(process.stderr);
+  await spinner(build);
 
   if (isMacOs) {
     await $`find ./packages -name 'package.json' -exec sed -i '' 's|"main": "index.ts",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
@@ -118,37 +160,9 @@ await within(async () => {
   await $`pnpm vite build`;
 });
 
-// setup control
-await within(async () => {
-  await cd(CONTROL_DIR);
-  await $`git clone ${join(ROOT, '.git')} .`;
-  await $`git fetch origin`;
-  await $`git reset --hard origin/${controlBranchName}`;
-  await $`rm -rf ./benchmark`;
-  await $`cp -r ${BENCHMARK_FOLDER} ./benchmark`;
-
-  console.info(`$ pnpm install --frozen-lockfile ${chalk.gray('[control]')}`);
-  await $`pnpm install --frozen-lockfile`.quiet();
-  console.info(`$ pnpm build ${chalk.gray('[control]')}`);
-  await spinner(() => $`pnpm build`.quiet());
-
-  if (isMacOs) {
-    await $`find ./packages -name 'package.json' -exec sed -i '' 's|"main": "index.ts",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
-    await $`find ./packages -name 'package.json' -exec sed -i '' 's|"main": "./dist/index.js",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
-    await $`find ./packages -name 'package.json' -exec sed -i '' 's|"import": "./dist/index.js"|"import": "./dist/prod/index.js"|g' {} \\;`;
-  } else {
-    await $`find ./packages -name 'package.json' -exec sed -i 's|"main": "index.ts",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
-    await $`find ./packages -name 'package.json' -exec sed -i 's|"main": "./dist/index.js",|"main": "./dist/prod/index.js","module": "./dist/prod/index.js",|g' {} \\;`;
-    await $`find ./packages -name 'package.json' -exec sed -i 's|"import": "./dist/index.js"|"import": "./dist/prod/index.js"|g' {} \\;`;
-  }
-
-  await cd(CONTROL_BENCH_DIR);
-  await $`pnpm vite build`;
-});
-
 console.info({
   control: controlBranchName,
-  experiment: experimentBranchName,
+  experiment: experimentRef,
   EXPERIMENT_DIR,
   CONTROL_DIR,
 });

package.json

@@ -96,15 +96,15 @@
     "release-it": "^16.2.1",
     "release-plan": "^0.9.2",
     "rimraf": "^5.0.0",
-    "rollup": "^4.5.1",
+    "rollup": "^4.24.3",
     "semver": "^7.5.2",
     "testem-failure-only-reporter": "^1.0.0",
     "toml": "^3.0.0",
     "tracerbench": "^8.0.1",
     "ts-node": "^10.9.1",
     "turbo": "^1.9.3",
     "typescript": "^5.0.4",
-    "vite": "^5.0.12",
+    "vite": "^5.4.10",
     "xo": "^0.54.2",
     "zx": "^8.1.9"
   },

packages/@glimmer-workspace/benchmark-env/lib/benchmark/on-modifier.ts

@@ -5,8 +5,8 @@ import type {
   SimpleElement,
 } from '@glimmer/interfaces';
 import type { Reference } from '@glimmer/reference';
+import { castToBrowser } from '@glimmer/debug-util';
 import { valueForRef } from '@glimmer/reference';
-import { castToBrowser } from '@glimmer/util';
 import { createUpdatableTag } from '@glimmer/validator';
 
 interface OnModifierState {

packages/@glimmer-workspace/benchmark-env/lib/benchmark/util.ts

@@ -1,5 +1,5 @@
 import type { CompileTimeCompilationContext, CompileTimeComponent } from '@glimmer/interfaces';
-import { unwrapHandle } from '@glimmer/util';
+import { unwrapHandle } from '@glimmer/debug-util';
 
 export function compileEntry(entry: CompileTimeComponent, context: CompileTimeCompilationContext) {
   return unwrapHandle(entry.compilable!.compile(context));

packages/@glimmer-workspace/benchmark-env/lib/interfaces.ts

@@ -8,7 +8,7 @@ export interface Cell<T> {
   set(value: T): void;
 }
 
-export type ComponentArgs = Readonly<Dict<any>>;
+export type ComponentArgs = Readonly<Dict>;
 
 export interface Benchmark {
   /**

packages/@glimmer-workspace/benchmark-env/package.json

@@ -20,6 +20,7 @@
     "@glimmer/validator": "workspace:*"
   },
   "devDependencies": {
+    "@glimmer/debug-util": "workspace:*",
     "eslint": "^8.52.0"
   },
   "engines": {

packages/@glimmer-workspace/build/lib/config.js

@@ -112,7 +112,11 @@ export function typescript(pkg, config) {
 
 /** @type {['is' | 'startsWith', string[], 'inline' | 'external'][]} */
 const EXTERNAL_OPTIONS = [
-  ['is', ['tslib', '@glimmer/local-debug-flags', '@glimmer/debug'], 'inline'],
+  [
+    'is',
+    ['tslib', '@glimmer/local-debug-flags', '@glimmer/debug', '@glimmer/debug-util'],
+    'inline',
+  ],
   ['is', ['@handlebars/parser', 'simple-html-tokenizer', 'babel-plugin-debug-macros'], 'external'],
   ['startsWith', ['.', '/', '#', '@babel/runtime/', process.cwd().replace(/\\/gu, '/')], 'inline'],
   ['startsWith', ['@glimmer/', '@simple-dom/', '@babel/', 'node:'], 'external'],

packages/@glimmer-workspace/build/package.json

@@ -32,7 +32,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-ts": "^3.4.5",
     "unplugin-fonts": "^1.0.3",
-    "vite": "^5.0.12"
+    "vite": "^5.4.10"
   },
   "devDependencies": {
     "@types/node": "^20.9.4",

packages/@glimmer-workspace/integration-tests/lib/components/emberish-curly.ts

@@ -19,6 +19,7 @@ import type {
   WithDynamicTagName,
 } from '@glimmer/interfaces';
 import type { DirtyableTag } from '@glimmer/validator';
+import { unwrapTemplate } from '@glimmer/debug-util';
 import { registerDestructor } from '@glimmer/destroyable';
 import { setInternalComponentManager } from '@glimmer/manager';
 import {
@@ -29,7 +30,7 @@ import {
   valueForRef,
 } from '@glimmer/reference';
 import { reifyNamed, reifyPositional } from '@glimmer/runtime';
-import { assign, EMPTY_ARRAY, keys, unwrapTemplate } from '@glimmer/util';
+import { assign, EMPTY_ARRAY, keys } from '@glimmer/util';
 import { consumeTag, createTag, dirtyTag, dirtyTagFor } from '@glimmer/validator';
 
 import type { TestJitRuntimeResolver } from '../modes/jit/resolver';

packages/@glimmer-workspace/integration-tests/lib/dom/assertions.ts

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
 import type { Dict, SimpleElement, SimpleNode } from '@glimmer/interfaces';
-import { assign, dict, isSimpleElement } from '@glimmer/util';
+import { isSimpleElement } from '@glimmer/debug-util';
+import { assign, dict } from '@glimmer/util';
 
 export interface DebugElement {
   element: SimpleElement | null | undefined;
@@ -102,6 +104,7 @@ export function equalsElement(
 }
 
 // TODO: Consider removing this
+// eslint-disable-next-line deprecation/deprecation
 interface CompatibleTagNameMap extends ElementTagNameMap {
   foreignobject: SVGForeignObjectElement;
 }

packages/@glimmer-workspace/integration-tests/lib/modes/jit/delegate.ts

@@ -20,6 +20,7 @@ import type {
 import type { Reference } from '@glimmer/reference';
 import type { CurriedValue, EnvironmentDelegate } from '@glimmer/runtime';
 import type { ASTPluginBuilder, PrecompileOptions } from '@glimmer/syntax';
+import { castToBrowser, castToSimple, expect, unwrapTemplate } from '@glimmer/debug-util';
 import { programCompilationContext } from '@glimmer/opcode-compiler';
 import { artifacts, RuntimeOpImpl } from '@glimmer/program';
 import { createConstRef } from '@glimmer/reference';
@@ -35,7 +36,7 @@ import {
   renderSync,
   runtimeContext,
 } from '@glimmer/runtime';
-import { assign, castToBrowser, castToSimple, expect, unwrapTemplate } from '@glimmer/util';
+import { assign } from '@glimmer/util';
 
 import type { ComponentKind, ComponentTypes } from '../../components';
 import type { UserHelper } from '../../helpers';

packages/@glimmer-workspace/integration-tests/lib/modes/jit/registry.ts

@@ -8,8 +8,9 @@ import type {
   ResolvedComponentDefinition,
   Template,
 } from '@glimmer/interfaces';
+import { assert } from '@glimmer/debug-util';
 import { getComponentTemplate } from '@glimmer/manager';
-import { assert, dict } from '@glimmer/util';
+import { dict } from '@glimmer/util';
 
 // This is used to replicate a requirement of Ember's template referrers, which
 // assign the `owner` to the template meta. The requirement is that the template

packages/@glimmer-workspace/integration-tests/lib/modes/jit/render.ts

@@ -1,8 +1,8 @@
 import type { ElementBuilder, RenderResult } from '@glimmer/interfaces';
 import type { Reference } from '@glimmer/reference';
 import type { PrecompileOptions } from '@glimmer/syntax';
+import { unwrapTemplate } from '@glimmer/debug-util';
 import { renderMain, renderSync } from '@glimmer/runtime';
-import { unwrapTemplate } from '@glimmer/util';
 
 import type { JitTestDelegateContext } from './delegate';
 

packages/@glimmer-workspace/integration-tests/lib/modes/rehydration/delegate.ts

@@ -15,9 +15,10 @@ import type {
 } from '@glimmer/interfaces';
 import type { Reference } from '@glimmer/reference';
 import type { ASTPluginBuilder, PrecompileOptions } from '@glimmer/syntax';
+import { castToSimple } from '@glimmer/debug-util';
 import { serializeBuilder } from '@glimmer/node';
 import { createConstRef } from '@glimmer/reference';
-import { assign, castToSimple } from '@glimmer/util';
+import { assign } from '@glimmer/util';
 import createHTMLDocument from '@simple-dom/document';
 
 import type { ComponentKind } from '../../components';

packages/@glimmer-workspace/integration-tests/lib/render-test.ts

@@ -11,9 +11,10 @@ import type {
 } from '@glimmer/interfaces';
 import type { ASTPluginBuilder } from '@glimmer/syntax';
 import type { NTuple } from '@glimmer-workspace/test-utils';
+import { assert, expect, isPresent, unwrap } from '@glimmer/debug-util';
 import { destroy } from '@glimmer/destroyable';
 import { inTransaction } from '@glimmer/runtime';
-import { assert, clearElement, dict, expect, isPresent, unwrap } from '@glimmer/util';
+import { clearElement, dict } from '@glimmer/util';
 import { dirtyTagFor } from '@glimmer/validator';
 
 import type { ComponentBlueprint, ComponentKind, ComponentTypes } from './components';
@@ -362,6 +363,7 @@ export class RenderTest implements IRenderTest {
 
   render(template: string | ComponentBlueprint, properties: Dict<unknown> = {}): void {
     try {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       QUnit.assert.ok(true, `Rendering ${template} with ${JSON.stringify(properties)}`);
     } catch {
       // couldn't stringify, possibly has a circular dependency

packages/@glimmer-workspace/integration-tests/lib/snapshot.ts

@@ -1,6 +1,7 @@
 import type { Nullable, SimpleElement, SimpleNode } from '@glimmer/interfaces';
 import type { EndTag, Token } from 'simple-html-tokenizer';
-import { castToSimple, COMMENT_NODE, TEXT_NODE, unwrap } from '@glimmer/util';
+import { castToSimple, unwrap } from '@glimmer/debug-util';
+import { COMMENT_NODE, TEXT_NODE } from '@glimmer/util';
 import { tokenize } from 'simple-html-tokenizer';
 
 import { replaceHTML, toInnerHTML } from './dom/simple-utils';
@@ -97,6 +98,7 @@ function generateTokens(divOrHTML: SimpleElement | string): { tokens: Token[]; h
   let tokens = tokenize(toInnerHTML(div), {});
 
   tokens = tokens.reduce((tokens, token) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
     if (token.type === 'StartTag') {
       if (token.attributes) {
         token.attributes.sort((a, b) => {

packages/@glimmer-workspace/integration-tests/lib/suites/emberish-components.ts

@@ -1,5 +1,5 @@
 import type { SimpleElement } from '@glimmer/interfaces';
-import { unwrap } from '@glimmer/util';
+import { unwrap } from '@glimmer/debug-util';
 
 import type { Count } from '../render-test';
 

packages/@glimmer-workspace/integration-tests/lib/suites/entry-point.ts

@@ -1,6 +1,6 @@
+import { castToBrowser } from '@glimmer/debug-util';
 import { createPrimitiveRef } from '@glimmer/reference';
 import { DynamicScopeImpl } from '@glimmer/runtime';
-import { castToBrowser } from '@glimmer/util';
 
 import type { ComponentKind } from '../components/types';