fix: nested if in for

KevinBLT · Jan 11, 2024 · d7df9ac · d7df9ac
1 parent 90c004e
commit d7df9ac
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/packages/@hec.js/ui/example/component/index.html b/packages/@hec.js/ui/example/component/index.html
@@ -14,7 +14,7 @@
       import { templateByNode } from '../../lib/index.js';
 
       templateByNode(document.body, {
-        list: Array.from({ length: 1 || Math.round(Math.random() * 100)}, () => (
+        list: Array.from({ length: Math.round(Math.random() * 100)}, () => (
           { count: Math.round(Math.random() * 0xffffff) })
         ),
       });

diff --git a/packages/@hec.js/ui/example/list/index.html b/packages/@hec.js/ui/example/list/index.html
@@ -30,7 +30,10 @@
     <a data-match="--active" href="../list/index.html">Current page: List</a>
     <a data-match="--active" href="../inline/index.html">Inline Page</a>
     <ul>
-      <li data-for="let color of colors" class="{{ color.class }}">{{ color.name }}</li>
+      <li data-for="let color of colors" class="{{ color.class }}">
+        <span>{{ color.name }}</span>
+        <span data-if="color.name"> A color!</span>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/packages/@hec.js/ui/lib/src/plugins/data-for.js b/packages/@hec.js/ui/lib/src/plugins/data-for.js
@@ -59,7 +59,5 @@ export const dataForPlugin = {
     if (isSignal(list)) {
       list.subscribe({next: update}); 
     }
-
-    stopTemplate();
   }
 }
diff --git a/packages/@hec.js/ui/lib/src/props.js b/packages/@hec.js/ui/lib/src/props.js
@@ -9,6 +9,7 @@ const nodeProps = new WeakMap();
 /** @param { Node } node  */
 export const propsOf = (node) => nodeProps.get(node);
 export const deletePropsOf = (node) => nodeProps.delete(node);
+export const hasProps = (node) => nodeProps.has(node);
 
 export const setPropsOf = (node, props) => {
   const existing = propsOf(node);

diff --git a/packages/@hec.js/ui/lib/src/template.js b/packages/@hec.js/ui/lib/src/template.js
@@ -2,7 +2,7 @@ import { expression } from './expression.js';
 import { pipes } from './pipes.js';
 import { plugins } from './plugins.js';
 import { isSignal } from './signal.js';
-import { f, setPropsOf, prop, hasProp } from './props.js';
+import { f, setPropsOf, prop, hasProp, hasProps } from './props.js';
 
 /** @type {{ [key: string]: Promise<HTMLTemplateElement> }} */
 const templatesLoading = {}
@@ -137,6 +137,10 @@ export function templateByNode(template, props = {}) {
   const findExpression = (node) => {
     let stopFlag = false;
 
+    if (hasProps(node)) {
+      return;
+    }
+
     if (node.nodeName == '#document-fragment') {
       setPropsOf(node, props);
     }