fix: ensure body-only-if arguments are migrated

.changeset/tiny-cheetahs-tickle.md

@@ -0,0 +1,6 @@
+---
+"@marko/compat-v4": patch
+"marko-widgets": patch
+---
+
+Fix issue where body-only-if migrator was not revisiting arguments

packages/compat-v4/src/migrate/body-only-if-directive.ts

@@ -86,6 +86,10 @@ export default {
             "name",
             t.conditionalExpression(arg, t.nullLiteral(), nameExpression),
           );
+
+          (tag.get("name") as t.NodePath<t.ConditionalExpression>)
+            .get("test")
+            .visit();
         }
       },
     });

tests/fixtures-class/body-only-if-custom-tag/__snapshots__/auto-migrate.expected/template.marko

@@ -31,4 +31,7 @@ export interface Input {
     Body 4
   </>
 </div>
+<div id="revisit">
+  <${input.show1 ? null : Component1}/>
+</div>
 -- Referenced Global ${typeof Component4 === "undefined"}

tests/fixtures-class/body-only-if-custom-tag/__snapshots__/dom.expected.md

@@ -10,6 +10,11 @@
 >
   Child 1Body 1Child 2Body 2Child 3Body 3Child 4Body 4
 </div>
+<div
+  id="revisit"
+>
+  Child 1
+</div>
 Referenced Global true
 ```
 
@@ -25,6 +30,9 @@ Referenced Global true
 >
   Body 1Child 2Body 2Child 3Body 3Child 4Body 4
 </div>
+<div
+  id="revisit"
+/>
 Referenced Global true
 ```
 
@@ -76,6 +84,9 @@ removed div2/#text17 before div2/#text18
 inserted div2/#text17
 removed div2/#text18 before div2/#text0
 inserted div2/#text18
+removed #text before #text
+removed #text before #text
+removed #text in div3
 ```
 
 # Render {"show2":true}
@@ -90,6 +101,11 @@ inserted div2/#text18
 >
   Child 1Body 1Body 2Child 3Body 3Child 4Body 4
 </div>
+<div
+  id="revisit"
+>
+  Child 1
+</div>
 Referenced Global true
 ```
 
@@ -114,6 +130,9 @@ removed #text after div2/#text6
 removed #text after div2/#text6
 removed #text after div2/#text6
 removed #text after div2/#text6
+inserted div3/#text0
+inserted div3/#text2
+inserted div3/#text1
 ```
 
 # Render {"show3":true}
@@ -128,6 +147,11 @@ removed #text after div2/#text6
 >
   Child 1Body 1Child 2Body 2Body 3Child 4Body 4
 </div>
+<div
+  id="revisit"
+>
+  Child 1
+</div>
 Referenced Global true
 ```
 
@@ -166,6 +190,11 @@ removed #text after div2/#text12
 >
   Child 1Body 1Child 2Body 2Child 3Body 3Body 4
 </div>
+<div
+  id="revisit"
+>
+  Child 1
+</div>
 Referenced Global true
 ```
 

tests/fixtures-class/body-only-if-custom-tag/__snapshots__/dom.expected/template.js

@@ -63,6 +63,14 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     }, out, _componentDef, "9");else _renderBody4(out);
   }
   out.ee();
+  out.be("div", {
+    "id": "revisit"
+  }, "10", _component, null, 1);
+  {
+    const _tagName9 = input.show1 ? null : Component1;
+    if (_tagName9) _marko_tag(_tagName9, {}, out, _componentDef, "11");
+  }
+  out.ee();
   out.t("Referenced Global ", _component);
   out.t(typeof Component4 === "undefined", _component);
 }, {

tests/fixtures-class/body-only-if-custom-tag/__snapshots__/html.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <div id=no-body>Child 1Child 2Child 3Child 4</div><div id=with-body>Child 1Body 1Child 2Body 2Child 3Body 3Child 4Body 4</div>Referenced Global true
+  <div id=no-body>Child 1Child 2Child 3Child 4</div><div id=with-body>Child 1Body 1Child 2Body 2Child 3Body 3Child 4Body 4</div><div id=revisit>Child 1</div>Referenced Global true
 
 # Render
 ```html
@@ -13,5 +13,10 @@
 >
   Child 1Body 1Child 2Body 2Child 3Body 3Child 4Body 4
 </div>
+<div
+  id="revisit"
+>
+  Child 1
+</div>
 Referenced Global true
 ```

tests/fixtures-class/body-only-if-custom-tag/__snapshots__/html.expected/template.js

@@ -58,6 +58,12 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     }, out, _componentDef, "9");else _renderBody4(out);
   }
   out.w("</div>");
+  out.w("<div id=revisit>");
+  {
+    const _tagName9 = input.show1 ? null : Component1;
+    if (_tagName9) _marko_tag(_tagName9, {}, out, _componentDef, "11");
+  }
+  out.w("</div>");
   out.w("Referenced Global ");
   out.w(_marko_escapeXml(typeof Component4 === "undefined"));
 }, {

tests/fixtures-class/body-only-if-custom-tag/__snapshots__/hydrate.expected.md

@@ -10,5 +10,10 @@
 >
   Child 1Body 1Child 2Body 2Child 3Body 3Child 4Body 4
 </div>
+<div
+  id="revisit"
+>
+  Child 1
+</div>
 Referenced Global true
 ```

tests/fixtures-class/body-only-if-custom-tag/template.marko

@@ -30,4 +30,8 @@ export interface Input {
   </component-4>
 </div>
 
+<div id="revisit">
+  <component-1 body-only-if(data.show1)/>
+</div>
+
 -- Referenced Global ${typeof Component4 === "undefined"}

tests/fixtures-class/body-only-if-native-tag/__snapshots__/auto-migrate.expected/template.marko

@@ -1,4 +1,7 @@
 <div>
+  <${input.test ? null : "span"}>
+    Blah
+  </>
   <${input.test ? null : "span"}>
     Blah
   </>

tests/fixtures-class/body-only-if-native-tag/__snapshots__/dom.expected.md

@@ -1,6 +1,9 @@
 # Render
 ```html
 <div>
+  <span>
+    Blah
+  </span>
   <span>
     Blah
   </span>

tests/fixtures-class/body-only-if-native-tag/__snapshots__/dom.expected/template.js

@@ -13,14 +13,18 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     if (_tagName) out.be(_tagName, null, "1", _component, null, 0);else out.bf("f_1", _component);
     out.t("Blah", _component);
     if (_tagName) out.ee();else out.ef();
+    const _tagName2 = input.test ? null : "span";
+    if (_tagName2) out.be(_tagName2, null, "2", _component, null, 0);else out.bf("f_2", _component);
+    out.t("Blah", _component);
+    if (_tagName2) out.ee();else out.ef();
     if (input.shouldShow) {
-      const _tagName2 = input.test ? null : "span";
-      if (_tagName2) out.be(_tagName2, null, "2", _component, null, 0);else out.bf("f_2", _component);
+      const _tagName3 = input.test ? null : "span";
+      if (_tagName3) out.be(_tagName3, null, "3", _component, null, 0);else out.bf("f_3", _component);
       out.t("Blah", _component);
-      if (_tagName2) out.ee();else out.ef();
+      if (_tagName3) out.ee();else out.ef();
     }
     out.t("Blah", _component);
-    out.be("span", null, "3", _component, null, 0);
+    out.be("span", null, "4", _component, null, 0);
     out.t("Blah", _component);
     out.ee();
   }

tests/fixtures-class/body-only-if-native-tag/__snapshots__/html.expected.md

@@ -1,9 +1,12 @@
 # Write
-  <div><span>Blah</span>Blah<span>Blah</span></div>
+  <div><span>Blah</span><span>Blah</span>Blah<span>Blah</span></div>
 
 # Render
 ```html
 <div>
+  <span>
+    Blah
+  </span>
   <span>
     Blah
   </span>

tests/fixtures-class/body-only-if-native-tag/__snapshots__/html.expected/template.js

@@ -11,11 +11,15 @@ _marko_template._ = _marko_renderer(function (input, out, _componentDef, _compon
     if (_tagName) out.w(`<${_tagName}>`);else out.bf("f_1", _component, 1);
     out.w("Blah");
     if (_tagName) out.w(`</${_tagName}>`);else out.ef();
+    const _tagName2 = input.test ? null : "span";
+    if (_tagName2) out.w(`<${_tagName2}>`);else out.bf("f_2", _component, 1);
+    out.w("Blah");
+    if (_tagName2) out.w(`</${_tagName2}>`);else out.ef();
     if (input.shouldShow) {
-      const _tagName2 = input.test ? null : "span";
-      if (_tagName2) out.w(`<${_tagName2}>`);else out.bf("f_2", _component, 1);
+      const _tagName3 = input.test ? null : "span";
+      if (_tagName3) out.w(`<${_tagName3}>`);else out.bf("f_3", _component, 1);
       out.w("Blah");
-      if (_tagName2) out.w(`</${_tagName2}>`);else out.ef();
+      if (_tagName3) out.w(`</${_tagName3}>`);else out.ef();
     }
     out.w("Blah");
     out.w("<span>");

tests/fixtures-class/body-only-if-native-tag/__snapshots__/hydrate.expected.md

@@ -1,6 +1,9 @@
 # Render
 ```html
 <div>
+  <span>
+    Blah
+  </span>
   <span>
     Blah
   </span>

tests/fixtures-class/body-only-if-native-tag/template.marko

@@ -3,6 +3,10 @@
         Blah
     </span>
 
+    <span body-only-if(data.test)>
+        Blah
+    </span>
+
     <span if(input.shouldShow) body-only-if(input.test)>
         Blah
     </span>