van.test.ts

import type {Van, State} from "../src/van.d.ts"

(<any>window).numTests = 0

interface BundleOptions {
  readonly debug: boolean
}

interface VanForTesting extends Van {
  readonly startCapturingErrors: () => void
  readonly stopCapturingErrors: () => void
  readonly capturedErrors: readonly string[]
}

const runTests = async (van: VanForTesting, msgDom: Element, {debug}: BundleOptions) => {
  const {a, b, button, div, h2, i, input, li, option, p, pre, select, span, sup, table, tbody, td, th, thead, tr, ul} = van.tags

  const assert = (cond: boolean) => {
    if (!cond) throw new Error("Assertion failed")
  }

  const assertEq = (lhs: string | number | Node | undefined, rhs: string | number | Node | undefined) => {
    if (lhs !== rhs) throw new Error(`Assertion failed. Expected equal. Actual lhs: ${lhs}, rhs: ${rhs}.`)
  }

  const assertBetween = (n: number, start: number, end: number) => {
    if (!(n >= start && n < end))
      throw new Error(`Assertion failed. Expected in range [${start}, ${end}). Actual: ${n}.`)
  }

  const assertError = (msg: string | RegExp, func: () => void) => {
    let caught = false
    try {
      func()
    } catch (e) {
      if (msg instanceof RegExp) {
        if (msg.test(e.toString())) caught = true; else throw e
      } else {
        if (e.toString().includes(msg)) caught = true; else throw e
      }
    }
    if (!caught) throw new Error(`Expected error with message "${msg}" being thrown.`)
  }

  const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
  const waitMsForDerivations = 5

  const withHiddenDom = (func: (dom: Element) => void | Promise<void>) => async () => {
    const dom = div({class: "hidden"})
    van.add(document.body, dom)
    try {
      await func(dom)
    } finally {
      dom.remove()
    }
  }

  const capturingErrors = async (
    msg: string | RegExp, numErrors: Number, func: (() => void) | (() => Promise<void>)) => {
    van.startCapturingErrors()
    try {
      await func()
      assert(van.capturedErrors.length === numErrors && van.capturedErrors.every(
        e => msg instanceof RegExp ? msg.test(e.toString()) : e.toString().includes(msg)
      ))
    } finally {
      van.stopCapturingErrors()
    }
  }

  const tests = {
    tags_basic: () => {
      const dom = div(
        p("👋Hello"),
        ul(
          li("🗺️World"),
          li(a({href: "https://vanjs.org/"}, "🍦VanJS")),
        ),
      )

      assertEq(dom.outerHTML, '<div><p>👋Hello</p><ul><li>🗺️World</li><li><a href="https://vanjs.org/">🍦VanJS</a></li></ul></div>')
    },

    tags_onclickHandler: () => {
      const dom = div(button({onclick: () => van.add(dom, p("Button clicked!"))}))
      dom.querySelector("button")!.click()
      assertEq(dom.outerHTML, "<div><button></button><p>Button clicked!</p></div>")
    },

    tags_escape: () => {
      assertEq(p("<input>").outerHTML, "<p>&lt;input&gt;</p>")
      assertEq(div("a && b").outerHTML, "<div>a &amp;&amp; b</div>")
      assertEq(div("<input a && b>").outerHTML, "<div>&lt;input a &amp;&amp; b&gt;</div>")
    },

    tags_nestedChildren: () => {
      assertEq(ul([li("Item 1"), li("Item 2"), li("Item 3")]).outerHTML,
        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>")
      // Deeply nested
      assertEq(ul([[li("Item 1"), [li("Item 2")]], li("Item 3")]).outerHTML,
        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>")
    },

    tags_nullOrUndefinedAreIgnored: () => {
      assertEq(ul(li("Item 1"), li("Item 2"), undefined, li("Item 3"), null).outerHTML,
      "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>")
      assertEq(ul([li("Item 1"), li("Item 2"), undefined, li("Item 3"), null]).outerHTML,
        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>")
      // Deeply nested
      assertEq(ul([[undefined, li("Item 1"), null, [li("Item 2")]], null, li("Item 3"), undefined]).outerHTML,
        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>")
    },

    tags_nullPropValue: () => {
      const dom = button({onclick: null})
      assert(dom.onclick === null)
    },

    tags_stateAsProp_connected: withHiddenDom(async hiddenDom => {
      const href = van.state("http://example.com/")
      const dom = a({href}, "Test Link")
      van.add(hiddenDom, dom)
      assertEq(dom.href, "http://example.com/")
      href.val = "https://vanjs.org/"
      await sleep(waitMsForDerivations)
      assertEq(dom.href, "https://vanjs.org/")
    }),

    tags_stateAsProp_disconnected: async () => {
      const href = van.state("http://example.com/")
      const dom = a({href}, "Test Link")
      assertEq(dom.href, "http://example.com/")
      href.val = "https://vanjs.org/"
      await sleep(waitMsForDerivations)
      // href won't change as dom is not connected to document
      assertEq(dom.href, "http://example.com/")
    },

    tags_stateAsOnclickHandler_connected: withHiddenDom(async hiddenDom => {
      const dom = div()
      van.add(hiddenDom, dom)
      const handler = van.state(<EventListener | null>(() => van.add(dom, p("Button clicked!"))))
      van.add(dom, button({onclick: handler}))
      dom.querySelector("button")!.click()
      assertEq(dom.outerHTML, "<div><button></button><p>Button clicked!</p></div>")

      handler.val = () => van.add(dom, div("Button clicked!"))
      await sleep(waitMsForDerivations)
      dom.querySelector("button")!.click()
      assertEq(dom.outerHTML, "<div><button></button><p>Button clicked!</p><div>Button clicked!</div></div>")

      handler.val = null
      await sleep(waitMsForDerivations)
      dom.querySelector("button")!.click()
      assertEq(dom.outerHTML, "<div><button></button><p>Button clicked!</p><div>Button clicked!</div></div>")
    }),

    tags_stateAsOnclickHandler_disconnected: async () => {
      const dom = div()
      const handler = van.state(() => van.add(dom, p("Button clicked!")))
      van.add(dom, button({onclick: handler}))
      dom.querySelector("button")!.click()
      assertEq(dom.outerHTML, "<div><button></button><p>Button clicked!</p></div>")

      handler.val = () => van.add(dom, div("Button clicked!"))
      await sleep(waitMsForDerivations)
      dom.querySelector("button")!.click()
      // The onclick handler won't change as dom is not connected to document, as a result, the <p> element will be added
      assertEq(dom.outerHTML, "<div><button></button><p>Button clicked!</p><p>Button clicked!</p></div>")
    },

    tags_stateDerivedProp_connected: withHiddenDom(async hiddenDom => {
      const host = van.state("example.com")
      const path = van.state("/hello")
      const dom = a({href: () => `https://${host.val}${path.val}`}, "Test Link")
      van.add(hiddenDom, dom)
      assertEq(dom.href, "https://example.com/hello")
      host.val = "vanjs.org"
      path.val = "/start"
      await sleep(waitMsForDerivations)
      assertEq(dom.href, "https://vanjs.org/start")
    }),

    tags_stateDerivedProp_disconnected: async () => {
      const host = van.state("example.com")
      const path = van.state("/hello")
      const dom = a({href: () => `https://${host.val}${path.val}`}, "Test Link")
      assertEq(dom.href, "https://example.com/hello")
      host.val = "vanjs.org"
      path.val = "/start"
      await sleep(waitMsForDerivations)
      // href won't change as dom is not connected to document
      assertEq(dom.href, "https://example.com/hello")
    },

    tags_stateDerivedProp_nonStateDeps_connected: withHiddenDom(async hiddenDom => {
      const host = van.state("example.com")
      const path = "/hello"
      const dom = a({href: () => `https://${host.val}${path}`}, "Test Link")
      van.add(hiddenDom, dom)
      assertEq(dom.href, "https://example.com/hello")
      host.val = "vanjs.org"
      await sleep(waitMsForDerivations)
      assertEq(dom.href, "https://vanjs.org/hello")
    }),

    tags_stateDerivedProp_nonStateDeps_disconnected: async () => {
      const host = van.state("example.com")
      const path = "/hello"
      const dom = a({href: () => `https://${host.val}${path}`}, "Test Link")
      assertEq(dom.href, "https://example.com/hello")
      host.val = "vanjs.org"
      await sleep(waitMsForDerivations)
      // href won't change as dom is not connected to document
      assertEq(dom.href, "https://example.com/hello")
    },

    tags_stateDerivedProp_errorThrown_connected: withHiddenDom(async hiddenDom => {
      const text = van.state("hello")
      const dom = div(
        div(
          {
            class: () => {
              if (text.val === "fail") throw new Error()
              return text.val
            },
            "data-name": text,
          },
          text,
        ),
        div(
          {
            class: () => {
              if (text.val === "fail") throw new Error()
              return text.val
            },
            "data-name": text,
          },
          text,
        ),
      )
      van.add(hiddenDom, dom)
      assertEq(dom.outerHTML, '<div><div class="hello" data-name="hello">hello</div><div class="hello" data-name="hello">hello</div></div>')

      text.val = "fail"
      await sleep(waitMsForDerivations)
      // The binding function for `class` property throws an error.
      // We want to validate the `class` property won't be updated because of the error,
      // but other properties and child nodes are updated as usual.
      assertEq(dom.outerHTML, '<div><div class="hello" data-name="fail">fail</div><div class="hello" data-name="fail">fail</div></div>')
    }),

    tags_stateDerivedProp_errorThrown_disconnected: async () => {
      const text = van.state("hello")
      const dom = div(
        div(
          {
            class: () => {
              if (text.val === "fail") throw new Error()
              return text.val
            },
            "data-name": text,
          },
          text,
        ),
        div(
          {
            class: () => {
              if (text.val === "fail") throw new Error()
              return text.val
            },
            "data-name": text,
          },
          text,
        ),
      )
      assertEq(dom.outerHTML, '<div><div class="hello" data-name="hello">hello</div><div class="hello" data-name="hello">hello</div></div>')

      text.val = "fail"
      await sleep(waitMsForDerivations)
      // `dom` won't change as it's not connected to document
      assertEq(dom.outerHTML, '<div><div class="hello" data-name="hello">hello</div><div class="hello" data-name="hello">hello</div></div>')
    },

    tags_stateDerivedOnclickHandler_connected: withHiddenDom(async hiddenDom => {
      const elementName = van.state("p")
      van.add(hiddenDom, button({
        onclick: van.derive(() => {
          const name = elementName.val
          return name ? () => van.add(hiddenDom, van.tags[name]("Button clicked!")) : null
        }),
      }))
      hiddenDom.querySelector("button")!.click()
      assertEq(hiddenDom.innerHTML, "<button></button><p>Button clicked!</p>")

      elementName.val = "div"
      await sleep(waitMsForDerivations)
      hiddenDom.querySelector("button")!.click()
      assertEq(hiddenDom.innerHTML, "<button></button><p>Button clicked!</p><div>Button clicked!</div>")

      elementName.val = ""
      await sleep(waitMsForDerivations)
      hiddenDom.querySelector("button")!.click()
      assertEq(hiddenDom.innerHTML, "<button></button><p>Button clicked!</p><div>Button clicked!</div>")
    }),

    tags_stateDerivedOnclickHandler_disconnected: async() => {
      const dom = div()
      const elementName = van.state("p")
      van.add(dom, button({
        onclick: van.derive(() => {
          const name = elementName.val
          return name ? () => van.add(dom, van.tags[name]("Button clicked!")) : null
        }),
      }))
      dom.querySelector("button")!.click()
      assertEq(dom.innerHTML, "<button></button><p>Button clicked!</p>")

      elementName.val = "div"
      await sleep(waitMsForDerivations)
      // The onclick handler won't change as `dom` is not connected to document,
      // as a result, the <p> element will be added.
      dom.querySelector("button")!.click()
      assertEq(dom.innerHTML, "<button></button><p>Button clicked!</p><p>Button clicked!</p>")
    },

    tags_dataAttributes_connected: withHiddenDom(async hiddenDom => {
      const lineNum = van.state(1)
      const dom = div({
        "data-type": "line",
        "data-id": lineNum,
        "data-line": () => `line=${lineNum.val}`,
      },
        "This is a test line",
      )
      van.add(hiddenDom, dom)
      assertEq(dom.outerHTML, '<div data-type="line" data-id="1" data-line="line=1">This is a test line</div>')

      lineNum.val = 3
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, '<div data-type="line" data-id="3" data-line="line=3">This is a test line</div>')
    }),

    tags_dataAttributes_disconnected: async () => {
      const lineNum = van.state(1)
      const dom = div({
        "data-type": "line",
        "data-id": lineNum,
        "data-line": () => `line=${lineNum.val}`,
      },
        "This is a test line",
      )
      assertEq(dom.outerHTML, '<div data-type="line" data-id="1" data-line="line=1">This is a test line</div>')

      lineNum.val = 3
      await sleep(waitMsForDerivations)
      // Attributes won't change as dom is not connected to document
      assertEq(dom.outerHTML, '<div data-type="line" data-id="1" data-line="line=1">This is a test line</div>')
    },

    tags_readonlyProps_connected: withHiddenDom(async hiddenDom => {
      const form = van.state("form1")
      const dom = button({form}, "Button")
      van.add(hiddenDom, dom)
      assertEq(dom.outerHTML, '<button form="form1">Button</button>')

      form.val = "form2"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, '<button form="form2">Button</button>')

      assertEq(input({list: "datalist1"}).outerHTML, '<input list="datalist1">')
    }),

    tags_readonlyProps_disconnected: async () => {
      const form = van.state("form1")
      const dom = button({form}, "Button")
      assertEq(dom.outerHTML, '<button form="form1">Button</button>')

      form.val = "form2"
      await sleep(waitMsForDerivations)
      // Attributes won't change as dom is not connected to document
      assertEq(dom.outerHTML, '<button form="form1">Button</button>')

      assertEq(input({list: "datalist1"}).outerHTML, '<input list="datalist1">')
    },

    tags_customEventHandler: () => {
      const dom = div(button({oncustom: () => van.add(dom, p("Event triggered!"))}))
      dom.querySelector("button")!.dispatchEvent(new Event("custom"))
      assertEq(dom.innerHTML, "<button></button><p>Event triggered!</p>")
    },

    tags_stateAsCustomEventHandler: withHiddenDom(async hiddenDom => {
      const oncustom = van.state(() => van.add(hiddenDom, p("Handler 1 triggered!")))
      van.add(hiddenDom, button({oncustom}))
      hiddenDom.querySelector("button")!.dispatchEvent(new Event("custom"))
      assertEq(hiddenDom.innerHTML, "<button></button><p>Handler 1 triggered!</p>")

      oncustom.val = () => van.add(hiddenDom, p("Handler 2 triggered!"))
      await sleep(waitMsForDerivations)
      hiddenDom.querySelector("button")!.dispatchEvent(new Event("custom"))
      assertEq(hiddenDom.innerHTML,
        "<button></button><p>Handler 1 triggered!</p><p>Handler 2 triggered!</p>")
    }),

    tags_stateDerivedCustomEventHandler: withHiddenDom(async hiddenDom => {
      const handlerType = van.state(1)
      van.add(hiddenDom, button({
        oncustom: van.derive(() => handlerType.val === 1 ?
          () => van.add(hiddenDom, p("Handler 1 triggered!")) :
          () => van.add(hiddenDom, p("Handler 2 triggered!"))
        ),
      }))
      hiddenDom.querySelector("button")!.dispatchEvent(new Event("custom"))
      assertEq(hiddenDom.innerHTML, "<button></button><p>Handler 1 triggered!</p>")

      handlerType.val = 2
      await sleep(waitMsForDerivations)
      hiddenDom.querySelector("button")!.dispatchEvent(new Event("custom"))
      assertEq(hiddenDom.innerHTML,
        "<button></button><p>Handler 1 triggered!</p><p>Handler 2 triggered!</p>")
    }),

    tags_stateAsChild_connected: withHiddenDom(async hiddenDom => {
      const line2 = van.state(<string | null>"Line 2")
      const dom = div(
        pre("Line 1"),
        pre(line2),
        pre("Line 3")
      )
      van.add(hiddenDom, dom)
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>")

      line2.val = "Line 2: Extra Stuff"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre>Line 2: Extra Stuff</pre><pre>Line 3</pre></div>")

      // null to remove text DOM
      line2.val = null
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre></pre><pre>Line 3</pre></div>")

      // Resetting the state won't bring the text DOM back
      line2.val = "Line 2"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre></pre><pre>Line 3</pre></div>")
    }),

    tags_stateAsChild_disconnected: async () => {
      const line2 = van.state(<string | null>"Line 2")
      const dom = div(
        pre("Line 1"),
        pre(line2),
        pre("Line 3")
      )
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>")

      line2.val = "Line 2: Extra Stuff"
      await sleep(waitMsForDerivations)
      // Content won't change as dom is not connected to document
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>")

      line2.val = null
      await sleep(waitMsForDerivations)
      // Content won't change as dom is not connected to document
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>")
    },

    tags_stateAsChild_emptyStrWontDeleteDom: withHiddenDom(async hiddenDom => {
      const text = van.state("Text")
      const dom = p(text)
      van.add(hiddenDom, dom)
      assertEq(dom.outerHTML, "<p>Text</p>")
      text.val = ""
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<p></p>")
      text.val = "Text"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<p>Text</p>")
    }),

    tags_svg: () => {
      const {circle, path, svg} = van.tags("http://www.w3.org/2000/svg")
      const dom = svg({width: "16px", viewBox: "0 0 50 50"},
        circle({cx: "25", cy: "25", "r": "20", stroke: "black", "stroke-width": "2", fill: "yellow"}),
        circle({cx: "16", cy: "20", "r": "2", stroke: "black", "stroke-width": "2", fill: "black"}),
        circle({cx: "34", cy: "20", "r": "2", stroke: "black", "stroke-width": "2", fill: "black"}),
        path({"d": "M 15 30 Q 25 40, 35 30", stroke: "black", "stroke-width": "2", fill: "transparent"}),
      )
      assertEq(dom.outerHTML, '<svg width="16px" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" stroke="black" stroke-width="2" fill="yellow"></circle><circle cx="16" cy="20" r="2" stroke="black" stroke-width="2" fill="black"></circle><circle cx="34" cy="20" r="2" stroke="black" stroke-width="2" fill="black"></circle><path d="M 15 30 Q 25 40, 35 30" stroke="black" stroke-width="2" fill="transparent"></path></svg>')
    },

    tags_math: () => {
      const {math, mi, mn, mo, mrow, msup} = van.tags("http://www.w3.org/1998/Math/MathML")
      const dom = math(msup(mi("e"), mrow(mi("i"), mi("π"))), mo("+"), mn("1"), mo("="), mn("0"))
      assertEq(dom.outerHTML, '<math><msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup><mo>+</mo><mn>1</mn><mo>=</mo><mn>0</mn></math>')
    },

    add_basic: () => {
      const dom = ul()
      assertEq(van.add(dom, li("Item 1"), li("Item 2")), dom)
      assertEq(dom.outerHTML, "<ul><li>Item 1</li><li>Item 2</li></ul>")
      assertEq(van.add(dom, li("Item 3"), li("Item 4"), li("Item 5")), dom)
      assertEq(dom.outerHTML, "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>")
      // No-op if no children specified
      assertEq(van.add(dom), dom)
      assertEq(dom.outerHTML, "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>")
    },

    add_nestedChildren: () => {
      const dom = ul()
      assertEq(van.add(dom, [li("Item 1"), li("Item 2")]), dom)
      assertEq(dom.outerHTML, "<ul><li>Item 1</li><li>Item 2</li></ul>")
      // Deeply nested
      assertEq(van.add(dom, [[li("Item 3"), [li("Item 4")]], li("Item 5")]), dom)
      assertEq(dom.outerHTML, "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>")
      // No-op if no children specified
      assertEq(van.add(dom, [[[]]]), dom)
      assertEq(dom.outerHTML, "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>")
    },

    add_nullOrUndefinedAreIgnored: () => {
      const dom = ul()
      assertEq(van.add(dom, li("Item 1"), li("Item 2"), undefined, li("Item 3"), null), dom)
      assertEq(dom.outerHTML, "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>")
      assertEq(van.add(dom, [li("Item 4"), li("Item 5"), undefined, li("Item 6"), null]), dom)
      assertEq(dom.outerHTML,
        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li></ul>")
      // Deeply nested
      assertEq(van.add(dom, [[undefined, li("Item 7"), null, [li("Item 8")]], null, li("Item 9"), undefined]), dom)
      assertEq(dom.outerHTML,
        "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li></ul>")
    },

    add_addState_connected: withHiddenDom(async hiddenDom => {
      const line2 = van.state(<string | null>"Line 2")
      assertEq(van.add(hiddenDom,
        pre("Line 1"),
        pre(line2),
        pre("Line 3")
      ), hiddenDom)
      assertEq(hiddenDom.outerHTML, '<div class="hidden"><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>')

      line2.val = "Line 2: Extra Stuff"
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.outerHTML, '<div class="hidden"><pre>Line 1</pre><pre>Line 2: Extra Stuff</pre><pre>Line 3</pre></div>')

      // null to remove text DOM
      line2.val = null
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.outerHTML, '<div class="hidden"><pre>Line 1</pre><pre></pre><pre>Line 3</pre></div>')

      // Resetting the state won't bring the text DOM back
      line2.val = "Line 2"
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.outerHTML, '<div class="hidden"><pre>Line 1</pre><pre></pre><pre>Line 3</pre></div>')
    }),

    add_addState_disconnected: async () => {
      const line2 = van.state(<string | null>"Line 2")
      const dom = div()
      assertEq(van.add(dom,
        pre("Line 1"),
        pre(line2),
        pre("Line 3")
      ), dom)
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>")

      line2.val = "Line 2: Extra Stuff"
      await sleep(waitMsForDerivations)
      // Content won't change as dom is not connected to document
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>")

      line2.val = null
      await sleep(waitMsForDerivations)
      // Content won't change as dom is not connected to document
      assertEq(dom.outerHTML, "<div><pre>Line 1</pre><pre>Line 2</pre><pre>Line 3</pre></div>")
    },

    state_valAndOldVal: withHiddenDom(async hiddenDom => {
      const s = van.state("State Version 1")
      assertEq(s.val, "State Version 1")
      assertEq(s.oldVal, "State Version 1")

      // If the state object doesn't have any bindings, we directly update the `oldVal`
      s.val = "State Version 2"
      assertEq(s.val, "State Version 2")
      assertEq(s.oldVal, "State Version 2")

      van.add(hiddenDom, s)
      // If the state object has some bindings, `oldVal` refers to its old value until DOM update completes
      s.val = "State Version 3"
      assertEq(s.val, "State Version 3")
      assertEq(s.oldVal, "State Version 2")
      await sleep(waitMsForDerivations)
      assertEq(s.val, "State Version 3")
      assertEq(s.oldVal, "State Version 3")
    }),

    state_rawVal: withHiddenDom(async hiddenDom => {
      const history: number[] = []
      const a = van.state(3), b = van.state(5)
      const s = van.derive(() => a.rawVal + b.val)
      van.derive(() => history.push(a.rawVal + b.val))

      van.add(hiddenDom,
        input({type: "text", value: () => a.rawVal + b.val}),
        p(() => a.rawVal + b.val)
      )

      assertEq(s.val, 8)
      assertEq(JSON.stringify(history), "[8]")
      assertEq(hiddenDom.querySelector("input")!.value, "8")
      assertEq(hiddenDom.querySelector("p")!.innerText, "8")

      // Changing the `val` of `a` won't trigger the derived states, side effects, state-derived
      // properties and state-derived child nodes, as the value of `a` is accessed via `a.rawVal`.
      ++a.val
      await sleep(waitMsForDerivations)
      assertEq(s.val, 8)
      assertEq(JSON.stringify(history), "[8]")
      assertEq(hiddenDom.querySelector("input")!.value, "8")
      assertEq(hiddenDom.querySelector("p")!.innerText, "8")

      // Changing the `val` of `b` will trigger the derived states, side effects, state-derived
      // properties and state-derived child nodes, as the value of `b` is accessed via `b.rawVal`.
      ++b.val
      await sleep(waitMsForDerivations)
      assertEq(s.val, 10)
      assertEq(JSON.stringify(history), "[8,10]")
      assertEq(hiddenDom.querySelector("input")!.value, "10")
      assertEq(hiddenDom.querySelector("p")!.innerText, "10")
    }),

    derive_sideEffect: async () => {
      const history: string[] = []
      const s = van.state("This")
      van.derive(() => history.push(s.val))
      assertEq(JSON.stringify(history), '["This"]')

      s.val = "is"
      await sleep(waitMsForDerivations)
      assertEq(JSON.stringify(history), '["This","is"]')

      s.val = "a"
      await sleep(waitMsForDerivations)
      assertEq(JSON.stringify(history), '["This","is","a"]')

      s.val = "test"
      await sleep(waitMsForDerivations)
      assertEq(JSON.stringify(history), '["This","is","a","test"]')

      s.val = "test"
      await sleep(waitMsForDerivations)
      assertEq(JSON.stringify(history), '["This","is","a","test"]')

      s.val = "test2"
      // "Test2" won't be added into `history` as `s` will be set to "test3" immediately
      s.val = "test3"
      await sleep(waitMsForDerivations)
      assertEq(JSON.stringify(history), '["This","is","a","test","test3"]')
    },

    derive_derivedState: async () => {
      const numItems = van.state(0)
      const items = van.derive(() => [...Array(numItems.val).keys()].map(i => `Item ${i + 1}`))
      const selectedIndex = van.derive(() => (items.val, 0))
      const selectedItem = van.derive(() => items.val[selectedIndex.val])

      numItems.val = 3
      await sleep(waitMsForDerivations)
      assertEq(numItems.val, 3)
      assertEq(items.val.join(","), "Item 1,Item 2,Item 3")
      assertEq(selectedIndex.val, 0)
      assertEq(selectedItem.val, "Item 1")

      selectedIndex.val = 2
      await sleep(waitMsForDerivations)
      assertEq(selectedIndex.val, 2)
      assertEq(selectedItem.val, "Item 3")

      numItems.val = 5
      await sleep(waitMsForDerivations)
      assertEq(numItems.val, 5)
      assertEq(items.val.join(","), "Item 1,Item 2,Item 3,Item 4,Item 5")
      assertEq(selectedIndex.val, 0)
      assertEq(selectedItem.val, "Item 1")

      selectedIndex.val = 3
      await sleep(waitMsForDerivations)
      assertEq(selectedIndex.val, 3)
      assertEq(selectedItem.val, "Item 4")
    },

    derive_conditionalDerivedState: async () => {
      const cond = van.state(true)
      const a = van.state(1), b = van.state(2), c = van.state(3), d = van.state(4)
      let numEffectTriggered = 0
      const sum = van.derive(() => (++numEffectTriggered, cond.val ? a.val + b.val : c.val + d.val))

      assertEq(sum.val, 3)
      assertEq(numEffectTriggered, 1)

      a.val = 11
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 13)
      assertEq(numEffectTriggered, 2)

      b.val = 12
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 23)
      assertEq(numEffectTriggered, 3)

      // Changing c or d won't triggered the effect as they're not its current dependencies
      c.val = 13
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 23)
      assertEq(numEffectTriggered, 3)

      d.val = 14
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 23)
      assertEq(numEffectTriggered, 3)

      cond.val = false
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 27)
      assertEq(numEffectTriggered, 4)

      c.val = 23
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 37)
      assertEq(numEffectTriggered, 5)

      d.val = 24
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 47)
      assertEq(numEffectTriggered, 6)

      // Changing a or b won't triggered the effect as they're not its current dependencies
      a.val = 21
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 47)
      assertEq(numEffectTriggered, 6)

      b.val = 22
      await sleep(waitMsForDerivations)
      assertEq(sum.val, 47)
      assertEq(numEffectTriggered, 6)
    },

    derive_errorThrown: async () => {
      const s0 = van.state(1)
      const s1 = van.derive(() => s0.val * 2)
      const s2 = van.derive(() => {
        if (s0.val > 1) throw new Error()
        return s0.val
      })
      const s3 = van.derive(() => s0.val * s0.val)

      assertEq(s1.val, 2)
      assertEq(s2.val, 1)
      assertEq(s3.val, 1)

      s0.val = 3
      await sleep(waitMsForDerivations)
      // The derivation function for `s2` throws an error.
      // We want to validate the `val` of `s2` remains the same because of the error,
      // but other derived states are updated as usual.
      assertEq(s1.val, 6)
      assertEq(s2.val, 1)
      assertEq(s3.val, 9)
    },

    derive_selfRef: withHiddenDom(async hiddenDom => {
      const CheckboxCounter = () => {
        const checked = van.state(false), numChecked = van.state(0)
        van.derive(() => {
          if (checked.val) ++numChecked.val
        })

        return div(
          input({type: "checkbox", checked, onclick: e => checked.val = e.target.checked}),
          " Checked ", numChecked, " times. ",
          button({onclick: () => numChecked.val = 0}, "Reset"),
        )
      }

      van.add(hiddenDom, CheckboxCounter())

      assertEq(hiddenDom.innerHTML, '<div><input type="checkbox"> Checked 0 times. <button>Reset</button></div>')

      hiddenDom.querySelector("input")!.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<div><input type="checkbox"> Checked 1 times. <button>Reset</button></div>')

      hiddenDom.querySelector("input")!.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<div><input type="checkbox"> Checked 1 times. <button>Reset</button></div>')

      hiddenDom.querySelector("input")!.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<div><input type="checkbox"> Checked 2 times. <button>Reset</button></div>')

      hiddenDom.querySelector("button")!.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<div><input type="checkbox"> Checked 0 times. <button>Reset</button></div>')
    }),

    derive_minimizeDerivations: async () => {
      const a = van.state(3), b = van.state(5)
      let numDerivations = 0
      const s = van.derive(() => {
        ++numDerivations
        return a.val + b.val
      })

      assertEq(s.val, 8)
      assertEq(numDerivations, 1)

      // Both `a` and `b` will change. `s` will only be re-derived once
      ++a.val, ++b.val
      await sleep(waitMsForDerivations)
      assertEq(s.val, 10)
      assertEq(numDerivations, 2)

      // `a` will change, and then change back. No derivation will happen
      ++a.val, --a.val
      await sleep(waitMsForDerivations)
      assertEq(s.val, 10)
      assertEq(numDerivations, 2)
    },

    derive_multiLayerDerivations: withHiddenDom(async hiddenDom => {
      const a = van.state(1), b = van.derive(() => a.val * a.val)
      const c = van.derive(() => b.val * b.val), d = van.derive(() => c.val * c.val)

      let numSDerived = 0, numSSquaredDerived = 0
      const s = van.derive(() => {
        ++numSDerived
        return a.val + b.val + c.val + d.val
      })

      van.add(hiddenDom, "a = ", a, " b = ", b, " c = ", c, " d = ", d, " s = ", s,
        " s^2 = ", () => {
          ++numSSquaredDerived
          return s.val * s.val
        }
      )

      assertEq(hiddenDom.innerHTML, "a = 1 b = 1 c = 1 d = 1 s = 4 s^2 = 16")
      assertEq(numSDerived, 1)
      assertEq(numSSquaredDerived, 1)

      ++a.val
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, "a = 2 b = 4 c = 16 d = 256 s = 278 s^2 = 77284")
      // `s` is derived 4 times, triggered by `a`, `b`, `c`, `d`, respectively.
      assertEq(numSDerived, 5)
      // `s^2` (the `s` derived Text node), is only derived once per one DOM update cycle.
      assertEq(numSSquaredDerived, 2)
    }),

    derive_circularDependency: async () => {
      const a = van.state(1), b = van.derive(() => a.val + 1)
      van.derive(() => a.val = b.val + 1)

      // `a` and `b` are circular dependency. But derivations will stop after limited number of
      // iterations.
      ++a.val
      await sleep(waitMsForDerivations)
      assertEq(a.val, 104)
      assertEq(b.val, 103)
    },

    stateDerivedChild_dynamicDom: withHiddenDom(async hiddenDom => {
      const verticalPlacement = van.state(false)
      const button1Text = van.state("Button 1"), button2Text = van.state("Button 2"), button3Text = van.state("Button 3")

      const domFunc = () => verticalPlacement.val ? div(
        div(button(button1Text)),
        div(button(button2Text)),
        div(button(button3Text)),
      ) : div(
        button(button1Text), button(button2Text), button(button3Text),
      )
      assertEq(van.add(hiddenDom, domFunc), hiddenDom)

      const dom = <Element>hiddenDom.firstChild
      assertEq(dom.outerHTML, "<div><button>Button 1</button><button>Button 2</button><button>Button 3</button></div>")
      button2Text.val = "Button 2: Extra"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><button>Button 1</button><button>Button 2: Extra</button><button>Button 3</button></div>")

      verticalPlacement.val = true
      await sleep(waitMsForDerivations)

      // dom is disconnected from the document thus it won't be updated
      assertEq(dom.outerHTML, "<div><button>Button 1</button><button>Button 2: Extra</button><button>Button 3</button></div>")
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><div><button>Button 1</button></div><div><button>Button 2: Extra</button></div><div><button>Button 3</button></div></div>")
      button2Text.val = "Button 2: Extra Extra"
      await sleep(waitMsForDerivations)
      // Since dom is disconnected from document, its inner button won't be reactive to state changes
      assertEq(dom.outerHTML, "<div><button>Button 1</button><button>Button 2: Extra</button><button>Button 3</button></div>")
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><div><button>Button 1</button></div><div><button>Button 2: Extra Extra</button></div><div><button>Button 3</button></div></div>")
    }),

    stateDerivedChild_conditionalDomFunc: withHiddenDom(async hiddenDom => {
      const cond = van.state(true)
      const button1 = van.state("Button 1"), button2 = van.state("Button 2")
      const button3 = van.state("Button 3"), button4 = van.state("Button 4")
      let numFuncCalled = 0
      const domFunc = () => (++numFuncCalled, cond.val ?
        div(button(button1.val), button(button2.val)) :
        div(button(button3.val), button(button4.val)))
      assertEq(van.add(hiddenDom, domFunc), hiddenDom)

      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 1</button><button>Button 2</button></div>")
      assertEq(numFuncCalled, 1)

      button1.val = "Button 1-1"
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 1-1</button><button>Button 2</button></div>")
      assertEq(numFuncCalled, 2)

      button2.val = "Button 2-1"
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 1-1</button><button>Button 2-1</button></div>")
      assertEq(numFuncCalled, 3)

      // Changing button3 or button4 won't triggered the effect as they're not its current dependencies
      button3.val = "Button 3-1"
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 1-1</button><button>Button 2-1</button></div>")
      assertEq(numFuncCalled, 3)

      button4.val = "Button 4-1"
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 1-1</button><button>Button 2-1</button></div>")
      assertEq(numFuncCalled, 3)

      cond.val = false
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 3-1</button><button>Button 4-1</button></div>")
      assertEq(numFuncCalled, 4)

      button3.val = "Button 3-2"
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 3-2</button><button>Button 4-1</button></div>")
      assertEq(numFuncCalled, 5)

      button4.val = "Button 4-2"
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 3-2</button><button>Button 4-2</button></div>")
      assertEq(numFuncCalled, 6)

      // Changing button1 or button2 won't triggered the effect as they're not its current dependencies
      button1.val = "Button 1-2"
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 3-2</button><button>Button 4-2</button></div>")
      assertEq(numFuncCalled, 6)

      button1.val = "Button 2-2"
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, "<div><button>Button 3-2</button><button>Button 4-2</button></div>")
      assertEq(numFuncCalled, 6)
    }),

    stateDerivedChild_statefulDynamicDom: withHiddenDom(async hiddenDom => {
      const numItems = van.state(0)
      const items = van.derive(() => [...Array(numItems.val).keys()].map(i => `Item ${i + 1}`))
      const selectedIndex = van.derive(() => (items.val, 0))

      const domFunc = (dom?: Element) => {
        // If items aren't changed, we don't need to regenerate the entire dom
        if (dom && items.val === items.oldVal) {
          const itemDoms = dom.childNodes;
          (<Element>itemDoms[selectedIndex.oldVal]).classList.remove("selected");
          (<Element>itemDoms[selectedIndex.val]).classList.add("selected")
          return dom
        }

        return ul(
          items.val.map((item, i) => li({class: i === selectedIndex.val ? "selected" : ""}, item))
        )
      }
      van.add(hiddenDom, domFunc)

      numItems.val = 3
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, '<ul><li class="selected">Item 1</li><li class="">Item 2</li><li class="">Item 3</li></ul>')
      const rootDom1stIteration = <Element>hiddenDom.firstChild

      selectedIndex.val = 1
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, '<ul><li class="">Item 1</li><li class="selected">Item 2</li><li class="">Item 3</li></ul>')
      // Items aren't changed, thus we don't need to regenerate the dom
      assertEq(hiddenDom.firstChild!, rootDom1stIteration)

      numItems.val = 5
      await sleep(waitMsForDerivations)
      // Items are changed, thus the dom for the list is regenerated
      assertEq((<Element>hiddenDom.firstChild).outerHTML, '<ul><li class="selected">Item 1</li><li class="">Item 2</li><li class="">Item 3</li><li class="">Item 4</li><li class="">Item 5</li></ul>')
      assert(hiddenDom.firstChild !== rootDom1stIteration)
      // rootDom1stIteration is disconnected from the document and remain unchanged
      assertEq(rootDom1stIteration.outerHTML, '<ul><li class="">Item 1</li><li class="selected">Item 2</li><li class="">Item 3</li></ul>')
      const rootDom2ndIteration = hiddenDom.firstChild!

      selectedIndex.val = 2
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).outerHTML, '<ul><li class="">Item 1</li><li class="">Item 2</li><li class="selected">Item 3</li><li class="">Item 4</li><li class="">Item 5</li></ul>')
      // Items aren't changed, thus we don't need to regenerate the dom
      assertEq(hiddenDom.firstChild!, rootDom2ndIteration)
      // rootDom1stIteration won't be updated as it has already been disconnected from the document
      assertEq(rootDom1stIteration.outerHTML, '<ul><li class="">Item 1</li><li class="selected">Item 2</li><li class="">Item 3</li></ul>')
    }),

    stateDerivedChild_nullToRemoveDom: withHiddenDom(async hiddenDom => {
      const line1 = van.state("Line 1"), line2 = van.state("Line 2"), line3 = van.state(<string | null>"Line 3"), line4 = van.state(""), line5 = van.state(null)

      const dom = div(
        () => line1.val === "" ? null : p(line1.val),
        () => line2.val === "" ? null : p(line2.val),
        p(line3),
        // line4 won't appear in the DOM tree as its initial value is null
        () => line4.val === "" ? null : p(line4.val),
        // line5 won't appear in the DOM tree as its initial value is null
        p(line5),
      )
      van.add(hiddenDom, dom)

      assertEq(dom.outerHTML, "<div><p>Line 1</p><p>Line 2</p><p>Line 3</p><p></p></div>")
      // Delete Line 2
      line2.val = ""
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><p>Line 1</p><p>Line 3</p><p></p></div>")

      // Deleted dom won't be brought back, even the underlying state is changed back
      line2.val = "Line 2"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><p>Line 1</p><p>Line 3</p><p></p></div>")

      // Delete Line 3
      line3.val = null
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><p>Line 1</p><p></p><p></p></div>")

      // Deleted dom won't be brought back, even the underlying state is changed back
      line3.val = "Line 3"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><p>Line 1</p><p></p><p></p></div>")
    }),

    stateDerivedChild_undefinedToRemoveDom: withHiddenDom(async hiddenDom => {
      const line1 = van.state("Line 1"), line2 = van.state("Line 2"), line3 = van.state(<string | undefined>"Line 3"), line4 = van.state(""), line5 = van.state(undefined)

      const dom = div(
        () => line1.val === "" ? null : p(line1.val),
        () => line2.val === "" ? null : p(line2.val),
        p(line3),
        // line4 won't appear in the DOM tree as its initial value is null
        () => line4.val === "" ? null : p(line4.val),
        // line5 won't appear in the DOM tree as its initial value is null
        p(line5),
      )
      van.add(hiddenDom, dom)

      assertEq(dom.outerHTML, "<div><p>Line 1</p><p>Line 2</p><p>Line 3</p><p></p></div>")
      // Delete Line 2
      line2.val = ""
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><p>Line 1</p><p>Line 3</p><p></p></div>")

      // Deleted dom won't be brought back, even the underlying state is changed back
      line2.val = "Line 2"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><p>Line 1</p><p>Line 3</p><p></p></div>")

      // Delete Line 3
      line3.val = undefined
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><p>Line 1</p><p></p><p></p></div>")

      // Deleted dom won't be brought back, even the underlying state is changed back
      line3.val = "Line 3"
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div><p>Line 1</p><p></p><p></p></div>")
    }),

    stateDerivedChild_0ToNotRemoveDom: withHiddenDom(async hiddenDom => {
      const state1 = van.state(0), state2 = van.state(1)
      const dom = div(state1, () => 1 - state1.val, state2, () => 1 - state2.val)
      van.add(hiddenDom, dom)

      assertEq(dom.outerHTML, "<div>0110</div>")

      state1.val = 1, state2.val = 0
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div>1001</div>")
    }),

    stateDerivedChild_dynamicPrimitive: withHiddenDom(async hiddenDom => {
      const a = van.state(1), b = van.state(2), deleted = van.state(false)
      const dom = div(() => deleted.val ? null : a.val + b.val)
      assertEq(dom.outerHTML, "<div>3</div>")
      van.add(hiddenDom, dom)

      a.val = 6
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div>8</div>")

      b.val = 5
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div>11</div>")

      deleted.val = true
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div></div>")

      // Deleted dom won't be brought back, even the underlying state is changed back
      deleted.val = false
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<div></div>")
    }),

    stateDerivedChild_nonStateDeps: withHiddenDom(async hiddenDom => {
      const part1 = "👋Hello ", part2 = van.state("🗺️World")

      assertEq(
        van.add(hiddenDom,
          () => `${part1}${part2.val}, from: ${part1}${part2.oldVal}`),
        hiddenDom)

      const dom = <Element>hiddenDom.firstChild
      assertEq(dom.textContent!, "👋Hello 🗺️World, from: 👋Hello 🗺️World")
      assertEq(hiddenDom.innerHTML, "👋Hello 🗺️World, from: 👋Hello 🗺️World")

      part2.val = "🍦VanJS"
      await sleep(waitMsForDerivations)

      // dom is disconnected from the document thus it won't be updated
      assertEq(dom.textContent!, "👋Hello 🗺️World, from: 👋Hello 🗺️World")
      assertEq(hiddenDom.innerHTML, "👋Hello 🍦VanJS, from: 👋Hello 🗺️World")
    }),

    stateDerivedChild_oldVal: withHiddenDom(async hiddenDom => {
      const text = van.state("Old Text")

      assertEq(van.add(hiddenDom, () => `From: "${text.oldVal}" to: "${text.val}"`), hiddenDom)

      const dom = <Element>hiddenDom.firstChild
      assertEq(dom.textContent!, 'From: "Old Text" to: "Old Text"')
      assertEq(hiddenDom.innerHTML, 'From: "Old Text" to: "Old Text"')

      text.val = "New Text"
      await sleep(waitMsForDerivations)

      // dom is disconnected from the document thus it won't be updated
      assertEq(dom.textContent!, 'From: "Old Text" to: "Old Text"')
      assertEq(hiddenDom.innerHTML, 'From: "Old Text" to: "New Text"')
    }),

    stateDerivedChild_errorThrown: withHiddenDom(async hiddenDom => {
      const num = van.state(0)

      assertEq(van.add(hiddenDom,
        num,
        () => {
          if (num.val > 0) throw new Error()
          return span("ok")
        },
        num
      ), hiddenDom)

      assertEq(hiddenDom.innerHTML, "0<span>ok</span>0")

      num.val = 1
      await sleep(waitMsForDerivations)
      // The binding function 2nd child of hiddenDom throws an error.
      // We want to validate the 2nd child won't be updated because of the error,
      // but other DOM nodes are updated as usual
      assertEq(hiddenDom.innerHTML, "1<span>ok</span>1")
    }),

    hydrate_normal: withHiddenDom(async hiddenDom => {
      const Counter = (init: number) => {
        const counter = van.state(init)
        return button({"data-counter": counter, onclick: () => ++counter.val},
          () => `Count: ${counter.val}`,
        )
      }
      // Static DOM before hydration
      hiddenDom.innerHTML = Counter(5).outerHTML

      // Before hydration, the counter is not reactive
      hiddenDom.querySelector("button")!.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<button data-counter="5">Count: 5</button>')

      van.hydrate(hiddenDom.querySelector("button")!,
        dom => Counter(Number(dom.getAttribute("data-counter"))))

      // After hydration, the counter is reactive
      hiddenDom.querySelector("button")!.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<button data-counter="6">Count: 6</button>')
    }),

    hydrate_nullToRemoveDom: withHiddenDom(async hiddenDom => {
      // Remove the DOM node upon hydration
      van.add(hiddenDom, div())
      van.hydrate(hiddenDom.querySelector("div")!, () => null)
      assertEq(hiddenDom.innerHTML, "")

      // Remove the DOM node after the state update
      van.add(hiddenDom, div())
      const s = van.state(1)
      van.hydrate(<HTMLElement>hiddenDom.querySelector("div"), () => s.val === 1 ? pre() : null)
      assertEq(hiddenDom.innerHTML, "<pre></pre>")
      s.val = 2
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, "")
    }),

    hydrate_undefinedToRemoveDom: withHiddenDom(async hiddenDom => {
      // Remove the DOM node upon hydration
      van.add(hiddenDom, div())
      van.hydrate(hiddenDom.querySelector("div")!, () => undefined)
      assertEq(hiddenDom.innerHTML, "")

      // Remove the DOM node after the state update
      van.add(hiddenDom, div())
      const s = van.state(1)
      van.hydrate(<HTMLElement>hiddenDom.querySelector("div"), () => s.val === 1 ? pre() : undefined)
      assertEq(hiddenDom.innerHTML, "<pre></pre>")
      s.val = 2
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, "")
    }),

    hydrate_0NotToRemoveDom: withHiddenDom(async hiddenDom => {
      van.add(hiddenDom, div(), div())

      const s = van.state(0)
      const [dom1, dom2] = hiddenDom.querySelectorAll("div")

      van.hydrate(dom1, <any>(() => s.val))
      van.hydrate(dom2, <any>(() => 1 - s.val))
      assertEq(hiddenDom.innerHTML, "01")

      s.val = 1
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, "10")
    }),
  }

  const debugTests = {
    tags_invalidProp_nonFuncOnHandler: async () => {
      const counter = van.state(0)
      assertError("Only functions and null are allowed",
        () => button({onclick: ++counter.val}, "Increment"))
      assertError("Only functions and null are allowed",
        () => button({onclick: 'alert("hello")'}, "Increment"))
      assertError("Only strings are allowed",
        () => button({onClick: () => ++counter.val}, "Increment"))

      // State as property
      await capturingErrors("Only functions and null are allowed", 1,
        () => button({onclick: van.state(++counter.val)}, "Increment"))

      // State derived property
      await capturingErrors("Only functions and null are allowed", 1,
        () => button({onclick: van.derive(() => ++counter.val)}, "Increment"))
    },

    tags_invalidProp_nonPrimitiveValue: async () => {
      assertError(/Only.*are valid prop value types/, () => a({href: <any>{}}))
      assertError(/Only.*are valid prop value types/, () => a({href: <any>undefined}))

      // State as property
      await capturingErrors(/Only.*are valid prop value types/, 1,
        () => a({href: van.state(<any>{})}))
      await capturingErrors(/Only.*are valid prop value types/, 1,
        () => a({href: van.state(<any>undefined)}))
      await capturingErrors(/Only.*are valid prop value types/, 1,
        () => a({href: van.state(<any>((x: number) => x * 2))}))

      // State derived property
      await capturingErrors(/Only.*are valid prop value types/, 1,
        () => a({href: () => ({})}))
      await capturingErrors(/Only.*are valid prop value types/, 1,
        () => a({href: () => undefined}))
      await capturingErrors(/Only.*are valid prop value types/, 1,
        () => a({href: () => (x: number) => x * 2}))
    },

    tags_invalidFollowupPropValues_stateAsProp: withHiddenDom(async hiddenDom => {
      const href1 = van.state(<any>"https://vanjs.org/")
      const href2 = van.state(<any>"https://vanjs.org/")
      const href3 = van.state(<any>"https://vanjs.org/")
      let numClicks = 0
      const onclick = van.state(() => ++numClicks)
      van.add(hiddenDom, a({href: href1}), a({href: href2}), a({href: href3}), button({onclick}))
      await capturingErrors(/Only.*are valid prop value types/, 3, async () => {
        href1.val = {}
        href2.val = undefined
        href3.val = (x: number) => x * 2
        await sleep(waitMsForDerivations)
        assert(van.capturedErrors.length === 3 &&
          van.capturedErrors.every(e => /Only.*are valid prop value types/.test(e)))
      })
    }),

    tags_invalidFollowupPropValues_stateDerivedProp: withHiddenDom(async hiddenDom => {
      const s = van.state("https://vanjs.org/"), t = van.state(() => {})
      van.add(hiddenDom,
        a({href: () => s.val || {}}),
        a({href: () => s.val || undefined}),
        a({href: () => s.val || ((x: number) => x * 2)}),
        button({onclick: van.derive(() => t.val || 1)}),
      )
      await capturingErrors(/Only.*are valid prop value types/, 3, async () => {
        s.val = ""
        await sleep(waitMsForDerivations)
      })
      await capturingErrors("Only functions and null are allowed", 1, async () => {
        t.val = <any>0
        await sleep(waitMsForDerivations)
      })
    }),

    tags_invalidChild: async () => {
      assertError(/Only.*are valid child of a DOM Element/, () => div(div(), <any>{}, p()))

      await capturingErrors(/Only.*are valid child of a DOM Element/, 1,
        () => div(div(), van.state(<any>{}), p()))
      await capturingErrors(/Only.*are valid child of a DOM Element/, 1,
        () => div(div(), van.state(<any>((x: number) => x * 2)), p()))
    },

    tags_alreadyConnectedChild: withHiddenDom(hiddenDom => {
      const dom = p()
      van.add(hiddenDom, dom)
      assertError("already connected to document", () => div(p(), dom, p()))
    }),

    tags_invalidNs: () => {
      assertError("Must provide a string", () => van.tags(<any>1))
      assertError("Must provide a string", () => van.tags(<any>null))
      assertError("Must provide a string", () => van.tags(<any>undefined))
      assertError("Must provide a string", () => van.tags(<any>{}))
      assertError("Must provide a string", () => van.tags(<any>((x: number) => x * 2)))
    },

    add_1stArgNotDom: () => {
      assertError("1st argument of `van.add` function must be a DOM Element object",
        () => van.add(<any>{}, div()))
    },

    add_invalidChild: async () => {
      const dom = div()

      assertError(/Only.*are valid child of a DOM Element/, () => van.add(dom, div(), <any>{}, p()))

      await capturingErrors(/Only.*are valid child of a DOM Element/, 1,
        () => van.add(dom, div(), van.state(<any>{}), p()))
      await capturingErrors(/Only.*are valid child of a DOM Element/, 1,
        () => van.add(dom, div(), van.state(<any>((x: number) => x * 2)), p()))
    },

    add_alreadyConnectedChild: withHiddenDom(hiddenDom => {
      const dom = div()
      van.add(hiddenDom, dom)
      assertError("already connected to document", () => van.add(hiddenDom, dom))
    }),

    state_invalidInitialVal: () => {
      assertError("couldn't have value to other state", () => van.state(van.state(0)))
      assertError("DOM Node is not valid value for state", () => van.state(div()))
    },

    state_invalidValSet: () => {
      const s = van.state(<number | State<number> | HTMLElement>0)
      assertError("couldn't have value to other state", () => s.val = van.state(0))
      assertError("DOM Node is not valid value for state", () => s.val = div())
    },

    derive_nonFuncArg: () => {
      const a = van.state(0)
      assertError("Must pass-in a function to `van.derive`", () => van.derive(<any>(a.val * 2)))
    },

    stateDerivedChild_invalidInitialResult: async () => {
      await capturingErrors(/Only.*are valid child of a DOM Element/, 1,
        () => div(() => <any>{}))
      await capturingErrors(/Only.*are valid child of a DOM Element/, 1,
        () => div(() => <any>((x: number) => x * 2)))
    },

    stateDerivedChild_invalidFollowupResult: withHiddenDom(async hiddenDom => {
      const s = van.state(1)
      van.add(hiddenDom,
        () => <any>(s.val || {}),
        () => <any>(s.val || ((x: number) => x * 2)),
        () => <any>(s.val || [div(), div()]),
      )
      await capturingErrors(/Only.*are valid child of a DOM Element/, 3, async () => {
        s.val = 0
        await sleep(waitMsForDerivations)
      })
    }),

    stateDerivedChild_derivedDom_domResultAlreadyConnected: withHiddenDom(async hiddenDom => {
      const dom = div()
      van.add(hiddenDom, dom)
      const num = van.state(1)
      van.add(hiddenDom, prevDom => {
        if (num.val === 1) return div()
        if (num.val === 2) return prevDom
        if (num.val === 3) return dom
      })
      num.val = 2
      await sleep(waitMsForDerivations)
      // Previous dom is returned from the generation function, thus the dom tree isn't changed
      assertEq(hiddenDom.innerHTML, "<div></div><div></div>")

      await capturingErrors("it shouldn't be already connected to document", 1, async () => {
        num.val = 3
        await sleep(waitMsForDerivations)
      })
    }),

    hydrate_1stArgNotDom: () => {
      assertError("1st argument of `van.hydrate` function must be a DOM Node object",
        () => van.hydrate(<any>{}, () => div()))
    },

    hydrate_2ndArgNotFunc: () => {
      assertError("2nd argument of `van.hydrate` function must be a function",
        () => van.hydrate(div(), <any>div()))
    },

    hydrate_invalidInitialResult: async () => {
      await capturingErrors(/Only.*are valid child of a DOM Element/, 1,
        () => van.hydrate(div(), () => <any>{}))
      await capturingErrors(/Only.*are valid child of a DOM Element/, 1,
        () => van.hydrate(div(), () => <any>((x: number) => x * 2)))
    },

    hydrate_invalidFollowupResult: withHiddenDom(async hiddenDom => {
      const cond = van.state(true)
      const dom1 = hiddenDom.appendChild(div())
      const dom2 = hiddenDom.appendChild(div())
      const dom3 = hiddenDom.appendChild(div())
      van.hydrate(dom1, () => cond.val ? div() : <any>{})
      van.hydrate(dom2, () => cond.val ? div() : <any>((x: number) => x * 2))
      van.hydrate(dom3, () => cond.val ? div() : <any>[div(), div()])
      await capturingErrors(/Only.*are valid child of a DOM Element/, 3, async () => {
        cond.val = false
        await sleep(waitMsForDerivations)
      })
    }),

    hydrate_domResultAlreadyConnected: withHiddenDom(async hiddenDom => {
      const dom1 = hiddenDom.appendChild(div())
      const dom2 = hiddenDom.appendChild(div())
      await capturingErrors("it shouldn't be already connected to document", 1,
        () => van.hydrate(dom1, () => dom2))
    }),
  }

  interface CounterProps {
    van: Van
    id?: string
    init?: number
    buttonStyle?: string | State<string>
  }

  const stateProto = Object.getPrototypeOf(van.state())

  const val = <T>(v: T | State<T>) =>
    Object.getPrototypeOf(v ?? 0) === stateProto ? (<State<T>>v).val : <T>v

  const Counter = ({
    van, id, init = 0, buttonStyle = "👍👎",
  }: CounterProps) => {
    const {button, div} = van.tags

    const [up, down] = [...val(buttonStyle)]
    const counter = van.state(init)
    return div({...(id ? {id} : {}), "data-counter": counter},
      "❤️ ", counter, " ",
      button({onclick: () => ++counter.val}, up),
      button({onclick: () => --counter.val}, down),
    )
  }

  const OptimizedCounter = ({
    van, id, init = 0, buttonStyle = "👍👎",
  }: CounterProps) => {
    const {button, div} = van.tags

    const counter = van.state(init)
    return div({...(id ? {id} : {}), "data-counter": counter},
      "❤️ ", counter, " ",
      button({onclick: () => ++counter.val}, () => [...val(buttonStyle)][0]),
      button({onclick: () => --counter.val}, () => [...val(buttonStyle)][1]),
    )
  }

  const hydrateExample = (
    Counter: (props: CounterProps) => HTMLDivElement,
  ) => withHiddenDom(async hiddenDom => {
    const counterInit = 5
    const selectDom = select({value: "👆👇"},
      option("👆👇"),
      option("👍👎"),
      option("🔼🔽"),
      option("⏫⏬"),
      option("📈📉"),
    )
    const buttonStyle = van.state(selectDom.value)
    selectDom.oninput = e => buttonStyle.val = (<HTMLSelectElement>e!.target).value
    // Static DOM before hydration
    hiddenDom.innerHTML = div(
      h2("Basic Counter"),
      Counter({van, init: counterInit}),
      h2("Styled Counter"),
      p("Select the button style: ", selectDom),
      Counter({van, init: counterInit, buttonStyle}),
    ).innerHTML

    const clickBtns = async (dom: HTMLElement, numUp: number, numDown: number) => {
      const [upBtn, downBtn] = [...dom.querySelectorAll("button")]
      for (let i = 0; i < numUp; ++i) {
        upBtn.click()
        await sleep(waitMsForDerivations)
      }
      for (let i = 0; i < numDown; ++i) {
        downBtn.click()
        await sleep(waitMsForDerivations)
      }
    }

    const counterHTML = (counter: number, buttonStyle: string) => {
      const [up, down] = [...buttonStyle]
      return div({"data-counter": counter}, "❤️ ", counter, " ", button(up), button(down)).innerHTML
    }

    // Before hydration, counters are not reactive
    let [basicCounter, styledCounter] = hiddenDom.querySelectorAll("div")
    await clickBtns(basicCounter, 3, 1)
    await clickBtns(styledCounter, 2, 5)

    ;[basicCounter, styledCounter] = hiddenDom.querySelectorAll("div")
    assertEq(basicCounter.innerHTML, counterHTML(5, "👍👎"))
    assertEq(styledCounter.innerHTML, counterHTML(5, "👆👇"))

    // Selecting a new button style won't change the actual buttons
    selectDom.value = "🔼🔽"
    selectDom.dispatchEvent(new Event("input"))
    await sleep(waitMsForDerivations)
    ;[basicCounter, styledCounter] = hiddenDom.querySelectorAll("div")
    assertEq(styledCounter.innerHTML, counterHTML(5, "👆👇"))
    selectDom.value = "👆👇"
    selectDom.dispatchEvent(new Event("input"))

    van.hydrate(basicCounter, dom => Counter({
      van,
      id: "basic-counter",
      init: Number(dom.getAttribute("data-counter")),
    }))
    van.hydrate(styledCounter, dom => Counter({
      van,
      id: "styled-counter",
      init: Number(dom.getAttribute("data-counter")),
      buttonStyle: buttonStyle,
    }))

    // After hydration, counters are reactive
    ;[basicCounter, styledCounter] = hiddenDom.querySelectorAll("div")
    await clickBtns(basicCounter, 3, 1)
    await clickBtns(styledCounter, 2, 5)

    ;[basicCounter, styledCounter] = hiddenDom.querySelectorAll("div")
    assertEq(basicCounter.innerHTML, counterHTML(7, "👍👎"))
    assertEq(styledCounter.innerHTML, counterHTML(2, "👆👇"))

    // Selecting a new button style will change the actual buttons
    const prevStyledCounter = styledCounter
    selectDom.value = "🔼🔽"
    selectDom.dispatchEvent(new Event("input"))
    await sleep(waitMsForDerivations)
    ;[basicCounter, styledCounter] = hiddenDom.querySelectorAll("div")
    assertEq(styledCounter.innerHTML, counterHTML(2, "🔼🔽"))
    Counter === OptimizedCounter ?
      assertEq(styledCounter, prevStyledCounter) :
      assert(styledCounter !== prevStyledCounter)
  })

  // Test cases for examples used in the documentation. Having the tests to ensure the examples
  // are always correct.
  const examples = {
    counter: withHiddenDom(async hiddenDom => {
      const Counter = () => {
        const counter = van.state(0)
        return div(
          div("❤️: ", counter),
          button({onclick: () => ++counter.val}, "👍"),
          button({onclick: () => --counter.val}, "👎"),
        )
      }

      van.add(hiddenDom, Counter())

      assertEq((<Element>hiddenDom.firstChild).querySelector("div")!.innerText, "❤️: 0")

      const [incrementBtn, decrementBtn] = hiddenDom.getElementsByTagName("button")

      incrementBtn.click()
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).querySelector("div")!.innerText, "❤️: 1")

      incrementBtn.click()
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).querySelector("div")!.innerText, "❤️: 2")

      decrementBtn.click()
      await sleep(waitMsForDerivations)
      assertEq((<Element>hiddenDom.firstChild).querySelector("div")!.innerText, "❤️: 1")
    }),

    bulletList: () => {
      const List = ({items}) => ul(items.map((it: any) => li(it)))
      assertEq(List({items: ["Item 1", "Item 2", "Item 3"]}).outerHTML, "<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>")
    },

    table: () => {
      const Table = ({head, data}:
        {head?: readonly string[], data: readonly (string | number)[][]}) => table(
        head ? thead(tr(head.map(h => th(h)))) : [],
        tbody(data.map(row => tr(
          row.map(col => td(col))
        ))),
      )

      assertEq(Table({
        head: ["ID", "Name", "Country"],
        data: [
          [1, "John Doe", "US"],
          [2, "Jane Smith", "CA"],
          [3, "Bob Johnson", "AU"],
        ],
      }).outerHTML, "<table><thead><tr><th>ID</th><th>Name</th><th>Country</th></tr></thead><tbody><tr><td>1</td><td>John Doe</td><td>US</td></tr><tr><td>2</td><td>Jane Smith</td><td>CA</td></tr><tr><td>3</td><td>Bob Johnson</td><td>AU</td></tr></tbody></table>")

      assertEq(Table({
        data: [
          [1, "John Doe", "US"],
          [2, "Jane Smith", "CA"],
        ],
      }).outerHTML, "<table><tbody><tr><td>1</td><td>John Doe</td><td>US</td></tr><tr><td>2</td><td>Jane Smith</td><td>CA</td></tr></tbody></table>")
    },

    state: withHiddenDom(async hiddenDom => {
      // Create a new state object with init value 1
      const counter = van.state(1)

      // Log whenever the value of the state is updated
      van.derive(() => console.log(`Counter: ${counter.val}`))

      // Derived state
      const counterSquared = van.derive(() => counter.val * counter.val)

      // Used as a child node
      const dom1 = div(counter)

      // Used as a property
      const dom2 = input({type: "number", value: counter, disabled: true})

      // Used in a state-derived property
      const dom3 = div({style: () => `font-size: ${counter.val}em;`}, "Text")

      // Used in a state-derived child
      const dom4 = div(counter, sup(2), () => ` = ${counterSquared.val}`)

      // Button to increment the value of the state
      const incrementBtn = button({onclick: () => ++counter.val}, "Increment")
      const resetBtn = button({onclick: () => counter.val = 1}, "Reset")

      van.add(hiddenDom, incrementBtn, resetBtn, dom1, dom2, dom3, dom4)

      assertEq(hiddenDom.innerHTML, '<button>Increment</button><button>Reset</button><div>1</div><input type="number" disabled=""><div style="font-size: 1em;">Text</div><div>1<sup>2</sup> = 1</div>')
      assertEq(dom2.value, "1")

      incrementBtn.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<button>Increment</button><button>Reset</button><div>2</div><input type="number" disabled=""><div style="font-size: 2em;">Text</div><div>2<sup>2</sup> = 4</div>')
      assertEq(dom2.value, "2")

      incrementBtn.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<button>Increment</button><button>Reset</button><div>3</div><input type="number" disabled=""><div style="font-size: 3em;">Text</div><div>3<sup>2</sup> = 9</div>')
      assertEq(dom2.value, "3")

      resetBtn.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<button>Increment</button><button>Reset</button><div>1</div><input type="number" disabled=""><div style="font-size: 1em;">Text</div><div>1<sup>2</sup> = 1</div>')
      assertEq(dom2.value, "1")
    }),

    derivedState: withHiddenDom(async hiddenDom => {
      const DerivedState = () => {
        const text = van.state("VanJS")
        const length = van.derive(() => text.val.length)
        return span(
          "The length of ",
          input({type: "text", value: text, oninput: e => text.val = e.target.value}),
          " is ", length, ".",
        )
      }

      van.add(hiddenDom, DerivedState())
      const dom = <Element>(hiddenDom.firstChild)
      assertEq(dom.outerHTML, '<span>The length of <input type="text"> is 5.</span>')

      const inputDom = dom.querySelector("input")!
      inputDom.value = "Mini-Van"
      inputDom.dispatchEvent(new Event("input"))

      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, '<span>The length of <input type="text"> is 8.</span>')

    }),

    connectedProps: withHiddenDom(async hiddenDom => {
      const ConnectedProps = () => {
        const text = van.state("")
        return span(
          input({type: "text", value: text, oninput: (e: any) => text.val = e.target.value}),
          input({type: "text", value: text, oninput: (e: any) => text.val = e.target.value}),
        )
      }
      van.add(hiddenDom, ConnectedProps())

      const [input1, input2] = hiddenDom.querySelectorAll("input")
      input1.value += "123"
      input1.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      assertEq(input1.value, "123")
      assertEq(input2.value, "123")

      input2.value += "abc"
      input2.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      assertEq(input1.value, "123abc")
      assertEq(input2.value, "123abc")
    }),

    fontPreview: withHiddenDom(async hiddenDom => {
      const FontPreview = () => {
        const size = van.state(16), color = van.state("black")
        return span(
          "Size: ",
          input({type: "range", min: 10, max: 36, value: size,
            oninput: e => size.val = Number((<HTMLInputElement>e.target).value)}),
          " Color: ",
          select({oninput: e => color.val = (<HTMLInputElement>e.target).value, value: color},
            ["black", "blue", "green", "red", "brown"].map(c => option({value: c}, c)),
          ),
          span(
          {
            class: "preview",
            style: () => `font-size: ${size.val}px; color: ${color.val};`,
          }, " Hello 🍦VanJS"),
        )
      }
      van.add(hiddenDom, FontPreview())
      assertEq((<any>hiddenDom.querySelector("span.preview")).style.cssText,
        "font-size: 16px; color: black;")

      hiddenDom.querySelector("input")!.value = "20"
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      assertEq((<any>hiddenDom.querySelector("span.preview")).style.cssText,
        "font-size: 20px; color: black;")

      hiddenDom.querySelector("select")!.value = "blue"
      hiddenDom.querySelector("select")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      assertEq((<any>hiddenDom.querySelector("span.preview")).style.cssText,
        "font-size: 20px; color: blue;")
    }),

    derivedEventHandler: withHiddenDom(async hiddenDom => {
      const Counter = () => {
        const counter = van.state(0)
        const action = van.state("👍")
        return span(
          "❤️ ", counter, " ",
          select({oninput: e => action.val = e.target.value, value: action},
            option({value: "👍"}, "👍"), option({value: "👎"}, "👎"),
          ), " ",
          button({onclick: van.derive(() => action.val === "👍" ?
            () => ++counter.val : () => --counter.val)}, "Run"),
        )
      }

      van.add(hiddenDom, Counter())
      const dom = <Element>(hiddenDom.firstChild)
      assertEq(dom.outerHTML, '<span>❤️ 0 <select><option value="👍">👍</option><option value="👎">👎</option></select> <button>Run</button></span>')

      dom.querySelector("button")!.click()
      dom.querySelector("button")!.click()
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, '<span>❤️ 2 <select><option value="👍">👍</option><option value="👎">👎</option></select> <button>Run</button></span>')

      dom.querySelector("select")!.value = "👎"
      dom.querySelector("select")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      dom.querySelector("button")!.click()
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, '<span>❤️ 1 <select><option value="👍">👍</option><option value="👎">👎</option></select> <button>Run</button></span>')
    }),

    sortedList: withHiddenDom(async hiddenDom => {
      const SortedList = () => {
        const items = van.state("a,b,c"), sortedBy = van.state("Ascending")
        return span(
          "Comma-separated list: ",
          input({oninput: e => items.val = (<HTMLInputElement>e.target).value,
            type: "text", value: items}), " ",
          select({oninput: e => sortedBy.val = (<HTMLInputElement>e.target).value, value: sortedBy},
            option({value: "Ascending"}, "Ascending"),
            option({value: "Descending"}, "Descending"),
          ),
          // A State-derived child node
          () => sortedBy.val === "Ascending" ?
            ul(items.val.split(",").sort().map(i => li(i))) :
            ul(items.val.split(",").sort().reverse().map(i => li(i))),
        )
      }
      van.add(hiddenDom, SortedList())

      hiddenDom.querySelector("input")!.value = "a,b,c,d"
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.querySelector("ul")!.outerHTML,
        "<ul><li>a</li><li>b</li><li>c</li><li>d</li></ul>")

      hiddenDom.querySelector("select")!.value = "Descending"
      hiddenDom.querySelector("select")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.querySelector("ul")!.outerHTML,
        "<ul><li>d</li><li>c</li><li>b</li><li>a</li></ul>")
    }),

    editableList: withHiddenDom(async hiddenDom => {
      const ListItem = ({text}) => {
        const deleted = van.state(false)
        return () => deleted.val ? null : li(
          text,
          a({onclick: () => deleted.val = true}, "❌"),
        )
      }

      const EditableList = () => {
        const listDom = ul()
        const textDom = input({type: "text"})
        return div(
          textDom, " ",
          button({onclick: () => van.add(listDom, ListItem({text: textDom.value}))}, "➕"),
          listDom,
        )
      }
      van.add(hiddenDom, EditableList())

      hiddenDom.querySelector("input")!.value = "abc"
      hiddenDom.querySelector("button")!.click()
      hiddenDom.querySelector("input")!.value = "123"
      hiddenDom.querySelector("button")!.click()
      hiddenDom.querySelector("input")!.value = "def"
      hiddenDom.querySelector("button")!.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.querySelector("ul")!.outerHTML,
        "<ul><li>abc<a>❌</a></li><li>123<a>❌</a></li><li>def<a>❌</a></li></ul>")

      {
        [...hiddenDom.querySelectorAll("li")].find(e => e.innerText.startsWith("123"))!
          .querySelector("a")!.click()
          await sleep(waitMsForDerivations)
          assertEq(hiddenDom.querySelector("ul")!.outerHTML,
            "<ul><li>abc<a>❌</a></li><li>def<a>❌</a></li></ul>")
      }
      {
        [...hiddenDom.querySelectorAll("li")].find(e => e.innerText.startsWith("abc"))!
          .querySelector("a")!.click()
          await sleep(waitMsForDerivations)
          assertEq(hiddenDom.querySelector("ul")!.outerHTML,
            "<ul><li>def<a>❌</a></li></ul>")
      }
      {
        [...hiddenDom.querySelectorAll("li")].find(e => e.innerText.startsWith("def"))!
          .querySelector("a")!.click()
          await sleep(waitMsForDerivations)
          assertEq(hiddenDom.querySelector("ul")!.outerHTML, "<ul></ul>")
      }
    }),

    polymorphicBinding: withHiddenDom(async hiddenDom => {
      let numYellowButtonClicked = 0

      const val = <T>(v: T | State<T> | (() => T)) => {
        const protoOfV = Object.getPrototypeOf(v ?? 0)
        if (protoOfV === stateProto) return (<State<T>>v).val
        if (protoOfV === Function.prototype) return (<() => T>v)()
        return <T>v
      }

      const Button = ({color, text, onclick}) =>
        button({style: () => `background-color: ${val(color)};`, onclick}, text)

      const App = () => {
        const colorState = van.state("green")
        const textState = van.state("Turn Red")

        const turnRed = () => {
          colorState.val = "red"
          textState.val = "Turn Green"
          onclickState.val = turnGreen
        }
        const turnGreen = () => {
          colorState.val = "green"
          textState.val = "Turn Red"
          onclickState.val = turnRed
        }
        const onclickState = van.state(turnRed)

        const lightness = van.state(255)

        return span(
          Button({color: "yellow", text: "Click Me", onclick: () => ++numYellowButtonClicked}), " ",
          Button({color: colorState, text: textState, onclick: onclickState}), " ",
          Button({
            color: () => `rgb(${lightness.val}, ${lightness.val}, ${lightness.val})`,
            text: "Get Darker",
            onclick: () => lightness.val = Math.max(lightness.val - 10, 0),
          }),
        )
      }

      van.add(hiddenDom, App())

      assertEq(hiddenDom.innerHTML, '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: green;">Turn Red</button> <button style="background-color: rgb(255, 255, 255);">Get Darker</button></span>')
      const [button1, button2, button3] = hiddenDom.querySelectorAll("button")

      button1.click()
      assertEq(numYellowButtonClicked, 1)
      button1.click()
      assertEq(numYellowButtonClicked, 2)

      button2.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: red;">Turn Green</button> <button style="background-color: rgb(255, 255, 255);">Get Darker</button></span>')
      button2.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: green;">Turn Red</button> <button style="background-color: rgb(255, 255, 255);">Get Darker</button></span>')

      button3.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: green;">Turn Red</button> <button style="background-color: rgb(245, 245, 245);">Get Darker</button></span>')
      button3.click()
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<span><button style="background-color: yellow;">Click Me</button> <button style="background-color: green;">Turn Red</button> <button style="background-color: rgb(235, 235, 235);">Get Darker</button></span>')
    }),

    hydrate: hydrateExample(Counter),
    hydrateOptimized: hydrateExample(OptimizedCounter),

    domValuedState_excludeDebug: withHiddenDom(async hiddenDom => {
      const TurnBold = () => {
        const vanJS = van.state(<any>"VanJS")
        return span(
          button({onclick: () => vanJS.val = b("VanJS")}, "Turn Bold"),
          " Welcome to ", vanJS, ". ", vanJS, " is awesome!"
        )
      }

      van.add(hiddenDom, TurnBold())
      const dom = <Element>(hiddenDom.firstChild)
      assertEq(dom.outerHTML, "<span><button>Turn Bold</button> Welcome to VanJS. VanJS is awesome!</span>")

      dom.querySelector("button")!.click()
      await sleep(waitMsForDerivations)
      assertEq(dom.outerHTML, "<span><button>Turn Bold</button> Welcome to . <b>VanJS</b> is awesome!</span>")
    }),

    minimizeDomUpdates: withHiddenDom(async hiddenDom => {
      const name = van.state("")

      const Name1 = () => {
        const numRendered = van.state(0)
        return div(
          () => {
            ++numRendered.val
            return name.val.trim().length === 0 ?
              p("Please enter your name") :
              p("Hello ", b(name))
          },
          p(i("The <p> element has been rendered ", numRendered, " time(s).")),
        )
      }

      const Name2 = () => {
        const numRendered = van.state(0)
        const isNameEmpty = van.derive(() => name.val.trim().length === 0)
        return div(
          () => {
            ++numRendered.val
            return isNameEmpty.val ?
              p("Please enter your name") :
              p("Hello ", b(name))
          },
          p(i("The <p> element has been rendered ", numRendered, " time(s).")),
        )
      }

      van.add(hiddenDom,
        p("Your name is: ", input({type: "text", value: name, oninput: e => name.val = e.target.value})),
        Name1(),
        Name2(),
      )
      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<p>Your name is: <input type="text"></p><div><p>Please enter your name</p><p><i>The &lt;p&gt; element has been rendered 1 time(s).</i></p></div><div><p>Please enter your name</p><p><i>The &lt;p&gt; element has been rendered 1 time(s).</i></p></div>')

      hiddenDom.querySelector("input")!.value = "T"
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      hiddenDom.querySelector("input")!.value = "Ta"
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      hiddenDom.querySelector("input")!.value = "Tao"
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)

      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<p>Your name is: <input type="text"></p><div><p>Hello <b>Tao</b></p><p><i>The &lt;p&gt; element has been rendered 4 time(s).</i></p></div><div><p>Hello <b>Tao</b></p><p><i>The &lt;p&gt; element has been rendered 2 time(s).</i></p></div>')

      hiddenDom.querySelector("input")!.value = ""
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations * 2)
      assertEq(hiddenDom.innerHTML, '<p>Your name is: <input type="text"></p><div><p>Please enter your name</p><p><i>The &lt;p&gt; element has been rendered 5 time(s).</i></p></div><div><p>Please enter your name</p><p><i>The &lt;p&gt; element has been rendered 3 time(s).</i></p></div>')

      hiddenDom.querySelector("input")!.value = "X"
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      hiddenDom.querySelector("input")!.value = "Xi"
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)
      hiddenDom.querySelector("input")!.value = "Xin"
      hiddenDom.querySelector("input")!.dispatchEvent(new Event("input"))
      await sleep(waitMsForDerivations)

      await sleep(waitMsForDerivations)
      assertEq(hiddenDom.innerHTML, '<p>Your name is: <input type="text"></p><div><p>Hello <b>Xin</b></p><p><i>The &lt;p&gt; element has been rendered 8 time(s).</i></p></div><div><p>Hello <b>Xin</b></p><p><i>The &lt;p&gt; element has been rendered 4 time(s).</i></p></div>')
    }),
  }

  // In a VanJS app, there could be many derived DOM nodes, states and side effects created on-the-fly.
  // We want to test the garbage-collection process is in place to ensure obsolete bindings and
  // derivations can be cleaned up.
  const gcTests = {
    bindingBasic: withHiddenDom(async hiddenDom => {
      const counter = van.state(0)
      const bindingsPropKey = Object.entries(counter)
        .find(([_, v]) => Array.isArray(v))![0]

      van.add(hiddenDom, () => span(`Counter: ${counter.val}`))

      for (let i = 0; i < 100; ++i) ++counter.val
      await sleep(waitMsForDerivations)

      assertEq(hiddenDom.innerHTML, "<span>Counter: 100</span>")
      assertBetween(counter[bindingsPropKey].length, 1, 3)
    }),

    long_nestedBinding: withHiddenDom(async hiddenDom => {
      const renderPre = van.state(false), text = van.state("Text")
      const bindingsPropKey = Object.entries(renderPre)
        .find(([_, v]) => Array.isArray(v))![0]
      const dom = div(() => (renderPre.val ? pre : div)(() => `--${text.val}--`))
      van.add(hiddenDom, dom)

      for (let i = 0; i < 20; ++i) {
        renderPre.val = !renderPre.val
        await sleep(waitMsForDerivations)
      }

      // Wait until GC kicks in
      await sleep(1000)

      assertBetween(renderPre[bindingsPropKey].length, 1, 3)
      assertBetween(text[bindingsPropKey].length, 1, 3)
    }),

    long_conditionalBinding: withHiddenDom(async hiddenDom => {
      const cond = van.state(true)
      const a = van.state(0), b = van.state(0), c = van.state(0), d = van.state(0)
      const bindingsPropKey = Object.entries(cond)
        .find(([_, v]) => Array.isArray(v))![0]
      const dom = div(() => cond.val ? a.val + b.val : c.val + d.val)
      van.add(hiddenDom, dom)

      const allStates: State<number | boolean>[] = [cond, a, b, c, d]
      for (let i = 0; i < 100; ++i) {
        const randomState = allStates[Math.floor(Math.random() * allStates.length)]
        if (randomState === cond) randomState.val = !randomState.val
        else ++(<State<number>>randomState).val
        await sleep(waitMsForDerivations)
      }

      allStates.forEach(s => assertBetween(s[bindingsPropKey].length, 0, 10))

      // Wait until GC kicks in
      await sleep(1000)
      allStates.forEach(s => assertBetween(s[bindingsPropKey].length, 0, 3))
    }),

    long_deriveBasic: async () => {
      const history: any[] = []
      const a = van.state(0)
      const listenersPropKey = Object.entries(a)
        .filter(([_, v]) => Array.isArray(v))[1][0]

      van.derive(() => history.push(a.val))

      for (let i = 0; i < 100; ++i) {
        ++a.val
        await sleep(waitMsForDerivations)
      }

      assertEq(history.length, 101)
      assertBetween(a[listenersPropKey].length, 1, 3)
    },

    long_deriveInBindingFunc: withHiddenDom(async hiddenDom => {
      const renderPre = van.state(false), prefix = van.state("Prefix")
      const bindingsPropKey = Object.entries(renderPre)
        .find(([_, v]) => Array.isArray(v))![0]
      const listenersPropKey = Object.entries(renderPre)
        .filter(([_, v]) => Array.isArray(v))[1][0]
      const dom = div(() => {
        const text = van.derive(() => `${prefix.val} - Suffix`)
        return (renderPre.val ? pre : div)(() => `--${text.val}--`)
      })
      van.add(hiddenDom, dom)

      for (let i = 0; i < 20; ++i) {
        renderPre.val = !renderPre.val
        await sleep(waitMsForDerivations)
      }

      // Wait until GC kicks in
      await sleep(1000)

      assertBetween(renderPre[bindingsPropKey].length, 1, 3)
      assertBetween(prefix[listenersPropKey].length, 1, 3)
    }),

    long_stateDerivedProp: withHiddenDom(async hiddenDom => {
      const renderPre = van.state(false), class1 = van.state(true)
      const bindingsPropKey = Object.entries(renderPre)
        .find(([_, v]) => Array.isArray(v))![0]
      const listenersPropKey = Object.entries(renderPre)
        .filter(([_, v]) => Array.isArray(v))[1][0]
      const dom = div(() => (renderPre.val ? pre : div)(
        {class: () => class1.val ? "class1" : "class2"}, "Text"))
        van.add(hiddenDom, dom)

      for (let i = 0; i < 20; ++i) {
        renderPre.val = !renderPre.val
        await sleep(waitMsForDerivations)
      }

      // Wait until GC kicks in
      await sleep(1000)

      assertBetween(renderPre[bindingsPropKey].length, 1, 3)
      assertBetween(class1[listenersPropKey].length, 1, 3)
    }),

    long_stateDerivedEventHandler: withHiddenDom(async hiddenDom => {
      const renderPre = van.state(false), handlerType = van.state(1)
      const bindingsPropKey = Object.entries(renderPre)
        .find(([_, v]) => Array.isArray(v))![0]
      const listenersPropKey = Object.entries(renderPre)
        .filter(([_, v]) => Array.isArray(v))[1][0]
      const dom = div(() => (renderPre.val ? pre : div)(
        button({
          oncustom: van.derive(() =>
            handlerType.val === 1 ?
              () => van.add(hiddenDom, p("Handler 1 triggered!")) :
              () => van.add(hiddenDom, p("Handler 2 triggered!"))
          ),
        }),
      ))
      van.add(hiddenDom, dom)

      for (let i = 0; i < 20; ++i) {
        renderPre.val = !renderPre.val
        await sleep(waitMsForDerivations)
      }

      // Wait until GC kicks in
      await sleep(1000)

      assertBetween(renderPre[bindingsPropKey].length, 1, 3)
      assertBetween(handlerType[listenersPropKey].length, 1, 3)
    }),

    long_conditionalDerivedState: async () => {
      const cond = van.state(true)
      const a = van.state(0), b = van.state(0), c = van.state(0), d = van.state(0)
      const listenersPropKey = Object.entries(a)
        .filter(([_, v]) => Array.isArray(v))[1][0]
      van.derive(() => cond.val ? a.val + b.val : c.val + d.val)

      const allStates: State<number | boolean>[] = [cond, a, b, c, d]
      for (let i = 0; i < 100; ++i) {
        const randomState = allStates[Math.floor(Math.random() * allStates.length)]
        if (randomState === cond) randomState.val = !randomState.val
        else ++(<State<number>>randomState).val
      }

      allStates.forEach(s => assertBetween(s[listenersPropKey].length, 0, 10))

      // Wait until GC kicks in
      await sleep(1000)
      allStates.forEach(s => assertBetween(s[listenersPropKey].length, 0, 3))
    },
  }

  type Suite = Record<string, () => void | Promise<void>>
  const suites: Record<string, Suite> = {tests, examples, gcTests}
  const skipLong = new URL(location.href).searchParams.has("skiplong")
  if (debug) suites.debugTests = debugTests

  for (const [k, v] of Object.entries(suites)) {
    for (const [name, func] of Object.entries(v)) {
      if (skipLong && name.startsWith("long_")) continue
      if (debug && name.endsWith("_excludeDebug")) continue
      ++(<any>window).numTests
      const result = van.state(""), msg = van.state("")
      van.add(msgDom, div(
        pre(`Running ${k}.${name}...`),
        pre(result),
        pre(" "),
        pre(button({onclick: async () => {
          try {
            await func()
            result.val = "✅"
            msg.val = "Rerun succeeded!"
          } catch (e) {
            result.val = "❌"
            msg.val = "Rerun failed!"
            throw e
          }
        }}, "Rerun this test")),
        pre(" "),
        pre(msg),
      ))

      try {
        await func()
        result.val = "✅"
      } catch (e) {
        result.val = "❌"
        van.add(msgDom, div({style: "color: red"},
          "Test failed, please check console for error message."
        ))
        throw e
      }
    }
  }
}

export const testVanFile = async (path: string, type: string) => {
  const van = await (type === "es6" ? import(path).then(r => r.default) : fetch(path).then(r => r.text()).then(t => (eval(t), (<any>window).van)))
  const {div, h2} = van.tags
  const msgDom = div({class: "testMsg"})
  van.add(document.getElementById("msgPanel"), h2(`Running tests for ${path}`), msgDom)
  await runTests(van, msgDom, {debug: path.includes(".debug")})
}