@wrnrlr/prelude 0.0.1

package/src/hyperscript.ts

@@ -0,0 +1,237 @@
+import {sample} from './reactive.ts'
+import {Properties,BooleanAttributes,DelegatedEvents,DOMElements, type Mountable} from './constants.ts'
+import type {Runtime,$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 = {}
+
+type AllProps = ElementProps | ComponentProps
+
+type EmptyProps = Record<string,never>
+
+/**
+@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
+}
+
+/**
+ * @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 {
+
+  function item<T extends Props>(e: Element, c: Child, m?: null) {
+    if (c===null) return
+    if (isArray(c))
+      for (const child of c)
+        item(e, child, m)
+    else if (typeof c === '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)()
+      r.insert(e, c, m)
+    } else (e as Element).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
+  ): View {
+    let props: T
+    let children: Child
+
+    if (typeof second === 'object' && !isArray(second)) {
+      children = third || [];
+      props = ((second ?? {}) as T&{children:K})
+    } else {
+      children = (second as Child) || []
+      props = {} as T&{children:K}
+    }
+
+    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 = sample(()=>(element as Component<T&{children:K}>)(props as T&{children:K}))
+      ret = () => e
+    } else {
+      const tag = parseTag(element as Tag)
+      const multiExpression = detectMultiExpression(children) ? null : undefined
+      const e = r.element(tag.name)
+      const props2 = props as T
+      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) ?
+          [...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') && d[k].value?.call) {
+          dynamicProperty(props2 as any, 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)
+      ret = () => e
+    }
+    ret[ELEMENT] = true
+    return ret
+  }
+}
+
+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
+    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[]} {
+  const classes:string[] = [];
+  let name:string, id = undefined, i:number
+
+  i = s.indexOf('#')
+  if (i===-1) i = s.indexOf('.')
+  if (i===-1) i = s.length
+  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(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 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

@@ -0,0 +1,45 @@
+export type {Getter,Setter,Fn,EqualsFn,ErrorFn,RootFn,UpdateFn} from './reactive.ts'
+export {signal,effect,sample,batch,memo,root,onMount} from './reactive.ts'
+export {nbsp} from './constants.ts'
+export {wrap,Show,List} from './controlflow.js'
+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 {Input,Table} from './components.js'
+export * from './canvas.js'
+
+const r:Runtime = runtime(window as any)
+
+/** h
+@example Element with a single child
+```js
+h('h1','Hello World!')
+```
+@example Element with multiple children
+```js
+h('p',['Hello ',h('em','World!')])
+```
+@example Component with event handler
+```js
+h(Input,{onInput:e => {}})
+```
+@group Hyperscript
+*/
+const h:HyperScript = hyperscript(r)
+
+const render = r.render
+
+import {signal} from './reactive.ts'
+import {wrap} from './controlflow.js'
+
+/**
+@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}

package/src/reactive.ts

@@ -0,0 +1,359 @@
+
+export interface EffectOptions {
+  name?: string;
+}
+
+export interface MemoOptions<T> extends EffectOptions {
+  equals?: false | ((prev: T, next: T) => boolean);
+}
+
+export type EffectFunction<Prev, Next extends Prev = Prev> = (v: Prev) => Next;
+
+/** @internal */
+export type Fn<T = void> = () => T
+export type EqualsFn<T> = (value: T, valueNext: T) => boolean
+export type ErrorFn = (error: unknown) => void
+export type RootFn<T> = (dispose: () => void) => T
+export type UpdateFn<T> = (value: T) => T
+
+/**
+Get value of type `T`
+@see {@link Setter} {@link signal} {@link memo}
+*/
+export type Getter<T> = {
+  (): T
+}
+
+/**
+Set value of type `T`
+@see {@link Getter} {@link signal}
+*/
+export type Setter<T> = {
+  (update: UpdateFn<T>): 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>
+}
+
+export const $TRACK = Symbol("track")
+
+let BATCH: Map<Signal<any>, any> | undefined
+let OBSERVER: Observer | undefined
+let TRACKING = false
+const SYMBOL_ERRORS = Symbol()
+
+// interface Node<T> {
+//   parent: Node<T> | undefined
+//   get():T
+//   set(value:T):T
+// }
+// Root node
+// class RNode extends Node {}
+//
+// // Computed value node
+// class CNode {}
+//
+// // Value node
+// class VNode {}
+
+export class Signal<T = unknown> {
+  public parent: Computation<T> | undefined
+  public value: T
+  private readonly equals: EqualsFn<T>
+  public readonly observers: Set<Computation> = new Set ()
+
+  constructor(value: T, {equals}: Options<T> = {}) {
+    this.value = value
+    this.equals = (equals === false) ? () => false : equals || Object.is
+  }
+
+  get = (): T => {
+    if (TRACKING && OBSERVER instanceof Computation) {
+      this.observers.add(OBSERVER)
+      OBSERVER.signals.add(this as Signal)
+    }
+    if (this.parent?.waiting)
+      this.parent.update()
+    return this.value
+  }
+
+  set = (value: UpdateFn<T> | T): T => {
+    const valueNext = (value instanceof Function) ? value(this.value) : value
+    if (!this.equals(this.value, valueNext )) {
+      if (BATCH) {
+        BATCH.set(this, valueNext)
+      } else {
+        this.value = valueNext
+        this.stale(1, true)
+        this.stale(-1, true)
+      }
+    }
+    return this.value;
+  }
+
+  stale = (change: 1 | -1, fresh: boolean): void => {
+    for (const observer of this.observers)
+      observer.stale(change, fresh)
+  }
+}
+
+abstract class Observer {
+  public parent: Observer | undefined = OBSERVER
+  public cleanups: Fn[] = []
+  public contexts: Record<symbol, any> = {}
+  public observers: Set<Observer> = new Set()
+  public signals: Set<Signal> = new Set()
+
+  protected dispose = ():void => {
+    for (const observer of this.observers)
+      observer.dispose()
+
+    for (const signal of this.signals)
+      signal.observers.delete(this as unknown as Computation)
+
+    for (const cleanup of this.cleanups)
+      cleanup()
+
+    this.cleanups = []
+    this.contexts = {}
+    this.observers = new Set()
+    this.signals = new Set()
+    this.parent?.observers.delete(this)
+  }
+
+  get = <T> (id: symbol): T | undefined => {
+    if (id in this.contexts) {
+      return this.contexts[id]
+    } else {
+      return this.parent?.get<T>(id)
+    }
+  }
+
+  set = <T>(id: symbol, value: T): void => {
+    this.contexts[id] = value
+  }
+}
+
+class Root extends Observer {
+  wrap<T>(fn: RootFn<T>): T {
+    return wrap(() => fn(this.dispose), this, false)!
+  }
+}
+
+class Computation<T = unknown> extends Observer {
+  private readonly fn: Fn<T>
+  private fresh: boolean = false
+  public signal: Signal<T>
+  public waiting: number = 0
+
+  constructor(fn: Fn<T>, options?: Options<T>) {
+    super()
+    this.fn = fn
+    this.signal = new Signal<T>(this.run(), options)
+    this.signal.parent = this
+  }
+
+  private run = (): T => {
+    this.dispose()
+    this.parent?.observers.add(this)
+    return wrap(this.fn, this, true)!
+  }
+
+  update = (): void => {
+    this.waiting = 0
+    this.fresh = false
+    this.signal.set(this.run)
+  }
+
+  stale = (change: 1 | -1, fresh: boolean): void => {
+    if (!this.waiting && change < 0) return
+    if (!this.waiting && change > 0) this.signal.stale(1, false)
+
+    this.waiting += change
+    this.fresh ||= fresh
+
+    if (!this.waiting) {
+      this.waiting = 0
+      if (this.fresh) this.update()
+      this.signal.stale(-1, false)
+    }
+  }
+}
+
+/**
+Create a {@link Signal} of type `T` with initial `value`
+@param value Initial value
+@param options Signal options
+@example Create new Signal
+```js
+const n = signal(1)
+```
+@example Get current value
+```js
+n()
+```
+@example Set value
+```js
+n(3)
+```
+@group Reactive Primitive
+ */
+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)
+  return f as unknown as Getter<T> & Setter<T>
+}
+
+/**
+@group Reactive Primitive
+*/
+export function effect(fn: Fn): void {
+  new Computation(fn)
+}
+
+/**
+Memo creates a readonly reactive value equal to the return value of the given function
+and makes sure that function only gets executed when its dependencies change
+
+```js
+const a = signal(1), b = signal(2)
+const sum = memo((prev) => a()*b() + prev, 0)
+sum()
+```
+
+The memo function should not update other signals.
+
+@param fn
+@param options
+@group Reactive Primitive
+*/
+// export function memo<T extends K, K = T>(
+//   fn: EffectFunction<undefined | NoInfer<K>, T>
+// ): Getter<T>;
+// export function memo<T extends K, Init = T, K = T>(
+//   fn: EffectFunction<Init | K, T>,
+//   value: Init,
+//   options?: MemoOptions<T>
+// ): Getter<T>;
+export function memo<T extends K, Init = T, K = T>(
+  fn: Fn<T>,
+  value?: Init,
+  options?: Options<T>
+): Getter<T> {
+  return new Computation(fn, options).signal.get
+}
+
+/**
+
+@param fn
+@group Reactive Primitive
+*/
+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 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 s = {id, defaultValue, get, set}
+  const f = Object.assign((props:any) => {
+    set(props.value)
+    return () => props.children.call ? props.children() : props.children
+  }, s)
+  return f as unknown as Context<T>
+}
+
+export function useContext<T>(context: Context<T>): T {
+  return context.get()
+}
+
+export function getOwner(): Observer | undefined {
+  return OBSERVER
+}
+
+export function runWithOwner<T>(observer: Observer|undefined, fn: ()=>T):T {
+  const tracking = observer instanceof Computation
+  return wrap(fn, observer, tracking)!
+}
+
+/**
+ Execute the function `fn` only once. Implemented as an {@link effect} wrapping a {@link sample}.
+ @group Reactive Primitive
+ */
+export function onMount(fn: () => void) {
+  effect(() => sample(fn));
+}
+
+export function onCleanup(fn: Fn):void {
+  OBSERVER?.cleanups.push(fn)
+}
+
+export function onError(fn: ErrorFn):void {
+  if ( !OBSERVER ) return
+  OBSERVER.contexts[SYMBOL_ERRORS] ||= []
+  OBSERVER.contexts[SYMBOL_ERRORS].push (fn)
+}
+
+/**
+ *
+ * @group Reactive Primitive
+ */
+export function batch<T>(fn: Fn<T>):T {
+  if (BATCH) return fn ()
+  const batch = BATCH = new Map<Signal, any> ();
+  try {
+    return fn()
+  } finally {
+    BATCH = undefined;
+    // Mark all signals as stale
+    for (const signal of batch.keys()) signal.stale(1,false)
+    // Updating values
+    for (const [signal,value] of batch.entries()) signal.set(()=>value)
+    // Mark all those signals as not stale, allowing observers to finally update themselves
+    for (const signal of batch.keys()) signal.stale(-1,false)
+  }
+}
+
+/**
+
+@param fn
+@group Reactive Primitive
+*/
+export function sample<T>(fn: Fn<T>):T {
+  return wrap(fn, OBSERVER, false)!
+}
+
+/**
+
+ @param fn
+ @group Reactive Primitive
+ */
+function wrap<T>(fn: Fn<T>, observer: Observer | undefined, tracking: boolean ): T|undefined {
+  const OBSERVER_PREV = OBSERVER;
+  const TRACKING_PREV = TRACKING;
+  OBSERVER = observer;
+  TRACKING = tracking;
+  try {
+    return fn();
+  } catch (error: unknown) {
+    const fns = observer?.get<ErrorFn[]>(SYMBOL_ERRORS)
+    if (fns)
+      for (const fn of fns) fn(error)
+    else throw error
+  } finally {
+    OBSERVER = OBSERVER_PREV;
+    TRACKING = TRACKING_PREV;
+  }
+}