@wrnrlr/prelude 0.0.1

package/src/constants.ts

@@ -0,0 +1,515 @@
+/**
+* Non-breakable space in Unicode
+* @group Utils
+*/
+export const nbsp:string = '\u00A0'
+
+export declare type Window = { document: Document;  SVGElement: typeof SVGElements}
+export declare type Elem = any
+declare type SVGElement = any
+declare type Document = any
+declare type ShadowRoot = any
+declare type DocumentFragment = any
+export declare type Node = any
+
+export type Mountable = Elem | Document | ShadowRoot | DocumentFragment | Node;
+type ExpandableNode = Node & { [key: string]: any };
+
+// type Expect<T extends true> = T;
+// type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false;
+// const test = {children:[] as any[]}
+// type test1 = Expect<Equal<typeof test, ElementProps>>
+
+const booleans:string[] = [
+  'allowfullscreen',
+  'async',
+  'autofocus',
+  'autoplay',
+  'checked',
+  'controls',
+  'default',
+  'disabled',
+  'formnovalidate',
+  'hidden',
+  'indeterminate',
+  'inert',
+  'ismap',
+  'loop',
+  'multiple',
+  'muted',
+  'nomodule',
+  'novalidate',
+  'open',
+  'playsinline',
+  'readonly',
+  'required',
+  'reversed',
+  'seamless',
+  'selected'
+];
+
+const BooleanAttributes:Set<string> = /*#__PURE__*/ new Set(booleans);
+
+const Properties:Set<string> = /*#__PURE__*/ new Set([
+  'className',
+  'value',
+  'readOnly',
+  'formNoValidate',
+  'isMap',
+  'noModule',
+  'playsInline',
+  ...booleans
+]);
+
+const ChildProperties:Set<string> = /*#__PURE__*/ new Set([
+  'innerHTML',
+  'textContent',
+  'innerText',
+  'children'
+]);
+
+// React Compat
+const Aliases:Record<string,string> = /*#__PURE__*/ Object.assign(Object.create(null), {
+  className: 'class',
+  htmlFor: 'for'
+});
+
+const PropAliases = /*#__PURE__*/ Object.assign(Object.create(null), {
+  class: 'className',
+  formnovalidate: {
+    $: 'formNoValidate',
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: 'isMap',
+    IMG: 1
+  },
+  nomodule: {
+    $: 'noModule',
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: 'playsInline',
+    VIDEO: 1
+  },
+  readonly: {
+    $: 'readOnly',
+    INPUT: 1,
+    TEXTAREA: 1
+  }
+});
+
+function getPropAlias(prop:string,tagName:string):string | undefined {
+  const a = PropAliases[prop];
+  return typeof a === 'object' ? (a[tagName] ? a['$'] : undefined) : a;
+}
+
+// list of Element events that will be delegated
+const DelegatedEvents:Set<string> = /*#__PURE__*/ new Set([
+  'beforeinput',
+  'click',
+  'dblclick',
+  'contextmenu',
+  'focusin',
+  'focusout',
+  'input',
+  'keydown',
+  'keyup',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'pointerdown',
+  'pointermove',
+  'pointerout',
+  'pointerover',
+  'pointerup',
+  'touchend',
+  'touchmove',
+  'touchstart'
+]);
+
+const SVGElements:Set<string> = /*#__PURE__*/ new Set([
+  // 'a',
+  'altGlyph',
+  'altGlyphDef',
+  'altGlyphItem',
+  'animate',
+  'animateColor',
+  'animateMotion',
+  'animateTransform',
+  'circle',
+  'clipPath',
+  'color-profile',
+  'cursor',
+  'defs',
+  'desc',
+  'ellipse',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDistantLight',
+  'feDropShadow',
+  'feFlood',
+  'feFuncA',
+  'feFuncB',
+  'feFuncG',
+  'feFuncR',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMergeNode',
+  'feMorphology',
+  'feOffset',
+  'fePointLight',
+  'feSpecularLighting',
+  'feSpotLight',
+  'feTile',
+  'feTurbulence',
+  'filter',
+  'font',
+  'font-face',
+  'font-face-format',
+  'font-face-name',
+  'font-face-src',
+  'font-face-uri',
+  'foreignObject',
+  'g',
+  'glyph',
+  'glyphRef',
+  'hkern',
+  'image',
+  'line',
+  'linearGradient',
+  'marker',
+  'mask',
+  'metadata',
+  'missing-glyph',
+  'mpath',
+  'path',
+  'pattern',
+  'polygon',
+  'polyline',
+  'radialGradient',
+  'rect',
+  // 'script',
+  'set',
+  'stop',
+  // 'style',
+  'svg',
+  'switch',
+  'symbol',
+  'text',
+  'textPath',
+  // 'title',
+  'tref',
+  'tspan',
+  'use',
+  'view',
+  'vkern'
+]);
+
+const SVGNamespace:Record<string,string> = {
+  xlink: 'http://www.w3.org/1999/xlink',
+  xml: 'http://www.w3.org/XML/1998/namespace'
+};
+
+const DOMElements:Set<string> = /*#__PURE__*/ new Set([
+  'html',
+  'base',
+  'head',
+  'link',
+  'meta',
+  'style',
+  'title',
+  'body',
+  'address',
+  'article',
+  'aside',
+  'footer',
+  'header',
+  'main',
+  'nav',
+  'section',
+  'body',
+  'blockquote',
+  'dd',
+  'div',
+  'dl',
+  'dt',
+  'figcaption',
+  'figure',
+  'hr',
+  'li',
+  'ol',
+  'p',
+  'pre',
+  'ul',
+  'a',
+  'abbr',
+  'b',
+  'bdi',
+  'bdo',
+  'br',
+  'cite',
+  'code',
+  'data',
+  'dfn',
+  'em',
+  'i',
+  'kbd',
+  'mark',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'small',
+  'span',
+  'strong',
+  'sub',
+  'sup',
+  'time',
+  'u',
+  'var',
+  'wbr',
+  'area',
+  'audio',
+  'img',
+  'map',
+  'track',
+  'video',
+  'embed',
+  'iframe',
+  'object',
+  'param',
+  'picture',
+  'portal',
+  'source',
+  'svg',
+  'math',
+  'canvas',
+  'noscript',
+  'script',
+  'del',
+  'ins',
+  'caption',
+  'col',
+  'colgroup',
+  'table',
+  'tbody',
+  'td',
+  'tfoot',
+  'th',
+  'thead',
+  'tr',
+  'button',
+  'datalist',
+  'fieldset',
+  'form',
+  'input',
+  'label',
+  'legend',
+  'meter',
+  'optgroup',
+  'option',
+  'output',
+  'progress',
+  'select',
+  'textarea',
+  'details',
+  'dialog',
+  'menu',
+  'summary',
+  'details',
+  'slot',
+  'template',
+  // 'acronym',
+  // 'applet',
+  // 'basefont',
+  // 'bgsound',
+  // 'big',
+  // 'blink',
+  // 'center',
+  'content',
+  // 'dir',
+  // 'font',
+  'frame',
+  // 'frameset',
+  'hgroup',
+  'image',
+  // 'keygen',
+  // 'marquee',
+  'menuitem',
+  // 'nobr',
+  // 'noembed',
+  // 'noframes',
+  'plaintext',
+  'rb',
+  'rtc',
+  'shadow',
+  'spacer',
+  'strike',
+  'tt',
+  'xmp',
+  'a',
+  'abbr',
+  'acronym',
+  'address',
+  // 'applet',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  // 'basefont',
+  'bdi',
+  'bdo',
+  // 'bgsound',
+  // 'big',
+  // 'blink',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  // 'center',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'content',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  // 'dir',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  // 'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  // 'font',
+  'footer',
+  'form',
+  // 'frame',
+  // 'frameset',
+  'head',
+  'header',
+  'hgroup',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'image',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  // 'keygen',
+  'label',
+  'legend',
+  'li',
+  'link',
+  'main',
+  'map',
+  'mark',
+  // 'marquee',
+  // 'menu',
+  // 'menuitem',
+  'meta',
+  'meter',
+  'nav',
+  // 'nobr',
+  // 'noembed',
+  // 'noframes',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  // 'param',
+  'picture',
+  // 'plaintext',
+  'portal',
+  'pre',
+  'progress',
+  'q',
+  // 'rb',
+  'rp',
+  'rt',
+  // 'rtc',
+  'ruby',
+  // 's',
+  'samp',
+  'script',
+  'section',
+  'select',
+  'shadow',
+  'slot',
+  'small',
+  'source',
+  // 'spacer',
+  'span',
+  // 'strike',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  // 'tt',
+  'u',
+  'ul',
+  // 'var',
+  'video',
+  'wbr',
+  // 'xmp',
+  'input',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6'
+]);
+
+export {
+  BooleanAttributes,
+  Properties,
+  ChildProperties,
+  getPropAlias,
+  Aliases,
+  DelegatedEvents,
+  SVGElements,
+  SVGNamespace,
+  DOMElements
+};

