Updated Issue 255, updated tests. (#304)

Co-authored-by: Andrew Lu <[email protected]>

Author: alujs

packages/core/src/__tests__/__snapshots__/html.test.ts.snap

@@ -4,7 +4,7 @@ exports[`Html Shadow DOM 1`] = `
 "<div data-name=\\"div-1\\">
   <button data-name=\\"button-1\\">Write a review</button>
 
-  <span data-name=\\"show\\">
+  <template data-name=\\"show\\">
     <input placeholder=\\"Email\\" />
 
     <input placeholder=\\"Title\\" class=\\"input\\" />
@@ -15,7 +15,7 @@ exports[`Html Shadow DOM 1`] = `
     ></textarea>
 
     <button class=\\"button\\" data-name=\\"button-2\\">Submit</button>
-  </span>
+  </template>
 
   <span data-name=\\"for\\"></span>
   <template data-template-for=\\"for\\">
@@ -84,7 +84,29 @@ exports[`Html Shadow DOM 1`] = `
         });
 
       document.querySelectorAll(\\"[data-name='show']\\").forEach((el, index) => {
-        el.style.display = state.showReviewPrompt ? \\"inline\\" : \\"none\\";
+        if (state.showReviewPrompt) {
+          const clonedElement = el.content.cloneNode(true);
+          const endTag = document.createElement(\\"template\\");
+          endTag.setAttribute(\\"data-show\\", \\"show-end\\");
+
+          el.after(endTag);
+          el.after(clonedElement);
+        } else {
+          if (this.querySelector(\\"[data-show='show-end']\\") === null) {
+            return;
+          }
+
+          let sibling = el.nextSibling;
+          const toBeRemoved = [];
+          while (sibling) {
+            toBeRemoved.push(sibling);
+            if (sibling?.dataset?.show === \\"show-end\\") {
+              toBeRemoved.forEach((sib) => sib.remove());
+              return;
+            }
+            sibling = sibling.nextSibling;
+          }
+        }
       });
 
       document
@@ -188,7 +210,7 @@ exports[`Html Stamped 1`] = `
 "<div data-name=\\"div-1\\">
   <button data-name=\\"button-1\\">Write a review</button>
 
-  <span data-name=\\"show\\">
+  <template data-name=\\"show\\">
     <input placeholder=\\"Email\\" />
 
     <input placeholder=\\"Title\\" class=\\"input\\" />
@@ -199,7 +221,7 @@ exports[`Html Stamped 1`] = `
     ></textarea>
 
     <button class=\\"button\\" data-name=\\"button-2\\">Submit</button>
-  </span>
+  </template>
 
   <span data-name=\\"for\\"></span>
   <template data-template-for=\\"for\\">
@@ -278,7 +300,29 @@ exports[`Html Stamped 1`] = `
         });
 
       document.querySelectorAll(\\"[data-name='show']\\").forEach((el, index) => {
-        el.style.display = state.showReviewPrompt ? \\"inline\\" : \\"none\\";
+        if (state.showReviewPrompt) {
+          const clonedElement = el.content.cloneNode(true);
+          const endTag = document.createElement(\\"template\\");
+          endTag.setAttribute(\\"data-show\\", \\"show-end\\");
+
+          el.after(endTag);
+          el.after(clonedElement);
+        } else {
+          if (this.querySelector(\\"[data-show='show-end']\\") === null) {
+            return;
+          }
+
+          let sibling = el.nextSibling;
+          const toBeRemoved = [];
+          while (sibling) {
+            toBeRemoved.push(sibling);
+            if (sibling?.dataset?.show === \\"show-end\\") {
+              toBeRemoved.forEach((sib) => sib.remove());
+              return;
+            }
+            sibling = sibling.nextSibling;
+          }
+        }
       });
 
       document

packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap

@@ -57,7 +57,7 @@ class SmileReviews extends HTMLElement {
       <div data-name=\\"div-1\\">
         <button data-name=\\"button-1\\">Write a review</button>
       
-        <span data-name=\\"show\\">
+        <template data-name=\\"show\\">
           <input placeholder=\\"Email\\" />
       
           <input placeholder=\\"Title\\" class=\\"input\\" />
@@ -68,7 +68,7 @@ class SmileReviews extends HTMLElement {
           ></textarea>
       
           <button class=\\"button\\" data-name=\\"button-2\\">Submit</button>
-        </span>
+        </template>
       
         <span data-name=\\"for\\"></span>
         <template data-template-for=\\"for\\">
@@ -154,7 +154,29 @@ class SmileReviews extends HTMLElement {
       });
 
     this._root.querySelectorAll(\\"[data-name='show']\\").forEach((el, index) => {
-      el.style.display = this.state.showReviewPrompt ? \\"inline\\" : \\"none\\";
+      if (this.state.showReviewPrompt) {
+        const clonedElement = el.content.cloneNode(true);
+        const endTag = document.createElement(\\"template\\");
+        endTag.setAttribute(\\"data-show\\", \\"show-end\\");
+
+        el.after(endTag);
+        el.after(clonedElement);
+      } else {
+        if (this.querySelector(\\"[data-show='show-end']\\") === null) {
+          return;
+        }
+
+        let sibling = el.nextSibling;
+        const toBeRemoved = [];
+        while (sibling) {
+          toBeRemoved.push(sibling);
+          if (sibling?.dataset?.show === \\"show-end\\") {
+            toBeRemoved.forEach((sib) => sib.remove());
+            return;
+          }
+          sibling = sibling.nextSibling;
+        }
+      }
     });
 
     this._root

packages/core/src/generators/html.ts

@@ -237,18 +237,39 @@ const blockToHtml = (json: MitosisNode, options: InternalToHtmlOptions) => {
     addOnChangeJs(
       elId,
       options,
-      `el.style.display = ${(json.bindings.when as string).replace(
-        /;$/,
-        '',
-      )} ? 'inline' : 'none'`,
+      `
+      if(${(json.bindings.when as string).replace(/;$/, '')}) {
+      	const clonedElement = el.content.cloneNode(true);
+        const endTag = document.createElement('template');
+        endTag.setAttribute('data-show', '${elId}-end');
+				
+        el.after(endTag);
+        el.after(clonedElement)
+      } else {
+        if (this.querySelector("[data-show='${elId}-end']") === null) {
+        	return;
+        }
+
+        let sibling = el.nextSibling;
+        const toBeRemoved = [];
+        while (sibling) {
+          toBeRemoved.push(sibling);
+          if (sibling?.dataset?.show === '${elId}-end') {
+          	toBeRemoved.forEach(sib => sib.remove());
+            return;
+          }        
+          sibling = sibling.nextSibling;
+        }
+      }     
+      `,
     );
 
-    str += `<span data-name="${elId}">`;
+    str += `<template data-name="${elId}">`;
     if (json.children) {
       str += json.children.map((item) => blockToHtml(item, options)).join('\n');
     }
 
-    str += '</span>';
+    str += '</template>';
   } else {
     str += `<${json.name} `;