feat: add first version of loop()

tentjs · Nov 22, 2023 · 36d4854 · 36d4854
1 parent 0e08e9d
commit 36d4854
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/example/app.js b/example/app.js
@@ -26,16 +26,22 @@ const Test = {
 
 const List = {
   name: 'my-list',
-  props: ['items', 'msg'],
-  state: { items: [], msg: 'List msg' },
+  state: { items: [] },
   template: html`
     <ul>
-      <li o-text="msg"></li>
+      <li>
+        <span o-text="id"></span>: <span o-text="title"></span>
+      </li>
     </ul>
   `,
-  setup ({ parent, state }) {
-    state.items = parent.state.items
-    state.msg = state.items[0].title
+  setup ({ parent, query }) {
+    const li = query('li')
+
+    li.for(parent.state.items, function ({ el, item }) {
+      if (item.id % 2 === 0) {
+        el.remove()
+      }
+    })
   }
 }
 
@@ -45,7 +51,14 @@ one({
   props: ['msg', 'variant'],
   state: {
     msg: 'Initial msg',
-    items: [{ id: 1, title: 'List item #1' }]
+    items: [
+      { id: 1, title: 'List item #1' },
+      { id: 2, title: 'List item #2' },
+      { id: 3, title: 'List item #3' },
+      { id: 4, title: 'List item #4' },
+      { id: 5, title: 'List item #5' },
+      { id: 6, title: 'List item #6' }
+    ]
   },
   template: html`
     <div>

diff --git a/example/index.html b/example/index.html
@@ -35,7 +35,6 @@
   <body>
     <a href="./robots.txt" aria-label="robots.txt"></a>
     <my-component msg="Hi, from a prop!"></my-component>
-    <my-component variant="sec"></my-component>
     <test>
       <p>Hejsa</p>
       <div>Hejsa 2</div>

diff --git a/lib/one.js b/lib/one.js
@@ -148,6 +148,7 @@ function query (selector) {
 
   el.on = on.bind(this, el)
   el.if = fi.bind(this, el)
+  el.for = loop.bind(this, el)
 
   return el
 }
@@ -163,6 +164,27 @@ function on (el, name, handler) {
   }
 }
 
+function loop (el, arr, fn) {
+  const parent = el.parentNode
+
+  arr.forEach(item => {
+    const clone = el.cloneNode(true)
+
+    clone.$one = {
+      el: clone,
+      state: item
+    }
+
+    render(clone.$one)
+
+    parent.append(clone)
+
+    fn?.({ el: clone, item })
+  })
+
+  el.remove()
+}
+
 function fi (el) {
   let original