package/src/controlflow.js

@@ -0,0 +1,163 @@
+import {signal,sample,batch,memo,root,Signal} from './reactive.ts'
+
+/**
+Show children if `when` prop is true, otherwise show `fallback`.
+@group Components
+*/
+export function Show(props) {
+  const condition = memo(()=>props.when)
+  return memo(()=>{
+    const c = condition()
+    if (c) {
+      const child = props.children
+      const fn = typeof child === "function" && child.length > 0
+      return fn ? sample(() => child(() => props.when)) : child
+    } else return props.fallback
+  })
+}
+
+export function wrap(s,k) {
+  const t = typeof k
+  if (t === 'number') 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) => {
+    const b = s()
+    return a.length ? s(({ ...b, [k]: a[0] }))[k] : b[k]
+  }; else if (t === 'function') 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 => a.length ? s(b => ({...b, [i]:a[0]}))[i] : s()[i]
+    throw new Error('Cannot wrap signal')
+  }
+  throw new Error('Cannot wrap signal')
+}
+
+/**
+List
+@group Components
+*/
+export function List(props) {
+  const fallback = "fallback" in props && { fallback: () => props.fallback }
+  const list = props.each
+  const cb = props.children.call ? props.children : (v)=>v
+  let items = [], item, unusedItems, i, j, newValue, mapped, oldIndex, oldValue,
+    indexes = cb.length > 1 ? [] : null;
+  function newValueGetter(_) { return newValue }
+  function changeBoth() {
+    item.index = i
+    item.indexSetter?.(i)
+    item.value = newValue
+    item.valueSetter?.(newValueGetter)
+  }
+  function mapperWithIndexes(disposer) {
+    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) => a.length ?
+        sample(()=>list(list=>list.toSpliced(I,1,a[0])))
+        : Vs(),
+      ()=>Is())
+  }
+  function mapperWithoutIndexes(disposer) {
+    const V = newValue, I = i, Vs = signal(V)
+    items.push({value: V, index: i, disposer, valueSetter: Vs})
+    return cb((...a) => a.length ?
+      sample(()=>list(list=>list.toSpliced(I,1,a[0])))
+      : Vs())
+  }
+  const mapper = indexes ? mapperWithIndexes : mapperWithoutIndexes
+  return memo(() => {
+    const newItems = list() || []
+    // (newItems)[$TRACK]; // top level tracking
+    return sample(() => {
+      const temp = new Array(newItems.length) // new mapped array
+      unusedItems = items.length
+
+      // 1) no change when values & indexes match
+      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]
+          if (--unusedItems !== j) {
+            items[j] = items[unusedItems]
+            items[unusedItems] = item
+          }
+        }
+      }
+
+      // #2 prepare values matcher
+      const matcher = new Map()
+      const matchedItems = new Uint8Array(unusedItems)
+      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]
+        j = matcher.get(newValue)?.pop() ?? -1
+        if (j >= 0) {
+          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 (j = matchedItems.length - 1; j >= 0; --j) {
+        if (matchedItems[j] && --unusedItems !== j) {
+          item = items[j]
+          items[j] = items[unusedItems]
+          items[unusedItems] = item
+        }
+      }
+
+      // 4) 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]
+          item.value = newValue
+          item.valueSetter?.(item.valueSetter)
+          if (--unusedItems !== j) {
+            items[j] = items[unusedItems]
+            items[unusedItems] = item
+          }
+        }
+      }
+
+      // 5) change value & index when none matched and create new if no unused items left
+      for (i = 0; i < newItems.length; ++i) {
+        if (i in temp) continue
+        newValue = newItems[i]
+        if (unusedItems > 0) {
+          item = items[--unusedItems]
+          temp[i] = mapped[item.index]
+          batch(changeBoth);
+        } else {
+          temp[i] = root(mapper)
+        }
+      }
+
+      // 6) delete any old unused items left
+      disposeList(items.splice(0, unusedItems))
+
+      return (mapped = temp);
+    })
+  })
+}
+
+function disposeList(list) {
+  for (let i = 0; i < list.length; i++) {
+    list[i]?.disposer()
+  }
+}