0.11.11 release.

Co-authored-by: icecream17 <nguyeste008@students.garlandisd.net>
Co-authored-by: enpitsuLin <enpitsulin@gmail.com>

Author: 3 people

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 src/test.ts
+src/test.js
 package-lock.json

README.md

@@ -2,7 +2,7 @@
 
 > Enable everyone to build useful UI apps with a few lines of code, anywhere, any time, on any device.
 
-**VanJS** (abbr. **Van**illa **J**ava**S**cript) is an ***ultra-lightweight***, ***zero-dependency*** and ***unopinionated*** Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with **VanJS** feels like building React apps in a [scripting language](https://vanjs.org/about#story), without JSX. Check-out the `Hello World` code below:
+**VanJS** is an ***ultra-lightweight***, ***zero-dependency*** and ***unopinionated*** Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with **VanJS** feels like building React apps in a [scripting language](https://vanjs.org/about#story), without JSX. Check-out the `Hello World` code below:
 
 ```javascript
 // Reusable components can be just pure vanilla JavaScript functions.
@@ -93,3 +93,5 @@ Contact us: [tao@vanjs.org](mailto:tao@vanjs.org) / [Tao Xin](https://www.linked
 * [Tao Xin](https://github.com/Tao-VanJS)
 * [Ryan Olson](https://github.com/ryanolsonx)
 * [Tamotsu Takahashi](https://github.com/tamo)
+* [icecream17](https://github.com/icecream17)
+* [enpitsuLin](https://github.com/enpitsulin)

doc/size_comp.png

@@ -1,6 +1,6 @@
 {
   "name": "van-dom",
-  "version": "0.11.10",
+  "version": "0.11.11",
   "description": "VanJS. A minimalist React-like UI library based on vanilla JavaScript and DOM.",
   "main": "src/van.js",
   "type": "module",

package.json

@@ -0,0 +1,154 @@
+export type State<T = any> = {
+  val: T
+  onnew(l: (val: T, oldVal: T) => void): void
+}
+
+// Defining readonly view of State<T> for covariance.
+// Basically we want State<string> implements StateView<string | number>
+export interface StateView<T = any> {
+  readonly val: T
+}
+
+export type Primitive = string | number | boolean | bigint
+
+export type PropValue = Primitive | Function | null
+
+export interface DerivedProp {
+  readonly deps: readonly StateView<unknown>[]
+  readonly f: (...args: readonly any[]) => PropValue
+}
+
+export interface Props {
+  readonly [key: string]: PropValue | StateView<PropValue> | DerivedProp
+}
+
+export type ChildDom = Primitive | Node | StateView<Primitive | null | undefined> | readonly ChildDom[]
+
+export type TagFunc<Result> = (first?: Props | ChildDom, ...rest: readonly ChildDom[]) => Result
+
+type Tags = {
+  readonly [key: string]: TagFunc<Element>
+  // Register known element types
+  // Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+
+  // Main root
+  readonly html: TagFunc<HTMLHtmlElement>
+
+  // Document metadata
+  readonly base: TagFunc<HTMLBaseElement>
+  readonly head: TagFunc<HTMLHeadElement>
+  readonly link: TagFunc<HTMLLinkElement>
+  readonly meta: TagFunc<HTMLMetaElement>
+  readonly style: TagFunc<HTMLStyleElement>
+  readonly title: TagFunc<HTMLTitleElement>
+
+  // Sectioning root
+  readonly body: TagFunc<HTMLBodyElement>
+
+  // Content sectioning
+  readonly h1: TagFunc<HTMLHeadingElement>
+  readonly h2: TagFunc<HTMLHeadingElement>
+  readonly h3: TagFunc<HTMLHeadingElement>
+  readonly h4: TagFunc<HTMLHeadingElement>
+  readonly h5: TagFunc<HTMLHeadingElement>
+  readonly h6: TagFunc<HTMLHeadingElement>
+
+  // Text content
+  readonly blockquote: TagFunc<HTMLQuoteElement>
+  readonly div: TagFunc<HTMLDivElement>
+  readonly dl: TagFunc<HTMLDListElement>
+  readonly hr: TagFunc<HTMLHRElement>
+  readonly li: TagFunc<HTMLLIElement>
+  readonly menu: TagFunc<HTMLMenuElement>
+  readonly ol: TagFunc<HTMLOListElement>
+  readonly p: TagFunc<HTMLParagraphElement>
+  readonly pre: TagFunc<HTMLPreElement>
+  readonly ul: TagFunc<HTMLUListElement>
+
+  // Inline text semantics
+  readonly a: TagFunc<HTMLAnchorElement>
+  readonly br: TagFunc<HTMLBRElement>
+  readonly data: TagFunc<HTMLDataElement>
+  readonly q: TagFunc<HTMLQuoteElement>
+  readonly span: TagFunc<HTMLSpanElement>
+  readonly time: TagFunc<HTMLTimeElement>
+
+  // Image and multimedia
+  readonly area: TagFunc<HTMLAreaElement>
+  readonly audio: TagFunc<HTMLAudioElement>
+  readonly img: TagFunc<HTMLImageElement>
+  readonly map: TagFunc<HTMLMapElement>
+  readonly track: TagFunc<HTMLTrackElement>
+  readonly video: TagFunc<HTMLVideoElement>
+
+  // Embedded content
+  readonly embed: TagFunc<HTMLEmbedElement>
+  readonly iframe: TagFunc<HTMLIFrameElement>
+  readonly object: TagFunc<HTMLObjectElement>
+  readonly picture: TagFunc<HTMLPictureElement>
+  readonly source: TagFunc<HTMLSourceElement>
+
+  // Scripting
+  readonly canvas: TagFunc<HTMLCanvasElement>
+  readonly script: TagFunc<HTMLScriptElement>
+
+  // Demarcating edits
+  readonly del: TagFunc<HTMLModElement>
+  readonly ins: TagFunc<HTMLModElement>
+
+  // Table content
+  readonly caption: TagFunc<HTMLTableCaptionElement>
+  readonly col: TagFunc<HTMLTableColElement>
+  readonly colgroup: TagFunc<HTMLTableColElement>
+  readonly table: TagFunc<HTMLTableElement>
+  readonly tbody: TagFunc<HTMLTableSectionElement>
+  readonly td: TagFunc<HTMLTableCellElement>
+  readonly tfoot: TagFunc<HTMLTableSectionElement>
+  readonly th: TagFunc<HTMLTableCellElement>
+  readonly thead: TagFunc<HTMLTableSectionElement>
+  readonly tr: TagFunc<HTMLTableRowElement>
+
+  // Forms
+  readonly button: TagFunc<HTMLButtonElement>
+  readonly datalist: TagFunc<HTMLDataListElement>
+  readonly fieldset: TagFunc<HTMLFieldSetElement>
+  readonly form: TagFunc<HTMLFormElement>
+  readonly input: TagFunc<HTMLInputElement>
+  readonly label: TagFunc<HTMLLabelElement>
+  readonly legend: TagFunc<HTMLLegendElement>
+  readonly meter: TagFunc<HTMLMeterElement>
+  readonly optgroup: TagFunc<HTMLOptGroupElement>
+  readonly option: TagFunc<HTMLOptionElement>
+  readonly output: TagFunc<HTMLOutputElement>
+  readonly progress: TagFunc<HTMLProgressElement>
+  readonly select: TagFunc<HTMLSelectElement>
+  readonly textarea: TagFunc<HTMLTextAreaElement>
+
+  // Interactive elements
+  readonly details: TagFunc<HTMLDetailsElement>
+  readonly dialog: TagFunc<HTMLDialogElement>
+
+  // Web Components
+  readonly slot: TagFunc<HTMLSlotElement>
+  readonly template: TagFunc<HTMLTemplateElement>
+}
+
+
+type BindFuncArgs<T extends StateView[]> = T extends [infer OnlyOne extends StateView] ?
+  [OnlyOne['val']] : T extends [infer First extends StateView, ...infer Rest extends StateView[]] ?
+  [First['val'], ...BindFuncArgs<Rest>] : never
+
+type BindFunc<T extends StateView[]> = (...arg: [...BindFuncArgs<T>, Element, ...BindFuncArgs<T>]) => Primitive | Node | null | undefined
+
+declare function bind<StateViews extends StateView[]>(...args: [...StateViews, BindFunc<StateViews>]): Node | []
+
+export type Van = {
+  readonly state: <T>(initVal: T) => State<T>
+  readonly add: (dom: Element, ...children: readonly ChildDom[]) => Element
+  readonly tags: Tags
+  readonly bind: typeof bind
+}
+
+declare const van: Van
+
+export default van

public/van-0.11.11.d.ts

@@ -0,0 +1,154 @@
+export type State<T = any> = {
+  val: T
+  onnew(l: (val: T, oldVal: T) => void): void
+}
+
+// Defining readonly view of State<T> for covariance.
+// Basically we want State<string> implements StateView<string | number>
+export interface StateView<T = any> {
+  readonly val: T
+}
+
+export type Primitive = string | number | boolean | bigint
+
+export type PropValue = Primitive | Function | null
+
+export interface DerivedProp {
+  readonly deps: readonly StateView<unknown>[]
+  readonly f: (...args: readonly any[]) => PropValue
+}
+
+export interface Props {
+  readonly [key: string]: PropValue | StateView<PropValue> | DerivedProp
+}
+
+export type ChildDom = Primitive | Node | StateView<Primitive | null | undefined> | readonly ChildDom[]
+
+export type TagFunc<Result> = (first?: Props | ChildDom, ...rest: readonly ChildDom[]) => Result
+
+type Tags = {
+  readonly [key: string]: TagFunc<Element>
+  // Register known element types
+  // Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+
+  // Main root
+  readonly html: TagFunc<HTMLHtmlElement>
+
+  // Document metadata
+  readonly base: TagFunc<HTMLBaseElement>
+  readonly head: TagFunc<HTMLHeadElement>
+  readonly link: TagFunc<HTMLLinkElement>
+  readonly meta: TagFunc<HTMLMetaElement>
+  readonly style: TagFunc<HTMLStyleElement>
+  readonly title: TagFunc<HTMLTitleElement>
+
+  // Sectioning root
+  readonly body: TagFunc<HTMLBodyElement>
+
+  // Content sectioning
+  readonly h1: TagFunc<HTMLHeadingElement>
+  readonly h2: TagFunc<HTMLHeadingElement>
+  readonly h3: TagFunc<HTMLHeadingElement>
+  readonly h4: TagFunc<HTMLHeadingElement>
+  readonly h5: TagFunc<HTMLHeadingElement>
+  readonly h6: TagFunc<HTMLHeadingElement>
+
+  // Text content
+  readonly blockquote: TagFunc<HTMLQuoteElement>
+  readonly div: TagFunc<HTMLDivElement>
+  readonly dl: TagFunc<HTMLDListElement>
+  readonly hr: TagFunc<HTMLHRElement>
+  readonly li: TagFunc<HTMLLIElement>
+  readonly menu: TagFunc<HTMLMenuElement>
+  readonly ol: TagFunc<HTMLOListElement>
+  readonly p: TagFunc<HTMLParagraphElement>
+  readonly pre: TagFunc<HTMLPreElement>
+  readonly ul: TagFunc<HTMLUListElement>
+
+  // Inline text semantics
+  readonly a: TagFunc<HTMLAnchorElement>
+  readonly br: TagFunc<HTMLBRElement>
+  readonly data: TagFunc<HTMLDataElement>
+  readonly q: TagFunc<HTMLQuoteElement>
+  readonly span: TagFunc<HTMLSpanElement>
+  readonly time: TagFunc<HTMLTimeElement>
+
+  // Image and multimedia
+  readonly area: TagFunc<HTMLAreaElement>
+  readonly audio: TagFunc<HTMLAudioElement>
+  readonly img: TagFunc<HTMLImageElement>
+  readonly map: TagFunc<HTMLMapElement>
+  readonly track: TagFunc<HTMLTrackElement>
+  readonly video: TagFunc<HTMLVideoElement>
+
+  // Embedded content
+  readonly embed: TagFunc<HTMLEmbedElement>
+  readonly iframe: TagFunc<HTMLIFrameElement>
+  readonly object: TagFunc<HTMLObjectElement>
+  readonly picture: TagFunc<HTMLPictureElement>
+  readonly source: TagFunc<HTMLSourceElement>
+
+  // Scripting
+  readonly canvas: TagFunc<HTMLCanvasElement>
+  readonly script: TagFunc<HTMLScriptElement>
+
+  // Demarcating edits
+  readonly del: TagFunc<HTMLModElement>
+  readonly ins: TagFunc<HTMLModElement>
+
+  // Table content
+  readonly caption: TagFunc<HTMLTableCaptionElement>
+  readonly col: TagFunc<HTMLTableColElement>
+  readonly colgroup: TagFunc<HTMLTableColElement>
+  readonly table: TagFunc<HTMLTableElement>
+  readonly tbody: TagFunc<HTMLTableSectionElement>
+  readonly td: TagFunc<HTMLTableCellElement>
+  readonly tfoot: TagFunc<HTMLTableSectionElement>
+  readonly th: TagFunc<HTMLTableCellElement>
+  readonly thead: TagFunc<HTMLTableSectionElement>
+  readonly tr: TagFunc<HTMLTableRowElement>
+
+  // Forms
+  readonly button: TagFunc<HTMLButtonElement>
+  readonly datalist: TagFunc<HTMLDataListElement>
+  readonly fieldset: TagFunc<HTMLFieldSetElement>
+  readonly form: TagFunc<HTMLFormElement>
+  readonly input: TagFunc<HTMLInputElement>
+  readonly label: TagFunc<HTMLLabelElement>
+  readonly legend: TagFunc<HTMLLegendElement>
+  readonly meter: TagFunc<HTMLMeterElement>
+  readonly optgroup: TagFunc<HTMLOptGroupElement>
+  readonly option: TagFunc<HTMLOptionElement>
+  readonly output: TagFunc<HTMLOutputElement>
+  readonly progress: TagFunc<HTMLProgressElement>
+  readonly select: TagFunc<HTMLSelectElement>
+  readonly textarea: TagFunc<HTMLTextAreaElement>
+
+  // Interactive elements
+  readonly details: TagFunc<HTMLDetailsElement>
+  readonly dialog: TagFunc<HTMLDialogElement>
+
+  // Web Components
+  readonly slot: TagFunc<HTMLSlotElement>
+  readonly template: TagFunc<HTMLTemplateElement>
+}
+
+
+type BindFuncArgs<T extends StateView[]> = T extends [infer OnlyOne extends StateView] ?
+  [OnlyOne['val']] : T extends [infer First extends StateView, ...infer Rest extends StateView[]] ?
+  [First['val'], ...BindFuncArgs<Rest>] : never
+
+type BindFunc<T extends StateView[]> = (...arg: [...BindFuncArgs<T>, Element, ...BindFuncArgs<T>]) => Primitive | Node | null | undefined
+
+declare function bind<StateViews extends StateView[]>(...args: [...StateViews, BindFunc<StateViews>]): Node | []
+
+export type Van = {
+  readonly state: <T>(initVal: T) => State<T>
+  readonly add: (dom: Element, ...children: readonly ChildDom[]) => Element
+  readonly tags: Tags
+  readonly bind: typeof bind
+}
+
+declare const van: Van
+
+export default van