@jackens/nnn 2024.2.15 → 2024.2.19

package/chartable.d.ts

@@ -2,32 +2,30 @@
  * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
  *
  * Options:
- * - `bottom`: bottom padding (for X axis labels)
- * - `gapX`: X axis spacing
- * - `gapY`: Y axis spacing
- * - `headerColumn`: flag indicating that `table` has a header column (with X axis labels)
- * - `id`: chart id
- * - `left`: left padding
- * - `maxY`: number of Y axis lines
- * - `reverse`: flag to reverse all data series
- * - `right`: right padding (for data series labels)
- * - `rotate`: flag to rotate X axis labels
  * - `table`: `HTMLTableElement` to extract data, data series labels and X axis labels
- * - `top`: top padding
+ * - `headerColumn`: flag indicating that `table` has a header column with X axis labels
+ * - `xGap`: X axis spacing
+ * - `xLabelsPx`:
+ * - `xLabelsRotate`: flag to rotate X axis labels
+ * - `xReverse`: flag to reverse all data series
+ * - `yGap`: Y axis spacing
+ * - `yLabelsLeftPx`:
+ * - `yLabelsRightPx`:
+ * - `yMax`: number of Y axis lines
+ * - `zLabelsPx`:
  */
-export function chartable({ bottom, gapX, gapY, headerColumn, id, left, maxY, reverse, right, rotate, table, top }: {
-    bottom?: number;
-    gapX?: number;
-    gapY?: number;
-    headerColumn?: boolean;
-    id?: string;
-    left?: number;
-    maxY?: number;
-    reverse?: boolean;
-    right?: number;
-    rotate?: boolean;
+export function chartable({ table, headerColumn, xGap, xLabelsPx, xLabelsRotate, xReverse, yGap, yLabelsLeftPx, yLabelsRightPx, yMax, zLabelsPx }: {
     table: HTMLTableElement;
-    top?: number;
+    headerColumn?: boolean;
+    xGap?: number;
+    xLabelsPx?: number;
+    xLabelsRotate?: boolean;
+    xReverse?: boolean;
+    yGap?: number;
+    yLabelsLeftPx?: number;
+    yLabelsRightPx?: number;
+    yMax?: number;
+    zLabelsPx?: number;
 }): SVGSVGElement;
 
 export const tests: {};

package/chartable.js

@@ -1,54 +1,56 @@
-import { s } from './h.js'
+import { h, s } from './h.js'
 
 const COLORS = ['#e22', '#e73', '#fc3', '#ad4', '#4d9', '#3be', '#45d', '#c3e']
+const PADDING = 15
+
+const _svg = s('svg', { viewBox: '0 0 0 0', width: 0, height: 0 })
+
+h(document.body, ['div', { $style: { width: 0, height: 0 } }, _svg])
 
 /**
  * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
  *
  * Options:
- * - `bottom`: bottom padding (for X axis labels)
- * - `gapX`: X axis spacing
- * - `gapY`: Y axis spacing
- * - `headerColumn`: flag indicating that `table` has a header column (with X axis labels)
- * - `id`: chart id
- * - `left`: left padding
- * - `maxY`: number of Y axis lines
- * - `reverse`: flag to reverse all data series
- * - `right`: right padding (for data series labels)
- * - `rotate`: flag to rotate X axis labels
  * - `table`: `HTMLTableElement` to extract data, data series labels and X axis labels
- * - `top`: top padding
+ * - `headerColumn`: flag indicating that `table` has a header column with X axis labels
+ * - `xGap`: X axis spacing
+ * - `xLabelsPx`:
+ * - `xLabelsRotate`: flag to rotate X axis labels
+ * - `xReverse`: flag to reverse all data series
+ * - `yGap`: Y axis spacing
+ * - `yLabelsLeftPx`:
+ * - `yLabelsRightPx`:
+ * - `yMax`: number of Y axis lines
+ * - `zLabelsPx`:
  *
  * @param {{
- *   bottom?: number;
- *   gapX?: number;
- *   gapY?: number;
- *   headerColumn?: boolean;
- *   id?: string;
- *   left?: number;
- *   maxY?: number;
- *   reverse?: boolean;
- *   right?: number;
- *   rotate?: boolean;
  *   table: HTMLTableElement;
- *   top?: number;
+ *   headerColumn?: boolean;
+ *   xGap?: number;
+ *   xLabelsPx?: number;
+ *   xLabelsRotate?: boolean;
+ *   xReverse?: boolean;
+ *   yGap?: number;
+ *   yLabelsLeftPx?: number;
+ *   yLabelsRightPx?: number;
+ *   yMax?: number;
+ *   zLabelsPx?: number;
  * }} options
  */
 export const chartable = ({
-  bottom = 50,
-  gapX = 70,
-  gapY = 30,
-  headerColumn = false,
-  id,
-  left = 15,
-  maxY = 10,
-  reverse = false,
-  right = 200,
-  rotate = false,
   table,
-  top = 15
+  headerColumn = false,
+  xGap = 70,
+  xLabelsPx = 0,
+  xLabelsRotate = false,
+  xReverse = false,
+  yGap = 30,
+  yLabelsLeftPx = 100,
+  yLabelsRightPx = 100,
+  yMax = 10,
+  zLabelsPx = 0
 }) => {
-  const /** @type {number[][]} */ zxY = []
+  const /** @type {number[][]} */ zxValues = []
   const /** @type {string[]}   */ xLabels = []
   const /** @type {string[]}   */ zLabels = []
 
@@ -60,8 +62,8 @@ export const chartable = ({
       const value = col.innerText
 
       if (x >= 0 && z >= 0) {
-        zxY[z] = zxY[z] ?? []
-        zxY[z][x] = parseFloat(value)
+        zxValues[z] = zxValues[z] ?? []
+        zxValues[z][x] = parseFloat(value)
       } else if (x >= 0 && z < 0) {
         xLabels[x] = value
       } else if (x < 0 && z >= 0) {
@@ -69,62 +71,123 @@ export const chartable = ({
       }
     }))
 
-  if (reverse) {
+  if (xReverse) {
     xLabels.reverse()
-    zxY.forEach(xY => xY.reverse())
+    zxValues.forEach(xValues => xValues.reverse())
+  }
+
+  const xMax = zxValues[0].length
+  const xPx = Array.from({ length: xMax }, (_, x) => x * xGap)
+  const yPx = Array.from({ length: yMax }, (_, y) => y * yGap)
+
+  const width = xGap * (xMax - 1)
+  const height = yGap * (yMax - 1)
+
+  const gGraph = s('g',
+    ...yPx.map(px => ['line', { x1: 0, x2: width, y1: px, y2: px, stroke: '#8888' }]),
+    ...xPx.map(px => ['line', { x1: px, x2: px, y1: 0, y2: height, stroke: '#8888' }]))
+  const gXLabels = s('g')
+  const gYLabelsL = zxValues.map(_ => s('g'))
+  const gYLabelsR = zxValues.map(_ => s('g'))
+  const gZColors = s('g')
+  const /** @type {SVGTextElement[]} */ gZLabels = []
+
+  const onclick = (/** @type {number} */ z) => {
+    gYLabelsL.forEach((g, z2) => s(g, { $style: { display: z2 === z ? 'block' : 'none' } }))
+    gYLabelsR.forEach((g, z2) => s(g, { $style: { display: z2 === z ? 'block' : 'none' } }))
+    gZLabels.forEach((text, z2) => s(text, { $style: { fontWeight: z2 === z ? 'bold' : 'normal', cursor: 'pointer' } }))
   }
 
-  const maxX = zxY[0].length
-  const xi = Array.from({ length: maxX }, (_, x) => x * gapX)
-  const yi = Array.from({ length: maxY }, (_, y) => y * gapY)
-  const w = gapX * (maxX - 1)
-  const h = gapY * (maxY - 1)
-  const svgW = left + w + right
-  const svgH = top + h + bottom
-  const /** @type {import('./h.js').HArgs1} */ graph = ['g', { transform: `translate(${left} ${top})` },
-    ...yi.map(y => ['line', { x1: 0, x2: w, y1: y, y2: y, stroke: '#8888' }]),
-    ...xi.map(x => ['line', { x1: x, x2: x, y1: 0, y2: h, stroke: '#8888' }])]
-  const /** @type {import('./h.js').HArgs1} */ colors = ['g', { transform: `translate(${left + w + 25} ${top + 15})` }]
-  const /** @type {import('./h.js').HArgs1} */ labels = ['g', { transform: `translate(${left + w + 40} ${top + 15})` }]
-
-  zxY.forEach((xY, z) => {
+  zxValues.forEach((values, z) => {
     const fill = COLORS[z % COLORS.length]
-    const min = Math.min(...xY.filter(x => !isNaN(x)))
-    const max = Math.max(...xY.filter(x => !isNaN(x)))
+    const minValue = Math.min(...values.filter(value => !isNaN(value)))
+    const maxValue = Math.max(...values.filter(value => !isNaN(value)))
+
+    yPx.forEach((yp, y) => {
+      const textL = s('text',
+        { x: 0, y: yp, 'text-anchor': 'end', 'alignment-baseline': 'middle' },
+        (maxValue - (maxValue - minValue) / yMax * (y + 1)).toFixed(2))
+      const textR = s('text',
+        { x: 0, y: yp, 'text-anchor': 'start', 'alignment-baseline': 'middle' },
+        (maxValue - (maxValue - minValue) / yMax * (y + 1)).toFixed(2))
+
+      s(_svg, textL, textR)
+
+      yLabelsLeftPx = Math.max(yLabelsLeftPx, textL.getBBox().width)
+      yLabelsRightPx = Math.max(yLabelsRightPx, textL.getBBox().width)
+
+      s(gYLabelsL[z], textL)
+      s(gYLabelsR[z], textR)
+    })
 
-    colors.push(['circle', { cx: 0, cy: gapY * (colors.length - 2), r: 5, fill }])
-    labels.push(['text',
-      { x: 0, y: gapY * (labels.length - 2), 'text-anchor': 'start', 'alignment-baseline': 'middle' },
-      zLabels[z]])
+    const text = s('text', {
+      x: 0,
+      y: yGap * z,
+      'text-anchor': 'start',
+      'alignment-baseline': 'middle',
+      $onclick: () => onclick(z),
+      $style: { fontWeight: 'bold' }
+    },
+    zLabels[z])
 
-    const y = xY.map(x => isNaN(x) ? x : h * (max - x) / (max - min))
+    s(_svg, text)
 
-    xi.forEach((x, i) => {
-      if (!isNaN(y[i])) {
-        graph.push(['g', ['circle', { cx: x, cy: y[i], r: 5, fill }, ['title', `${zLabels[z]}: ${xY[i]}`]]])
+    zLabelsPx = Math.max(zLabelsPx, text.getBBox().width)
 
-        if (!isNaN(y[i - 1])) {
-          graph.push(['line', { x1: x, x2: xi[i - 1], y1: y[i], y2: y[i - 1], stroke: fill }])
+    gZLabels[z] = text
+
+    s(gZColors, ['circle', { cx: 0, cy: yGap * z, r: 5, fill }])
+
+    const valuesPx = values.map(value => isNaN(value) ? value : height * (maxValue - value) / (maxValue - minValue))
+
+    xPx.forEach((px, x) => {
+      if (!isNaN(valuesPx[x])) {
+        s(gGraph, ['g', ['circle', { cx: px, cy: valuesPx[x], r: 5, fill }]])
+
+        if (!isNaN(valuesPx[x - 1])) {
+          s(gGraph, ['line', { x1: px, x2: xPx[x - 1], y1: valuesPx[x], y2: valuesPx[x - 1], stroke: fill }])
         }
       }
     })
   })
 
-  return s('svg', {
-    viewBox: `0 0 ${svgW} ${svgH}`,
-    width: `${svgW}px`,
-    height: `${svgH}px`,
-    class: 'chartable'
-  }, id != null ? { id } : null,
-  graph, colors, labels,
-  xLabels.length > 0
-    ? ['g', { transform: `translate(${left} ${top + h + 15})` },
-        ...xi.slice(0).map((x, i) => ['text', rotate
-          ? { x: 0, y: -x, 'text-anchor': 'start', 'alignment-baseline': 'hanging', transform: 'rotate(90)' }
-          : { x, y: 0, 'text-anchor': 'middle', 'alignment-baseline': 'hanging' },
-        xLabels[i]])]
-    : null
-  )
+  if (xLabels.length > 0) {
+    xPx.forEach((xp, x) => {
+      const text = s('text',
+        xLabelsRotate
+          ? { x: 0, y: -xp, 'text-anchor': 'start', 'alignment-baseline': 'middle', transform: 'rotate(90)' }
+          : { x: xp, y: PADDING, 'text-anchor': 'middle', 'alignment-baseline': 'middle' },
+        xLabels[x])
+
+      s(_svg, text)
+
+      xLabelsPx = Math.max(xLabelsPx, xLabelsRotate ? text.getBBox().width : text.getBBox().height)
+
+      s(gXLabels, text)
+    })
+  }
+
+  const svgW = width + yLabelsLeftPx + yLabelsRightPx + zLabelsPx + 4 * PADDING
+  const svgH = height + xLabelsPx + (xLabels.length > 0 ? 3 : 2) * PADDING
+
+  s(gGraph, { transform: `translate(${yLabelsLeftPx + PADDING} ${PADDING})` })
+
+  gYLabelsL.forEach(g => s(g, { transform: `translate(${yLabelsLeftPx} ${PADDING})` }))
+  gYLabelsR.forEach(g => s(g, { transform: `translate(${width + yLabelsLeftPx + 2 * PADDING} ${PADDING})` }))
+
+  s(gZColors, { transform: `translate(${width + yLabelsLeftPx + yLabelsRightPx + 3 * PADDING} ${PADDING})` })
+  s(gXLabels, { transform: `translate(${yLabelsLeftPx + PADDING} ${height + 2 * PADDING})` })
+
+  onclick(0)
+
+  return s('svg',
+    { viewBox: `0 0 ${svgW} ${svgH}`, width: `${svgW}px`, height: `${svgH}px`, class: 'chartable' },
+    gGraph,
+    gXLabels,
+    ...gYLabelsL,
+    ...gYLabelsR,
+    gZColors,
+    ['g', { transform: `translate(${width + yLabelsLeftPx + yLabelsRightPx + 4 * PADDING} ${PADDING})` }, ...gZLabels])
 }
 
 export const tests = {}

package/eq.d.ts

@@ -4,5 +4,5 @@
 export function eq(x: any, y: any): boolean;
 
 export namespace tests {
-    function eq(expect: import("bun:test").Expect): void;
+    function eq(expect: Chai.ExpectStatic): void;
 }

package/eq.js

@@ -45,39 +45,39 @@ export const eq = /** @return {boolean} */ (/** @type {any} */ x, /** @type {any
 }
 
 export const tests = {
-  eq: (/** @type {import('bun:test').Expect} */ expect) => {
-    expect(eq(true, true)).toBe(true)
-    expect(eq(NaN, NaN)).toBe(true)
-    expect(eq(null, undefined)).toBe(false)
-    expect(eq(42, 42)).toBe(true)
+  eq: (/** @type {import('chai').expect} */ expect) => {
+    expect(eq(true, true)).to.be.true
+    expect(eq(NaN, NaN)).to.be.true
+    expect(eq(null, undefined)).to.be.false
+    expect(eq(42, 42)).to.be.true
     // eslint-disable-next-line no-new-wrappers
-    expect(eq(42, new Number(42))).toBe(true)
-    expect(eq(42, Number(42))).toBe(true)
+    expect(eq(42, new Number(42))).to.be.true
+    expect(eq(42, Number(42))).to.be.true
     // eslint-disable-next-line no-new-wrappers
-    expect(eq(new Number(42), Number(42))).toBe(true)
-    expect(eq(42, '42')).toBe(false)
-    expect(eq('42', '42')).toBe(true)
+    expect(eq(new Number(42), Number(42))).to.be.true
+    expect(eq(42, '42')).to.be.false
+    expect(eq('42', '42')).to.be.true
     // eslint-disable-next-line no-new-wrappers
-    expect(eq('42', new String('42'))).toBe(true)
-    expect(eq('42', String('42'))).toBe(true)
+    expect(eq('42', new String('42'))).to.be.true
+    expect(eq('42', String('42'))).to.be.true
     // eslint-disable-next-line no-new-wrappers
-    expect(eq(String('42'), new String('42'))).toBe(true)
-    expect(eq(/42/, /42/)).toBe(true)
-    expect(eq(/42/, /42/g)).toBe(false)
-    expect(eq(new Date(42), new Date(42))).toBe(true)
-    expect(eq(new Date(), new Date(42))).toBe(false)
-    expect(eq({ j: '42', c: 42 }, { c: 42, j: '42' })).toBe(true)
-    expect(eq([42, '42'], [42, '42'])).toBe(true)
-    expect(eq(new Set(['42', 42]), new Set([42, '42']))).toBe(true)
-    expect(eq(new Set(['42', 42]), new Set([42]))).toBe(false)
-    expect(eq(new Set([42, undefined]), new Set([42]))).toBe(false)
+    expect(eq(String('42'), new String('42'))).to.be.true
+    expect(eq(/42/, /42/)).to.be.true
+    expect(eq(/42/, /42/g)).to.be.false
+    expect(eq(new Date(42), new Date(42))).to.be.true
+    expect(eq(new Date(), new Date(42))).to.be.false
+    expect(eq({ j: '42', c: 42 }, { c: 42, j: '42' })).to.be.true
+    expect(eq([42, '42'], [42, '42'])).to.be.true
+    expect(eq(new Set(['42', 42]), new Set([42, '42']))).to.be.true
+    expect(eq(new Set(['42', 42]), new Set([42]))).to.be.false
+    expect(eq(new Set([42, undefined]), new Set([42]))).to.be.false
     expect(eq(
       new Map([[{ j: 42 }, { J: '42' }], [{ c: 42 }, { C: '42' }]]),
       new Map([[{ c: 42 }, { C: '42' }], [{ j: 42 }, { J: '42' }]])
-    )).toBe(true)
+    )).to.be.true
     expect(eq(
       new Map([[{ j: 42 }, { J: '42' }], [{ c: 42 }, { C: '42' }]]),
       new Map([[{ j: '42' }, { J: 42 }], [{ c: '42' }, { C: 42 }]])
-    )).toBe(false)
+    )).to.be.false
   }
 }

package/escape.d.ts

@@ -14,5 +14,5 @@ export function escape(escapeMap: EscapeMap, template: TemplateStringsArray, ...
 export function escapeValues(escapeMap: EscapeMap, values: any[]): string[];
 
 export namespace tests {
-    function escape(expect: import("bun:test").Expect): void;
+    function escape(expect: Chai.ExpectStatic): void;
 }

package/escape.js

@@ -22,7 +22,7 @@ export const escape = (
 ) => String.raw(template, ...escapeValues(escapeMap, values))
 
 export const tests = {
-  escape: (/** @type {import('bun:test').Expect} */ expect) => {
+  escape: (/** @type {import('chai').expect} */ expect) => {
     // @ts-expect-error
     const /** @type {EscapeMap} */ escapeMap = new Map([
       [undefined, () => 'NULL'],
@@ -46,6 +46,6 @@ export const tests = {
       FROM table_name
       WHERE column_name IN (b'1', NULL, NULL, 42, '42', '4''2', NULL, '1980-03-31 04:30:00')`
 
-    expect(actual).toEqual(expected)
+    expect(actual).to.deep.equal(expected)
   }
 }

package/fixTypography.d.ts

@@ -4,5 +4,5 @@
 export function fixTypography(node: Node): void;
 
 export namespace tests {
-    function fixTypography(expect: import("bun:test").Expect): void;
+    function fixTypography(expect: Chai.ExpectStatic): void;
 }

package/fixTypography.js

@@ -49,12 +49,12 @@ export const fixTypography = (/** @type {Node} */ node) => {
 }
 
 export const tests = {
-  fixTypography: (/** @type {import('bun:test').Expect} */ expect) => {
+  fixTypography: (/** @type {import('chai').expect} */ expect) => {
     const p = h('p', 'Pchnąć w tę łódź jeża lub ośm skrzyń fig (zob. https://pl.wikipedia.org/wiki/Pangram).')
 
     fixTypography(p)
 
-    expect(p.innerHTML).toEqual(
+    expect(p.innerHTML).to.deep.equal(
       'Pchnąć <span style="white-space:nowrap">w </span>tę łódź jeża lub ośm skrzyń fig ' +
       '(zob. https://\u200Bpl.\u200Bwikipedia.\u200Borg/\u200Bwiki/\u200BPangram).')
   }

package/h.d.ts

@@ -47,9 +47,9 @@ export function s<N extends Node>(node: N, ...args1: HArgs1[]): N;
 export function s(tagOrNode: string | Node, ...args1: HArgs1[]): Node;
 
 export const tests: {
-    h: (expect: import('bun:test').Expect) => void;
-    'h: innerText vs items': (expect: import('bun:test').Expect) => void;
-    'h: style': (expect: import('bun:test').Expect) => void;
-    'h: attributes vs properties': (expect: import('bun:test').Expect) => void;
-    'h: nested properties': (expect: import('bun:test').Expect) => void;
+    h: (expect: Chai.ExpectStatic) => void;
+    'h: innerText vs items': (expect: Chai.ExpectStatic) => void;
+    'h: style': (expect: Chai.ExpectStatic) => void;
+    'h: attributes vs properties': (expect: Chai.ExpectStatic) => void;
+    'h: nested properties': (expect: Chai.ExpectStatic) => void;
 };

package/h.js

@@ -142,72 +142,72 @@ export const h = _h()
 export const s = _h('http://www.w3.org/2000/svg')
 
 export const tests = {
-  h: (/** @type {import('bun:test').Expect} */ expect) => {
+  h: (/** @type {import('chai').expect} */ expect) => {
     const b = h('b')
 
-    expect(b.outerHTML).toEqual('<b></b>')
+    expect(b.outerHTML).to.deep.equal('<b></b>')
 
     const i = h('i', 'text')
 
     h(b, i)
 
-    expect(i.outerHTML).toEqual('<i>text</i>')
-    expect(b.outerHTML).toEqual('<b><i>text</i></b>')
+    expect(i.outerHTML).to.deep.equal('<i>text</i>')
+    expect(b.outerHTML).to.deep.equal('<b><i>text</i></b>')
 
     h(i, { $className: 'some class' })
 
-    expect(i.outerHTML).toEqual('<i class="some class">text</i>')
-    expect(b.outerHTML).toEqual('<b><i class="some class">text</i></b>')
+    expect(i.outerHTML).to.deep.equal('<i class="some class">text</i>')
+    expect(b.outerHTML).to.deep.equal('<b><i class="some class">text</i></b>')
   },
 
-  'h: innerText vs items': (/** @type {import('bun:test').Expect} */ expect) => {
-    expect(h('span', 'text').outerHTML).toEqual('<span>text</span>')
-    expect(h('span', { $innerText: 'text' }).outerHTML).toEqual('<span>text</span>')
+  'h: innerText vs items': (/** @type {import('chai').expect} */ expect) => {
+    expect(h('span', 'text').outerHTML).to.deep.equal('<span>text</span>')
+    expect(h('span', { $innerText: 'text' }).outerHTML).to.deep.equal('<span>text</span>')
   },
 
-  'h: style': (/** @type {import('bun:test').Expect} */ expect) => {
+  'h: style': (/** @type {import('chai').expect} */ expect) => {
     expect(h('div', { style: 'margin:0;padding:0' }).outerHTML)
-      .toEqual('<div style="margin:0;padding:0"></div>')
+      .to.deep.equal('<div style="margin:0;padding:0"></div>')
     expect(h('div', { $style: 'margin:0;padding:0' }).outerHTML)
-      .toEqual('<div style="margin: 0px; padding: 0px;"></div>')
+      .to.deep.equal('<div style="margin: 0px; padding: 0px;"></div>')
     expect(h('div', { $style: { margin: 0, padding: 0 } }).outerHTML)
-      .toEqual('<div style="margin: 0px; padding: 0px;"></div>')
+      .to.deep.equal('<div style="margin: 0px; padding: 0px;"></div>')
   },
 
-  'h: attributes vs properties': (/** @type {import('bun:test').Expect} */ expect) => {
+  'h: attributes vs properties': (/** @type {import('chai').expect} */ expect) => {
     const input1 = h('input', { value: 42 })
     const input2 = h('input', { $value: '42' })
 
-    expect(input1.value).toEqual('42')
-    expect(input2.value).toEqual('42')
+    expect(input1.value).to.deep.equal('42')
+    expect(input2.value).to.deep.equal('42')
 
-    expect(input1.outerHTML).toEqual('<input value="42">')
-    expect(input2.outerHTML).toEqual('<input>')
+    expect(input1.outerHTML).to.deep.equal('<input value="42">')
+    expect(input2.outerHTML).to.deep.equal('<input>')
 
     const checkbox1 = h('input', { type: 'checkbox', checked: true })
     const checkbox2 = h('input', { type: 'checkbox', $checked: true })
 
-    expect(checkbox1.checked).toBe(true)
-    expect(checkbox2.checked).toBe(true)
+    expect(checkbox1.checked).to.be.true
+    expect(checkbox2.checked).to.be.true
 
-    expect(checkbox1.outerHTML).toEqual('<input type="checkbox" checked="">')
-    expect(checkbox2.outerHTML).toEqual('<input type="checkbox">')
+    expect(checkbox1.outerHTML).to.deep.equal('<input type="checkbox" checked="">')
+    expect(checkbox2.outerHTML).to.deep.equal('<input type="checkbox">')
   },
 
-  'h: nested properties': (/** @type {import('bun:test').Expect} */ expect) => {
+  'h: nested properties': (/** @type {import('chai').expect} */ expect) => {
     const div = h('div')
 
     // @ts-expect-error
-    expect(div.key).toBeUndefined()
+    expect(div.key).to.be.undefined
 
     h(div, { $key: { one: 1 } })
 
     // @ts-expect-error
-    expect(div.key).toEqual({ one: 1 })
+    expect(div.key).to.deep.equal({ one: 1 })
 
     h(div, { $key: { two: 2 } })
 
     // @ts-expect-error
-    expect(div.key).toEqual({ one: 1, two: 2 })
+    expect(div.key).to.deep.equal({ one: 1, two: 2 })
   }
 }

package/has.d.ts

@@ -4,6 +4,6 @@
 export function has(key: any, ref: any): boolean;
 
 export const tests: {
-    has: (expect: import('bun:test').Expect) => void;
-    'has: null': (expect: import('bun:test').Expect) => void;
+    has: (expect: Chai.ExpectStatic) => void;
+    'has: null': (expect: Chai.ExpectStatic) => void;
 };

package/has.js

@@ -7,24 +7,24 @@ export const has = (/** @type {any} */ key, /** @type {any} */ ref) =>
   (is(String, key) || is(Number, key) || is(Symbol, key)) && Object.hasOwnProperty.call(ref ?? Object, key)
 
 export const tests = {
-  has: (/** @type {import('bun:test').Expect} */ expect) => {
+  has: (/** @type {import('chai').expect} */ expect) => {
     const obj = { key: 'K', null: 'N' }
 
-    expect('key' in obj).toBe(true)
-    expect(has('key', obj)).toBe(true)
+    expect('key' in obj).to.be.true
+    expect(has('key', obj)).to.be.true
 
-    expect('null' in obj).toBe(true)
-    expect(has('null', obj)).toBe(true)
+    expect('null' in obj).to.be.true
+    expect(has('null', obj)).to.be.true
 
     // @ts-expect-error
-    expect(null in obj).toBe(true)
-    expect(has(null, obj)).toBe(false)
+    expect(null in obj).to.be.true
+    expect(has(null, obj)).to.be.false
 
-    expect('toString' in obj).toBe(true)
-    expect(has('toString', obj)).toBe(false)
+    expect('toString' in obj).to.be.true
+    expect(has('toString', obj)).to.be.false
   },
 
-  'has: null': (/** @type {import('bun:test').Expect} */ expect) => {
+  'has: null': (/** @type {import('chai').expect} */ expect) => {
     let typeError
 
     try {
@@ -35,6 +35,6 @@ export const tests = {
     }
 
     expect(typeError instanceof TypeError) // Cannot use 'in' operator to search for 'key' in null
-    expect(has('key', null)).toBe(false)
+    expect(has('key', null)).to.be.false
   }
 }

package/is.d.ts

@@ -12,6 +12,6 @@ export const is: {
 };
 
 export const tests: {
-    is: (expect: import('bun:test').Expect) => void;
-    'is: toString.call': (expect: import('bun:test').Expect) => void;
+    is: (expect: Chai.ExpectStatic) => void;
+    'is: toString.call': (expect: Chai.ExpectStatic) => void;
 };