@wrnrlr/prelude 0.1.5 → 0.1.7

package/deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnrlr/prelude",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "exports": "./src/mod.ts",
   "compilerOptions": {
     "strict": false,

package/package.json

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

package/src/mod.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck:
 export type {Getter,Setter,Fn,EqualsFn,ErrorFn,RootFn,UpdateFn} from './reactive.ts'
-export {signal,effect,untrack,batch,memo,root,wrap,onMount,onCleanup} 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'
 export {runtime, type Runtime} from './runtime.ts'

package/src/reactive.ts

@@ -213,6 +213,14 @@ export function signal<T>(value:T, options?:Options<T>): Getter<T> & Setter<T> {
   return f as unknown as Getter<T> & Setter<T>
 }
 
+export function fuse<T>(getter:Getter<T>, setter:Setter<T>):Getter<T> & Setter<T> {
+  return (...args:T[]) => {
+    if (args.length) return setter(args[0]) as T
+    else return getter()
+  }
+}
+
+
 /**
 @group Reactive Primitive
 */

package/src/runtime.ts

@@ -283,7 +283,7 @@ function eventHandler(e:any) {
 }
 
 function setAttribute(node:Node, name:string, value?:string):any {
-  value ? node.setAttribute(name, value) : node.removeAttribute(name)
+  value===undefined || value===null ? node.removeAttribute(name) : node.setAttribute(name, value)
 }
 
 function setAttributeNS(node:Node, ns:string, name:string, value?:string):any {

package/test/hyperscript.js

@@ -30,6 +30,10 @@ testing('h with basic element', {skip:true}, async test => {
   await test('tag with id', () => assertHTML(h('#a'), '<div id="a"></div>'))
   await test('tag with class', () => assertHTML(h('.a'), '<div class="a"></div>'))
   await test('tag with id & classes', () => assertHTML(h('i#a.b.c'), '<i id="a" class="b c"></i>'))
+  await test('tag with tag class and prop class', () => assertHTML(h('hr.a', {class:'b'}), '<hr class="a b">'))
+  await test('tag with tag class and dynamic prop class', () => assertHTML(h('hr.a', {class:()=>'b'}), '<hr class="a b">'))
+  await test('tag with tag class and undeefined prop class', () => assertHTML(h('hr.a', {class:undefined}), '<hr class="a">'))
+  await test('tag with tag class and dynamic undeefined prop class', () => assertHTML(h('hr.a', {class:()=>undefined}), '<hr class="a">'))
   await test('no props or children', () => assertHTML(h('hr'), '<hr>'))
   await test('boolean content', () => assertHTML(h('b',true), '<b>true</b>'))
   await test('string content', () => assertHTML(h('b','A'), '<b>A</b>'))
@@ -39,11 +43,12 @@ testing('h with basic element', {skip:true}, async test => {
   // await test('regex content', () => assertHTML(h('b',/\w/), '<b>/\\w/</b>'))
   await test("signal content", () => assertHTML(h('i',()=>1), '<i>1</i>'))
   await test('array content', () => assertHTML(h('i',['A',1,2n]), '<i>A12</i>'))
-  await test('style attribute', () => assertHTML(h('hr',{style:'color:red'}), '<hr style="color: red;">'))
-  await test('htmlFor attribute', () => assertHTML(h('label',{htmlFor:'a'}), '<label for="a"></label>'))
-  await test('ref attribute', () => assertHTML(h('hr',{ref:el=>el.setAttribute('a','1')}), '<hr a="1">'))
-  await test('classList attribute', () => assertHTML(h('hr', {classList:()=>({a:true})}), '<hr class="a">'))
-  await test('class from tag & attribute', () => assertHTML(h('hr.a',{class:'b'}), '<hr class="a b">'))
+  await test('ref property', () => assertHTML(h('hr',{ref:el=>el.setAttribute('a','1')}), '<hr a="1">'))
+  await test('style property sets style attribute', () => assertHTML(h('hr',{style:'color:red'}), '<hr style="color: red;">'))
+  await test('htmlFor property sets for attribute', () => assertHTML(h('label',{htmlFor:'a'}), '<label for="a"></label>'))
+  await test('classList property sets class attribute', () => assertHTML(h('hr', {classList:()=>({a:true})}), '<hr class="a">'))
+  await test('custom attribute', () => assertHTML(h('hr', {'attr:a':'b'}), '<hr a="b">'))
+  await test('custom empty attribute', () => assertHTML(h('hr', {'attr:data-a':''}), '<hr data-a="">'))
 })
 
 function assertText(t, e, msg) { assertEquals(t(), e, msg) }

package/test/reactive.js

@@ -1,7 +1,7 @@
 import {assertEquals,assert} from '@std/assert'
 import {describe,it} from '@std/testing/bdd'
 
-import {signal,effect,untrack,batch,memo,context,useContext,root,wrap} from '../src/reactive.ts'
+import {signal,effect,untrack,batch,memo,context,useContext,root,wrap,fuse} from '../src/reactive.ts'
 
 describe('signal', () => {
   const a = signal(1)
@@ -13,6 +13,17 @@ describe('signal', () => {
   assertEquals(a(null),null)
 })
 
+describe('fuse', () => {
+  const n = signal(1)
+  const odd = signal(false)
+  const c = fuse(n, i => (odd(i%2===0), n(i)))
+  assertEquals(c(),1)
+  assertEquals(c(2),2)
+  assertEquals(odd(),true)
+  assertEquals(c(i=>i+1),3)
+  assertEquals(odd(),false)
+})
+
 describe('signal with equals option', () => {
   const n = signal(0,{equals:false})
   let m = 0

package/www/index.html

@@ -14,8 +14,8 @@
     <span class="prelude text-xl">Prelude</span>
   </div>
   <div class="flex items-center gap-5">
-    <a href="/prelude/docs/index.html">Get Started</a>
-    <a href="/prelude/docs/modules.html">API</a>
+    <a href="/prelude/docs/index.html">Documentation</a>
+    <a href="https://github.com/wrnrlr/prelude">Source</a>
     <a class="px-3 py-2 rounded-md bg-green-600 text-white font-weight-500 text-shadow-green shadow" href="/prelude/playground">Playground</a>
   </div>
 </nav>
@@ -25,7 +25,7 @@
   <svg class="py-8" viewBox="0 0 709 709" style="width:300px;--color:var(--neutral-700)"><use xlink:href="./logo.svg#loop"></use></svg>
   <div class="flex column center items-center gap-6">
     <span class="prelude text-6xl">Prelude</span>
-    <span class="text-3xl">A signal-based web library that lets you <br> develop in a familiar functional style</span>
+    <span class="text-3xl">A signal-based UI library that lets you <br> develop in a familiar functional style</span>
     <div class="flex gap-4">
       <a class="px-3 py-2 rounded-md bg-neutral-200 text-xl font-weight-500" href="/prelude/docs/index.html">Get Started</a>
       <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 shadow" href="/prelude/playground">Open Playground</a>
@@ -46,7 +46,7 @@ function Counter() {
   return h('button', {onClick}, n)
 }
 
-render(Counter, window.counter)</code></pre>
+render(Counter, document.body)</code></pre>
     <div class="card">
         <div class="title center">Counter</div>
         <div class="flex justify-center content-center flex-wrap content" id="counter"></div>

package/src/canvas.js

@@ -1,114 +0,0 @@
-import {signal,effect,memo,context,useContext, onMount} from './reactive.ts'
-import {$RUNTIME} from './runtime.ts'
-import {h} from './mod.ts'
-
-function CanvasRuntime() {
-  let render,insert,spread,assign,element,text,isChild
-  return {render,insert,spread,assign,element,text,isChild}
-}
-
-const CountCtx = context()
-
-const useCount = () => useContext(CountCtx)
-
- function CountProvider(props) {
-  const count = signal(0)
-  return h(CountCtx, {value:[count]}, props.children)
-}
-
-const Ctx = context()
-const useCanvas = () => useContext(Ctx)
-
-function Canvas(props) {
-  const canvas = signal()
-  const ctx = signal()
-  effect(() => ctx(canvas()?.getContext('2d')))
-  return h(Ctx, {value:[canvas,ctx]},
-    h('canvas', {ref:canvas}, props.children))
-}
-
-function toCanvas(fn) {
-  // fn[$RUNTIME] = CanvasRuntime
-  return fn
-}
-
-const Path = context()
-const usePath = () => useContext(Path)
-
-const Stroke = props => {
-  const ref = signal()
-  const [_,ctx] = useCanvas()
-  const path = signal(null)
-  let children
-  onMount(()=>path(new Path2D()))
-  effect(()=>console.log('Stroke',ref))
-  effect(() => {
-    if (!children) {
-      children = signal()
-    }
-    const kids = children()
-    if (kids) return
-  })
-  return h(Path, {ref, value:[path]}, props?.children)
-}
-
-const Fill = toCanvas(() => {
-  const ctx = useCanvas()
-})
-
-const Line = props => {
-  let value, path, path2d
-  // if (props.value) value = memo(() => [l.x0, l.y0, l.x1, l.y1])
-  if (props.children) value = props.children.call ? props.children : () => props.children
-  if (props.fill || props.stroke) {
-    path2d = new Path2D()
-    // ctx =
-  }
-  if (!value) value = props.value
-  let ctx = path2d ?? usePath()
-  if (!path2d&&ctx) { path = ctx[0] }
-  let render = path2d ?
-    () => {
-      path2d.moveTo(v[0],v[1])
-      path2d.lineTo(v[2],v[3])
-    } : () => {
-      const p = path()
-      p.moveTo(v[0],v[1])
-      p.lineTo(v[2],v[3])
-    }
-  // effect(()=>console.log('Line',path(), value()))
-  // effect(()=>{path().lineTo(...value())})
-  return ops => {
-    console.log('render line')
-    // ops.push()
-    return {
-      shape() {return path2d},
-      render,
-      hit() {},
-      size() {},
-    }
-  }
-}
-
-const Quadratic = toCanvas(q => {
-  const path = usePath()
-  return () => path.quadraticCurveTo(q.x0,q.y0,q.x1,q.y1,q.x2,q.y2)
-})
-
-const Bezier = toCanvas(b => {
-  const path = usePath()
-  return () => path.bezierCurveTo(b.x0,b.y0,b.x1,b.y1,b.x2,b.y2,b.x3,b.y3)
-})
-
-const Arc = toCanvas(a => {
-  const path = usePath()
-  return () => path.arc(a.x, a.y, a.radius, a.startAngle, a.endAngle, a.counterclockwise)
-})
-
-export const Group = {}
-export const Pattern = {}
-export const Text = {}
-export const Rectangle = {}
-export const Image = {}
-
-export {CanvasRuntime,Canvas,Stroke,Fill,Line,Quadratic,Bezier,Arc}