k

public/demo.js

@@ -435,7 +435,7 @@ function _if(el, exp, ctx, component, componentProps, allProps) {
     activeBranchIndex = -1;
     removeActiveBlock();
   });
-  return nextNode;
+  return nextNode.parentElement;
 }
 
 // src/directives/interpolation.ts

src/demo.ts

@@ -172,7 +172,9 @@ import { html } from "./util";
 //   template: html`
 //     <div class="sans-serif">
 //       <div :teleport="body">
-//         <div :if="style.color === 'gray'">true</div>
+//         <div :if="style.color === 'gray'">color is gray</div>
+//         <div :if="style.color === 'white'">color is white</div>
+//         <div>{{style.color}}</div>
 //       </div>
 //       <h3 {style:bind}>Count: {{count}}{{count >= 2 ? '!!!' : ''}}</h3>
 //       <button @click="increment" class="padding-x-1 padding-y-0_5">+</button>
@@ -187,15 +189,15 @@ import { html } from "./util";
 //     const style = reactive({ color: "gray" });
 //     const increment = () => count.value++;
 //     const decrement = () => count.value--;
-
+//
 //     setInterval(() => {
 //       style.color = style.color === "gray" ? "white" : "gray";
 //     }, 500);
-
+//
 //     return { count, increment, decrement, style };
 //   },
 // };
-
+//
 // const app = new App();
 // app.mount(counter, "#app");
 
@@ -222,7 +224,7 @@ import { html } from "./util";
 //     return { items, bool };
 //   },
 // };
-
+//
 // const app = new App();
 // app.mount(main, "#app");
 
@@ -335,19 +337,21 @@ app.mount(main, "#app");
 // weird issue
 // const child = {
 //   template: html`<div>child{{thing}}</div>`,
-//   props: { thing: { default: 1 }},
+//   props: { thing: { default: 1 } },
 //   main({ thing }) {
 //     return { thing };
-//   }
+//   },
 // };
-
+//
 // const counter = {
 //   template: html`
 //     <div class="sans-serif">
-//       <div :teleport="body">
-//         <div :for="color in colors">{{color}}</div>
+//       <div :if="true">
+//         <div :teleport="body">
+//           <div :for="color in colors">{{color}}</div>
+//         </div>
+//         <child :teleport="body" .thing="5" />
 //       </div>
-//       <child :teleport="body" .thing="5" />
 //     </div>
 //   `,
 //   main() {
@@ -355,7 +359,30 @@ app.mount(main, "#app");
 //     return { colors };
 //   },
 // };
-
+//
 // const app = new App();
 // app.register("child", child);
 // app.mount(counter, "#app");
+
+// ------------------------------------------------
+// <template>
+// const templateTest = {
+//   template: html`
+//     <div>
+//       <!-- is dissolved -->
+//       <div :if="bool">hello</div>
+//
+//       <template :if="bool">
+//         <span :for="num in [1,2,3]">{{num}}</span>
+//       </template>
+//     </div>
+//   `,
+//   main() {
+//     const bool = ref(true);
+//
+//     return { bool };
+//   },
+// };
+//
+// const app = new App();
+// app.mount(templateTest, "#app");

src/directives/if.ts

@@ -63,5 +63,5 @@ export function _if(el: Element, exp: string, ctx: Context, component?: Componen
     removeActiveBlock();
   });
 
-  return nextNode;
+  return nextNode.parentElement;
 }

src/index.ts

@@ -11,7 +11,28 @@ import { isComputed } from "./reactivity/computed";
 import { effect as _effect } from "./reactivity/effect";
 import { reactive } from "./reactivity/reactive";
 import { isRef } from "./reactivity/ref";
-import { checkAndRemoveAttribute, componentHasPropByName, extractPropName, findSlotNodes, findTemplateNodes, insertBefore, isElement, isEventAttribute, isMirrorProp, isObject, isPropAttribute, isRegularProp, isSpreadProp, isText, nextTick, Slot, stringToElement, Template, toDisplayString } from "./util";
+import {
+  checkAndRemoveAttribute,
+  componentHasPropByName,
+  extractPropName,
+  findSlotNodes,
+  findTemplateNodes,
+  insertBefore,
+  isElement,
+  isEventAttribute,
+  isMirrorProp,
+  isObject,
+  isPropAttribute,
+  isRegularProp,
+  isSpreadProp,
+  isTemplate,
+  isText,
+  nextTick,
+  Slot,
+  stringToElement,
+  Template,
+  toDisplayString,
+} from "./util";
 
 export * from "./plugins";
 export * from "./plugins/router";