ember-vite-hmr 2.3.0 → 2.7.0

package/dist/lib/hmr.js

@@ -9,235 +9,198 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { parseSync } from '@babel/core';
-import traverseModule from '@babel/traverse';
-const traverse = traverseModule.default || traverseModule;
 import { readFile } from 'fs/promises';
+import { hmrImportMetadataCache } from './babel-plugin.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-// Above this many distinct named blocks, fall back to forwarding all of them
-// unconditionally rather than generating an exponential number of branches
-// (see generateInvocations below for why branching is needed at all).
-const MAX_COMBINATORIAL_YIELDS = 8;
-function blockTag(y) {
-    return `<:${y} as |a b c d e f g h i j k l|>{{yield a b c d e f g h i j k l to='${y}'}}</:${y}>`;
+// Embroider's resolver registry. It's the binding the app entry's HMR hook
+// mutates, so we use it to locate that entry. Embroider keeps this as an
+// internal literal (not a public export), so we mirror the string here.
+const compatModulesSpecifier = '@embroider/virtual/compat-modules';
+export const hmrRuntimeId = 'virtual:ember-vite-hmr-runtime';
+const resolvedRuntimeId = '\0' + hmrRuntimeId;
+// This runs in the browser.
+// It has no imports on purpose: a virtual module has no location on disk,
+// so Embroider's resolver has nothing to resolve `@glimmer/tracking` against.
+// The app modules that call `define` can import `tracked` normally and pass
+// it in.
+//
+// `byValue` lets an old reference to a component class find its current
+// registry entry, so modules holding stale bindings still serve the newest
+// version.
+//
+// `consumed` lets a self-accepting module that nobody rendered through
+// fall back to `invalidate()` rather than silently doing nothing.
+//
+// `tracked` is called as a function (not a decorator syntax), so the runtime
+// doesn't depend on the app's Babel decorator config.
+const runtimeSource = `
+const entries = new WeakMap();
+
+// Per-class FIFO queues of live component instances, used to pair old instances
+// (being destroyed by an HMR swap) with the new instances that replace them.
+// Keyed by the NEW class (the replacement). Cleared at update() time so that
+// instances created by normal user-flow navigation before the swap are never
+// in the queue — only instances created after the swap callback fires.
+const liveInstanceQueues = new WeakMap();
+
+function isRef(value) {
+  return value !== null && (typeof value === 'object' || typeof value === 'function');
 }
-function invocation(selected) {
-    if (!selected.length) {
-        return `<this.curried @__hot__={{this.hot}} ...attributes />`;
-    }
-    return `<this.curried @__hot__={{this.hot}} ...attributes>${selected.map(blockTag).join('\n')}</this.curried>`;
+
+function makeEntry(tracked, value) {
+  class Entry {}
+  const desc = tracked(Entry.prototype, 'current', { configurable: true, enumerable: true, writable: true, initializer: null });
+  Object.defineProperty(Entry.prototype, 'current', desc);
+  const entry = new Entry();
+  entry.current = value;
+  entry.consumed = false;
+  return entry;
 }
-// Glimmer determines a target component's `(has-block "y")` purely from
-// whether a `<:y>` named block tag is structurally present on the
-// invocation, not from whether that block's content renders anything, and
-// named block tags cannot be nested inside `{{#if}}` (a "named block nested
-// in a normal block" compile error). So a per-block `{{#if (has-block 'y')}}
-// <:y>...</:y>{{/if}}` inside a single invocation can't work — instead this
-// recursively branches on `(has-block y)` for each known named block to
-// build one fully static invocation per combination of blocks the caller
-// actually passed, so blocks not passed are truly absent rather than merely
-// empty (see #531).
-function generateInvocations(remaining, selected) {
-    if (!remaining.length) {
-        return invocation(selected);
-    }
-    const [y, ...rest] = remaining;
-    return `{{#if (has-block '${y}')}}${generateInvocations(rest, [...selected, y])}{{else}}${generateInvocations(rest, selected)}{{/if}}`;
+
+// Register value for the first time. No-op if already registered.
+export function register(value, tracked) {
+  if (!isRef(value)) return;
+  if (!entries.has(value)) {
+    entries.set(value, makeEntry(tracked, value));
+  }
 }
-function generateContent(yields) {
-    if (!yields.includes('default')) {
-        yields.push('default');
-    }
-    if (yields.length > MAX_COMBINATORIAL_YIELDS) {
-        let all = yields.map((y) => `(has-block '${y}')`).join(' ');
-        return `
-    {{#if (notAny ${all})}}
-        <this.curried @__hot__={{this.hot}} ...attributes />
-    {{else}}
-        ${invocation(yields)}
-    {{/if}}
-  `;
+
+// Re-point an existing entry from oldValue to newValue.
+// Also registers newValue under the same entry so future current() calls
+// on newValue resolve to whatever is current at that point.
+//
+// Clearing liveInstanceQueues[newValue] here is the key to correctness for
+// syncState across user-flow create/destroy cycles. Any instances of newValue
+// created and destroyed by normal navigation *before* this swap happened are
+// stale. By resetting the queue at swap time, only instances created *after*
+// this update() call (the replacement instances Glimmer is about to create)
+// are eligible to receive state from the old instances being torn down.
+export function update(oldValue, newValue) {
+  if (!isRef(oldValue)) return;
+  const entry = entries.get(oldValue);
+  if (entry) {
+    entry.current = newValue;
+    if (isRef(newValue)) {
+      entries.set(newValue, entry);
+      // Clear the queue for newValue so only instances created after this
+      // swap are paired with old instances being torn down.
+      liveInstanceQueues.delete(newValue);
     }
-    return generateInvocations(yields, []);
+    // oldValue is being retired — it will never be the target of a future
+    // dequeueInstance() call, so any queued instances for it are now stale.
+    liveInstanceQueues.delete(oldValue);
+  }
 }
-const getHotComponent = (imp, specifier, yields) => `
-import { ${specifier} as TargetComponent } from "${imp}";
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { createComputeRef } from "@glimmer/reference";
-import { curry } from '@glimmer/runtime';
-import { registerDestructor } from '@ember/destroyable';
-import { getInternalComponentManager, setInternalComponentManager } from '@glimmer/manager';
 
-function notAny(...yields) {
-  return !yields.some((y) => !!y);
+export function current(value) {
+  if (!isRef(value)) return value;
+  const entry = entries.get(value);
+  if (!entry) return value;
+  entry.consumed = true;
+  return entry.current;
 }
 
-const hotCallbacks = new Set();
-
-if (import.meta.hot) {
-  import.meta.hot.accept('${imp}', (module) => {
-    for (const callback of hotCallbacks) {
-      callback(module);
-    }
-  });
+export function used(value) {
+  if (!isRef(value)) return false;
+  return Boolean(entries.get(value)?.consumed);
 }
 
-// Stack of CapturedArguments (see @glimmer/interfaces), pushed by the shadow
-// component manager below right before it constructs a HotComponent instance,
-// and peeked (not popped) here in the constructor. It is always non-empty at
-// this point because HotComponent is only ever created through that manager.
-const capturedArgsStack = [];
+// Returns true if value has been registered with the HMR runtime.
+// Used by setup-hmr-manager.ts to skip non-HMR components when building
+// the liveInstances queue so stale entries don't corrupt later HMR swaps.
+export function isHmrClass(value) {
+  return isRef(value) && entries.has(value);
+}
 
-export default class HotComponent extends Component {
-  @tracked curried;
-  hot = {};
-  constructor(owner, args) {
-    super(owner, args);
-    const capturedArgs = capturedArgsStack[capturedArgsStack.length - 1];
-    const named = {};
-    const positional = [];
-    for (const name of Object.keys(args)) {
-      // Forward the caller's original, updatable reference (e.g. a path like
-      // "this.value") instead of wrapping the reified value in a fresh
-      // read-only compute ref. A read-only ref fails Ember's "You can only
-      // pass a path to mut" check, breaking {{mut @arg}} in wrapped components.
-      named[name] = capturedArgs?.named[name] ?? createComputeRef(() => args[name]);
-    }
-    const CurriedComponent = 0;
-    this.curried = curry(CurriedComponent, TargetComponent, owner, { positional, named});
-    if (import.meta.hot) {
-      const callback = (module) => {
-        this.curried = curry(CurriedComponent, module.default, owner, { positional, named});
-      };
-      hotCallbacks.add(callback);
-      registerDestructor(this, () => {
-        hotCallbacks.delete(callback);
-      });
-    }
+// Called from setup-hmr-manager.ts's create() hook for each new HMR-registered
+// component instance. Appends to the per-class queue in DOM (creation) order.
+export function enqueueInstance(klass, instance) {
+  if (!isRef(klass)) return;
+  const q = liveInstanceQueues.get(klass);
+  if (q) {
+    q.push(instance);
+  } else {
+    liveInstanceQueues.set(klass, [instance]);
   }
+}
 
-  <template>
-    ${generateContent(yields)}
-  </template>
+// Called from setup-hmr-manager.ts's willDestroy hook. Returns and removes the
+// oldest queued instance for klass (FIFO = DOM order), or null if none.
+export function dequeueInstance(klass) {
+  if (!isRef(klass)) return null;
+  const q = liveInstanceQueues.get(klass);
+  if (!q || q.length === 0) return null;
+  const instance = q.shift();
+  if (q.length === 0) liveInstanceQueues.delete(klass);
+  return instance ?? null;
 }
 
-// HotComponent's own args (the reified values passed to its constructor
-// above) only expose values, not the underlying VM references, so the raw
-// references have to be captured one level down, in the internal component
-// manager's create() hook, before Ember reifies them into that value-only
-// proxy. Shadowing the manager (rather than patching the shared default
-// manager's create()) scopes the capture to HotComponent only; getManager()
-// walks the prototype chain and finds this before reaching @glimmer/component's
-// default manager.
-const defaultManager = getInternalComponentManager(Component);
-const shadowManager = Object.create(defaultManager);
-shadowManager.create = function (owner, definition, vmArgs) {
-  capturedArgsStack.push(vmArgs.capture());
-  try {
-    return defaultManager.create(owner, definition, vmArgs);
-  } finally {
-    capturedArgsStack.pop();
-  }
-};
-// Glimmer's debug render tree normally adds one 'component' node per
-// invoked component instance (see VM_GET_COMPONENT_SELF_OP). Returning no
-// nodes here suppresses that node for HotComponent itself, so only the
-// real, curried target component (invoked in HotComponent's own template)
-// shows up in ember-inspector's component tree - this is the same hook
-// Ember core uses internally to keep its own {{outlet}}/{{mount}} wrapper
-// machinery out of (or relabeled in) that tree (see OutletComponentManager
-// and MountManager in ember-source).
-shadowManager.getDebugCustomRenderTree = function () {
-  return [];
-};
-setInternalComponentManager(shadowManager, HotComponent);
+// Called from setup-hmr-manager.ts's willDestroy hook when no HMR swap is in
+// progress (normal navigation destroy). Removes this specific instance from the
+// queue so destroyed instances don't accumulate indefinitely when a timer
+// mounts/unmounts the same component repeatedly between saves.
+export function removeInstance(klass, instance) {
+  if (!isRef(klass)) return;
+  const q = liveInstanceQueues.get(klass);
+  if (!q) return;
+  const idx = q.indexOf(instance);
+  if (idx !== -1) q.splice(idx, 1);
+  if (q.length === 0) liveInstanceQueues.delete(klass);
+}
+
+// Expose helpers on the global so setup-hmr-manager.ts's synchronous
+// initialize() can call them without a dynamic import.
+globalThis.__ember_vite_hmr = { current, isHmrClass, enqueueInstance, dequeueInstance, removeInstance };
 `;
-const cachedYields = {};
-function getYieldsFromFile(filename, content, noCache) {
-    if (cachedYields[filename] && !noCache) {
-        return cachedYields[filename];
-    }
-    // very basic, todo: make this use AST
-    const matches = content.matchAll(/to=['"\\]+(\w+)['"\\]+/g);
-    const yields = new Set([...matches].map((m) => m === null || m === void 0 ? void 0 : m[1]).filter((m) => !!m));
-    if (noCache) {
-        return {
-            yields,
-            modules: [],
-        };
-    }
-    cachedYields[filename] = {
-        yields,
-        modules: [],
+// `enforce: 'pre'` makes this run before Embroider's resolver, which would
+// otherwise try to resolve the virtual id as a package and fail.
+// `apply: 'serve'` keeps it out of production builds entirely.
+export function hmrRuntime() {
+    return {
+        name: 'ember-vite-hmr-runtime',
+        enforce: 'pre',
+        apply: 'serve',
+        resolveId(source) {
+            if (source === hmrRuntimeId) {
+                return resolvedRuntimeId;
+            }
+        },
+        load(id) {
+            if (id === resolvedRuntimeId) {
+                return runtimeSource;
+            }
+        },
     };
-    return cachedYields[filename];
-}
-function difference(a, b) {
-    const diff = [];
-    for (const bElement of b) {
-        if (!a.has(bElement)) {
-            diff.push(bElement);
-        }
-    }
-    return diff;
 }
 // Helper function to normalize paths consistently across platforms
 function normalizePath(inputPath) {
-    // Always convert backslashes to forward slashes
     return inputPath.replace(/\\/g, '/');
 }
-const virtualPrefix = '/ember-vite-hmr/virtual/component:';
-// Embroider's resolver registry. It's the binding the app entry's HMR hook
-// mutates, so we use it to locate that entry. Embroider keeps this as an
-// internal literal (not a public export), so we mirror the string here.
-const compatModulesSpecifier = '@embroider/virtual/compat-modules';
 export function hmr(enableViteHmrForModes = ['development']) {
     let base = '/';
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     let server;
-    return {
+    const mainPlugin = {
         name: 'hmr-plugin',
         enforce: 'post',
         config(config, env) {
             var _a;
-            // The per-component hot wrapper (see getHotComponent) imports the first
-            // four of these, but it is generated/served on demand, so it is never
-            // part of the static module graph Vite's dependency scanner crawls on
-            // the first pass. `@ember/component/template-only` has the same
-            // problem for a different reason: it's injected by the template
-            // compiler into a template-only component's compiled output, which the
-            // scanner (source-only) never sees either. Without pre-declaring them,
-            // the browser requests them on boot, Vite discovers "new" deps and
-            // triggers a re-optimize + full page reload.
-            //
-            // We must use the Embroider-rewritten `ember-source/...` subpaths: the
-            // bare `@glimmer/reference` etc. specifiers the wrapper writes cannot be
-            // resolved by optimizeDeps.include. (`@glimmer/component` and
-            // `@glimmer/tracking` are omitted on purpose — normal app code already
-            // pulls them into the scan.)
             if (!enableViteHmrForModes.includes(env.mode)) {
                 return;
             }
             // With `optimizeDeps.noDiscovery: true`, Vite never scans the app's own
-            // source, so nothing else pulls these same glimmer subpaths into the
-            // optimizer. Forcing them into `include` then creates a second,
-            // separately pre-bundled copy of the glimmer VM alongside the
-            // unoptimized one the rest of the (unscanned) app actually uses,
-            // leading to "The global context for Glimmer VM was not set" (#554).
-            // There's nothing useful this hook can pre-declare in that mode, so
-            // skip it entirely rather than fight the user's own dep-optimization
-            // config.
+            // source, so nothing else pulls these glimmer subpaths into the optimizer.
+            // Forcing them into `include` then creates a second, separately pre-bundled
+            // copy of the glimmer VM alongside the unoptimized one the rest of the
+            // (unscanned) app actually uses, leading to "The global context for Glimmer
+            // VM was not set" (#554). Skip entirely in that mode.
             if ((_a = config.optimizeDeps) === null || _a === void 0 ? void 0 : _a.noDiscovery) {
                 return;
             }
             return {
                 optimizeDeps: {
                     include: [
-                        'ember-source/@glimmer/reference/index.js',
-                        'ember-source/@glimmer/runtime/index.js',
-                        'ember-source/@ember/destroyable/index.js',
-                        'ember-source/@glimmer/manager/index.js',
                         'ember-source/@ember/component/template-only.js',
                     ],
                 },
@@ -259,22 +222,6 @@ export function hmr(enableViteHmrForModes = ['development']) {
                 if (id.includes('@ember-vite-hmr/setup-ember-hmr.js')) {
                     return id;
                 }
-                if (importer === null || importer === void 0 ? void 0 : importer.startsWith(virtualPrefix)) {
-                    const newImporter = path.join(process.cwd(), 'package.json');
-                    importer = newImporter;
-                    return this.resolve(id, importer, meta);
-                }
-                if (id.startsWith(virtualPrefix)) {
-                    let [imp, specifier] = id
-                        .split('?')[0]
-                        .slice(virtualPrefix.length)
-                        .split('::');
-                    if (imp === null || imp === void 0 ? void 0 : imp.startsWith('.')) {
-                        const r = yield this.resolve(imp, importer);
-                        return id.replace(`${imp}::${specifier}`, `${r.id}::${specifier}`);
-                    }
-                    return id;
-                }
                 if (id === '/ember-vite-hmr/services/vite-hot-reload') {
                     return this.resolve('ember-vite-hmr/services/vite-hot-reload', path.resolve(process.cwd(), 'package.json'), meta);
                 }
@@ -285,56 +232,6 @@ export function hmr(enableViteHmrForModes = ['development']) {
                 if (id.includes('@ember-vite-hmr/setup-ember-hmr.js')) {
                     return yield readFile(path.resolve(__dirname, '..', 'setup-ember-hmr.js'), 'utf8');
                 }
-                if (id.startsWith(virtualPrefix)) {
-                    if (!server) {
-                        // During build, server is not available
-                        return null;
-                    }
-                    let [imp, specifier] = id
-                        .split('?')[0]
-                        .slice(virtualPrefix.length, -'.gts'.length)
-                        .split('::');
-                    imp = imp.replace('embroider_virtual', '@embroider/virtual');
-                    let filename = imp;
-                    if (filename.includes('__vpc__')) {
-                        filename = filename.split('__vpc__')[0];
-                    }
-                    const res = yield server.transformRequest(filename);
-                    const content = res === null || res === void 0 ? void 0 : res.code;
-                    // For a classic component with a separately resolved template (a colocated
-                    // `.hbs` file next to a backing class, or a template-only component), the
-                    // compiled backing module only *imports* its template (e.g. `import TEMPLATE
-                    // from "./foo.hbs?import"`); it doesn't inline it. Any {{yield ... to="..."}}
-                    // usage lives in that template file, so it has to be fetched and scanned
-                    // separately, otherwise named blocks other than "default" are never detected
-                    // and get silently dropped by the generated hot-reload wrapper.
-                    let yieldSourceFilename = filename;
-                    let yieldSourceContent = content;
-                    const templateImportMatch = content === null || content === void 0 ? void 0 : content.match(/\bfrom\s*['"]([^'"]+\.hbs(?:\?[^'"]*)?)['"]/);
-                    if (templateImportMatch) {
-                        // The compiled backing class embeds the template import as a
-                        // browser-facing URL (i.e. prefixed with the configured vite
-                        // `base`), since that's what gets sent to the client. But
-                        // `server.transformRequest` is an internal API keyed by root-
-                        // relative ids, so the base has to be stripped back off before
-                        // reusing that specifier here, or this 404s under a non-root base.
-                        let templateSpecifier = templateImportMatch[1];
-                        if (base !== '/' && templateSpecifier.startsWith(base)) {
-                            templateSpecifier = `/${templateSpecifier.slice(base.length)}`;
-                        }
-                        const templateRes = yield server.transformRequest(templateSpecifier);
-                        yieldSourceFilename = templateSpecifier;
-                        yieldSourceContent = templateRes === null || templateRes === void 0 ? void 0 : templateRes.code;
-                    }
-                    const resId = yield this.resolve(yieldSourceFilename, path.resolve(process.cwd(), 'package.json'));
-                    // Strip any query string so the cache key matches the plain file path that
-                    // `hotUpdate` below receives when that template file is edited.
-                    const cacheKey = resId.id.split('?')[0];
-                    const cached = getYieldsFromFile(cacheKey, yieldSourceContent !== null && yieldSourceContent !== void 0 ? yieldSourceContent : '');
-                    const yields = cached.yields;
-                    cached.modules.push(id);
-                    return getHotComponent(imp, specifier, [...yields].filter((y) => !!y));
-                }
             });
         },
         transformIndexHtml(html) {
@@ -353,49 +250,69 @@ export function hmr(enableViteHmrForModes = ['development']) {
             ];
         },
         handleHotUpdate(ctx) {
-            if (!ctx.file.split('?')[0].endsWith('.hbs')) {
-                return ctx.modules;
-            }
+            var _a, _b;
+            const file = ctx.file.split('?')[0];
             const otherModules = [];
-            const pairedModule = ctx.modules.find((m) => [...m.importers].find((i) => i.id.startsWith('embroider_virtual') &&
-                i.id.endsWith('-embroider-pair-component')));
-            if (pairedModule) {
-                const pairComponent = [...pairedModule.importers].find((i) => i.id.startsWith('embroider_virtual') &&
-                    i.id.endsWith('-embroider-pair-component'));
-                if (pairComponent) {
-                    const componentModule = [...pairComponent.clientImportedModules].find((cim) => cim.id.split('?')[0].match(/\/component\.(js|ts|gjs|gts)/));
-                    if (componentModule) {
-                        otherModules.push(componentModule);
+            // ── .hbs pair-component wiring (unchanged) ───────────────────────────
+            if (file.endsWith('.hbs')) {
+                const pairedModule = ctx.modules.find((m) => [...m.importers].find((i) => i.id.startsWith('embroider_virtual') &&
+                    i.id.endsWith('-embroider-pair-component')));
+                if (pairedModule) {
+                    const pairComponent = [...pairedModule.importers].find((i) => i.id.startsWith('embroider_virtual') &&
+                        i.id.endsWith('-embroider-pair-component'));
+                    if (pairComponent) {
+                        const componentModule = [...pairComponent.clientImportedModules].find((cim) => cim.id.split('?')[0].match(/\/component\.(js|ts|gjs|gts)/));
+                        if (componentModule) {
+                            otherModules.push(componentModule);
+                        }
                     }
                 }
+                return [...ctx.modules, ...otherModules];
             }
-            return [...ctx.modules, ...otherModules];
-        },
-        hotUpdate(options) {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (options.type === 'update' || options.type === 'create') {
-                    const id = options.file;
-                    const source = (yield readFile(id)).toString();
-                    if (cachedYields[id] &&
-                        difference(cachedYields[id].yields, getYieldsFromFile(id, source, true).yields).length) {
-                        for (const y of getYieldsFromFile(id, source).yields) {
-                            cachedYields[id].yields.add(y);
-                        }
-                        const modules = cachedYields[id].modules;
-                        delete cachedYields[id];
-                        for (const module of modules) {
-                            server.moduleGraph.onFileChange(module);
-                            let m = server.moduleGraph.getModuleById(module);
-                            if (m) {
-                                yield server.reloadModule(m);
-                            }
+            // ── subclass propagation ──────────────────────────────────────────────
+            // When a component file (e.g. block-base.gts) self-accepts, Vite stops
+            // propagation before any subclass module (e.g. block-child.ts extends
+            // BlockBase) can be notified. The subclass's importer (e.g. equipment.gts)
+            // therefore never fires its accept(block-child, cb) callback, so
+            // template__imports__.BlockChild keeps pointing at the old class with
+            // the old template.
+            //
+            // Fix: for every component file that changed, walk its direct importers
+            // in Vite's module graph. Any importer that is itself a component file
+            // under /components/ is a potential subclass — add it to the update set
+            // so Vite re-evaluates it too. That re-evaluation runs its own
+            // self-accept callback (update(OldChild, NewChild)) and causes the
+            // parent template's accept(block-child, cb) to fire, swapping in the new
+            // subclass and its newly-inherited template.
+            // Subclass propagation only applies to files under /components/ — route
+            // templates (.gts under /templates/) import components but are not
+            // subclasses of them. Including templates would force Vite to re-evaluate
+            // equipment.gts when resource-holder.gts changes, breaking the existing
+            // accept(dep, cb) wiring that already handles that case correctly.
+            const isComponentFile = (p) => !p.includes('node_modules') &&
+                !p.includes('/-components/') &&
+                p.includes('/components/') &&
+                (p.endsWith('.gjs') ||
+                    p.endsWith('.gts') ||
+                    p.endsWith('.ts') ||
+                    p.endsWith('.js'));
+            if (isComponentFile(file)) {
+                for (const mod of ctx.modules) {
+                    for (const importer of mod.importers) {
+                        const importerId = normalizePath((_b = (_a = importer.id) === null || _a === void 0 ? void 0 : _a.split('?')[0]) !== null && _b !== void 0 ? _b : '');
+                        if (isComponentFile(importerId) &&
+                            !ctx.modules.some((m) => m.id === importer.id) &&
+                            !otherModules.includes(importer)) {
+                            otherModules.push(importer);
                         }
                     }
                 }
-            });
+            }
+            return [...ctx.modules, ...otherModules];
         },
         transform(source, id) {
             return __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
                 if (process.env.EMBER_VITE_HMR_ENABLED !== 'true') {
                     return source;
                 }
@@ -424,142 +341,116 @@ export function hmr(enableViteHmrForModes = ['development']) {
                 });
               }`;
                 }
-                if (resourcePath.includes('ember-vite-hmr/virtual/components')) {
-                    return source;
-                }
                 if (resourcePath.includes('node_modules')) {
                     return source;
                 }
-                // Add hot reload statements for tracked imports (only non-node_modules)
-                // Use babel visitor to extract __hmr_import_metadata__
-                const result = parseSync(source, {
-                    filename: resourcePath,
-                    ast: true,
-                    code: false,
-                    configFile: false,
-                    babelrc: false,
-                    plugins: [
-                        ['@babel/plugin-syntax-typescript', { isTSX: true }],
-                        ['@babel/plugin-proposal-decorators', { version: '2022-03' }],
-                    ],
-                });
-                if (result) {
-                    let importVar = null;
-                    let bindings = [];
-                    const importStatements = [];
-                    // First pass: Extract metadata
-                    traverse(result, {
-                        ExportNamedDeclaration(path) {
-                            var _a, _b, _c;
-                            const declaration = path.node.declaration;
-                            // Check if this is: export const __hmr_import_metadata__ = {...}
-                            if ((declaration === null || declaration === void 0 ? void 0 : declaration.type) === 'VariableDeclaration' &&
-                                ((_c = (_b = (_a = declaration.declarations) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.name) ===
-                                    '__hmr_import_metadata__') {
-                                const init = declaration.declarations[0].init;
-                                if ((init === null || init === void 0 ? void 0 : init.type) === 'ObjectExpression') {
-                                    // Extract importVar and bindings from the object
-                                    for (const prop of init.properties) {
-                                        if (prop.type === 'ObjectProperty' &&
-                                            prop.key.type === 'Identifier') {
-                                            if (prop.key.name === 'importVar' &&
-                                                prop.value.type === 'StringLiteral') {
-                                                importVar = prop.value.value;
-                                            }
-                                            else if (prop.key.name === 'bindings' &&
-                                                prop.value.type === 'ArrayExpression') {
-                                                bindings = prop.value.elements
-                                                    .filter((el) => (el === null || el === void 0 ? void 0 : el.type) === 'StringLiteral')
-                                                    .map((el) => el.value);
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        },
-                    });
-                    // Second pass: Find matching imports (only if we have bindings to match)
+                // Add hot reload statements for tracked imports.
+                //
+                // lib/babel-plugin.ts's hotReplaceAst already computes this exact
+                // metadata (importVar/bindings/importStatements) while babel processes
+                // this same file earlier in the pipeline, and shares it via
+                // hmrImportMetadataCache keyed by filename -- so the common case skips
+                // re-parsing and re-traversing this file from scratch. Only fall back
+                // to recovering it the slow way (parsing the already-babel-transformed
+                // source and pulling the __hmr_import_metadata__ export back out of
+                // it) when there's no cache entry, e.g. because this file's babel pass
+                // didn't go through hotReplaceAst in this process, or a concurrent
+                // babel pass for another file raced the cache write out (see that
+                // cache's own doc comment).
+                let importVar = null;
+                let bindings = [];
+                let importStatements = [];
+                const cached = hmrImportMetadataCache.get(resourcePath);
+                if (cached) {
+                    importVar = cached.importVar;
+                    bindings = cached.bindings;
+                    importStatements = cached.importStatements;
+                }
+                else {
+                    // Fall back to extracting metadata from the __hmr_import_metadata__
+                    // export the babel plugin emits into the source.
+                    const metaMatch = source.match(/export const __hmr_import_metadata__ = (\{[\s\S]*?\});/);
+                    if (metaMatch) {
+                        try {
+                            // eslint-disable-next-line no-new-func
+                            const meta = new Function(`return ${metaMatch[1]}`)();
+                            importVar = meta.importVar;
+                            bindings = (_a = meta.bindings) !== null && _a !== void 0 ? _a : [];
+                        }
+                        catch (_c) {
+                            // unparseable metadata — skip
+                        }
+                    }
+                    // Recover importStatements by scanning the source for each binding
                     if (importVar && bindings.length > 0) {
-                        traverse(result, {
-                            ImportDeclaration(path) {
-                                const importSource = path.node.source.value;
-                                for (const specifier of path.node.specifiers) {
-                                    const local = specifier.local.name;
-                                    if (bindings.includes(local)) {
-                                        let specifierName = 'default';
-                                        if (specifier.type === 'ImportDefaultSpecifier') {
-                                            specifierName = 'default';
-                                        }
-                                        else if (specifier.type === 'ImportSpecifier') {
-                                            // For named imports, use the imported name
-                                            // Handle both Identifier and StringLiteral types
-                                            const imported = specifier.imported;
-                                            specifierName =
-                                                imported.type === 'Identifier'
-                                                    ? imported.name
-                                                    : imported.value;
-                                        }
-                                        else if (specifier.type === 'ImportNamespaceSpecifier') {
-                                            specifierName = '*';
-                                        }
-                                        importStatements.push({
-                                            local,
-                                            source: importSource,
-                                            specifier: specifierName,
-                                        });
-                                    }
+                        for (const binding of bindings) {
+                            const importMatch = source.match(new RegExp(`import\\s+(?:(${binding})|(\\{[^}]*\\b${binding}\\b[^}]*\\})|\\*\\s+as\\s+(${binding}))\\s+from\\s+['"]([^'"]+)['"]`));
+                            if (importMatch) {
+                                const src = importMatch[4];
+                                let specifier = 'default';
+                                if (importMatch[2]) {
+                                    // named import — find alias or name
+                                    const namedMatch = importMatch[2].match(new RegExp(`(\\w+)\\s+as\\s+${binding}|${binding}`));
+                                    specifier = (_b = namedMatch === null || namedMatch === void 0 ? void 0 : namedMatch[1]) !== null && _b !== void 0 ? _b : binding;
                                 }
-                            },
-                        });
-                    }
-                    // Process metadata if we found importVar (even with empty bindings)
-                    if (importVar) {
-                        // Generate hot reload code for each import (only if we have bindings)
-                        const hotReloadStatements = [];
-                        for (const imp of importStatements) {
-                            // Resolve the import to check if it's from node_modules
-                            const resolved = yield this.resolve(imp.source, resourcePath, {});
-                            if ((resolved === null || resolved === void 0 ? void 0 : resolved.id) &&
-                                normalizePath(resolved.id).includes('node_modules')) {
-                                // Skip node_modules imports
-                                continue;
+                                else if (importMatch[3]) {
+                                    specifier = '*';
+                                }
+                                importStatements.push({ local: binding, source: src, specifier });
                             }
-                            const sourceId = imp.source.replace(/@embroider\/virtual/g, 'embroider_virtual');
-                            const virtualPath = `/ember-vite-hmr/virtual/component:${sourceId}::${imp.specifier}.gjs`;
-                            hotReloadStatements.push(`
-  (async () => {
-    const GlimmerComponent = (await import('@glimmer/component')).default;
-    const { hasInternalComponentManager } = await import('@glimmer/manager');
-    // Class-based Glimmer components are functions, detected the cheap way
-    // via prototype chain. Template-only components (no backing class, e.g.
-    // a bare \`<template>\` export) are plain objects instead, so they have to
-    // be recognized by checking for a registered component manager - that
-    // also keeps helpers/modifiers (which use separate manager registries)
-    // out of this branch.
-    const isComponent = typeof ${imp.local} === 'function'
-      ? ${imp.local}.prototype instanceof GlimmerComponent
-      : typeof ${imp.local} === 'object' && ${imp.local} !== null && hasInternalComponentManager(${imp.local});
-    if (isComponent) {
-      const c = await import('${virtualPath}');
-      ${importVar}.${imp.local} = c.default;
-      import.meta.hot.accept('${virtualPath}', (c) => {
-        ${importVar}.${imp.local} = c['${imp.specifier}'];
-      });
-      import.meta.hot.accept('${imp.source}');
-    }
-  })();`);
                         }
-                        // Always remove the metadata export
-                        source = source.replace(/export const __hmr_import_metadata__[^;]+;/, '');
-                        // Add HMR code if we have any statements OR if we have bindings (even if all were skipped)
-                        if (hotReloadStatements.length > 0 || bindings.length > 0) {
-                            const hotReloadCode = `
-if (import.meta.hot) {
-${hotReloadStatements.join('\n')}
-}`;
-                            source = source + hotReloadCode;
+                    }
+                }
+                // Process metadata if we found importVar (even with empty bindings)
+                if (importVar) {
+                    const hotReloadStatements = [];
+                    for (const imp of importStatements) {
+                        // Resolve the import to check if it's from node_modules
+                        const resolved = yield this.resolve(imp.source, resourcePath, {});
+                        if ((resolved === null || resolved === void 0 ? void 0 : resolved.id) &&
+                            normalizePath(resolved.id).includes('node_modules')) {
+                            continue;
                         }
+                        // Each imported binding is already a local variable in scope thanks
+                        // to its import statement. Register it by value on first load so
+                        // `current(binding)` (called by the template__imports__ getter) has
+                        // an entry to read from. When the dep module reloads, update() sets
+                        // entry.current = newVal — the getter re-reads it, invalidating only
+                        // the scope that contains the getter call, not the parent scope.
+                        // No assignment to template__imports__.X needed: the getter handles it.
+                        hotReloadStatements.push(`
+  (async () => {
+    const { register: ember_vite_hmr_register, update: ember_vite_hmr_update, used: ember_vite_hmr_used } = await import(${JSON.stringify(hmrRuntimeId)});
+    const { tracked: ember_vite_hmr_tracked } = await import('@glimmer/tracking');
+    ember_vite_hmr_register(${imp.local}, ember_vite_hmr_tracked);
+    import.meta.hot.accept(${JSON.stringify(imp.source)}, (m) => {
+      if (m) {
+        const newVal = m[${JSON.stringify(imp.specifier === 'default' ? 'default' : imp.specifier)}];
+        ember_vite_hmr_update(${imp.local}, newVal);
+      } else if (!ember_vite_hmr_used(${imp.local})) {
+        import.meta.hot.invalidate('nothing rendered ${imp.local} through the HMR runtime');
+      }
+    });
+  })();`);
                     }
+                    // Always remove the metadata export
+                    source = source.replace(/export const __hmr_import_metadata__[^;]+;/, '');
+                    // Do NOT add a self-accept in the importVar block.
+                    //
+                    // When module A imports module B, and B's template__imports__ class is in
+                    // A's scope, A must be notified when B changes (so A's accept callback can
+                    // swap in the new B class via template__imports__.B = newB). If B were to
+                    // self-accept, Vite would stop propagation before A's callback fires — A's
+                    // template__imports__ would never be updated, and Glimmer would never
+                    // re-render. The same applies to route templates: they rely on Ember's
+                    // canAcceptNew mechanism (added below), which self-accept would bypass.
+                    //
+                    // Components without importVar (no template imports) get a self-accept in
+                    // the section below, after the supportedPaths check.
+                    const hotReloadCode = hotReloadStatements.length > 0
+                        ? `\nif (import.meta.hot) {\n${hotReloadStatements.join('\n')}\n}`
+                        : '';
+                    source = source + hotReloadCode;
                 }
                 const supportedPaths = ['routers', 'controllers', 'routes', 'templates'];
                 const supportedFileNames = [
@@ -575,6 +466,56 @@ ${hotReloadStatements.join('\n')}
                 }
                 if (!supportedPaths.some((s) => resourcePath.includes(`/${s}/`)) &&
                     !supportedFileNames.some((s) => resourcePath.endsWith(s))) {
+                    // Component files (including template-less .ts/.js ones that just extend
+                    // another component) that have no cross-component imports need a
+                    // self-accept boundary so edits to them don't propagate up to a full
+                    // page reload.  Restrict plain .ts/.js to paths under /components/ to
+                    // avoid accidentally self-accepting services, utilities, adapters, etc.
+                    const isComponentFile = resourcePath.endsWith('.gjs') ||
+                        resourcePath.endsWith('.gts') ||
+                        ((resourcePath.endsWith('.ts') || resourcePath.endsWith('.js')) &&
+                            resourcePath.includes('/components/'));
+                    if (isComponentFile && !importVar) {
+                        // Self-accept with a callback that updates the tracked-cell registry
+                        // so Glimmer re-renders and swaps in the new class. This handles
+                        // edits to the component's own class (new method, changed @tracked
+                        // property, etc.) — without it, a bare accept() would silently
+                        // discard the new class and leave the running instance on the old one.
+                        //
+                        // Only do this when there is no importVar (no template imports of
+                        // other components). When importVar is present, the component's own
+                        // importer already has an accept(dep, cb) that fires when this file
+                        // changes — adding a self-accept here would stop Vite's propagation
+                        // before that callback can fire, breaking the re-render. The same
+                        // applies to re-export barrels: a self-accept on my-button.ts stops
+                        // Vite walking up to index.ts's importer, silencing the accept
+                        // callback that updates template__imports__.
+                        //
+                        // The babel plugin rewrites `export default <expr>` into
+                        // `const __hmr_default__ = <expr>; export { __hmr_default__ as default }`
+                        // giving us a stable local variable to register by value.
+                        // hot.data.default carries the old value across self-accept
+                        // re-evaluations so update() can find the existing entry.
+                        return `${source}
+if (import.meta.hot) {
+  (async () => {
+    const { register: ember_vite_hmr_register, update: ember_vite_hmr_update, used: ember_vite_hmr_used } = await import(${JSON.stringify(hmrRuntimeId)});
+    const { tracked: ember_vite_hmr_tracked } = await import('@glimmer/tracking');
+    const _hmr_prev = import.meta.hot.data.default;
+    import.meta.hot.data.default = __hmr_default__;
+    if (_hmr_prev) {
+      ember_vite_hmr_update(_hmr_prev, __hmr_default__);
+    }
+    ember_vite_hmr_register(__hmr_default__, ember_vite_hmr_tracked);
+    import.meta.hot.accept((m) => {
+      if (m && !ember_vite_hmr_used(import.meta.hot.data.default)) {
+        import.meta.hot.invalidate('nothing rendered this component through the HMR runtime');
+      }
+    });
+  })();
+}
+`;
+                    }
                     return source;
                 }
                 if (supportedPaths.includes('templates') &&
@@ -596,4 +537,5 @@ ${hotReloadStatements.join('\n')}
             });
         },
     };
+    return [hmrRuntime(), mainPlugin];
 }