Merge pull request #6 from marko-js/el-refs-on-dynamic-tag

fix: add support for element refs on dynamic tags

src/__tests__/fixtures/misc/dynamic-tag-var/__snapshots__/misc-dynamic-tag-vars/basic/node.render.expected.html

@@ -0,0 +1,3 @@
+<div>
+  Hello
+</div>

src/__tests__/fixtures/misc/dynamic-tag-var/__snapshots__/misc-dynamic-tag-vars/basic/web.render.expected.html

@@ -0,0 +1,3 @@
+<div>
+  Hello
+</div>

src/__tests__/fixtures/misc/dynamic-tag-var/__snapshots__/misc-dynamic-tag-vars/basic/web.step-0.expected.html

@@ -0,0 +1,3 @@
+<div>
+  Hello
+</div>

src/__tests__/fixtures/misc/dynamic-tag-var/index.test.ts

@@ -0,0 +1,21 @@
+import { spy, resetHistory } from "sinon";
+import fixture from "../../../fixture";
+
+const onValue = spy();
+
+describe("misc dynamic tag vars", () => {
+  describe(
+    "basic",
+    fixture("./templates/basic.marko", [
+      { onValue },
+      ({ expect }) => {
+        expect(onValue)
+          .to.be.calledOnce.with.property("args")
+          .with.property("0")
+          .with.property("0")
+          .that.has.text("Hello");
+        resetHistory();
+      },
+    ])
+  );
+});

src/__tests__/fixtures/misc/dynamic-tag-var/templates/basic.marko

@@ -0,0 +1,4 @@
+<attrs/{ onValue }/>
+<effect=(() => onValue(el()))/>
+<const/name="div"/>
+<${name}/el>Hello</>

src/transform/cached-function/transform.ts

@@ -1,4 +1,4 @@
-import { importNamed, isNativeTag } from "@marko/babel-utils";
+import { importNamed, isNativeTag, isDynamicTag } from "@marko/babel-utils";
 import { types as t } from "@marko/compiler";
 import { Visitor } from "@marko/compiler/babel-types";
 import { ensureLifecycle } from "../wrapper-component";
@@ -16,7 +16,10 @@ const depsVisitor = {
     if (binding) {
       const bindingTag = binding.path;
 
-      if (bindingTag.isMarkoTag() && !isNativeTag(bindingTag)) {
+      if (
+        bindingTag.isMarkoTag() &&
+        !(isNativeTag(bindingTag) || isDynamicTag(bindingTag))
+      ) {
         let isDep = false;
 
         if (isCoreTag("const", binding.path)) {

src/transform/native-tag-var/transform.ts

@@ -1,5 +1,5 @@
 import { types as t } from "@marko/compiler";
-import { importDefault, isNativeTag } from "@marko/babel-utils";
+import { importDefault, isNativeTag, isDynamicTag } from "@marko/babel-utils";
 import { closest } from "../wrapper-component";
 
 export default {
@@ -11,7 +11,7 @@ export default {
       } = tag;
       const tagVar = node.var!;
 
-      if (!tagVar || !isNativeTag(tag)) {
+      if (!tagVar || !(isNativeTag(tag) || isDynamicTag(tag))) {
         return;
       }
 
@@ -42,7 +42,7 @@ export default {
       tag.pushContainer("attributes", t.markoAttribute("key", keyString));
     },
     exit(tag) {
-      if (tag.node.var && isNativeTag(tag)) {
+      if (tag.node.var && (isNativeTag(tag) || isDynamicTag(tag))) {
         // Don't remove the tag variable until it has been hoisted.
         tag.node.var = null;
       }