@wrnrlr/prelude 0.1.9 → 0.2.1

package/src/reactive.ts

@@ -65,7 +65,9 @@ const SYMBOL_ERRORS = Symbol()
 // // Value node
 // class VNode {}
 
-export class Signal<T = unknown> {
+export type Signal = Getter<T> & Setter<T>
+
+class Signal<T = unknown> {
   public parent: Computation<T> | undefined
   public value: T
   private readonly equals: EqualsFn<T>
@@ -209,7 +211,7 @@ n(3)
  */
 export function signal<T>(value:T, options?:Options<T>): Getter<T> & Setter<T> {
   const s = new Signal<T>(value,options)
-  const f = Object.assign((...args:T[]) => args.length ? s.set(args[0]) as T : s.get() as T, s)
+  const f = Object.assign((...args:T[]) => args.length ? s.set(args[(0)]) as T : s.get() as T, s)
   return f as unknown as Getter<T> & Setter<T>
 }
 
@@ -294,27 +296,37 @@ export type S<T> = Getter<T> | Setter<T>
 @param s Signal
 @param k
 */
-export function wrap<T>(s:S<Array<T>>, k:number|(()=>number)): S<T>
-export function wrap<T>(s:S<Record<string,T>>, k:string|(()=>string)): S<T>
+export function wrap<T>(s:S<Array<T>>, k:number): S<T>
+export function wrap<T>(s:S<Array<T>>, k:()=>number): S<T>
+export function wrap<T>(s:S<Record<string,T>>, k:string): S<T>
+export function wrap<T>(s:S<Record<string,T>>, k:()=>string): S<T>
 export function wrap<T>(s:S<Array<T>>|S<Record<string,T>>, k:number|string|(()=>number)|(()=>string)): S<T> {
   const t = typeof k
   if (t === 'number') {
-    return ((...a:T[]) => {
-      const b = (s as Getter<Array<T>>)()
-      return (a.length) ? (s as Setter<Array<T>>)((b as any).toSpliced(k as number, 1, a[0])).at(k as number) : b.at(k as number)
-    }) as S<T>
+    return (...a) => {
+      const b = s()
+      return a.length ? s(b.toSpliced(k, 1, a[0])).at(k) : b.at(k)
+    }
   } else if (t === 'string') {
-    return ((...a:T[]) => {
-      const b = (s as Getter<Record<string,T>>)()
-      return (a.length) ? (s as Setter<Record<string,T>>)({...b, [k as string]:a[0]})[k as string] : b[k as string]
-    }) as S<T>
+    return (...a) => {
+      if (a.length) {
+        const b = s()
+        return s({...b, [k]:a[0]})[k]
+      } else {
+        return s()[k]
+      }
+    }
   } else if (t === 'function')
-    return ((...a:T[]) => {
-      const i = (k as ()=>string|number)(), c = typeof i
-      if (c==='number') return a.length ? (s as Setter<Array<T>>)((old:any) => old.toSpliced(i, 1, a[0]))[i as number] : (s as Getter<Array<T>>)()[i as number]
-        else if (c === 'string') return a.length ? (s as Setter<Record<string,T>>)((b) => ({...b, [i]:a[0]}))[i as string] : (s as Getter<Record<string,T>>)()[i]
+    return (...a) => {
+      const i = k(), c = typeof i
+      if (c==='number') return a.length ?
+        s(old => old.toSpliced(i, 1, a[0]))[i] :
+        s()[i]
+      else if (c === 'string') return a.length ?
+        s(b => ({...b, [i]:a[0]}))[i] :
+        s()[i]
       throw new Error('Cannot wrap signal')
-    }) as S<T>
+    }
   throw new Error('Cannot wrap signal')
 }
 

package/src/runtime.ts

@@ -1,10 +1,24 @@
 // @ts-nocheck:
 import {effect,untrack,root} from './reactive.ts'
 import {SVGNamespace,SVGElements,ChildProperties,getPropAlias,Properties,Aliases,DelegatedEvents} from './constants.ts'
-import type {Window,Mountable,Elem,Node} from './constants.ts'
+// import type {Mountable} from './constants.ts'
 
 const {isArray} = Array
-export const $RUNTIME = Symbol()
+
+export type Mountable = HTMLElement | Document | ShadowRoot | DocumentFragment | Node | string | number | bigint | symbol;
+
+// declare global {
+//   interface Document {
+//     '_$DX_DELEGATE'?: Record<string, Set<unknown>>
+//   }
+//   // interface SVGElement {}
+// }
+
+// interface Element {
+//   style?: string
+// }
+
+// declare const globalThis: Document
 
 /**
 
@@ -12,47 +26,61 @@ export const $RUNTIME = Symbol()
 */
 export type Runtime = {
   // window:Window
-  render(code:()=>void, element:Elem, init:any): any;
+  render(code:()=>void, element:Element, init:unknown): void;
   insert(parent:Mountable, accessor:any, marker?:Node|null, init?:any): any;
-  spread(node:Elem, accessor:any, skipChildren?: boolean): void;
-  assign(node:Elem, props:any, skipChildren?:boolean): void;
+  spread(node:Element, accessor:any, skipChildren?: boolean): void;
+  assign(node:Element, props:any, skipChildren?:boolean): void;
   element(name:string): any;
+  component(fn:()=>unknown): any
   text(s:string): any;
   isChild(a:any): boolean;
   clearDelegatedEvents():void
 }
 
+type ClassListProps = Record<string, string|boolean>
+type StyleProps = undefined | string | Record<string, string|undefined>
+
 /**
 Create `Runtime` for `window`
 @param window
 @group Internal
 */
-export function runtime(window:Window):Runtime {
-  const document = window.document,
-    isSVG = (e:any) => e instanceof (window.SVGElement as any),
-    element = (name:string) => SVGElements.has(name) ? document.createElementNS("http://www.w3.org/2000/svg",name) : document.createElement(name),
+export function runtime(w:Window):Runtime {
+  const document = w.document
+  const isSVG = (e: unknown) => e instanceof (w.SVGElement),
+    element = (name:string) => SVGElements.has(name) ?
+      document.createElementNS("http://www.w3.org/2000/svg",name) : document.createElement(name),
     text = (s:string) => document.createTextNode(s)
 
-  function isChild(a:unknown):boolean {
-    return a instanceof document.Element
+  function isChild(a:unknown): a is Element {
+    return a instanceof Element
+  }
+
+  function component(fn:()=>unknown) {
+    return untrack(fn)
   }
 
-  function render(code:()=>void, element:Elem, init?:any) {
+  function render(code: ()=>void, element:Element|Document, init?: unknown): void {
     if (!element) throw new Error("The `element` passed to `render(..., element)` doesn't exist.");
     root(() => {
-      if (element === document) code()
-      else insert(element, code(), element.firstChild ? null : undefined, init)
+      if (element instanceof Document) code()
+      else insert(element as Element, code(), element.firstChild ? null : undefined, init)
     })
   }
 
-  function insert(parent:Mountable, accessor:any, marker?:Node|null, initial?:any) {
+  type Value = string | number | Element | Text
+  type RxValue = (()=>Value) | Value
+
+  function insert(parent: Element, accessor: string, marker?: Node|null, initial?: any): void
+  function insert(parent: Element, accessor: ()=>string, marker?: Node|null, initial?: any): void
+  function insert(parent: Element, accessor: string|(()=>string), marker?: Node|null, initial?: any): void {
     if (marker !== undefined && !initial) initial = []
-    if (!accessor.call) return insertExpression(parent, accessor, initial||[], marker)
+    if (typeof accessor !== 'function') return insertExpression(parent, accessor, initial||[], marker)
     let current = initial||[]
     effect(() => {current = insertExpression(parent, accessor(), current, marker)})
   }
 
-  function spread(node:Elem, props:any = {}, skipChildren:boolean) {
+  function spread(node:Element, props:any = {}, skipChildren:boolean) {
     const prevProps:any = {}
     if (!skipChildren) effect(() => (prevProps.children = insertExpression(node, props.children, prevProps.children)))
     effect(() => (props.ref?.call ? untrack(() => props.ref(node)) : (props.ref = node)))
@@ -60,7 +88,7 @@ export function runtime(window:Window):Runtime {
     return prevProps
   }
 
-  function assign(node:Elem, props:any, skipChildren:boolean, prevProps:any = {}, skipRef:boolean = false) {
+  function assign(node:Element, props:any, skipChildren:boolean, prevProps:any = {}, skipRef:boolean = false) {
     const svg = isSVG(node)
     props || (props = {})
     for (const prop in prevProps) {
@@ -79,22 +107,34 @@ export function runtime(window:Window):Runtime {
     }
   }
 
-  function assignProp(node:Node, prop:any, value:any, prev:any, isSVG:any, skipRef:any) {
+  function assignProp(node: Element, prop: 'style', value: StyleProps, prev: StyleProps, isSVG: boolean, skipRef: boolean): StyleProps
+  function assignProp(node: Element, prop: 'classList', value: ClassListProps, prev: ClassListProps, isSVG: boolean, skipRef: boolean): ClassListProps
+  function assignProp(node: Element, prop: 'ref', value: ()=>string, prev:string, isSVG: boolean, skipRef: false): string
+  function assignProp(node: Element, prop: string, value: string, prev: string|undefined, isSVG: boolean, skipRef: boolean): string
+  function assignProp(node: Element, prop: string, value: undefined, prev: string|undefined, isSVG: boolean, skipRef: boolean): undefined
+  function assignProp(
+    node: Element,
+    prop: 'style' | 'classList' | 'ref' | string,
+    value: StyleProps | ClassListProps | (()=>string) | string | undefined,
+    prev: StyleProps | ClassListProps | (()=>string) | string | undefined,
+    isSVG: false | boolean,
+    skipRef: boolean
+  ) {
     let isCE, isProp, isChildProp, propAlias, forceProp;
-    if (prop === "style") return style(node, value, prev);
-    if (prop === "classList") return classList(node, value, prev);
+    if (prop === 'style') return style(node, value, prev);
+    if (prop === 'classList') return classList(node, value, prev);
     if (value === prev) return prev;
-    if (prop === "ref") {
+    if (prop === 'ref') {
       if (!skipRef) value(node);
-    } else if (prop.slice(0, 3) === "on:") {
+    } else if (prop.slice(0, 3) === 'on:') {
       const e = prop.slice(3);
       prev && node.removeEventListener(e, prev);
       value && node.addEventListener(e, value);
-    } else if (prop.slice(0, 10) === "oncapture:") {
+    } else if (prop.slice(0, 10) === 'oncapture:') {
       const e = prop.slice(10);
       prev && node.removeEventListener(e, prev, true);
       value && node.addEventListener(e, value, true);
-    } else if (prop.slice(0, 2) === "on") {
+    } else if (prop.slice(0, 2) === 'on') {
       const name = prop.slice(2).toLowerCase();
       const delegate = DelegatedEvents.has(name);
       if (!delegate && prev) {
@@ -105,13 +145,13 @@ export function runtime(window:Window):Runtime {
         addEventListener(node, name, value, delegate);
         delegate && delegateEvents([name],document);
       }
-    } else if (prop.slice(0, 5) === "attr:") {
+    } else if (prop.slice(0, 5) === 'attr:') {
       setAttribute(node, prop.slice(5), value);
     } else if (
-      (forceProp = prop.slice(0, 5) === "prop:") ||
+      (forceProp = prop.slice(0, 5) === 'prop:') ||
       (isChildProp = ChildProperties.has(prop)) ||
       (!isSVG && ((propAlias = getPropAlias(prop, node.tagName)) || (isProp = Properties.has(prop)))) ||
-      (isCE = node.nodeName.includes("-"))
+      (isCE = node.nodeName.includes('-'))
     ) {
       if (forceProp) {
         prop = prop.slice(5);
@@ -121,15 +161,21 @@ export function runtime(window:Window):Runtime {
       else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;
       else node[propAlias || prop] = value;
     } else {
-      const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
-      if (ns) setAttributeNS(node, ns, prop, value);
-      else setAttribute(node, Aliases[prop] || prop, value);
+      const ns = isSVG && prop.indexOf(':') > -1 && SVGNamespace[prop.split(':')[0]]
+      if (ns) setAttributeNS(node, ns, prop, value)
+      else setAttribute(node, Aliases[prop] || prop, value)
     }
     return value;
   }
 
-  function insertExpression(parent:Node, value:any, current?:any, marker?:Node, unwrapArray?:any) {
-    while (current?.call) current = current();
+  function insertExpression(
+    parent: Element,
+    value: RxValue,
+    current?: RxValue|Value[],
+    marker?: Node,
+    unwrapArray?: boolean
+  ): Value|{():Value} {
+    while (typeof current === 'function') current = current();
     if (value === current) return current;
     const t = typeof value,
       multi = marker !== undefined;
@@ -147,21 +193,21 @@ export function runtime(window:Window):Runtime {
         } else node = document.createTextNode(value);
         current = cleanChildren(parent, current, marker, node);
       } else {
-        if (current !== "" && typeof current === "string") {
-          current = parent.firstChild.data = value;
+        if (current !== "" && typeof current === 'string') {
+          current = (parent.firstChild as Text).data = value;
         } else current = parent.textContent = value;
       }
-    } else if (value == null || t === "boolean") {
+    } else if (value == null || t === 'boolean') {
       current = cleanChildren(parent, current, marker);
-    } else if (t === "function") {
+    } else if (t === 'function') {
       effect(() => {
         let v = value();
-        while (typeof v === "function") v = v();
+        while (typeof v === 'function') v = v();
         current = insertExpression(parent, v, current, marker);
       });
       return () => current;
     } else if (isArray(value)) {
-      const array:any[] = [];
+      const array:Node[] = [];
       const currentArray = current && isArray(current);
       if (normalizeIncomingArray(array, value, current, unwrapArray)) {
         effect(() => (current = insertExpression(parent, array, current, marker, true)));
@@ -191,20 +237,21 @@ export function runtime(window:Window):Runtime {
     return current;
   }
 
-  function normalizeIncomingArray(normalized:any, array:any, current:any, unwrap?:any):any {
+  function normalizeIncomingArray(normalized:Node[], array:Node[], current:Node[], unwrap?:boolean): boolean {
     let dynamic = false;
     for (let i = 0, len = array.length; i < len; i++) {
       let item = array[i]
       const prev = current && current[normalized.length];
-      if (item == null || item === true || item === false) {
-        // matches null, undefined, true or false skip
-      } else if (typeof item === "object" && item.nodeType) {
+      // if (item == null || item === true || item === false) {
+      //   // matches null, undefined, true or false skip
+      // } else
+      if (typeof item === 'object' && item.nodeType) {
         normalized.push(item);
       } else if (isArray(item)) {
         dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic;
       } else if (item.call) {
         if (unwrap) {
-          while (typeof item === "function") item = item();
+          while (typeof item === 'function') item = item();
           dynamic = normalizeIncomingArray(
               normalized,
               isArray(item) ? item : [item],
@@ -223,8 +270,13 @@ export function runtime(window:Window):Runtime {
     return dynamic;
   }
 
-  function cleanChildren(parent:any, current?:any, marker?:Node, replacement?:any):any {
-    if (marker === undefined) return (parent.textContent = "");
+  function cleanChildren(
+    parent: Element,
+    current?: Node[],
+    marker?: Node|null,
+    replacement?: boolean
+  ): string | Node[] {
+    if (marker === undefined) return (parent.textContent = '');
     const node = replacement || document.createTextNode('');
     if (current.length) {
       let inserted = false;
@@ -242,18 +294,18 @@ export function runtime(window:Window):Runtime {
   }
 
   function clearDelegatedEvents() {
-    if (document[$$EVENTS]) {
-      for (const name of document[$$EVENTS].keys()) document.removeEventListener(name, eventHandler);
-      delete document[$$EVENTS];
+    if (globalThis[$$EVENTS]) {
+      for (const name of globalThis[$$EVENTS].keys()) document.removeEventListener(name, eventHandler);
+      delete globalThis[$$EVENTS];
     }
   }
 
-  return {render,insert,spread,assign,element,text,isChild,clearDelegatedEvents}
+  return {render,component,insert,spread,assign,element,text,isChild,clearDelegatedEvents}
 }
 
 const $$EVENTS = "_$DX_DELEGATE"
 
-function delegateEvents(eventNames:string[], document:any) {
+function delegateEvents(eventNames:string[], document:Document) {
   const e = document[$$EVENTS] || (document[$$EVENTS] = new Set());
   for (let i = 0, l = eventNames.length; i < l; i++) {
     const name = eventNames[i];
@@ -264,13 +316,13 @@ function delegateEvents(eventNames:string[], document:any) {
   }
 }
 
-function eventHandler(e:any) {
+function eventHandler(e: Event) {
   const key = `$$${e.type}`
   let node = (e.composedPath && e.composedPath()[0]) || e.target
   // reverse Shadow DOM retargetting
-  if (e.target !== node) Object.defineProperty(e, "target", {configurable: true, value: node})
+  if (e.target !== node) Object.defineProperty(e, 'target', {configurable: true, value: node})
   // simulate currentTarget
-  Object.defineProperty(e, "currentTarget", {configurable: true, get() {return node || document}})
+  Object.defineProperty(e, 'currentTarget', {configurable: true, get() {return node || document}})
   while (node) {
     const handler = node[key];
     if (handler && !node.disabled) {
@@ -282,7 +334,7 @@ function eventHandler(e:any) {
   }
 }
 
-function setAttribute(node:Node, name:string, value?:string):any {
+function setAttribute(node: Element, name: string, value?: string): undefined {
   value===undefined || value===null ? node.removeAttribute(name) : node.setAttribute(name, value)
 }
 
@@ -290,7 +342,7 @@ function setAttributeNS(node:Node, ns:string, name:string, value?:string):any {
   value ? node.setAttributeNS(ns, name, value) : node.removeAttributeNS(ns, name)
 }
 
-function addEventListener(node:Node, name:any, handler:any, delegate:any):any {
+function addEventListener(node: Element, name: string, handler:((e:Event)=>void), delegate:boolean): void {
   if (delegate) {
     if (isArray(handler)) {
       node[`$$${name}`] = handler[0];
@@ -298,35 +350,43 @@ function addEventListener(node:Node, name:any, handler:any, delegate:any):any {
     } else node[`$$${name}`] = handler;
   } else if (isArray(handler)) {
     const handlerFn = handler[0];
-    node.addEventListener(name, (handler[0] = (e:any) => handlerFn.call(node, handler[1], e)));
+    node.addEventListener(name, (handler[0] = (e:Event) => handlerFn.call(node, handler[1], e)));
   } else node.addEventListener(name, handler);
 }
 
-function classList(node:Node, value:any, prev:any = {}):any {
+function classList(
+  node: Element,
+  value: ClassListProps,
+  prev: ClassListProps = {}
+): ClassListProps {
   const classKeys = Object.keys(value || {}),
     prevKeys = Object.keys(prev);
   let i, len;
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
-    if (!key || key === "undefined" || value[key]) continue;
+    if (!key || key === 'undefined' || value[key]) continue;
     toggleClassKey(node, key, false);
     delete prev[key];
   }
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
-    if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
+    if (!key || key === 'undefined' || prev[key] === classValue || !classValue) continue;
     toggleClassKey(node, key, true);
     prev[key] = classValue;
   }
   return prev;
 }
 
-function style(node:Node, value:any, prev:any) {
-  if (!value) return prev ? setAttribute(node, "style") : value;
+function style(
+  node: Element,
+  value: StyleProps,
+  prev: StyleProps
+): StyleProps {
+  if (!value) return prev ? setAttribute(node, 'style', undefined) : value;
   const nodeStyle = node.style;
-  if (typeof value === "string") return (nodeStyle.cssText = value);
-  if (typeof prev === "string") nodeStyle.cssText = prev = undefined
+  if (typeof value === 'string') return (nodeStyle.cssText = value);
+  if (typeof prev === 'string') nodeStyle.cssText = prev = undefined
   if (!prev) prev = {}
   if (!value) value = {}
   let v, s;
@@ -348,7 +408,7 @@ function toPropertyName(name:string):string {
   return name.toLowerCase().replace(/-([a-z])/g, (_:unknown, w:string) => w.toUpperCase());
 }
 
-function toggleClassKey(node:Node, key:string, value:boolean) {
+function toggleClassKey(node: Element, key:string, value:boolean) {
   const classNames = key.trim().split(/\s+/)
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++)
     node.classList.toggle(classNames[i], value)
@@ -360,7 +420,7 @@ function appendNodes(parent:Node, array:Node[], marker:null|Node = null) {
 }
 
 // Slightly modified version of: https://github.com/WebReflection/udomdiff/blob/master/index.js
-function reconcileArrays(parentNode:Node, a:Node[], b:Node[]) {
+function reconcileArrays(parentNode:Node, a:Element[], b:Element[]) {
   const bLength = b.length
   let aEnd = a.length,
     bEnd = bLength,

package/test/hyperscript.js

@@ -1,11 +1,12 @@
 import {runtime} from '../src/runtime.ts'
 import {hyperscript} from '../src/hyperscript.ts'
 import {signal,root} from '../src/reactive.ts'
-import {JSDOM} from 'jsdom'
+import { Window } from 'happy-dom'
 import {assertEquals} from '@std/assert'
 
-const {window} = new JSDOM('<!DOCTYPE html>', {runScripts:'dangerously'})
-const {document,MouseEvent} = window
+const window = new Window
+const document = window.document
+globalThis = window
 const r = runtime(window), h = hyperscript(r)
 
 function testing(name, props, f=props) {
@@ -13,7 +14,7 @@ function testing(name, props, f=props) {
     let disposer
     return root(dispose => {
       disposer = () => {
-        document.body.textContent = ''
+        window.document.body.textContent = ''
         r.clearDelegatedEvents()
         dispose()
       }
@@ -25,7 +26,7 @@ function testing(name, props, f=props) {
 
 function assertHTML(t, e, msg) { assertEquals(t().outerHTML, e, msg) }
 
-testing('h with basic element', {skip:true}, async test => {
+testing('h with basic element', async test => {
   await test('empty tag', () => assertHTML(h(''), '<div></div>'))
   await test('tag with id', () => assertHTML(h('#a'), '<div id="a"></div>'))
   await test('tag with class', () => assertHTML(h('.a'), '<div class="a"></div>'))
@@ -63,7 +64,7 @@ function assertText(t, e, msg) { assertEquals(t(), e, msg) }
   // await test('signal fragment', () => assertText(h([()=>1]), '1'))
 // })
 
-testing('h with reactive content', {skip:true}, async test => {
+testing('h with reactive content', async test => {
   await test('higher-order component', () => {
     const Hi = p => h('b',['Hi ',p.name]),
       name = signal('An'),

package/test/reactive.js

@@ -82,7 +82,7 @@ describe('memo',{skip:true},() => {
   describe('memo with initial value',() => {})
 })
 
-describe('wrap',()=>{
+describe('wrap', ()=>{
   describe('wrap singal of array', () => {
     const all = signal(['a','b']), first = wrap(all,0)
     assertEquals(first(),'a')
@@ -95,6 +95,7 @@ describe('wrap',()=>{
     assertEquals(name(),'a')
     assertEquals(name('A'),'A')
     assertEquals(name(),'A')
+    assertEquals(all(),{name:'A'})
   })
 
   describe('wrap singal of array of objects', () => {
@@ -104,9 +105,10 @@ describe('wrap',()=>{
     assertEquals(name(),'b')
     assertEquals(name('A'),'A')
     assertEquals(name(),'A')
+    assertEquals(all(),[{name:'A'}])
   })
 
-  describe('wrap singal of object of arrays', () => {
+  describe('wrap singal of object with arrays', () => {
     const all = signal({ids:[0,1,2]}), ids = wrap(all,'id'), last = wrap(ids,-1)
     assertEquals(ids([1,2,3]),[1,2,3])
     assertEquals(ids(),[1,2,3])
@@ -114,4 +116,22 @@ describe('wrap',()=>{
     assertEquals(last(4),4)
     assertEquals(last(),4)
   })
+
+  describe('wrap singal of array of objects with array', () => {
+    const all = signal([{ids:[0,1,2]}]), first = wrap(all,0), ids = wrap(first,'ids'), last = wrap(ids,-1)
+    assertEquals(ids([1,2,3]),[1,2,3])
+    assertEquals(last(4),4)
+    assertEquals(all(),[{ids:[1,2,4]}])
+  })
+
+  describe('wrap singal of object with array of objects', () => {
+    const obj = signal({todos:[{done:false,name:'a'}, {done:false,name:'b'}]}), todos = wrap(obj, 'todos'), todo = wrap(todos, 0),
+      name = wrap(todo, 'name'), done = wrap(todo,'done')
+    assertEquals(done(true),true)
+    console.log('OBJ',obj())
+    effect(()=>{
+      name();done()
+    })
+    assertEquals(obj(),{todos:[{done:true,name:'a'},{done:false,name:'b'}]})
+  })
 })

package/test/types.ts

@@ -0,0 +1,44 @@
+import { runtime } from '../src/runtime.ts'
+import { hyperscript, type Mountable } from '../src/hyperscript.ts'
+import { signal, root } from '../src/reactive.ts'
+import { List } from '../src/controlflow.ts'
+import { Window } from 'happy-dom'
+
+const window = new Window
+const r = runtime(window as any), h = hyperscript(r)
+
+h('hr')
+h('div', ['hello'])
+h('', {class:''})
+
+function CompReturningString() { return 'hi' }
+function CompReturningNumber() { return 0 }
+function CompReturningEmptyFragment() { return [] }
+function CompReturningFragment() { return [h(CompReturningString), h(CompReturningNumber), '', 1] }
+
+h(CompReturningString)
+h(CompReturningNumber)
+h(CompReturningEmptyFragment)
+h(CompReturningFragment)
+
+function CompWithProps(props: {a: string}) { return 'hi' }
+
+h(CompWithProps, {a:''})
+
+function CompWithChildren(props: {children:Mountable}) { return 'hi' }
+
+h(CompWithChildren, [])
+h(CompWithChildren, {}, [])
+h(CompWithChildren, {children:[]})
+
+
+function CompWithOptionalChildren(props: {children?:string[]}) { return 'hi' }
+
+h(CompWithOptionalChildren)
+h(CompWithOptionalChildren, [])
+h(CompWithOptionalChildren, {})
+h(CompWithOptionalChildren, {children:[]})
+
+const booleans = signal([true, true, false])
+
+// h(List, {each:()=>booleans}, (b, _i) => b)

package/src/components.js

@@ -1,20 +0,0 @@
-/**
-TODO
-@group Components
-*/
-export function Input(props) {
-}
-
-/**
-TODO
-@group Components
-*/
-export function Table(props) {
-}
-
-/**
-TODO
-@group Components
-*/
-export function Canvas(props) {
-}

package/src/ui/accordion.ts

@@ -1,8 +0,0 @@
-import {h} from './h.ts'
-
-export type AccordionProps = {
-}
-
-export function Accordion(props:AccordionProps):undefined|any {
-  return h('.accordion', {},'')
-}

package/src/ui/button.ts

@@ -1,9 +0,0 @@
-import {h} from './h.ts'
-
-export type ButtonProps = {
-  children?: any[]
-}
-
-export function Button(props:AccordionProps) {
-  return h('button', {type: 'button'}, props.children)
-}

package/src/ui/canvas.ts

@@ -1,8 +0,0 @@
-import {h} from './h.ts'
-
-export type CanvasProps = {
-}
-
-export function Canvas(props:CanvasProps) {
-  return h('canvas')
-}

package/src/ui/date.ts

@@ -1,8 +0,0 @@
-import {h} from './h.ts'
-
-export type DateInputProps = {
-}
-
-export function DateInput(props:DateInputProps) {
-  return h('input', {type: 'date'})
-}