@wrnrlr/prelude 0.0.1 → 0.1.3

package/src/reactive.ts

@@ -1,4 +1,4 @@
-
+// @ts-nocheck:
 export interface EffectOptions {
   name?: string;
 }
@@ -145,7 +145,7 @@ abstract class Observer {
 
 class Root extends Observer {
   wrap<T>(fn: RootFn<T>): T {
-    return wrap(() => fn(this.dispose), this, false)!
+    return observe(() => fn(this.dispose), this, false)!
   }
 }
 
@@ -165,7 +165,7 @@ class Computation<T = unknown> extends Observer {
   private run = (): T => {
     this.dispose()
     this.parent?.observers.add(this)
-    return wrap(this.fn, this, true)!
+    return observe(this.fn, this, true)!
   }
 
   update = (): void => {
@@ -279,21 +279,52 @@ export function useContext<T>(context: Context<T>): T {
   return context.get()
 }
 
+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>>|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>
+  } 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>
+  } 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]
+      throw new Error('Cannot wrap signal')
+    }) as S<T>
+  throw new Error('Cannot wrap signal')
+}
+
 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)!
+  return observe(fn, observer, tracking)!
 }
 
 /**
- Execute the function `fn` only once. Implemented as an {@link effect} wrapping a {@link sample}.
+ Execute the function `fn` only once. Implemented as an {@link effect} wrapping a {@link untrack}.
  @group Reactive Primitive
  */
 export function onMount(fn: () => void) {
-  effect(() => sample(fn));
+  effect(() => untrack(fn));
 }
 
 export function onCleanup(fn: Fn):void {
@@ -327,20 +358,17 @@ export function batch<T>(fn: Fn<T>):T {
 }
 
 /**
+Get the value of a signal without subscribing to future updates.
 
 @param fn
+@returns value returned from `fn`
 @group Reactive Primitive
 */
-export function sample<T>(fn: Fn<T>):T {
-  return wrap(fn, OBSERVER, false)!
+export function untrack<T>(fn: ()=>T):T {
+  return observe(fn, OBSERVER, false)!
 }
 
-/**
-
- @param fn
- @group Reactive Primitive
- */
-function wrap<T>(fn: Fn<T>, observer: Observer | undefined, tracking: boolean ): T|undefined {
+function observe<T>(fn: Fn<T>, observer: Observer | undefined, tracking: boolean ): T|undefined {
   const OBSERVER_PREV = OBSERVER;
   const TRACKING_PREV = TRACKING;
   OBSERVER = observer;

package/src/resource.js

@@ -0,0 +1,184 @@
+// @ts-nocheck:
+import {signal,effect,untrack,memo,batch,useContext,onCleanup} from './reactive.ts'
+
+const NO_INIT = {}
+
+/**
+resource
+*/
+export function resource(pSource,pFetcher,pOptions) {
+  let source
+  let fetcher
+  let options
+
+  if ((arguments.length === 2 && typeof pFetcher === 'object') || arguments.length === 1) {
+    source = true
+    fetcher = pSource
+    options = (pFetcher || {})
+  } else {
+    source = pSource
+    fetcher = pFetcher
+    options = pOptions || {}
+  }
+
+  let pr = null,
+    initP = NO_INIT,
+    scheduled = false,
+    resolved = 'initialValue' in options
+  const dynamic = source.call && memo(source)
+
+  const contexts = new Set(),
+    value = signal(options.initialValue),
+    error = signal(undefined),
+    track = signal(undefined, {equals: false}),
+    state = signal(resolved ? 'ready' : 'unresolved')
+
+  function loadEnd(p, v, error, key) {
+    if (pr === p) {
+      pr = null
+      key !== undefined && (resolved = true)
+      initP = NO_INIT
+      completeLoad(v, error)
+    }
+    return v
+  }
+
+  function completeLoad(v, err) {
+    batch(() => {
+      if (err === undefined) value(() => v)
+      state(err !== undefined ? 'errored' : resolved ? 'ready' : 'unresolved')
+      error(err)
+      for (const c of contexts.keys()) c.decrement()
+      contexts.clear()
+    }, false)
+  }
+
+  function read() {
+    const v = value(),
+      err = error();
+    if (err !== undefined && !pr) throw err;
+    return v;
+  }
+
+  function load(refetching = true) {
+    if (refetching !== false && scheduled) return;
+    scheduled = false;
+    const lookup = dynamic ? dynamic() : (source);
+
+    if (lookup == null || lookup === false) {
+      loadEnd(pr, untrack(value));
+      return;
+    }
+    const p = initP !== NO_INIT ? (initP)
+      : untrack(() => fetcher(lookup, {value: value(), refetching}))
+
+    if (!isPromise(p)) {
+      loadEnd(pr, p, undefined, lookup);
+      return p
+    }
+    pr = p;
+
+    if ('value' in p) {
+      if ((p).status === "success") loadEnd(pr, p.value, undefined, lookup);
+      else loadEnd(pr, undefined, undefined, lookup);
+      return p;
+    }
+
+    scheduled = true
+    queueMicrotask(() => (scheduled = false));
+    batch(() => {
+      state(resolved ? 'refreshing' : 'pending')
+      track()
+    }, false);
+    return p.then(
+      v => loadEnd(p, v, undefined, lookup),
+      e => loadEnd(p, undefined, castError(e), lookup)
+    );
+  }
+
+  Object.defineProperties(read, {
+    state: { get: () => state() },
+    error: { get: () => error() },
+    loading: {
+      get() {
+        const s = state();
+        return s === 'pending' || s === 'refreshing';
+      }
+    },
+    latest: {
+      get() {
+        if (!resolved) return read();
+        const err = error();
+        if (err && !pr) throw err;
+        return value();
+      }
+    }
+  })
+
+  if (dynamic) effect(() => load(false));
+  else load(false);
+
+  return read
+}
+
+
+ function isPromise(v) {
+   return v && typeof v === 'object' && 'then' in v
+ }
+
+ /**
+Creates and handles an AbortSignal**
+```ts
+const [signal, abort, filterAbortError] =  makeAbortable({ timeout: 10000 });
+const fetcher = (url) => fetch(url, {signal:signal()}).catch(filterAbortError); // filters abort errors
+```
+Returns an accessor for the signal and the abort callback.
+
+Options are optional and include:
+- `timeout`: time in Milliseconds after which the fetcher aborts automatically
+- `noAutoAbort`: can be set to true to make a new source not automatically abort a previous request
+*/
+ export function makeAbortable(options) {
+   let controller, timeout
+   const abort = (reason) => {
+     timeout && clearTimeout(timeout);
+     controller?.abort(reason);
+   }
+   const signal = () => {
+     if (!options.noAutoAbort && controller?.signal.aborted === false) abort("retry");
+     controller = new AbortController();
+     if (options.timeout) timeout = setTimeout(() => abort("timeout"), options.timeout)
+     return controller.signal;
+   }
+   const error = err => {
+     if (err.name === "AbortError") return undefined
+     throw err;
+   }
+   return [signal, abort, error]
+ }
+
+ /**
+Creates and handles an AbortSignal with automated cleanup
+```ts
+const [signal, abort, filterAbortError] =
+  createAbortable();
+const fetcher = (url) => fetch(url, { signal: signal() })
+  .catch(filterAbortError); // filters abort errors
+```
+Returns an accessor for the signal and the abort callback.
+
+Options are optional and include:
+- `timeout`: time in Milliseconds after which the fetcher aborts automatically
+- `noAutoAbort`: can be set to true to make a new source not automatically abort a previous request
+*/
+
+ export function abortable(options) {
+   const [signal, abort, filterAbortError] = makeAbortable(options);
+   onCleanup(abort);
+   return [signal, abort, filterAbortError];
+ }
+
+ function castError(err) {
+   if (err instanceof Error) return err;
+   return new Error(typeof err === "string" ? err : "Unknown error", { cause: err });
+ }

package/src/router.js

@@ -0,0 +1,65 @@
+// @ts-nocheck
+import {signal,effect,batch,untrack,memo,wrap,context,useContext,onMount} from './reactive.ts'
+// import {h} from './hyperscript.ts'
+
+const Ctx = context()
+const useRouter = () => useContext(Ctx)
+export const useNavigate = () => wrap(useRouter(),'navigate')
+export const useParams = () => wrap(useRouter(),'params')
+export const useSearch = () => wrap(useRouter(),'search')
+
+export function Router(props) {
+  const routes = props.children
+  const NotFound = ()=>'Not found'
+  const render = () => {console.log('render')}
+  // const loaded = signal(false)
+  const navigate = signal(null)
+  const params = signal(null)
+  const search = signal(null)
+  onMount(()=>{
+    window.addEventListener("popstate", (event) => {
+      batch(()=>{
+        const hash = parseHash(document.location.hash)
+        navigate(hash)
+      })
+    })
+    const hash = parseHash(document.location.hash)
+    navigate(hash)
+  })
+  const children = memo(() => {
+    let location = navigate()
+    const route = routes.find(r=>r.path===location.pathname)
+    return route?.component() || NotFound
+  })
+  return Ctx({navigate,params,search,children:()=>children})
+}
+
+function parseHash(s) {
+  const res = {pathname:'/'}
+  if (s[0]!=='#') return res
+  s = s.substr(1)
+
+  let i = s.indexOf('?')
+  if (i===-1) i = s.length
+  res.pathname += s.substr(0,i)
+  if (res.pathname==='') res.pathname = '/'
+  return res
+}
+
+function parsePathname(s) {
+  let i = s.indexOf('?', 0)
+  if (i===-1) i = s.length
+  return s.substr(0,i)
+}
+
+function parseSearch(s) {
+
+}
+
+export function Route(props) {
+
+}
+
+export function A(props) {
+
+}

package/src/runtime.ts

@@ -1,4 +1,5 @@
-import {effect,sample,root} from './reactive.ts'
+// @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'
 
@@ -22,7 +23,7 @@ export type Runtime = {
 }
 
 /**
-
+Create `Runtime` for `window`
 @param window
 @group Internal
 */
@@ -54,7 +55,7 @@ export function runtime(window:Window):Runtime {
   function spread(node:Elem, props:any = {}, skipChildren:boolean) {
     const prevProps:any = {}
     if (!skipChildren) effect(() => (prevProps.children = insertExpression(node, props.children, prevProps.children)))
-    effect(() => (props.ref?.call ? sample(() => props.ref(node)) : (props.ref = node)))
+    effect(() => (props.ref?.call ? untrack(() => props.ref(node)) : (props.ref = node)))
     effect(() => assign(node, props, true, prevProps, true))
     return prevProps
   }
@@ -344,10 +345,10 @@ function style(node:Node, value:any, prev:any) {
 }
 
 function toPropertyName(name:string):string {
-  return name.toLowerCase().replace(/-([a-z])/g, (_:any, w:string) => w.toUpperCase());
+  return name.toLowerCase().replace(/-([a-z])/g, (_:unknown, w:string) => w.toUpperCase());
 }
 
-function toggleClassKey(node:any, key:any, value:any) {
+function toggleClassKey(node:Node, 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,13 +361,13 @@ 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[]) {
-  let bLength = b.length,
-    aEnd = a.length,
+  const bLength = b.length
+  let aEnd = a.length,
     bEnd = bLength,
     aStart = 0,
     bStart = 0,
-    after = a[aEnd - 1].nextSibling,
     map:Map<Node,number>|null = null;
+  const after = a[aEnd - 1].nextSibling
 
   while (aStart < aEnd || bStart < bEnd) {
     // common prefix

package/test/hyperscript.js

@@ -1,7 +1,7 @@
 import {runtime} from '../src/runtime.ts'
 import {hyperscript} from '../src/hyperscript.ts'
 import {signal,root} from '../src/reactive.ts'
-import {JSDOM} from 'npm:jsdom'
+import {JSDOM} from 'jsdom'
 import {assertEquals} from '@std/assert'
 
 const {window} = new JSDOM('<!DOCTYPE html>', {runScripts:'dangerously'})
@@ -36,7 +36,7 @@ testing('h with basic element', {skip:true}, 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('style attribute', () => assertHTML(h('hr',{style:'color:red'}), '<hr style="color: red;">'))

package/test/reactive.js

@@ -1,8 +1,7 @@
 import {assertEquals,assert} from '@std/assert'
 import {describe,it} from '@std/testing/bdd'
 
-import {signal,effect,sample,batch,memo,context} from '../src/reactive.ts'
-import {wrap} from '../src/controlflow.js'
+import {signal,effect,untrack,batch,memo,context,useContext,root,wrap} from '../src/reactive.ts'
 
 describe('signal', () => {
   const a = signal(1)
@@ -14,6 +13,15 @@ describe('signal', () => {
   assertEquals(a(null),null)
 })
 
+describe('signal with equals option', () => {
+  const n = signal(0,{equals:false})
+  let m = 0
+  effect(() => m += 1 + n() )
+  assertEquals(m,1)
+  assertEquals(n(0),0)
+  assertEquals(m,2)
+})
+
 describe('effect', () => {
   const n = signal(1)
   let m = 0
@@ -24,10 +32,10 @@ describe('effect', () => {
   assertEquals(m,3)
 })
 
-describe('sample',()=>{
+describe('untrack',()=>{
   const n = signal(1)
   let m = 0
-  effect(()=>m = sample(n))
+  effect(()=>m = untrack(n))
   assertEquals(m,1)
   n(2)
   assertEquals(m,1)