@wrnrlr/prelude 0.2.17 → 0.2.18

package/deno.jsonc

@@ -1,6 +1,6 @@
 {
   "name": "@wrnrlr/prelude",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "exports": {
       ".": "./src/mod.ts",
       "./style.css": "./src/style.css"
@@ -18,7 +18,7 @@
   },
   "tasks": {
     "dev": "deno run -A npm:vite --config www/vite.config.js",
-    "test": "deno test -A ./test/*.[jt]s",
+    "test": "deno test -A ./test/*.[jt]s --no-check",
     "release": "git push origin main:release"
   },
   "lint": {

package/example/context.html

@@ -0,0 +1,29 @@
+<script type="module">
+
+import {h,signal,effect,batch,wrap,render,context,useContext,List} from '../src/mod.ts'
+
+const CounterCtx = context()
+
+const useCounter = () => {
+  const c = useContext(CounterCtx)
+  return c
+}
+
+function CounterProvider(props) {
+  const counter = signal(0)
+  const increment = ()=>(console.log('increment', counter()),counter(v=>++v))
+  return h(CounterCtx, {value:()=>[counter, increment]}, props.children)
+}
+
+function Counter() {
+  const [val, increment] = useCounter()
+  return [val, h('button', {onClick:e=>increment()}, '+')]
+}
+
+function App() {
+  return h(CounterProvider, ()=>h(Counter))
+}
+
+render(App, document.body)
+
+</script>

package/example/h.html

@@ -0,0 +1,24 @@
+<script type="module">
+
+// import { createSignal, createEffect } from 'solid'
+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)]
+}
+
+function B() {
+  console.log('B')
+  return 'B'
+}
+
+function App() {
+  console.log('App')
+  return h(A, h(B))
+}
+
+render(App, document.body)
+
+</script>

package/example/index.html

@@ -11,6 +11,8 @@
   <li><a href="todo.html">Todo</a></li>
   <li><a href="widget.html">Widget</a></li>
   <li><a href="table.html">Table</a></li>
+  <li><a href="context.html">Context (Dependency Injection)</a></li>
+  <li><a href="h.html">h</a></li>
 </ul>
 <!-- <a href="router.html">Router</a> -->
 <!-- <a href="context.html">Context</a> -->

package/example/style.css

@@ -12,6 +12,7 @@
 :root {
   font-family: sans-serif;
 }
+
 .example {
   display: flex;
   padding: 2rem;
@@ -22,8 +23,5 @@ details {
     display: block;
   }
 }
-script {
-  display: block;
-}
 
 .select {}

package/package.json

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

package/readme.md

