@wrnrlr/prelude 0.1.9 → 0.2.1

package/src/controlflow.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck:
 import type { Child } from './hyperscript.ts'
-import {signal,untrack,batch,memo,root,type Signal} from './reactive.ts'
+import {signal,untrack,batch,memo,root,onCleanup,type Signal, type Setter, type Mountable} from './reactive.ts'
 
 export type ShowProps<T> = {
   when: T,
@@ -12,7 +12,7 @@ export type ShowProps<T> = {
 Show children if `when` prop is true, otherwise show `fallback`.
 @group Components
 */
-export function Show<T>(props:any) {
+export function Show<T>(props:ShowProps) {
   const condition = memo(()=>props.when)
   return memo(()=>{
     const c = condition()
@@ -24,152 +24,200 @@ export function Show<T>(props:any) {
   })
 }
 
-type ItemHolder = {
-  index:number,
-  indexSetter?:any,
-  value:unknown,
-  valueSetter:any,
-  disposer: any
-}
-
-export type ListProps<T> = {
-  when: T,
-  each: any,
-  children: Child | ((a:()=>T)=>void),
-  fallback: unknown
+export type ListProps<T, U extends Mountable, F = Getter | Signal> = {
+  each: F<T[]>,
+  children: (item: F<T>, index: F<number>) => U,
+  fallback?: Mountable
 }
 
 /**
 List
 @group Components
 */
-export function List<T>(props:any) {
-  const fallback = "fallback" in props && { fallback: () => props.fallback }
-  const list = props.each
-  const cb:any = (props.children as any)?.call ? props.children : (v:any)=>v
-  let items:ItemHolder[] = [],
-    item: undefined|ItemHolder,
-    // unusedItems,
-    i: undefined|number,
-    newValue: undefined|number,
-    mapped: number[],
+export function List<T>(
+  props: ListProps<T>
+) {
+  const fallback = "fallback" in props && { fallback: () => props.fallback };
+  return memo(listArray<T>(props.each, props.children, fallback || undefined))
+}
+
+type ItemHolder<T> = {
+  index: number,
+  indexSetter?: Getter<number>,
+  value: T,
+  valueSetter?: Setter<T>,
+  disposer: ()=>void
+}
+
+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>(
+  list: Signal<T[]>,
+  mapFn: (v: Signal<T>, i: Getter<number>) => U,
+  options: { fallback?: Mountable }
+): () => U[]
+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,
+    i: number,
+    j: number,
+    item: ListItem<T>,
+    oldValue: T,
     oldIndex: number,
-    oldValue: unknown
-  const indexes = cb.length > 1 ? [] : null;
-  function newValueGetter(_:unknown) { return newValue }
-  function changeBoth() {
-    item!.index = i!
-    item!.indexSetter?.(i)
-    item!.value = newValue!
-    item!.valueSetter?.(newValueGetter)
-  }
-  function mapperWithIndexes(disposer:any) {
-    const V = newValue, I = i, Is = signal(I), Vs = signal(V)
-    items.push({value: newValue, index: I!, disposer, indexSetter: Is, valueSetter: Vs})
-    return cb(
-      (...a:any[]) => a.length ?
-        untrack(()=>list((list:any)=>list.toSpliced(I,1,a[0])))
-        : Vs(),
-      ()=>Is())
-  }
-  function mapperWithoutIndexes(disposer:any) {
-    const V = newValue, I = i, Vs = signal(V)
-    items.push({value: V, index: i!, disposer, valueSetter: Vs})
-    return cb((...a:unknown[]) => a.length ?
-      untrack(()=>list((list:any)=>list.toSpliced(I,1,a[0])))
-      : Vs())
-  }
-  const mapper = indexes ? mapperWithIndexes : mapperWithoutIndexes
-  return memo(() => {
-    const newItems = list.call ? list() : list
-    // (newItems)[$TRACK]; // top level tracking
+    newValue: T,
+    fallback: U[] | undefined,
+    fallbackDisposer: undefined | (() => void)
+
+  onCleanup(() => {
+    fallbackDisposer?.()
+    fallbackDisposer = undefined
+    disposeList(items)
+  })
+
+  return () => {
+    const newItems = typeof list==='function' ? list() || [] : list;
     return untrack(() => {
-      const temp = new Array(newItems.length) // new mapped array
-      let unusedItems = items.length
+      if (newItems.length > 0 && fallbackDisposer) {
+        fallbackDisposer();
+        fallbackDisposer = undefined;
+        fallback = undefined;
+      }
+
+      const temp: U[] = new Array(newItems.length); // new mapped array
+      unusedItems = items.length;
 
       // 1) no change when values & indexes match
-      for (let j = unusedItems - 1; j >= 0; --j) {
-        item = items[j]
+      for (j = unusedItems - 1; j >= 0; --j) {
+        item = items[j]!;
         oldIndex = item.index
         if (oldIndex < newItems.length && newItems[oldIndex] === item.value) {
-          temp[oldIndex] = mapped[oldIndex]
+          temp[oldIndex] = mapped[oldIndex]!
           if (--unusedItems !== j) {
-            items[j] = items[unusedItems]
+            items[j] = items[unusedItems]!
             items[unusedItems] = item
           }
         }
       }
 
       // #2 prepare values matcher
-      const matcher = new Map()
+      const matcher = new Map<T, number[]>()
       const matchedItems = new Uint8Array(unusedItems)
-      for (let j = unusedItems - 1; j >= 0; --j) {
-        oldValue = items[j].value
+      for (j = unusedItems - 1; j >= 0; --j) {
+        oldValue = items[j]!.value
         matcher.get(oldValue)?.push(j) ?? matcher.set(oldValue, [j])
       }
 
       // 2) change indexes when values match
       for (i = 0; i < newItems.length; ++i) {
         if (i in temp) continue
-        newValue = newItems[i]
-        const j = matcher.get(newValue)?.pop() ?? -1
+        newValue = newItems[i]!
+        j = matcher.get(newValue)?.pop() ?? -1;
         if (j >= 0) {
-          item = items[j as number]
-          oldIndex = item!.index
-          temp[i] = mapped[oldIndex]
-          item!.index = i
-          item!.indexSetter?.(i)
-          matchedItems[j as number] = 1
+          item = items[j]!
+          oldIndex = item.index
+          temp[i] = mapped[oldIndex]!
+          item.index = i
+          item.indexSetter?.(i)
+          matchedItems[j] = 1
         }
       }
 
-      // 3) reduce unusedItems for matched items
-      for (let j = matchedItems.length - 1; j >= 0; --j) {
+      // #2 reduce unusedItems for matched items
+      for (j = matchedItems.length - 1; j >= 0; --j) {
         if (matchedItems[j] && --unusedItems !== j) {
-          item = items[j]
-          items[j] = items[unusedItems]
+          item = items[j]!
+          items[j] = items[unusedItems]!
           items[unusedItems] = item
         }
       }
 
-      // 4) change values when indexes match
-      for (let j = unusedItems - 1; j >= 0; --j) {
-        item = items[j];
-        oldIndex = item!.index;
+      // 3) change values when indexes match
+      for (j = unusedItems - 1; j >= 0; --j) {
+        item = items[j]!
+        oldIndex = item.index;
         if (!(oldIndex in temp) && oldIndex < newItems.length) {
-          temp[oldIndex] = mapped[oldIndex]
-          newValue = newItems[oldIndex]
+          temp[oldIndex] = mapped[oldIndex]!
+          newValue = newItems[oldIndex]!
           item.value = newValue
-          item.valueSetter?.(item.valueSetter)
+          item.valueSetter?.(newValue)
           if (--unusedItems !== j) {
-            items[j] = items[unusedItems]
+            items[j] = items[unusedItems]!
             items[unusedItems] = item
           }
         }
       }
 
-      // 5) change value & index when none matched and create new if no unused items left
+      // 4) change value & index when none matched
+      // 5) create new if no unused items left
       for (i = 0; i < newItems.length; ++i) {
-        if (i in temp) continue
-        newValue = newItems[i]
+        if (i in temp) continue;
+        newValue = newItems[i]!;
         if (unusedItems > 0) {
-          item = items[--unusedItems]
-          temp[i] = mapped[item.index]
+          item = items[--unusedItems]!;
+          temp[i] = mapped[item.index]!;
           batch(changeBoth);
         } else {
-          temp[i] = root(mapper)
+          temp[i] = root(mapper);
         }
       }
 
       // 6) delete any old unused items left
-      disposeList(items.splice(0, unusedItems))
+      disposeList(items.splice(0, unusedItems));
 
+      if (newItems.length === 0 && options.fallback) {
+        if (!fallbackDisposer) {
+          fallback = [
+            root(d => {
+              fallbackDisposer = d;
+              return options.fallback!();
+            }),
+          ];
+        }
+        return fallback!;
+      }
       return (mapped = temp);
     })
-  })
+  }
+  // const indexes = cb.length > 1 ? [] : null;
+  function newValueGetter(_:unknown) { return newValue }
+  function changeBoth() {
+    item!.index = i!
+    item!.indexSetter?.(i)
+    item!.value = newValue!
+    item!.valueSetter?.(newValueGetter)
+  }
+  function mapper(disposer: ()=>void) {
+    const I = i
+    const t = {value: newValue, index: I, disposer}
+    items.push(t)
+    const sI = () => { t.indexSetter = I; return signal(I) }
+    let sV = (...a) => {
+      const k = I
+      sV = (...a) => {
+        if (a.length===0) {
+          const bk = list()[k]
+          return bk
+        } else {
+          const b = untrack(list)
+          return list(b.toSpliced(k, 1, a[0])).at(k)
+        }
+      }
+      t.valueSetter = sV
+      return sV(...a)
+    }
+    return mapFn(sV, () => sI())
+  }
 }
 
-function disposeList(list:any[]) {
+function disposeList(list:{disposer?:()=>unknown}[]) {
   for (let i = 0; i < list.length; i++) {
     list[i]?.disposer()
   }

package/src/hyperscript.ts

@@ -1,146 +1,121 @@
-// @ts-nocheck:
-import {untrack} from './reactive.ts'
-import type {Properties,BooleanAttributes,DelegatedEvents,DOMElements, Mountable} from './constants.ts'
-import type {Runtime,$RUNTIME} from './runtime.ts'
+import type {DOMElements} from './constants.ts'
+import type {Runtime} from './runtime.ts'
 
 const ELEMENT: unique symbol = Symbol(), {isArray} = Array
 
-export type PropsKeys = typeof Properties extends Set<infer K> ? K : never;
-export type BooleanProps = typeof BooleanAttributes extends Set<infer K> ? K : never;
-export type HandlerProps = typeof DelegatedEvents extends Set<infer K> ? K : never;
-export type ChildProps = {children?:any[]}
-
-export type ElementProps = BooleanProps & HandlerProps & ChildProps & {class: string}
-export type ComponentProps = { children?:Child }
-
-/**
- * @group Hyperscript
- */
-export type Props = {}
+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}
 
-type AllProps = ElementProps | ComponentProps
+// export type PropsKeys = typeof Properties extends Set<infer K> ? K : never;
+// export type BooleanProps = typeof BooleanAttributes ext ends Set<infer K> ? K : never;
+// export type HandlerProps = typeof DelegatedEvents extends Set<infer K> ? K : never;
+// export type ChildProps = {children?:any[]}
+// export type ElementProps = BooleanProps & HandlerProps & ChildProps & {class: string}
+// export type ComponentProps = { children?:Child }
+// export type Props = Record<string, any>
+// type AllProps = ElementProps | ComponentProps
+// type EmptyProps = Record<string,never>
+// const Fragment:Component<Props> = <T extends Props>(props:T):Mountable => (props as any).children
 
-type EmptyProps = Record<string,never>
+export type TagParser = <T extends string>(s:T) => {name:string,id?:string,classes:string[],namespace?:string}
 
-/**
-@group Hyperscript
-*/
 export type HyperScript = {
-  // (children:Child[]): View
-
-  (element:Tag, props:ElementProps, children:Child): View
-  (element:Tag, props:ElementProps): View
-  (element:Tag, children:Child): View
-  (element:Tag): View
-
-  <T,K>(element:Component<T & {children:K}>, props:T, children:K): View
-  <T>(element:Component<T>, props:T): View
-  <K>(element:Component<{children:K}>, children:K): View
-  (element:Component<undefined>): View
+  (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
 }
 
 /**
- * @group Hyperscript
- */
-export type Child = { call:any } | Child[] | string | number | symbol | bigint | boolean | Record<string,unknown> | {():Child, [ELEMENT]:boolean}
-/**
- * @group Hyperscript
- */
-export type View = {():void, [ELEMENT]?:boolean}
-/**
- * @group Hyperscript
- */
-export type Component<T> = {(props:T): Mountable, [ELEMENT]?: Runtime}
-/**
- * @group Hyperscript
- */
-export type Tag = typeof DOMElements extends Set<infer K> ? K : never;
-
-const Fragment:Component<Props> = <T extends Props>(props:T):Mountable => (props as any).children
-
-/**
-
 @param r
 @param patch
 @group Hyperscript
 */
-export function hyperscript(r:Runtime, patch?:any):HyperScript {
+export function hyperscript(r: Runtime, parseTag: TagParser = parseHtmlTag): HyperScript {
 
-  function item<T extends Props>(e: Element, c: Child, m?: null) {
+  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 (typeof c === 'object' && r.isChild(c))
+    else if (t === 'object' && r.isChild(c))
       r.insert(e, c, m)
-    else if (typeof c==='string')
-      (e as Element).appendChild(r.text(c))
-    else if ((c as any).call) {
-      while ((c as any)[ELEMENT]?.call) c = (c as any)()
+    else if (t === 'string')
+      e.appendChild(r.text((c as string)))
+    else if (t === 'function') {
+      // while (c[ELEMENT]?.call) c = (c as any)()
       r.insert(e, c, m)
-    } else (e as Element).appendChild(r.text(c.toString()))
+    } else e.appendChild(r.text(c.toString()))
   }
 
-  return function h<T,K=unknown>(
-    element:Component<T&{children:K}>|Tag, // , Child[]
-    second?:T|K|Child,
-    third?:K|Child
+  return function h<P extends Record<string,unknown>, C = never>(
+    first: Tag | Component<P>,
+    second?: P | C,
+    third?: C
   ): View {
-    let props: T
+    let props: P
     let children: Child
 
     if (typeof second === 'object' && !isArray(second)) {
       children = (third as Child) || [];
-      props = ((second ?? {}) as T&{children:K})
+      props = ((second ?? {}) as P & {children:C})
     } else {
       children = (second as Child) || []
-      props = {} as T&{children:K}
+      props = {} as P & {children:C}
     }
 
     let ret:View
 
-    if ((element as Component<T>).call) {
-      let e:any
-      const d = Object.getOwnPropertyDescriptors(props)
-      if (children) (props as any).children = children
-      for (const k in d) {
-        if (isArray(d[k].value)) {
-          const list:any[] = d[k].value;
-          (props as any)[k] = () => {
-            for (let i = 0; i < list.length; i++)
-              while (list[i][ELEMENT]) list[i] = list[i]()
-            return list
-          }
-          dynamicProperty(props as any, k)
-        } else if (d[k].value?.call && !d[k].value.length) { // A function with zero arguments
-          dynamicProperty(props as any, k)
-        }
-      }
-      e = untrack(()=>(element as Component<T&{children:K}>)(props as T&{children:K}))
-      ret = () => e
-    } else {
-      const tag = parseTag(element as Tag)
+    if (typeof first === 'string') {
+      const tag = parseTag(first)
       const multiExpression = detectMultiExpression(children) ? null : undefined
       const e = r.element(tag.name)
-      const props2 = props as T
+      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} as any);
-        (props2 as any).class = (cd.value?.call) ?
+        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)
+      // if (patch) patch(props2)
       let dynamic = false
       const d = Object.getOwnPropertyDescriptors(props2)
       for (const k in d) {
-        if (k !== 'ref' && !k.startsWith('on') && d[k].value?.call) {
-          dynamicProperty(props2 as any, k)
+        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 Child[])?.length)
-      item(e,children as any,multiExpression)
+      (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++)
+              while (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
@@ -148,18 +123,18 @@ export function hyperscript(r:Runtime, patch?:any):HyperScript {
   }
 }
 
-function detectMultiExpression(list:any):boolean {
-  if (list.call) return true
-  else if (!isArray(list)) return false
-  for (const i of list) {
-    if (i.call) return true
+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]*)*
-function parseTag(s:string):{name:string,id?:string,classes:string[]} {
+export function parseHtmlTag(s:Tag) {
   const classes:string[] = [];
   let id:string|undefined = undefined, i:number
 
@@ -185,10 +160,10 @@ function parseTag(s:string):{name:string,id?:string,classes:string[]} {
   return {name:name as string,classes,id:id}
 }
 
-function dynamicProperty(props:Record<string,any>, key:string):Record<string,any> {
-  const src = props[key]
-  Object.defineProperty(props, key, {get() {return src()},enumerable:true})
-  return props
+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) {

package/src/mod.ts

@@ -1,18 +1,15 @@
-// @ts-nocheck:
 export type {Getter,Setter,Fn,EqualsFn,ErrorFn,RootFn,UpdateFn} 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'
 import {runtime, type Runtime} from './runtime.ts'
-export {hyperscript,type HyperScript,type Child,type Props,type Tag,type View,type Component} from './hyperscript.ts'
-import {type HyperScript, hyperscript} from './hyperscript.ts'
+export {hyperscript,type Child,type Tag,type View,type Component} from './hyperscript.ts'
+import {hyperscript, parseHtmlTag, type HyperScript} from './hyperscript.ts'
 export {Router} from './router.js'
 export {resource,makeAbortable,abortable} from './resource.js'
-// export {Input,Table} from './components.js'
-// export * from './canvas.js'
 
-const r:Runtime = /*#__PURE__*/ (typeof window === 'object') ? runtime(window as any) : undefined as any
+const r:Runtime = /*#__PURE__*/ (typeof window === 'object') ? runtime(window) : undefined as unknown as Runtime
 
 /** h
 @example Element with a single child
@@ -29,19 +26,14 @@ h(Input,{onInput:e => {}})
 ```
 @group Hyperscript
 */
-const h:HyperScript = /*#__PURE__*/ r ? hyperscript(r) : undefined
+export const h: HyperScript = /*#__PURE__*/ hyperscript(r, parseHtmlTag)
 
-const render = /*#__PURE__*/ r?.render
+/** render
 
-// import {signal,wrap} from './reactive.ts'
+Render component to DOM element.
 
-// /**
-// @group Utils
-// */
-// export function $(a:any,b:any):any {
-//   const t = typeof a
-//   if (t==='function') return wrap(a,b)
-//   else return signal(a,b)
-// }
-
-export {h,render}
+```js
+render(()=>'hi', document.body)
+```
+*/
+export const render:(code:()=>void, element:Element, init:unknown) => void = /*#__PURE__*/ r?.render