ember-vite-hmr 1.5.4 → 1.6.0

package/README.md

@@ -7,7 +7,9 @@ this can hot reload
 - helpers
 - modifiers
 - components + templates, fcct components and its deps
-- routes/controllers/route-templates (although it refreshes the whole route and thus looses all state)
+- routes/controllers/route-templates
+
+this tries to keep the state of properties in components and controller
 
 it cannot hot reload local properties that turn out to be helpers/modifiers/components.
 
@@ -24,9 +26,7 @@ update your `vite.config.mjs` with
 ```js
 import { hmr } from 'ember-vite-hmr';
 
-plugins: [
-  hmr()
-]
+plugins: [hmr()];
 ```
 
 update you `babel.config.cjs`

package/dist/lib/babel-plugin.js

@@ -272,9 +272,12 @@ function hotReplaceAst(babel) {
                         'default';
                     const ast = (0, core_1.parse)(`
             (async () => {
-              const c = await import('/ember-vite-hmr/virtual/component:${source}:${specifierName}.gjs');
+              const c = await import('/ember-vite-hmr/virtual/component:${source}:${specifierName}.gjs?timestamp=${Date.now()}');
               ${exports.hotAstProcessor.meta.importVar}.${imp} = c.default;
             })()
+            import.meta.hot.accept('/ember-vite-hmr/virtual/component:${source}:${specifierName}.gjs', (c) => {
+              ${exports.hotAstProcessor.meta.importVar}.${imp} = c['${specifierName}'];
+            });
             import.meta.hot.accept('${source}');
           `);
                     const importVirtual = ast.program.body;

package/dist/lib/hmr.js

@@ -15,7 +15,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.hmr = hmr;
 const path_1 = __importDefault(require("path"));
 const core_1 = require("@babel/core");
-const getHotComponent = (imp, specifier) => `
+const fs_1 = require("fs");
+function generateContent(yields) {
+    if (!yields.includes('default')) {
+        yields.push('default');
+    }
+    let all = yields.map((y) => `(has-block '${y}')`).join(' ');
+    let str = '';
+    for (const y of yields) {
+        str += `
+        <:${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}>
+    `;
+    }
+    return `
+    {{#if (notAny ${all})}}
+        <this.curried @__hot__={{this.hot}} />
+    {{else}}
+        <this.curried @__hot__={{this.hot}} >
+        ${str}
+        </this.curried>
+    {{/if}}
+  `;
+}
+const getHotComponent = (imp, specifier, yields) => `
 import { ${specifier} as TargetComponent } from "${imp}";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
@@ -23,6 +45,10 @@ import { createComputeRef } from "@glimmer/reference";
 import { curry } from '@glimmer/runtime';
 import { CurriedTypes } from '@glimmer/vm';
 
+function notAny(...yields) {
+  return !yields.some((y) => !!y); 
+}
+
 export default class HotComponent extends Component {
   @tracked curried;
   hot = {};
@@ -42,16 +68,50 @@ export default class HotComponent extends Component {
     }
   }
   <template>
-    <this.curried @__hot__={{this.hot}}></this.curried>
+    ${generateContent(yields)}
   </template>
 }
 `;
+const cachedYields = {};
+function getYieldsFromFile(filename, noCache) {
+    if (cachedYields[filename] && !noCache) {
+        return cachedYields[filename];
+    }
+    const content = (0, fs_1.readFileSync)(filename).toString();
+    // 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: [],
+    };
+    return cachedYields[filename];
+}
+function difference(a, b) {
+    const diff = [];
+    for (const bElement of b) {
+        if (!a.has(bElement)) {
+            diff.push(bElement);
+        }
+    }
+    return diff;
+}
 const virtualPrefix = '/ember-vite-hmr/virtual/component:';
 function hmr(enableViteHmrForModes = ['development']) {
     let conf;
+    let server;
     return {
         name: 'hmr-plugin',
         enforce: 'post',
+        configureServer(s) {
+            server = s;
+        },
         configResolved(config) {
             conf = config;
             process.env['EMBER_VITE_HMR_ENABLED'] = enableViteHmrForModes
@@ -77,12 +137,38 @@ function hmr(enableViteHmrForModes = ['development']) {
             }
         },
         load(id) {
-            if (id.startsWith(virtualPrefix)) {
-                const [imp, specifier] = id
-                    .slice(virtualPrefix.length, -'.gts'.length)
-                    .split(':');
-                return getHotComponent(imp, specifier);
-            }
+            return __awaiter(this, void 0, void 0, function* () {
+                if (cachedYields[id] &&
+                    difference(cachedYields[id].yields, getYieldsFromFile(id, true).yields).length) {
+                    for (const y of getYieldsFromFile(id, true).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);
+                        }
+                    }
+                }
+                if (id.startsWith(virtualPrefix)) {
+                    const [imp, specifier] = id
+                        .split('?')[0]
+                        .slice(virtualPrefix.length, -'.gts'.length)
+                        .split(':');
+                    let filename = imp;
+                    if (filename.includes('__vpc__')) {
+                        filename = filename.split('__vpc__')[0];
+                    }
+                    const resolved = yield this.resolve(filename, id);
+                    const cached = getYieldsFromFile(resolved.id);
+                    const yields = cached.yields;
+                    cached.modules.push(id);
+                    return getHotComponent(imp, specifier, [...yields].filter((y) => !!y));
+                }
+            });
         },
         transformIndexHtml(html) {
             if (process.env['EMBER_VITE_HMR_ENABLED'] !== 'true') {
@@ -113,21 +199,9 @@ function hmr(enableViteHmrForModes = ['development']) {
         transform(source, id) {
             return __awaiter(this, void 0, void 0, function* () {
                 const resourcePath = id.replace(/\\/g, '/').split('?')[0];
-                const supportedPaths = ['routers', 'controllers', 'routes', 'templates'];
-                const supportedFileNames = [
-                    'route.js',
-                    'route.ts',
-                    'route.gts',
-                    'route.gjs',
-                    'controller.js',
-                    'controller.ts',
-                ];
-                if (resourcePath.includes('/-components/')) {
-                    return source;
-                }
                 let didReplaceSources = false;
                 const name = require(`${process.cwd()}/package.json`).name;
-                if (resourcePath.includes(`/assets/${name}.js`)) {
+                if (resourcePath.includes(`${name}/app/-embroider-entrypoint.js`)) {
                     const result = [...source.matchAll(/import \* as [^ ]+ from (.*);/g)];
                     source += result
                         .map((r) => {
@@ -138,10 +212,10 @@ function hmr(enableViteHmrForModes = ['development']) {
                     })
                         .join('');
                 }
-                if (resourcePath.endsWith('.hbs') ||
-                    resourcePath.endsWith('.gjs') ||
-                    resourcePath.endsWith('.gts') ||
-                    resourcePath.includes(`/assets/${name}.js`)) {
+                if (resourcePath.includes('ember-vite-hmr/virtual/components')) {
+                    return source;
+                }
+                if (!resourcePath.includes(`node_modules`)) {
                     const resolveDep = (dep) => __awaiter(this, void 0, void 0, function* () {
                         const resolved = yield this.resolve(dep, resourcePath, {});
                         let id = resolved === null || resolved === void 0 ? void 0 : resolved.id;
@@ -167,7 +241,7 @@ function hmr(enableViteHmrForModes = ['development']) {
                         return id;
                     });
                     const result = [
-                        ...source.matchAll(/import.meta.hot.accept\(\'([^']+)\'/g),
+                        ...source.matchAll(/import.meta.hot.accept\(['"]([^'"]+)['"]/g),
                     ];
                     for (const resultElement of result) {
                         const dep = resultElement[1];
@@ -178,8 +252,9 @@ function hmr(enableViteHmrForModes = ['development']) {
                             continue;
                         didReplaceSources = true;
                         source = source.replace(`import.meta.hot.accept('${dep}'`, `import.meta.hot.accept('${id}'`);
+                        source = source.replace(`import.meta.hot.accept("${dep}"`, `import.meta.hot.accept("${id}"`);
                     }
-                    const importMatches = [...source.matchAll(/import\('([^']+)'/g)];
+                    const importMatches = [...source.matchAll(/import\(['"]([^']+)['"]/g)];
                     for (const resultElement of importMatches) {
                         const dep = resultElement[1];
                         if (!dep.startsWith(virtualPrefix)) {
@@ -195,6 +270,7 @@ function hmr(enableViteHmrForModes = ['development']) {
                             continue;
                         didReplaceSources = true;
                         source = source.replace(`import('${virtualPrefix}${imp}`, `import('${virtualPrefix}${id}`);
+                        source = source.replace(`import("${virtualPrefix}${imp}`, `import("${virtualPrefix}${id}`);
                     }
                 }
                 if (didReplaceSources) {
@@ -224,6 +300,18 @@ function hmr(enableViteHmrForModes = ['development']) {
                         ],
                     }).code;
                 }
+                const supportedPaths = ['routers', 'controllers', 'routes', 'templates'];
+                const supportedFileNames = [
+                    'route.js',
+                    'route.ts',
+                    'route.gts',
+                    'route.gjs',
+                    'controller.js',
+                    'controller.ts',
+                ];
+                if (resourcePath.includes('/-components/')) {
+                    return source;
+                }
                 if (!supportedPaths.some((s) => resourcePath.includes(`/${s}/`)) &&
                     !supportedFileNames.some((s) => resourcePath.endsWith(s))) {
                     return source;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-vite-hmr",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "keywords": [
     "ember-addon"
   ],