1.2.3: emergency fix of the issue

Author: Tao-VanJS

demo/terminal/van-1.2.2.min.js

@@ -1,6 +1,6 @@
 {
   "name": "vanjs-core",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "VanJS. A minimalist React-like UI library based on vanilla JavaScript and DOM.",
   "files": [
     "src/van.js",

demo/terminal/van-1.2.3.min.js

@@ -0,0 +1,42 @@
+export interface State<T> {
+  val: T
+  readonly oldVal: T
+}
+
+// Defining readonly view of State<T> for covariance.
+// Basically we want StateView<string> to implement StateView<string | number>
+export type StateView<T> = Readonly<State<T>>
+
+export type Primitive = string | number | boolean | bigint
+
+export type PropValue = Primitive | ((e: any) => void) | null
+
+export type Props = Record<string, PropValue | StateView<PropValue> | (() => PropValue)>
+
+export type ValidChildDomValue = Primitive | Node | null | undefined
+
+export type BindingFunc = ((dom?: Node) => ValidChildDomValue) | ((dom?: Element) => Element)
+
+export type ChildDom = ValidChildDomValue | StateView<Primitive | null | undefined> | BindingFunc | readonly ChildDom[]
+
+export type TagFunc<Result> = (first?: Props | ChildDom, ...rest: readonly ChildDom[]) => Result
+
+type Tags = Readonly<Record<string, TagFunc<Element>>> & {
+  [K in keyof HTMLElementTagNameMap]: TagFunc<HTMLElementTagNameMap[K]>
+}
+
+export interface Van {
+  readonly state: <T>(initVal: T) => State<T>
+  readonly val: <T>(s: T | StateView<T>) => T
+  readonly oldVal: <T>(s: T | StateView<T>) => T
+  readonly derive: <T>(f: () => T) => State<T>
+  readonly add: (dom: Element, ...children: readonly ChildDom[]) => Element
+  readonly _: (f: () => PropValue) => () => PropValue
+  readonly tags: Tags
+  readonly tagsNS: (namespaceURI: string) => Readonly<Record<string, TagFunc<Element>>>
+  readonly hydrate: <T extends Node>(dom: T, f: (dom: T) => T | null | undefined) => T
+}
+
+declare const van: Van
+
+export default van

package.json

@@ -0,0 +1,42 @@
+export interface State<T> {
+  val: T
+  readonly oldVal: T
+}
+
+// Defining readonly view of State<T> for covariance.
+// Basically we want StateView<string> to implement StateView<string | number>
+export type StateView<T> = Readonly<State<T>>
+
+export type Primitive = string | number | boolean | bigint
+
+export type PropValue = Primitive | ((e: any) => void) | null
+
+export type Props = Record<string, PropValue | StateView<PropValue> | (() => PropValue)>
+
+export type ValidChildDomValue = Primitive | Node | null | undefined
+
+export type BindingFunc = ((dom?: Node) => ValidChildDomValue) | ((dom?: Element) => Element)
+
+export type ChildDom = ValidChildDomValue | StateView<Primitive | null | undefined> | BindingFunc | readonly ChildDom[]
+
+export type TagFunc<Result> = (first?: Props | ChildDom, ...rest: readonly ChildDom[]) => Result
+
+type Tags = Readonly<Record<string, TagFunc<Element>>> & {
+  [K in keyof HTMLElementTagNameMap]: TagFunc<HTMLElementTagNameMap[K]>
+}
+
+export interface Van {
+  readonly state: <T>(initVal: T) => State<T>
+  readonly val: <T>(s: T | StateView<T>) => T
+  readonly oldVal: <T>(s: T | StateView<T>) => T
+  readonly derive: <T>(f: () => T) => State<T>
+  readonly add: (dom: Element, ...children: readonly ChildDom[]) => Element
+  readonly _: (f: () => PropValue) => () => PropValue
+  readonly tags: Tags
+  readonly tagsNS: (namespaceURI: string) => Readonly<Record<string, TagFunc<Element>>>
+  readonly hydrate: <T extends Node>(dom: T, f: (dom: T) => T | null | undefined) => T
+}
+
+declare const van: Van
+
+export default van

public/van-1.2.3.d.ts

@@ -0,0 +1,124 @@
+import van from "./van-1.2.3.js"
+
+// If this variable is set to an Array, we will push the error message into the array instead of
+// throwing an error. This is useful in testing, to capture the error occurred asynchronous to the initiating
+// callstack. e.g.: a state change can trigger a dom update processing when idle (i.e.: dom update
+// processing is set via setTimeout function, which is asynchronous to the initiating callstack).
+let capturedErrors
+
+const startCapturingErrors = () => capturedErrors = []
+
+const stopCapturingErrors = () => capturedErrors = null
+
+const expect = (cond, msg) => {
+  if (!cond) {
+    if (capturedErrors) capturedErrors.push(msg); else throw new Error(msg)
+    return false
+  }
+  return true
+}
+
+const protoOf = Object.getPrototypeOf
+const stateProto = protoOf(van.state())
+const isState = s => protoOf(s ?? 0) === stateProto
+
+const checkStateValValid = v => {
+  expect(!isState(v), "State couldn't have value to other state")
+  expect(!(v instanceof Node), "DOM Node is not valid value for state")
+  return v
+}
+
+const state = initVal => new Proxy(van.state(Object.freeze(checkStateValValid(initVal))), {
+  set: (s, prop, val) => {
+    prop === "val" && Object.freeze(checkStateValValid(val))
+    return Reflect.set(s, prop, val)
+  }
+})
+
+const derive = f => {
+  expect(typeof(f) === "function", "Must pass-in a function to `van.derive`")
+  return van.derive(f)
+}
+
+const isValidPrimitive = v =>
+  typeof(v) === "string" ||
+  typeof(v) === "number" ||
+  typeof(v) === "boolean" ||
+  typeof(v) === "bigint"
+
+const isDomOrPrimitive = v => v instanceof Node || isValidPrimitive(v)
+
+const validateChild = child => {
+  expect(
+    isDomOrPrimitive(child) || child === null || child === undefined,
+    "Only DOM Node, string, number, boolean, bigint, null, undefined are valid child of a DOM Element",
+  )
+  return child
+}
+
+const withResultValidation = f => dom => {
+  const r = validateChild(f(dom))
+  if (r !== dom && r instanceof Node)
+    expect(!r.isConnected,
+      "If the result of complex binding function is not the same as previous one, it shouldn't be already connected to document")
+  return r
+}
+
+const checkChildren = children => children.flat(Infinity).map(c => {
+  if (isState(c)) return withResultValidation(() => c.val)
+  if (typeof c === "function") return withResultValidation(c)
+  expect(!c?.isConnected, "You can't add a DOM Node that is already connected to document")
+  return validateChild(c)
+})
+
+const add = (dom, ...children) => {
+  expect(dom instanceof Element, "1st argument of `van.add` function must be a DOM Element object")
+  return van.add(dom, ...checkChildren(children))
+}
+
+const _ = f => {
+  expect(typeof(f) === "function", "Must pass-in a function to `van._`")
+  return van._(f)
+}
+
+const _tagsNS = ns => new Proxy(van.tagsNS(ns), {
+  get: (vanTags, name) => {
+    const vanTag = vanTags[name]
+    return (...args) => {
+      const [props, ...children] = protoOf(args[0] ?? 0) === Object.prototype ? args : [{}, ...args]
+      const debugProps =  {}
+      for (const [k, v] of Object.entries(props)) {
+        const validatePropValue = k.startsWith("on") ?
+          (k.toLowerCase() === k ?
+            v => (expect(typeof v === "function" || v === null,
+              `Invalid property value for ${k}: Only functions and null are allowed for ${k} property`), v) :
+            v => (expect(typeof v === "string",
+              `Invalid property value for ${k}: Only strings are allowed for ${k} attribute`), v)
+          ) :
+          v => (expect(isValidPrimitive(v) || v === null,
+            `Invalid property value for ${k}: Only string, number, boolean, bigint and null are valid prop value types`), v)
+
+        if (isState(v))
+          debugProps[k] = van._(() => validatePropValue(v.val))
+        else if (typeof v === "function" && (!k.startsWith("on") || v._isBindingFunc))
+          debugProps[k] = van._(() => validatePropValue(v()))
+        else
+          debugProps[k] = validatePropValue(v)
+      }
+      return vanTag(debugProps, ...checkChildren(children))
+    }
+  },
+})
+
+const tagsNS = ns => {
+  expect(typeof ns === "string", "Must provide a string for parameter `ns` in `van.tagsNS`")
+  return _tagsNS(ns)
+}
+
+const hydrate = (dom, f) => {
+  expect(dom instanceof Node, "1st argument of `van.hydrate` function must be a DOM Node object")
+  expect(typeof(f) === "function", "2nd argument of `van.hydrate` function must be a function")
+  return van.hydrate(dom, withResultValidation(f))
+}
+
+export default {add, _, tags: _tagsNS(), tagsNS, state, val: van.val, oldVal: van.oldVal, derive, hydrate, startCapturingErrors, stopCapturingErrors, get capturedErrors() { return capturedErrors }}

public/van-1.2.3.debug.d.ts

@@ -0,0 +1,134 @@
+// This file consistently uses `let` keyword instead of `const` for reducing the bundle size.
+
+// Global variables - aliasing some builtin symbols to reduce the bundle size.
+let Obj = Object, _undefined, protoOf = Obj.getPrototypeOf, doc = document
+let changedStates, curDeps, curNewDerives, alwaysConnectedDom = {isConnected: 1}, gcCycleInMs = 1000, statesToGc, propSetterCache = {}
+let objProto = protoOf(alwaysConnectedDom), funcProto = protoOf(protoOf)
+
+let addAndScheduleOnFirst = (set, s, f, waitMs) =>
+  (set ?? (setTimeout(f, waitMs), new Set)).add(s)
+
+let runAndCaptureDeps = (f, deps, arg) => {
+  let prevDeps = curDeps
+  curDeps = deps
+  try {
+    return f(arg)
+  } catch (e) {
+    console.error(e)
+    return arg
+  } finally {
+    curDeps = prevDeps
+  }
+}
+
+let keepConnected = l => l.filter(b => b._dom?.isConnected)
+
+let addStatesToGc = d => statesToGc = addAndScheduleOnFirst(statesToGc, d, () => {
+  for (let s of statesToGc)
+    s._bindings = keepConnected(s._bindings),
+    s._listeners = keepConnected(s._listeners)
+  statesToGc = _undefined
+}, gcCycleInMs)
+
+let stateProto = {
+  get val() {
+    curDeps?.add(this)
+    return this._val
+  },
+
+  get oldVal() {
+    curDeps?.add(this)
+    return this._oldVal
+  },
+
+  set val(v) {
+    // Aliasing `this` to reduce the bundle size.
+    let s = this
+    if (v !== s._val) {
+      s._val = v
+      let listeners = [...s._listeners = keepConnected(s._listeners)]
+      for (let l of listeners) derive(l.f, l.s, l._dom), l._dom = _undefined
+      s._bindings.length ?
+        changedStates = addAndScheduleOnFirst(changedStates, s, updateDoms) :
+        s._oldVal = v
+    }
+  },
+}
+
+let state = initVal => ({
+  __proto__: stateProto,
+  _val: initVal,
+  _oldVal: initVal,
+  _bindings: [],
+  _listeners: [],
+})
+
+let isState = s => protoOf(s ?? 0) === stateProto
+
+let val = s => isState(s) ? s.val : s
+let oldVal = s => isState(s) ? s.oldVal : s
+
+let bind = (f, dom) => {
+  let deps = new Set, binding = {f}, prevNewDerives = curNewDerives
+  curNewDerives = []
+  let newDom = runAndCaptureDeps(f, deps, dom)
+  newDom = (newDom ?? doc).nodeType ? newDom : new Text(newDom)
+  for (let d of deps) addStatesToGc(d), d._bindings.push(binding)
+  for (let l of curNewDerives) l._dom = newDom
+  curNewDerives = prevNewDerives
+  return binding._dom = newDom
+}
+
+let derive = (f, s = state(), dom) => {
+  let deps = new Set, listener = {f, s}
+  listener._dom = dom ?? curNewDerives?.push(listener) ?? alwaysConnectedDom
+  s.val = runAndCaptureDeps(f, deps)
+  for (let d of deps) addStatesToGc(d), d._listeners.push(listener)
+  return s
+}
+
+let add = (dom, ...children) => {
+  for (let c of children.flat(Infinity)) {
+    let protoOfC = protoOf(c ?? 0)
+    let child = protoOfC === stateProto ? bind(() => c.val) :
+      protoOfC === funcProto ? bind(c) : c
+    if (child != _undefined) dom.append(child)
+  }
+  return dom
+}
+
+let _ = f => (f._isBindingFunc = 1, f)
+
+let tagsNS = ns => new Proxy((name, ...args) => {
+  let [props, ...children] = protoOf(args[0] ?? 0) === objProto ? args : [{}, ...args]
+  let dom = ns ? doc.createElementNS(ns, name) : doc.createElement(name)
+  for (let [k, v] of Obj.entries(props)) {
+    let getPropDescriptor = proto => proto ?
+      Obj.getOwnPropertyDescriptor(proto, k) ?? getPropDescriptor(protoOf(proto)) :
+      _undefined
+    let cacheKey = name + "," + k
+    let propSetter = propSetterCache[cacheKey] ??
+      (propSetterCache[cacheKey] = getPropDescriptor(protoOf(dom))?.set ?? 0)
+    let setter = propSetter ? propSetter.bind(dom) : dom.setAttribute.bind(dom, k)
+    let protoOfV = protoOf(v ?? 0)
+    if (protoOfV === stateProto) bind(() => (setter(v.val), dom))
+    else if (protoOfV === funcProto && (!k.startsWith("on") || v._isBindingFunc))
+      bind(() => (setter(v()), dom))
+    else setter(v)
+  }
+  return add(dom, ...children)
+}, {get: (tag, name) => tag.bind(_undefined, name)})
+
+let update = (dom, newDom) => newDom ? newDom !== dom && dom.replaceWith(newDom) : dom.remove()
+
+let updateDoms = () => {
+  let changedStatesArray = [...changedStates].filter(s => s._val !== s._oldVal)
+  changedStates = _undefined
+  for (let b of new Set(changedStatesArray.flatMap(s => s._bindings = keepConnected(s._bindings))))
+    update(b._dom, bind(b.f, b._dom)), b._dom = _undefined
+  for (let s of changedStatesArray) s._oldVal = s._val
+}
+
+let hydrate = (dom, f) => update(dom, bind(f, dom))
+
+export default {add, _, tags: tagsNS(), tagsNS, state, val, oldVal, derive, hydrate}