@@ -227,3 +227,7 @@ deno task test
 * [Homepage](https://wrnrlr.github.io/prelude)
 * [NPM](https://www.npmjs.com/package/@wrnrlr/prelude)
 * [JSR](https://jsr.io/@wrnrlr/prelude)
+
+## More Links
+
+* [Fine-grained reactivity - A deep dive into SolidJS](https://github.com/everweij/solidjs-fine-grained-reactivity)

package/src/hyperscript.ts

@@ -1,167 +1,211 @@
 import type {DOMElements} from './constants.ts'
-import type {Runtime,Mountable} from './runtime.ts'
+import type {Mountable} from './runtime.ts'
 import {r} 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}
+// const document = globalThis.document
 
 export const h = hyperscript(r)
 
-// 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 MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node
+
+interface Runtime {
+  insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
+  spread(node: Element, accessor: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+  assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+  component(Comp: (props: any) => any, props: any): any;
+  SVGElements: Set<string>;
+}
+
+const $ELEMENT = Symbol("hyper-element");
 
-export type TagParser = <T extends string>(s:T) => {name:string,id?:string,classes:string[],namespace?:string}
+type ExpandableNode = Node & { [key: string]: any };
+type Props = { [key: string]: any };
 
 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
-}
+  (...args: any[]): () => ExpandableNode | ExpandableNode[];
+  Fragment: (props: {
+    children: (() => ExpandableNode) | (() => ExpandableNode)[];
+  }) => ExpandableNode[];
+};
 
-/**
-@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') {
-      // while (c[ELEMENT]?.call) c = (c as any)()
-      r.insert(e, c, m)
-    } else e.appendChild(r.text(c.toString()))
-  }
+// Inspired by https://github.com/hyperhype/hyperscript
+export function hyperscript(r: Runtime): HyperScript {
+  function h() {
+    let args: any = [].slice.call(arguments),
+      e: ExpandableNode | undefined,
+      classes:string[] = [],
+      multiExpression = false;
 
-  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}
+    while (Array.isArray(args[0])) args = args[0];
+    if (args[0][$ELEMENT]) args.unshift(h.Fragment);
+    typeof args[0] === "string" && detectMultiExpression(args);
+    const ret: (() => ExpandableNode) & { [$ELEMENT]?: boolean } = () => {
+      while (args.length) item(args.shift());
+      if (e instanceof globalThis.Element && classes.length) e.classList.add(...classes)
+      return e as ExpandableNode;
+    };
+    ret[$ELEMENT] = true;
+    return ret;
+
+    function item(l: any) {
+      const type = typeof l;
+      if (l == null) void 0;
+      else if ("string" === type) {
+        if (!e) parseHtmlTag(l);
+        else e.appendChild(globalThis.document.createTextNode(l));
+      } else if (
+        "number" === type ||
+        "boolean" === type ||
+        "bigint" === type ||
+        "symbol" === type ||
+        l instanceof Date ||
+        l instanceof RegExp
+      ) {
+        (e as Node).appendChild(globalThis.document.createTextNode(l.toString()));
+      } else if (Array.isArray(l)) {
+        for (let i = 0; i < l.length; i++) item(l[i]);
+      } else if (l instanceof globalThis.Element) {
+        r.insert(e as globalThis.Element, l, multiExpression ? null : undefined);
+      } else if ("object" === type) {
+        let dynamic = false;
+        const d = Object.getOwnPropertyDescriptors(l);
+        for (const k in d) {
+          if (k === "class" && classes.length !== 0) {
+            console.log('classes',classes)
+            const fixedClasses = classes.join(" "),
+              value = typeof d["class"].value === "function" ?
+                ()=>[...classes,...(d["class"].value()??'').split(' ')].filter(c=>c).join(' ') :
+                [...classes,...(d["class"].value??'').split(' ')].filter(c=>c).join(' ')
+            Object.defineProperty(l,"class",{...d[k],value})
+            // classes = []
+          }
+          if (k !== "ref" && k.slice(0, 2) !== "on" && typeof d[k].value === "function") {
+            dynamicProperty(l, k);
+            dynamic = true;
+          } else if (d[k].get) dynamic = true;
+        }
+        dynamic
+          ? r.spread(e as globalThis.Element, l, !!args.length)
+          : r.assign(e as globalThis.Element, l, !!args.length);
+      } else if ("function" === type) {
+        if (!e) {
+          let props: Props | undefined,
+            next = args[0];
+          if (
+            next == null ||
+            (typeof next === "object" && !Array.isArray(next) && !(next instanceof globalThis.Element))
+          )
+            props = args.shift();
+          props || (props = {});
+          if (args.length) {
+            props.children = args.length > 1 ? args : args[0];
+          }
+          const d = Object.getOwnPropertyDescriptors(props);
+          for (const k in d) {
+            if (Array.isArray(d[k].value)) {
+              const list = d[k].value;
+              props[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)
+              dynamicProperty(props, k);
+          }
+          e = r.component(l, props);
+          args = [];
+        } else {
+          while ((l as any)[$ELEMENT]) l = ((l as unknown) as () => ExpandableNode)();
+          r.insert(e as globalThis.Element, l, multiExpression ? null : undefined);
+        }
+      }
     }
+    function parseHtmlTag(s: string) {
+      let i:number
+
+      i = s.indexOf('#')
+      if (i===-1) i = s.indexOf('.')
+      if (i===-1) i = s.length
+      const name = s.slice(0, i) || 'div'
+      e = r.SVGElements.has(name)
+        ? globalThis.document.createElementNS("http://www.w3.org/2000/svg", name)
+        : globalThis.document.createElement(name);
+      s = s.slice(i)
+
+      if (s[0]==='#') {
+        i = s.indexOf('.')
+        if (i===-1) i = s.length
+        e!.setAttribute("id", s.slice(1, i))
+        s = s.slice(i)
+      }
 
-    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(' ')
+      while(s[0]==='.') {
+        i = s.indexOf('.',1)
+        if (i===-1) i = s.length
+        classes.push(s.slice(1, i))
+        s = s.slice(i)
       }
-      // 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
+    }
+    function parseClass(string: string) {
+      const m = string.split(/([\.#]?[^\s#.]+)/);
+      if (/^\.|#/.test(m[1])) e = globalThis.document.createElement("div");
+      for (let i = 0; i < m.length; i++) {
+        let v = m[i]
+        const s = v.substring(1, v.length);
+        if (!v) v = 'div';
+        if (!e)
+          e = r.SVGElements.has(v)
+            ? globalThis.document.createElementNS("http://www.w3.org/2000/svg", v)
+            : globalThis.document.createElement(v);
+        if (v[0] === ".") classes.push(s);
+        else if (v[0] === "#") e.setAttribute("id", s);
       }
-      (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)
+    }
+    function detectMultiExpression(list: any[]) {
+      for (let i = 1; i < list.length; i++) {
+        if (typeof list[i] === "function") {
+          multiExpression = true;
+          return;
+        } else if (Array.isArray(list[i])) {
+          detectMultiExpression(list[i]);
         }
       }
-      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
+  h.Fragment = (props: any) => props.children;
+  return h;
 }
 
+
 // ^([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)
-  }
+// export function parseHtmlTag(s:Tag) {
+//   const classes:string[] = [];
+//   let id:string|undefined = undefined, i:number
 
-  while(s[0]==='.') {
-    i = s.indexOf('.',1)
-    if (i===-1) i = s.length
-    classes.push(s.slice(1, i))
-    s = s.slice(i)
-  }
-  return {name:name as string,classes,id:id}
-}
+//   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 {name:name as string,classes,id:id}
+// }
 
 function dynamicProperty<T>(props: Record<string, unknown>, key: string) {
   const src = props[key] as ()=>unknown

package/src/reactive.ts

@@ -59,13 +59,6 @@ export type Setter<T> = {
   (value: T): T
 }
 
-export type Context<T> = {
-  id: symbol,
-  defaultValue: T,
-  get(): T,
-  set(value: T): void
-}
-
 export type Options<T> = {
   equals?: false | EqualsFn<T>
 }
@@ -297,42 +290,32 @@ export function root<T>(fn: RootFn<T>): T {
   return new Root().wrap(fn)
 }
 
-export function context<T>(): Context<T | undefined>;
-export function context<T>(defaultValue: T): Context<T>;
+export type Context<T> = {
+  id: symbol,
+  defaultValue: T,
+  get(): T,
+  set(value: T): void
+}
+
+export function context<T>(): Context<T | undefined>
+export function context<T>(defaultValue: T): Context<T>
 export function context<T>(defaultValue?: T) {
   const id = Symbol()
-  const get = (): T | undefined => OBSERVER?.get(id) ?? defaultValue
-  const set = ( value: T ): void => OBSERVER?.set(id, value)
-  // const Provider = createProvider(id)
-  const s = {id, defaultValue, get, set}
-  const f = Object.assign((props:any) => {
-    set(props.value)
+  const s = {id, defaultValue}
+  return Object.assign((props:any) => {
+    OBSERVER?.set(id, props.value)
     return () => props.children.call ? props.children() : props.children
-  }, s)
-  return f as unknown as Context<T>
-  // return {id, Provider, defaultValue} as unknown as Context<T>
+  }, s) as unknown as Context<T>
 }
 
-function createProvider(id: symbol): any {
-  return function provider(props) {
-    let res;
-    renderEffect(() => (res = untrack(() => {
-      console.log('observer', OBSERVER, props)
-      OBSERVER!.context = { ...OBSERVER!.context, [id]: props.value };
-      return children(() => props.children);
-    })))
-    return res;
-  };
+export function useContext<T>(ctx: Context<T>): T {
+  return OBSERVER?.get(ctx.id) ?? ctx.defaultValue
 }
 
 export function renderEffect(fn:()=>void) {
   return globalThis.requestAnimationFrame(()=>effect(fn))
 }
 
-export function useContext<T>(context: Context<T>): T {
-  return context.get()
-}
-
 export type S<T> = Getter<T> | Setter<T>
 
 /**

package/src/runtime.ts

@@ -2,26 +2,12 @@
 import {effect,untrack,root} from './reactive.ts'
 import {SVGNamespace,SVGElements,ChildProperties,getPropAlias,Properties,Aliases,DelegatedEvents} from './constants.ts'
 import {reconcileArrays} from './domdiff.ts'
-// import type {Mountable} from './constants.ts'
 
 const {isArray} = Array
 
 export type Mountable = HTMLElement | Document | ShadowRoot | DocumentFragment | Node | string | number | bigint | symbol;
 
-export const r = { render, insert, spread, assign, element, component, text, isChild, clearDelegatedEvents}
-
-// declare global {
-//   interface Document {
-//     '_$DX_DELEGATE'?: Record<string, Set<unknown>>
-//   }
-//   // interface SVGElement {}
-// }
-
-// interface Element {
-//   style?: string
-// }
-
-// declare const globalThis: Document
+export const r = { render, insert, spread, assign, element, component, text, isChild, clearDelegatedEvents, SVGElements }
 
 /**
 
@@ -67,8 +53,8 @@ function isChild(a:unknown): a is Element {
   return a instanceof Element
 }
 
-function component(fn:()=>unknown) {
-  return untrack(fn)
+function component(fn:()=>unknown, props: unknown) {
+  return untrack(()=>fn(props))
 }
 
 function render(code: ()=>void, element:Element|Document, init?: unknown): void {

package/test/hyperscript.js

@@ -1,16 +1,13 @@
-// import {runtime} from '../src/runtime.ts'
 import { Window } from 'happy-dom'
 import {assertEquals} from '@std/assert'
 
 const window = new Window
 
-globalThis.window = window
-globalThis.document = window.document
-globalThis.navigator = window.navigator
+globalThis = window
 
-import {signal,root} from '../src/reactive.ts'
+import { signal, root } from '../src/reactive.ts'
 import { r } from '../src/runtime.ts'
-import {h} from '../src/hyperscript.ts'
+import { h } from '../src/hyperscript.ts'
 
 function testing(name, props, f=props) {
   const htest = t => (name, f) => {
@@ -44,7 +41,7 @@ testing('h with basic element', async test => {
   await test("number content", () => assertHTML(h('i',1), '<i>1</i>'))
   await test("bigint content", () => assertHTML(h('i',2n), '<i>2</i>'))
   await test("symbol content", () => assertHTML(h('i',Symbol('A')), '<i>Symbol(A)</i>'))
-  // await test('regex content', () => assertHTML(h('b',/\w/), '<b>/\\w/</b>'))
+  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('ref property', () => assertHTML(h('hr',{ref:el=>el.setAttribute('a','1')}), '<hr a="1">'))