@wrnrlr/prelude 0.2.23 → 0.2.24

package/deno.jsonc

@@ -1,6 +1,6 @@
 {
   "name": "@wrnrlr/prelude",
-  "version": "0.2.23",
+  "version": "0.2.24",
   "exports": {
       ".": "./src/mod.ts",
       "./style.css": "./src/style.css"

package/example/canvas.html

@@ -0,0 +1,132 @@
+<script type="module">
+
+import {
+  render, h, signal, memo, untrack, batch, effect, uid,
+  children, onMount, onCleanup, context, useContext, Show, List
+} from '../src/mod.ts'
+
+const component = (Comp, props) => untrack(() => Comp(props || ({})));
+const token = (...args) => {
+  const comp = (props) => {
+    const tok = component(args[1], props)
+    return tok
+  }
+  return comp
+}
+
+// const CanvasCtx = context()
+// const useCanvas = () => useContext(CanvasCtx)
+
+function Canvas(props) {
+  console.log('canvas init')
+  let canvas, ctx
+  const ref = (e) => {
+    console.log('canvas ref')
+    canvas = e
+    ctx = canvas.getContext('2d')
+    effect(()=>{
+      console.log('children effect', props.children)
+    })
+    // const kids = children(()=>props.children)
+  }
+  const objects = signal([])
+  onMount(()=>{
+    console.log('mount canvas')
+    effect(()=>{
+      console.log('canvas effect', objects())
+      // batch(()=>{
+        // const kids = children(()=>props.children)
+      //   console.log(kids)
+      // })
+    })
+  })
+  // return h('canvas', {ref}, h(CanvasCtx, {value: ()=>[objects, ctx]}), ()=>props.children)
+  return h('canvas', {ref})
+}
+
+const Arc = token('', function Arc(props) {
+  const id = props.id || uid()
+  // const objects = useCanvas()
+  console.log('init arc', id)
+  const draw = memo(() => {
+    const point = props.coord()
+    const p = new Path2D()
+    p.arc(point.x, point.y, 10, 0, 2*Math.PI)
+    return p
+  })
+  const render = (ctx) => {
+
+  }
+  const hit = (ctx, p) => {
+    const drawing = untrack(draw)
+    const result = ctx.isPointInPath(drawing, p.x, p.y) || ctx.isPointInStroke(drawing, p.x, p.y)
+    if (result) console.log('hit', id)
+  }
+  onMount(()=>{console.log('mount arc', id)})
+  onCleanup(()=>{
+    console.log('cleanup arc', id)
+  })
+  const self = {draw, hit, render}
+  return self
+})
+
+function Group(props) {
+  const id = props.id || uid()
+  const objects = useCanvas()
+  console.log('init group', id, objects)
+  const draw = memo(() => {
+
+  })
+  const render = (ctx) => {
+
+  }
+  const hit = (ctx, p) => {
+    const drawing = untrack(draw)
+    const result = ctx.isPointInPath(drawing, p.x, p.y) || ctx.isPointInStroke(drawing, p.x, p.y)
+    if (result) console.log('hit', id)
+  }
+  onMount(()=>{
+    console.log('mount arc', id)
+  })
+  onCleanup(()=>{
+    console.log('cleanup arc', id)
+  })
+  const self = {draw, hit, render}
+  return self
+}
+
+function Demo1() {
+  const a = signal(new DOMPoint(10, 10))
+  const b = signal(new DOMPoint(20, 20))
+  return h(Canvas, [
+    h(Arc, {coord:()=>a}),
+    h(Arc, {coord:()=>a})
+  ])
+}
+
+function Demo2() {
+  return h(Canvas, [
+    h(Arc, {coord: ()=>new DOMPoint(10, 10)}),
+    h(Arc, {coord: ()=>new DOMPoint(20, 20)}),
+  ])
+}
+
+render(()=>[
+  h(Demo1),
+  // h(Demo2),
+], document.body)
+
+class CanvasElement extends EventTarget {
+
+}
+
+</script>
+
+<style>
+canvas {
+  border: 1px solid gray;
+  width: 600;
+  height: 300;
+}
+canvas + canvas { margin-top: 10px }
+</style>

package/example/context.html

@@ -10,18 +10,21 @@ const useCounter = () => {
 }
 
 function CounterProvider(props) {
+  console.log('init provider')
   const counter = signal(0)
   const increment = ()=>(console.log('increment', counter()),counter(v=>++v))
-  return h(CounterCtx, {value:()=>[counter, increment]}, props.children)
+  return h(CounterCtx, {value:[counter, increment]}, props.children)
 }
 
 function Counter() {
+  console.log('init counter')
   const [val, increment] = useCounter()
   return [val, h('button', {onClick:e=>increment()}, '+')]
 }
 
 function App() {
-  return h(CounterProvider, ()=>h(Counter))
+  console.log('init app')
+  return h(CounterProvider, (console.log('render child'), ()=>h(Counter)))
 }
 
 render(App, document.body)

package/example/h.html

@@ -1,22 +1,29 @@
 <script type="module">
 
-// import { createSignal, createEffect } from 'solid'
+import { createSignal, createEffect, createContext, useContext } from 'https://esm.sh/solid-js'
 import { render } from 'https://esm.sh/solid-js/web'
 import h from 'https://esm.sh/solid-js/h'
 
-function A(props) {
-  console.log('A')
-  return ['A', h(B)]
+const CounterCtx = createContext()
+
+const useCounter = () => { return useContext(CounterCtx) }
+
+function CounterProvider(props) {
+  console.log('init provider')
+  const counter = createSignal(0)
+  const increment = ()=>(console.log('increment', counter()),counter(v=>++v))
+  return h(CounterCtx.Provider, {value:()=>[counter, increment]}, props.children)
 }
 
-function B() {
-  console.log('B')
-  return 'B'
+function Counter() {
+  console.log('init counter')
+  const [val, increment] = useCounter()
+  return [val, h('button', {onClick:e=>increment()}, '+')]
 }
 
 function App() {
-  console.log('App')
-  return h(A, h(B))
+  console.log('init app')
+  return h(CounterProvider, h(Counter))
 }
 
 render(App, document.body)

package/example/index.html

@@ -14,6 +14,7 @@
   <li><a href="context.html">Context (Dependency Injection)</a></li>
   <li><a href="h.html">h</a></li>
   <li><a href="router.html">Router</a></li>
+  <li><a href="canvas.html">Canvas</a></li>
 </ul>
 <!-- <a href="router.html">Router</a> -->
 <!-- <a href="context.html">Context</a> -->

package/package.json

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

package/src/form.js

@@ -1,7 +1,7 @@
 import { signal, memo, effect, context, useContext, renderEffect } from './reactive.ts'
 import { Show } from './show.ts'
 import { List } from './list.ts'
-import { h } from './hyperscript.ts'
+import { h } from './web.ts'
 import { nbsp } from './constants.ts'
 
 const Ctx = context()

package/src/hyperscript.ts

@@ -1,11 +1,8 @@
 import type {DOMElements} from './constants.ts'
 import type {Mountable} from './runtime.ts'
-import {r} from './runtime.ts'
 
 // const document = globalThis.document
 
-export const h = hyperscript(r)
-
 type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node
 
 interface Runtime {
@@ -179,6 +176,11 @@ export function hyperscript(r: Runtime): HyperScript {
   return h;
 }
 
+function dynamicProperty<T>(props: Record<string, unknown>, key: string) {
+  const src = props[key] as ()=>unknown
+  Object.defineProperty(props, key, {get() {return src()}, enumerable:true})
+  // return props
+}
 
 // ^([a-zA-Z]\w*)?(#[a-zA-Z][-\w]*)?(.[a-zA-Z][-\w]*)*
 // export function parseHtmlTag(s:Tag) {
@@ -207,12 +209,6 @@ export function hyperscript(r: Runtime): HyperScript {
 //   return {name:name as string,classes,id:id}
 // }
 
-function dynamicProperty<T>(props: Record<string, unknown>, key: string) {
-  const src = props[key] as ()=>unknown
-  Object.defineProperty(props, key, {get() {return src()}, enumerable:true})
-  // return props
-}
-
 // function tw(rules) {
 //   const classes = (classes) => classes.filter(c=>!rules.some(r=>c.match(r[0]))).join(' ')
 //   const styles = (classes) => classes.reduce((acc,c) => {

package/src/hyperscript2.ts

@@ -0,0 +1,211 @@
+import type {DOMElements} from './constants.ts'
+import type {Runtime,Mountable} from './runtime.ts'
+
+const ELEMENT: unique symbol = Symbol(), {isArray} = Array
+
+// export type Mountable = View | HTMLElement | string | number | bigint | symbol | boolean | Date | Mountable[];
+export type Component<T> = ((props:T) => Mountable) | ((props:T) => Mountable[])
+export type Tag = typeof DOMElements extends Set<infer K> ? K : never;
+export type Child = { ():Child } | Element | Child[] | string | number | symbol | bigint | boolean | Date | Record<string,unknown> | {():Child, [ELEMENT]:boolean}
+export type View = {():void, [ELEMENT]?:boolean}
+
+export type TagParser = <T extends string>(s:T) => {name:string,id?:string,classes:string[],namespace?:string}
+
+export type HyperScript = {
+  (first: Tag): View
+  <P>(first: Tag, second: P): View
+  <C extends Child>(first: Tag, second: C): View
+  <C extends Child, P>(first: Tag, second: P, third: C): View
+
+  (first: Component<Record<string,never>>): View
+  <P extends Record<string, unknown>>(first: Component<P>, second: P): View
+  <C>(first: Component<{children:C}>, second: C): View
+  <P extends Record<string, unknown>, C>(first: Component<P & {children:C}>, second:P, third:C): View
+}
+
+/**
+@param r
+@param patch
+@group Hyperscript
+*/
+export function hyperscript(r: Runtime, parseTag: TagParser = parseHtmlTag): HyperScript {
+
+  function item(e: Element, c: Child, m?: null): void {
+    if (c===null) return
+    const t = typeof c
+    if (isArray(c)) {
+      for (const child of c)
+        item(e, child, m)
+    } else if (t === 'object' && r.isChild(c)) {
+      r.insert(e, c, m)
+    } else if (t === 'string') {
+      e.appendChild(r.text((c as string)))
+    } else if (t === 'function') {
+      console.log('c', c)
+      while (((c as any)[ELEMENT])?.call) {
+        c = (c as any)()
+        console.log('c', c)
+      }
+      r.insert(e, c, m)
+    } else e.appendChild(r.text(c.toString()))
+  }
+
+  return function h<P extends Record<string,unknown>, C = never>(
+    first: Tag | Component<P>,
+    second?: P | C,
+    third?: C
+  ): View {
+    let props: P
+    let children: Child
+
+    if (typeof second === 'object' && !isArray(second)) {
+      children = (third as Child) || [];
+      props = ((second ?? {}) as P & {children:C})
+    } else {
+      children = (second as Child) || []
+      props = {} as P & {children:C}
+    }
+
+    let ret:View
+
+    if (typeof first === 'string') {
+      const tag = parseTag(first)
+      const multiExpression = detectMultiExpression(children) ? null : undefined
+      const e = r.element(tag.name)
+      const props2 = props as P & {class?: string|(()=>string)}
+      if (tag.id) e.setAttribute('id',tag.id)
+      if (tag.classes?.length) {
+        const cd = Object.getOwnPropertyDescriptor(props2,'class') ?? ({value:'',writable:true,enumerable:true});
+        props2.class = (cd.value?.call) ?
+          () => [...tag.classes,...(cd.value()??'').split(' ')].filter(c=>c).join(' ') :
+          [...tag.classes,...(cd.value??'').split(' ')].filter(c=>c).join(' ')
+      }
+      // if (patch) patch(props2)
+      let dynamic = false
+      const d = Object.getOwnPropertyDescriptors(props2)
+      for (const k in d) {
+        if (k !== 'ref' && !k.startsWith('on') && typeof d[k].value === 'function') {
+          dynamicProperty(props2, k)
+          dynamic = true
+        } else if (d[k].get) dynamic = true
+      }
+      (dynamic ? r.spread : r.assign) (e, props2, !!(children as {length?: number})?.length)
+      item(e, children, multiExpression)
+      ret = () => e
+    } else {
+      const d = Object.getOwnPropertyDescriptors(props)
+      if (children) (props as unknown as {children:unknown}).children = children
+      for (const k in d) {
+        if (isArray(d[k].value)) {
+          const list = d[k].value;
+          (props as Record<string, ()=>unknown>)[k] = () => {
+            for (let i = 0; i < list.length; i++){
+              console.log('i', list[i][ELEMENT], k, d[k])
+              while (list[i][ELEMENT]) {
+                console.log('i', list[i][ELEMENT])
+                list[i] = list[i]()
+              }
+            }
+            return list
+          }
+          dynamicProperty(props, k)
+        } else if (typeof d[k].value==='function' && !d[k].value.length) { // A function with zero arguments
+          dynamicProperty(props, k)
+        }
+      }
+      const e = r.component(() => (first as Component<P>)(props))
+      ret = () => e
+    }
+    ret[ELEMENT] = true
+    return ret
+  }
+}
+
+function detectMultiExpression(children: Child): boolean {
+  if (typeof children === 'function') return true
+  else if (!isArray(children)) return false
+  for (const i of children) {
+    if (typeof i === 'function') return true
+    else if (isArray(i)) return detectMultiExpression(i)
+  }
+  return false
+}
+
+// ^([a-zA-Z]\w*)?(#[a-zA-Z][-\w]*)?(.[a-zA-Z][-\w]*)*
+export function parseHtmlTag(s:Tag) {
+  const classes:string[] = [];
+  let id:string|undefined = undefined, i:number
+
+  i = s.indexOf('#')
+  if (i===-1) i = s.indexOf('.')
+  if (i===-1) i = s.length
+  const name = s.slice(0, i) || 'div'
+  s = s.slice(i)
+
+  if (s[0]==='#') {
+    i = s.indexOf('.')
+    if (i===-1) i = s.length
+    id = s.slice(1, i)
+    s = s.slice(i)
+  }
+
+  while(s[0]==='.') {
+    i = s.indexOf('.',1)
+    if (i===-1) i = s.length
+    classes.push(s.slice(1, i))
+    s = s.slice(i)
+  }
+  return {id, name:name as string, classes}
+}
+
+function dynamicProperty<T>(props: Record<string, unknown>, key: string) {
+  const src = props[key] as ()=>unknown
+  Object.defineProperty(props, key, {get() {return src()}, enumerable:true})
+  // return props
+}
+
+// function tw(rules) {
+//   const classes = (classes) => classes.filter(c=>!rules.some(r=>c.match(r[0]))).join(' ')
+//   const styles = (classes) => classes.reduce((acc,c) => {
+//     for (const r of rules) {
+//       const m = c.match(r[0])
+//       if (m) acc.push(r[1](...m.splice(1)))
+//     }
+//     return acc
+//   },[]).join(';')
+//   return props => {
+//     if (!props.class) return
+//     const cd = Object.getOwnPropertyDescriptor(props,'class'), cf = typeof cd.value === 'function'
+//     props.class = cf ? ()=>classes(cd.value().split(' ')) : classes(cd.value.split(' '))
+//     if (!props.style) props.style = cf ? ()=>styles(cd.value().split(' ')) : styles(cd.value.split(' '))
+//     else {
+//       const sd = Object.getOwnPropertyDescriptor(props,'style'), sf = typeof sd.value === 'function'
+//       if (cf) props.style = sf ? ()=>styles(cd.value().split(' ')) + ';' + sd.value() : ()=>styles(cd.value().split(' ')) + ';' + sd.value
+//       else {
+//         const ca = styles(cd.value.split(' '))
+//         props.style = sf ? () => ca +  ';' + sd.value() : ca + ';' + sd.value
+//       }
+//     }
+//   }
+// }
+
+// const spacing = {p:'padding', m:'margin'}
+// const toDirection = {b:'bottom', l:'left', r:'right', t:'top'}
+// const toSurface = {bg:'background',text:'text',border:'border',outline:'outline'}
+// const alignContent = {start:'flex-start',center:'center',end:'flex-end',between:'space-between',around:'space-around',evenly:'space-evenly'}
+// const toColor = (name,weight) => 'red'
+
+// const rules = [
+//   // padding & margin
+//   [/([pm])-(\d+)/, (pm,size)=>`${spacing[pm]}:${size/4}rem`],
+//   // border
+//   // [/b-%d/, (width)=>({'border-size':width})]
+//   // bg & text & border & outline
+//   // [/(bg|text|border|outline)-\W+-\d+/, (style,color,weight)=>({[toSurface[style]]:toColor(color,weight)})],
+//   // display
+//   // [/(block|inline|inline-block|flex|inline-flex|none)/, (display)=>({display})],
+//   // [/items-(start|center|end|stretch|baseline)/, (pos)=>({'align-items':pos})],
+//   // [/justify-(start|center|end|stretch|baseline)/, (pos)=>({'justify-content':pos})],
+//   // [/content-(start|center|end|between|around|evenly)/, (pos)=>({'align-content':alignContent[pos]})],
+//   // [/self-(auto|start|center|end|stretch|baseline)/, (pos)=>({'aligh-self':pos})],
+// ]

package/src/mod.ts

@@ -5,9 +5,11 @@ export {List} from './list.ts'
 export {Show} from './show.ts'
 export {r, type Runtime} from './runtime.ts'
 export type * from './hyperscript.ts'
-export {hyperscript, h} from './hyperscript.ts'
+export {hyperscript} from './hyperscript.ts'
+export {h} from './web.ts'
 export {Router} from './router.js'
 export {resource,makeAbortable,abortable} from './resource.js'
 import {r} from './runtime.ts'
 export const render = r.render
 export {Dialog,useDialog,Input,Checkbox,Select} from './form.js'
+export {uid} from './util.ts'

package/src/reactive.ts

@@ -304,7 +304,7 @@ export function context<T>(defaultValue?: T) {
   const s = {id, defaultValue}
   return Object.assign((props:any) => {
     OBSERVER?.set(id, props.value)
-    return () => props.children.call ? props.children() : props.children
+    return () => props.children?.call ? props.children() : props.children
   }, s) as unknown as Context<T>
 }
 

package/src/runtime.ts

@@ -54,6 +54,12 @@ function isChild(a:unknown): a is Element {
 }
 
 function component(fn:()=>unknown, props: unknown) {
+  // if (fn.prototype && fn.prototype.isClassComponent) {
+  //   return untrack(() => {
+  //     const comp = new fn(props);
+  //     return comp.render(props);
+  //   });
+  // }
   return untrack(()=>fn(props))
 }
 

package/src/util.ts

@@ -0,0 +1,5 @@
+let seq = 0;
+
+export function uid():string {
+  return '_' + (seq++).toString(36);
+}

package/src/web.ts

@@ -0,0 +1,5 @@
+import { r } from './runtime.ts'
+import { hyperscript } from './hyperscript.ts'
+// import {hyperscript} from './hyperscript2.ts'
+
+export const h = hyperscript(r)

package/src/canvas.js

@@ -1,16 +0,0 @@
-
-export function Canvas(props) {
-
-}
-
-function Arc(props) {
-
-}
-
-function Line(props) {
-
-}
-
-function Bezier(props) {
-
-}