npm - @wrnrlr/prelude - Versions diffs - 0.2.1 → 0.2.3 - Mend

@wrnrlr/prelude 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/deno.jsonc CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@wrnrlr/prelude",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "exports": "./src/mod.ts",
   "compilerOptions": {
     "strict": true,

package/example/checkbox.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<title>Todo</title>
+<script type="module">
+import {h,signal,effect,batch,wrap,render,List} from '../src/mod.ts'
+function Checkbox(props) {
+  // effect(()=>console.log('checkbox value ', props.value))
+  return h('input',{
+    type: 'checkbox',
+    checked: props.value,
+    onInput: e => props.value(e.target.checked)
+  })
+}
+function App() {
+  const todos = signal([true,false])
+  // const obj = signal({todos:[true]})
+  // const todos = wrap(obj,'todos')
+  const first = wrap(todos, 0)
+  const removeItem = i => {
+    // console.log('remove', i)
+    // batch(()=>{
+      const old = todos()
+      todos(old.toSpliced(i(),1))
+    // })
+  }
+  return [
+    h('button', {onClick:(e)=>{const old = todos(); todos([false, ...old])}}, '+'),
+    h('ol', h(List, {each:()=>todos}, (value, i) =>
+      h('li', [
+        h(Checkbox, { value: ()=>value }),
+        h('button', { onClick: e=>removeItem(i) }, '\u2715')
+      ])
+    )),
+    h('button', {onClick:(e)=>{const old = todos(); todos([...old, true])}}, '+'),
+    h(Checkbox, { value:()=>first }),
+    h('pre.hello',()=>'todos: '+JSON.stringify(todos(),undefined,2))
+  ]
+}
+render(App, document.body)
+</script>
+<style>
+html {background-color:lightgray}
+ul {margin:0;padding:0}
+/* ul,li {list-style-type: none} */
+input {border-width: 0 0 1px 0; margin:0.25em}
+li>button {border:none; background:none}
+</style>

package/example/index.html CHANGED Viewed

@@ -1,38 +1,8 @@
 <!DOCTYPE html>
-<title>Todo</title>
+<title>Examples</title>
-<script type="module">
-import {h,signal,effect,batch,wrap,render,List} from '../src/mod.ts'
-function Checkbox(props) {
-  // effect(()=>console.log('checkbox value ', props.value))
-  return h('input',{
-    type: 'checkbox',
-    checked: props.value,
-    onInput: e => props.value(e.target.checked)
-  })
-}
-function App() {
-  // const todos = signal([false])
-  const obj = signal({todos:[false]})
-  const todos = wrap(obj,'todos')
-  const first = wrap(todos, 0)
-  return [
-    h('button', {onClick:(e)=>{const old = todos(); todos([...old, false])}}, '+'),
-    h('ol', h(List, {each:()=>todos}, (value, i) =>
-      // (console.log('value',value),h('li', h(Checkbox, { value:()=>value })))
-      h('li', h(Checkbox, { value:()=>value }))
-    )),
-    h(Checkbox, { value:()=>first }),
-    h('pre.hello',()=>'todos: '+JSON.stringify(todos(),undefined,2))
-  ]
-}
-render(App, document.body)
-</script>
+<a href="checkbox.html">Checkboxes</a>
+<a href="todo.html">Todo</a>
 <style>
 html {background-color:lightgray}

package/example/todo.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<title>Todo</title>
+<script type="module">
+import {h,signal,effect,batch,wrap,render,List} from '../src/mod.ts'
+const data = [
+  // {description:'Buy groceries',done:false},
+  {description:'Clean car',done:false},
+  {description:'File taxes',done:true},
+]
+function Input(props) {
+  return h('input',{
+    value:props.value,
+    onInput:e => props.value(e.target.value),
+    tabindex:props.tabindex
+  })
+}
+function Checkbox(props) {
+  return h('input',{
+    type:'checkbox',
+    checked:props.value,
+    onInput:e => props.value(e.target.checked)
+  })
+}
+function TodoItem(props) {
+  // const description = wrap(props.value,'description')
+  const done = wrap(props.value,'done')
+  return h('li', [
+    h(Checkbox,{value:()=>done}),
+    // h(Input,{value:()=>description}),
+    h('button',{onClick:props.onDelete},'\u2715')
+  ])
+}
+function App() {
+  const name = signal('')
+  const todos = signal(data)
+  function onSubmit(e) {
+    e.preventDefault()
+    todos(v => v.toSpliced(v.length, 0, {description:name(), done:false}))
+    name('')
+  }
+  const removeItem = i => e => {
+    batch(()=>{
+      const old = todos()
+      console.log('old',old, i)
+      todos(old.toSpliced(i,1))
+    })
+  }
+  return [
+    h('h3','Todo'),
+    h('ul',[h(List, {each:()=>todos}, (value,i) =>
+      h(TodoItem, {
+        value:()=>value,
+        onDelete: removeItem(i())
+      })
+    )]),
+    h('form',{onSubmit},[h(Input,{value:()=>name,tabindex:1})]),
+    h('pre.hello',()=>'todos: '+JSON.stringify(todos(),undefined,2))
+  ]
+}
+render(App, document.body)
+</script>
+<style>
+ul {margin:0;padding:0}
+ul,li {list-style-type: none}
+input {border-width: 0 0 1px 0; margin:0.25em}
+li>button {border:none; background:none}
+</style>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@wrnrlr/prelude",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "author": "Werner Laurensse",
   "description": "A signal based frontend library with fine-grained reactivity",
   "main": "./src/mod.ts",

package/src/controlflow.ts CHANGED Viewed

@@ -49,24 +49,24 @@ type ItemHolder<T> = {
   disposer: ()=>void
 }
-function listArray<T, U extends Mountable>(
+export function listArray<T, U extends Mountable>(
   list: Getter<T[]>,
   mapFn: (v: Getter<T>, i: Getter<number>) => U,
   options: { fallback?: Mountable }
 ): () => U[]
-function listArray<T, U extends Mountable>(
+export function listArray<T, U extends Mountable>(
   list: Signal<T[]>,
   mapFn: (v: Signal<T>, i: Getter<number>) => U,
   options: { fallback?: Mountable }
 ): () => U[]
-function listArray<T, U extends Mountable>(
+export function listArray<T, U extends Mountable>(
   list: Getter<T[]> | Signal<T[]>,
   mapFn: (v: Signal<T>, i: Getter<number>) => U,
   options: { fallback?: Mountable } = {}
 ): () => U[] {
   const items: ListItem<T>[] = [];
   let mapped: U[] = [],
-    unusedItems: number,
+    // unusedItems: number,
     i: number,
     j: number,
     item: ListItem<T>,
@@ -92,7 +92,7 @@ function listArray<T, U extends Mountable>(
       }
       const temp: U[] = new Array(newItems.length); // new mapped array
-      unusedItems = items.length;
+      let unusedItems = items.length;
       // 1) no change when values & indexes match
       for (j = unusedItems - 1; j >= 0; --j) {
@@ -186,8 +186,7 @@ function listArray<T, U extends Mountable>(
       return (mapped = temp);
     })
   }
-  // const indexes = cb.length > 1 ? [] : null;
-  function newValueGetter(_:unknown) { return newValue }
+  function newValueGetter(a:unknown) { console.log({a}); return newValue }
   function changeBoth() {
     item!.index = i!
     item!.indexSetter?.(i)
@@ -195,25 +194,26 @@ function listArray<T, U extends Mountable>(
     item!.valueSetter?.(newValueGetter)
   }
   function mapper(disposer: ()=>void) {
-    const I = i
-    const t = {value: newValue, index: I, disposer}
+    const t = {value: newValue, index: i, disposer}
     items.push(t)
-    const sI = () => { t.indexSetter = I; return signal(I) }
+    let sI = (...a) => {
+      sI = signal(t.index);
+      t.indexSetter = sI;
+      return sI(...a)
+    }
     let sV = (...a) => {
-      const k = I
       sV = (...a) => {
         if (a.length===0) {
-          const bk = list()[k]
-          return bk
+          return list()[sI()]
         } else {
-          const b = untrack(list)
-          return list(b.toSpliced(k, 1, a[0])).at(k)
+          const k = untrack(sI)
+          return list(b => b.toSpliced(k, 1, typeof a[0] === 'function' ? a[0]() : a[0])).at(k)
         }
       }
       t.valueSetter = sV
       return sV(...a)
     }
-    return mapFn(sV, () => sI())
+    return mapFn(sV, sI)
   }
 }

package/src/mod.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export type {Getter,Setter,Fn,EqualsFn,ErrorFn,RootFn,UpdateFn} from './reactive.ts'
+export type {Getter,Setter,Fn,EqualsFn,ErrorFn,RootFn,UpdateFn,Signal} from './reactive.ts'
 export {signal,effect,untrack,batch,memo,root,wrap,fuse,onMount,onCleanup} from './reactive.ts'
 export {nbsp} from './constants.ts'
 export {Show,List} from './controlflow.ts'

package/src/runtime.ts CHANGED Viewed

@@ -338,7 +338,7 @@ function setAttribute(node: Element, name: string, value?: string): undefined {
   value===undefined || value===null ? node.removeAttribute(name) : node.setAttribute(name, value)
 }
-function setAttributeNS(node:Node, ns:string, name:string, value?:string):any {
+function setAttributeNS(node:Node, ns:string, name:string, value?:string):void {
   value ? node.setAttributeNS(ns, name, value) : node.removeAttributeNS(ns, name)
 }

package/test/list.js ADDED Viewed

@@ -0,0 +1,34 @@
+import {assertEquals,assert} from '@std/assert'
+import {describe,it} from '@std/testing/bdd'
+import { signal } from '../src/reactive.ts'
+import { listArray } from '../src/controlflow.ts'
+// Deno.test('listArray applies list to mapFn', ()=>{
+//   const l = signal([0,1,2])
+//   const r = listArray(l, (e,i)=>({e:e(), i:i()}))
+//   assertEquals(r(), [{e:0,i:0}, {e:1,i:1}, {e:2,i:2}])
+// })
+// Deno.test('listArray append element', ()=>{
+//   const l = signal([0,1,2])
+//   const r = listArray(l, (e,i)=>({e:e(), i:i()}))
+//   assert(r(), [{e:0,i:0}, {e:1,i:1}, {e:2,i:2}])
+//   l(l => [...l,3])
+//   assertEquals(r(), [{e:0,i:0}, {e:1,i:1}, {e:2,i:2}, {e:3,i:3}])
+// })
+// Deno.test('listArray prepend element', ()=>{
+//   const l = signal([0,1,2])
+//   const r = listArray(l, (e,i)=>({e:e(), i:i()}))
+//   r()
+//   l(l => [3, ...l])
+//   assertEquals(r(), [{e:3,i:0}, {e:0,i:1}, {e:1,i:2}, {e:2,i:3}])
+// })
+const l1 = signal(['a'])
+const r1 = listArray(l1, (e,i)=>([i(),e()]))
+// r1()
+l1(l => ['x', ...l])
+// l1(l => [...l, 'x', 'y'])
+console.log(JSON.stringify(r1()))
+// assertEquals(r(), )