ember-vite-hmr 2.3.0 → 2.4.0

package/dist/lib/hmr.js

@@ -13,12 +13,18 @@ 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;
+// Safety cap on how many `extends` links resolveYieldSource will walk while
+// looking for an inherited template (see its own doc comment) - real
+// component hierarchies never get remotely this deep, this only guards
+// against a pathological/cyclic chain.
+const MAX_EXTENDS_DEPTH = 20;
 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}>`;
 }
@@ -78,6 +84,7 @@ const hotCallbacks = new Set();
 
 if (import.meta.hot) {
   import.meta.hot.accept('${imp}', (module) => {
+    import.meta.hot.data.latestModule = module;
     for (const callback of hotCallbacks) {
       callback(module);
     }
@@ -106,7 +113,11 @@ export default class HotComponent extends Component {
       named[name] = capturedArgs?.named[name] ?? createComputeRef(() => args[name]);
     }
     const CurriedComponent = 0;
-    this.curried = curry(CurriedComponent, TargetComponent, owner, { positional, named});
+    // After an accepted update this module is not re-evaluated, so the static
+    // TargetComponent binding still points at the pre-update module. Instances
+    // created after the update must curry the latest accepted class instead.
+    const Target = import.meta.hot?.data.latestModule?.default ?? TargetComponent;
+    this.curried = curry(CurriedComponent, Target, owner, { positional, named});
     if (import.meta.hot) {
       const callback = (module) => {
         this.curried = curry(CurriedComponent, module.default, owner, { positional, named});
@@ -188,6 +199,188 @@ function normalizePath(inputPath) {
     // Always convert backslashes to forward slashes
     return inputPath.replace(/\\/g, '/');
 }
+// The compiled backing class embeds an import specifier 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, or a lookup 404s under a non-root base.
+function stripBase(specifier, base) {
+    if (base !== '/' && specifier.startsWith(base)) {
+        return `/${specifier.slice(base.length)}`;
+    }
+    return specifier;
+}
+// A component's compiled module only calls `setComponentTemplate` on itself
+// when it owns a template directly (an inline `<template>`); it's absent
+// both for a classic component whose template lives in a separately
+// resolved colocated `.hbs` (see the `.hbs` import check this feeds into)
+// and for a component with no template of its own at all, which inherits
+// whatever's registered on its nearest ancestor class instead (Glimmer's
+// `getComponentTemplate`/`setComponentTemplate`, vendored in ember-source's
+// `@glimmer/manager`, resolve a component's template by walking
+// `Object.getPrototypeOf` up the prototype chain - the same mechanism
+// `getInternalComponentManager` uses, see the `shadowManager` comment above).
+function findSuperclassImportSource(content) {
+    let result;
+    try {
+        result = parseSync(content, {
+            filename: 'hmr-extends-check.js',
+            ast: true,
+            code: false,
+            configFile: false,
+            babelrc: false,
+            plugins: [
+                ['@babel/plugin-syntax-typescript', { isTSX: true }],
+                ['@babel/plugin-proposal-decorators', { version: '2022-03' }],
+            ],
+        });
+    }
+    catch (_a) {
+        return null;
+    }
+    if (!result) {
+        return null;
+    }
+    // Prefer the default-exported class specifically (that's always the
+    // component itself) over "the first class with a superclass in the file",
+    // since a file can declare other, unrelated classes above it (a local
+    // helper class, etc.) that would otherwise be matched instead.
+    let superName = null;
+    traverse(result, {
+        ExportDefaultDeclaration(path) {
+            const declaration = path.node.declaration;
+            let classNode = declaration;
+            if (declaration.type === 'Identifier' && declaration.name) {
+                const binding = path.scope.getBinding(declaration.name);
+                if ((binding === null || binding === void 0 ? void 0 : binding.path.isClassDeclaration()) ||
+                    (binding === null || binding === void 0 ? void 0 : binding.path.isClassExpression())) {
+                    classNode = binding.path.node;
+                }
+            }
+            const superClass = classNode.superClass;
+            if ((superClass === null || superClass === void 0 ? void 0 : superClass.type) === 'Identifier' && superClass.name) {
+                superName = superClass.name;
+            }
+        },
+    });
+    if (!superName) {
+        // Fall back to the first class with a superclass anywhere in the file
+        // (e.g. a non-default-exported component, or an export form the check
+        // above doesn't specifically handle).
+        traverse(result, {
+            'ClassDeclaration|ClassExpression'(path) {
+                if (superName) {
+                    return;
+                }
+                const superClass = path.node.superClass;
+                if ((superClass === null || superClass === void 0 ? void 0 : superClass.type) === 'Identifier' && superClass.name) {
+                    superName = superClass.name;
+                }
+            },
+        });
+    }
+    if (!superName) {
+        return null;
+    }
+    let source = null;
+    traverse(result, {
+        ImportDeclaration(path) {
+            if (source) {
+                return;
+            }
+            if (path.node.specifiers.some((s) => s.local.name === superName)) {
+                source = path.node.source.value;
+            }
+        },
+    });
+    return source;
+}
+// If `content` (already run through `server.transformRequest`) registers a
+// template on itself - either inline, or via a colocated `.hbs` import -
+// returns that template's own source. Returns null when this file has no
+// template of its own to scan, meaning any named blocks it uses have to be
+// found on an ancestor class instead (see resolveYieldSource).
+function resolveOwnTemplateSource(server, base, filename, content) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        // 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.
+        const templateImportMatch = content.match(/\bfrom\s*['"]([^'"]+\.hbs(?:\?[^'"]*)?)['"]/);
+        if (templateImportMatch) {
+            const templateSpecifier = stripBase(templateImportMatch[1], base);
+            const templateRes = yield server.transformRequest(templateSpecifier);
+            return { filename: templateSpecifier, content: (_a = templateRes === null || templateRes === void 0 ? void 0 : templateRes.code) !== null && _a !== void 0 ? _a : '' };
+        }
+        if (content.includes('setComponentTemplate(')) {
+            return { filename, content };
+        }
+        return null;
+    });
+}
+// Determines which file's source should be scanned for named-block
+// (`{{yield ... to="..."}}`) usage for the component at `filename`/`content`.
+// Usually that's the component's own file (or its colocated `.hbs`, handled
+// by resolveOwnTemplateSource). But a component with no template of its own
+// renders whatever template is registered on its nearest ancestor class (see
+// resolveOwnTemplateSource's doc comment) - previously this only ever
+// scanned the child's own (template-less) file, silently dropping every
+// named block other than "default" for any component subclassed without its
+// own template. This walks the `extends` chain, resolving each ancestor's
+// import the same way Vite already resolved it in the already-transformed
+// source, until one with its own template is found.
+function resolveYieldSource(server, base, filename, content) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const own = yield resolveOwnTemplateSource(server, base, filename, content);
+        if (own) {
+            return own;
+        }
+        const seen = new Set([filename]);
+        let currentContent = content;
+        for (let i = 0; i < MAX_EXTENDS_DEPTH; i++) {
+            const superSource = findSuperclassImportSource(currentContent);
+            if (!superSource) {
+                break;
+            }
+            const superSpecifier = stripBase(superSource, base);
+            // Framework/addon base classes live in node_modules and are never
+            // hot-tracked by this plugin (see the node_modules skip in `transform`);
+            // stop there rather than walking into vendored internals.
+            if (seen.has(superSpecifier) || superSpecifier.includes('node_modules')) {
+                break;
+            }
+            seen.add(superSpecifier);
+            let superContent;
+            try {
+                // Unlike the `.hbs` specifier resolveOwnTemplateSource requests
+                // (always something Vite itself already resolved for a file we
+                // successfully transformed), this specifier can be anything a
+                // superclass import resolved to, including forms
+                // `transformRequest` can't handle. Failing to resolve an ancestor's
+                // template is the same "no named blocks found" outcome as before
+                // this fix existed - it must never fail the whole component load.
+                const superRes = yield server.transformRequest(superSpecifier);
+                superContent = superRes === null || superRes === void 0 ? void 0 : superRes.code;
+            }
+            catch (_a) {
+                break;
+            }
+            if (!superContent) {
+                break;
+            }
+            const superOwn = yield resolveOwnTemplateSource(server, base, superSpecifier, superContent);
+            if (superOwn) {
+                return superOwn;
+            }
+            currentContent = superContent;
+        }
+        return { filename, content };
+    });
+}
 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
@@ -301,31 +494,7 @@ export function hmr(enableViteHmrForModes = ['development']) {
                     }
                     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 { filename: yieldSourceFilename, content: yieldSourceContent } = yield resolveYieldSource(server, base, filename, content !== null && content !== void 0 ? content : '');
                     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.
@@ -430,103 +599,124 @@ export function hmr(enableViteHmrForModes = ['development']) {
                 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);
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        },
+                // 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 {
+                    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' }],
+                        ],
                     });
-                    // Second pass: Find matching imports (only if we have bindings to match)
-                    if (importVar && bindings.length > 0) {
+                    if (result) {
+                        // First pass: Extract metadata
                         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 = '*';
+                            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);
+                                                }
+                                            }
                                         }
-                                        importStatements.push({
-                                            local,
-                                            source: importSource,
-                                            specifier: specifierName,
-                                        });
                                     }
                                 }
                             },
                         });
+                        // Second pass: Find matching imports (only if we have bindings to match)
+                        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,
+                                            });
+                                        }
+                                    }
+                                },
+                            });
+                        }
                     }
-                    // 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;
-                            }
-                            const sourceId = imp.source.replace(/@embroider\/virtual/g, 'embroider_virtual');
-                            const virtualPath = `/ember-vite-hmr/virtual/component:${sourceId}::${imp.specifier}.gjs`;
-                            hotReloadStatements.push(`
+                }
+                // 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;
+                        }
+                        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');
@@ -548,17 +738,16 @@ export function hmr(enableViteHmrForModes = ['development']) {
       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 = `
+                    }
+                    // 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;
-                        }
+                        source = source + hotReloadCode;
                     }
                 }
                 const supportedPaths = ['routers', 'controllers', 'routes', 'templates'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-vite-hmr",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": false,
   "description": "provides hmr support for ember apps",
   "keywords": [
@@ -51,6 +51,7 @@
     "@babel/eslint-parser": "^7.28.6",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@babel/plugin-syntax-decorators": "^7.29.7",
     "@babel/plugin-transform-class-static-block": "^7.28.6",
     "@babel/runtime": "^7.28.4",
     "@embroider/addon-dev": "^8.3.0",