fix component helper

patricklx · May 15, 2024 · 8b63173 · 8b63173
1 parent db1b17a
commit 8b63173
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/lib/babel-plugin.ts b/lib/babel-plugin.ts
@@ -1,11 +1,12 @@
 import { parse, PluginObj } from '@babel/core';
 import type * as BabelTypesNamespace from '@babel/types';
 import {
+  AssignmentExpression,
   Identifier,
   ImportDefaultSpecifier,
   ImportNamespaceSpecifier,
   ImportSpecifier,
-  Program, StringLiteral
+  Program, Statement, StringLiteral
 } from '@babel/types';
 import * as glimmer from '@glimmer/syntax';
 import {
@@ -182,15 +183,16 @@ class HotAstProcessor {
           if (original?.includes('.')) return;
           if (!original) return;
           const param = glimmer.builders.path(`${importVar}.${original}`);
-          parent.params.splice(0, 1);
-          parent.params.push(param);
+          parent.params.splice(0, 1, param);
+          importBindings.add(original);
+
           return;
         }
         if (importVar) {
           if (findImport(node.original)) {
-            node.original = `${importVar}.${original}` + node.original.split('.').slice(1).join('.');
+            node.original = `${importVar}.${node.original}`;
             node.parts = node.original.split('.');
-            importBindings.add(original)
+            importBindings.add(original);
           }
           return;
         }
@@ -245,12 +247,13 @@ export default function hotReplaceAst(
           klass.body.body.push(t.classProperty(t.identifier(local), t.identifier(local), null, [t.decorator(tracked)]));
         }
 
-        const assign = t.assignmentExpression('=', t.identifier(hotAstProcessor.meta.importVar), klass);
+        const newExp = t.newExpression(klass, []);
+        const assign = t.assignmentExpression('=', t.identifier(hotAstProcessor.meta.importVar), newExp);
 
         const varDeclaration = path.node.body.findIndex((e: BabelTypesNamespace.Statement) => e.type === 'VariableDeclaration' && (e.declarations[0]!.id as BabelTypesNamespace.Identifier).name === hotAstProcessor.meta.importVar) + 1;
         const lastImportIndex = path.node.body.findLastIndex((e: BabelTypesNamespace.Statement) => e.type === 'ImportDeclaration') + 1
 
-        path.node.body.splice(Math.max(varDeclaration, lastImportIndex), 0, assign as any);
+        path.node.body.splice(Math.max(varDeclaration, lastImportIndex), 0, assign as unknown as Statement);
 
         const findImport = function findImport(specifier) {
           return path.node.body.find(b => b.type === 'ImportDeclaration' && b.specifiers.some(s => s.local.name === specifier));

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-vite-hmr",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "keywords": [
     "ember-addon"
   ],

diff --git a/tests/babel-plugin.test.js b/tests/babel-plugin.test.js
@@ -63,14 +63,14 @@ describe('convert template with hot reload helpers', () => {
       import myhelper from "embroider_compat/helpers/my-helper";
       import { precompileTemplate } from "@ember/template-compilation";
       import { tracked } from "@glimmer/tracking";
-      template__imports__ = class _Imports {
+      template__imports__ = new class _Imports {
         static {
           [_init_NamedComponent, _init_SomeComponent, _init_myhelper] = _applyDecs2203R(this, [[tracked, 0, "NamedComponent"], [tracked, 0, "SomeComponent"], [tracked, 0, "myhelper"]], []).e;
         }
         NamedComponent = _init_NamedComponent(this, NamedComponent);
         SomeComponent = _init_SomeComponent(this, SomeComponent);
         myhelper = _init_myhelper(this, myhelper);
-      }
+      }()
       export default precompileTemplate("\\n      {{(template__imports__.myhelper)}}\\n      <template__imports__.SomeComponent />\\n      <template__imports__.NamedComponent />\\n    ", {
         moduleName: 'a.hbs',
         scope: () => ({
@@ -114,14 +114,14 @@ describe('convert template with hot reload helpers', () => {
       import myhelper from "embroider_compat/helpers/my-helper";
       import { createTemplateFactory } from "@ember/template-factory";
       import { tracked } from "@glimmer/tracking";
-      template__imports__ = class _Imports {
+      template__imports__ = new class _Imports {
         static {
           [_init_NamedComponent, _init_SomeComponent, _init_myhelper] = _applyDecs2203R(this, [[tracked, 0, "NamedComponent"], [tracked, 0, "SomeComponent"], [tracked, 0, "myhelper"]], []).e;
         }
         NamedComponent = _init_NamedComponent(this, NamedComponent);
         SomeComponent = _init_SomeComponent(this, SomeComponent);
         myhelper = _init_myhelper(this, myhelper);
-      }
+      }()
       export default createTemplateFactory(
       /*
         
@@ -156,6 +156,7 @@ describe('convert template with hot reload helpers', () => {
         
         <template>
       {{(myhelper)}}
+      {{component SomeComponent}}
       <SomeComponent />
       <NamedComponent />
     </template>
@@ -184,22 +185,22 @@ describe('convert template with hot reload helpers', () => {
       import templateOnly from "@ember/component/template-only";
       import { tracked } from "@glimmer/tracking";
       let template__imports__ = null;
-      template__imports__ = class _Imports {
+      template__imports__ = new class _Imports {
         static {
           [_init_NamedComponent, _init_Other, _init_SomeComponent, _init_myhelper] = _applyDecs2203R(this, [[tracked, 0, "NamedComponent"], [tracked, 0, "Other"], [tracked, 0, "SomeComponent"], [tracked, 0, "myhelper"]], []).e;
         }
         NamedComponent = _init_NamedComponent(this, NamedComponent);
         Other = _init_Other(this, Other);
         SomeComponent = _init_SomeComponent(this, SomeComponent);
         myhelper = _init_myhelper(this, myhelper);
-      }
+      }()
       const T = setComponentTemplate(precompileTemplate("\\n            <template__imports__.Other />\\n        ", {
         scope: () => ({
           template__imports__
         }),
         strictMode: true
       }), templateOnly());
-      export default setComponentTemplate(precompileTemplate("\\n      {{(template__imports__.myhelper)}}\\n      <template__imports__.SomeComponent />\\n      <template__imports__.NamedComponent />\\n    ", {
+      export default setComponentTemplate(precompileTemplate("\\n      {{(template__imports__.myhelper)}}\\n      {{component template__imports__.SomeComponent}}\\n      <template__imports__.SomeComponent />\\n      <template__imports__.NamedComponent />\\n    ", {
         scope: () => ({
           template__imports__
         }),
@@ -238,15 +239,15 @@ describe('convert template with hot reload helpers', () => {
       import templateOnly from "@ember/component/template-only";
       import { tracked } from "@glimmer/tracking";
       let template__imports__ = null;
-      template__imports__ = class _Imports {
+      template__imports__ = new class _Imports {
         static {
           [_init_NamedComponent, _init_Other, _init_SomeComponent, _init_myhelper] = _applyDecs2203R(this, [[tracked, 0, "NamedComponent"], [tracked, 0, "Other"], [tracked, 0, "SomeComponent"], [tracked, 0, "myhelper"]], []).e;
         }
         NamedComponent = _init_NamedComponent(this, NamedComponent);
         Other = _init_Other(this, Other);
         SomeComponent = _init_SomeComponent(this, SomeComponent);
         myhelper = _init_myhelper(this, myhelper);
-      }
+      }()
       const T = setComponentTemplate(createTemplateFactory(
       /*
         
@@ -264,13 +265,14 @@ describe('convert template with hot reload helpers', () => {
       /*
         
             {{(myhelper)}}
+            {{component SomeComponent}}
             <SomeComponent />
             <NamedComponent />
           
       */
       {
         "id": "--id--",
-        "block": "[[[1,\\"\\\\n      \\"],[1,[28,[32,0,[\\"myhelper\\"]],null,null]],[1,\\"\\\\n      \\"],[8,[32,0,[\\"SomeComponent\\"]],null,null,null],[1,\\"\\\\n      \\"],[8,[32,0,[\\"NamedComponent\\"]],null,null,null],[1,\\"\\\\n    \\"]],[],false,[]]",
+        "block": "[[[1,\\"\\\\n      \\"],[1,[28,[32,0,[\\"myhelper\\"]],null,null]],[1,\\"\\\\n      \\"],[46,[32,0,[\\"SomeComponent\\"]],null,null,null],[1,\\"\\\\n      \\"],[8,[32,0,[\\"SomeComponent\\"]],null,null,null],[1,\\"\\\\n      \\"],[8,[32,0,[\\"NamedComponent\\"]],null,null,null],[1,\\"\\\\n    \\"]],[],false,[\\"component\\"]]",
         "moduleName": "/rewritten-app/a.gts",
         "scope": () => [template__imports__],
         "isStrictMode": true