@jackens/nnn 2024.2.17 → 2024.2.20

package/chartable.d.ts

@@ -2,30 +2,32 @@
  * 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)
- * - `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
+ * - `xLabelsMinHeight`: minimal height of X axis labels
+ * - `xLabelsRotate`: flag to rotate X axis labels
+ * - `xReverse`: flag to reverse all data series
+ * - `yGap`: Y axis spacing
+ * - `yLabelsLeftMinWidth`: minimal width of Y axis left labels
+ * - `yLabelsRightMinWidth`: minimal width of Y axis right labels
+ * - `yMax`: number of Y axis lines
+ * - `zLabelsMinWidth`: minimal width of data series labels
+ * - `zyMappings`: mappings per data series
  */
-export function chartable({ bottom, gapX, gapY, headerColumn, left, maxY, reverse, right, rotate, table, top }: {
-    bottom?: number;
-    gapX?: number;
-    gapY?: number;
-    headerColumn?: boolean;
-    left?: number;
-    maxY?: number;
-    reverse?: boolean;
-    right?: number;
-    rotate?: boolean;
+export function chartable({ table, headerColumn, xGap, xLabelsMinHeight, xLabelsRotate, xReverse, yGap, yLabelsLeftMinWidth, yLabelsRightMinWidth, yMax, zLabelsMinWidth, zyMappings }: {
     table: HTMLTableElement;
-    top?: number;
-}): Node;
+    headerColumn?: boolean | undefined;
+    xGap?: number | undefined;
+    xLabelsMinHeight?: number | undefined;
+    xLabelsRotate?: boolean | undefined;
+    xReverse?: boolean | undefined;
+    yGap?: number | undefined;
+    yLabelsLeftMinWidth?: number | undefined;
+    yLabelsRightMinWidth?: number | undefined;
+    yMax?: number | undefined;
+    zLabelsMinWidth?: number | undefined;
+    zyMappings?: [(label: string) => number, (value: number) => string][] | undefined;
+}): SVGSVGElement;
 
 export const tests: {};

package/chartable.js

@@ -1,50 +1,59 @@
-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])
+
+const toFixed2 = (/** @type {number} */ value) => value.toFixed(2)
+
 /**
  * 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)
- * - `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
+ * - `xLabelsMinHeight`: minimal height of X axis labels
+ * - `xLabelsRotate`: flag to rotate X axis labels
+ * - `xReverse`: flag to reverse all data series
+ * - `yGap`: Y axis spacing
+ * - `yLabelsLeftMinWidth`: minimal width of Y axis left labels
+ * - `yLabelsRightMinWidth`: minimal width of Y axis right labels
+ * - `yMax`: number of Y axis lines
+ * - `zLabelsMinWidth`: minimal width of data series labels
+ * - `zyMappings`: mappings per data series
  *
  * @param {{
- *   bottom?: number;
- *   gapX?: number;
- *   gapY?: number;
- *   headerColumn?: boolean;
- *   left?: number;
- *   maxY?: number;
- *   reverse?: boolean;
- *   right?: number;
- *   rotate?: boolean;
  *   table: HTMLTableElement;
- *   top?: number;
+ *   headerColumn?: boolean;
+ *   xGap?: number;
+ *   xLabelsMinHeight?: number;
+ *   xLabelsRotate?: boolean;
+ *   xReverse?: boolean;
+ *   yGap?: number;
+ *   yLabelsLeftMinWidth?: number;
+ *   yLabelsRightMinWidth?: number;
+ *   yMax?: number;
+ *   zLabelsMinWidth?: number;
+ *   zyMappings?: [(label: string) => number, (value: number) => string][];
  * }} options
  */
 export const chartable = ({
-  bottom = 50,
-  gapX = 70,
-  gapY = 30,
-  headerColumn = false,
-  left = 300,
-  maxY = 10,
-  reverse = false,
-  right = 100,
-  rotate = false,
   table,
-  top = PADDING
+  headerColumn = false,
+  xGap = 70,
+  xLabelsMinHeight = 0,
+  xLabelsRotate = false,
+  xReverse = false,
+  yGap = 30,
+  yLabelsLeftMinWidth = 100,
+  yLabelsRightMinWidth = 100,
+  yMax = 10,
+  zLabelsMinWidth = 0,
+  zyMappings = []
 }) => {
   const /** @type {number[][]} */ zxValues = []
   const /** @type {string[]}   */ xLabels = []
@@ -59,7 +68,7 @@ export const chartable = ({
 
       if (x >= 0 && z >= 0) {
         zxValues[z] = zxValues[z] ?? []
-        zxValues[z][x] = parseFloat(value)
+        zxValues[z][x] = (zyMappings?.[z]?.[0] ?? parseFloat)(value)
       } else if (x >= 0 && z < 0) {
         xLabels[x] = value
       } else if (x < 0 && z >= 0) {
@@ -67,92 +76,120 @@ export const chartable = ({
       }
     }))
 
-  if (reverse) {
+  if (xReverse) {
     xLabels.reverse()
     zxValues.forEach(xValues => xValues.reverse())
   }
 
-  const maxX = zxValues[0].length
-  const xPx = Array.from({ length: maxX }, (_, x) => x * gapX)
-  const yPx = Array.from({ length: maxY }, (_, y) => y * gapY)
-  const width = gapX * (maxX - 1)
-  const height = gapY * (maxY - 1)
-  const svgW = left + width + right
-  const svgH = top + height + bottom
+  const xMax = zxValues[0].length
+  const xPx = Array.from({ length: xMax }, (_, x) => x * xGap)
+  const yPx = Array.from({ length: yMax }, (_, y) => y * yGap)
 
-  const /** @type {import('./h.js').HArgs1} */ gGraph = ['g', { transform: `translate(${left} ${top})` },
-    ...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 /** @type {import('./h.js').HArgs1} */ gZColors = ['g', { transform: `translate(${PADDING} ${top})` }]
-  const /** @type {import('./h.js').HArgs1} */ gZLabels = ['g', { transform: `translate(${2 * PADDING} ${top})` }]
-  const /** @type {import('./h.js').HArgs} */ svg = ['svg',
-    { viewBox: `0 0 ${svgW} ${svgH}`, width: `${svgW}px`, height: `${svgH}px`, class: 'chartable' },
-    gGraph, gZColors, gZLabels]
+  const width = xGap * (xMax - 1)
+  const height = yGap * (yMax - 1)
 
-  if (xLabels.length > 0) {
-    svg.push(['g', { transform: `translate(${left} ${top + height + PADDING})` },
-      ...xPx.slice(0).map((xp, x) => ['text',
-        rotate
-          ? { 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]])])
+  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 /** @type {[SVGElement, SVGElement, SVGTextElement][]} */ toUpdate = []
-
-  const onclick = (/** @type {number} */ z) => toUpdate.forEach(([gLeftYLabels, gRightYLabels, zLabel], z2) => {
-    s(gLeftYLabels, { $style: { display: z2 === z ? 'block' : 'none' } })
-    s(gRightYLabels, { $style: { display: z2 === z ? 'block' : 'none' } })
-    s(zLabel, { $style: { textDecoration: z2 === z ? 'underline' : 'none', cursor: 'pointer' } })
-  })
-
   zxValues.forEach((values, z) => {
     const fill = COLORS[z % COLORS.length]
     const minValue = Math.min(...values.filter(value => !isNaN(value)))
     const maxValue = Math.max(...values.filter(value => !isNaN(value)))
 
-    const valuesPx = values.map(value => isNaN(value) ? value : height * (maxValue - value) / (maxValue - minValue))
+    yPx.forEach((yp, y) => {
+      const value = (zyMappings?.[z]?.[1] ?? toFixed2)(maxValue - (maxValue - minValue) / yMax * (y + 1))
+      const textL = s('text', { x: 0, y: yp, 'text-anchor': 'end', 'alignment-baseline': 'middle' }, value)
+      const textR = s('text', { x: 0, y: yp, 'text-anchor': 'start', 'alignment-baseline': 'middle' }, value)
 
-    const gLeftYLabels = s('g', { transform: `translate(${left - PADDING} ${top})` },
-      ...yPx.map((yp, y) => ['text',
-        { x: 0, y: yp, 'text-anchor': 'end', 'alignment-baseline': 'middle' },
-        (maxValue - (maxValue - minValue) / maxY * (y + 1)).toFixed(2)]))
+      s(_svg, textL, textR)
 
-    const gRightYLabels = s('g', { transform: `translate(${left + width + PADDING} ${top})` },
-      ...yPx.map((yp, y) => ['text',
-        { x: 0, y: yp, 'text-anchor': 'start', 'alignment-baseline': 'middle' },
-        (maxValue - (maxValue - minValue) / maxY * (y + 1)).toFixed(2)]))
+      yLabelsLeftMinWidth = Math.max(yLabelsLeftMinWidth, textL.getBBox().width)
+      yLabelsRightMinWidth = Math.max(yLabelsRightMinWidth, textR.getBBox().width)
 
-    svg.push(gLeftYLabels, gRightYLabels)
+      s(gYLabelsL[z], textL)
+      s(gYLabelsR[z], textR)
+    })
 
-    const zLabel = s('text', {
+    const text = s('text', {
       x: 0,
-      y: gapY * (gZLabels.length - 2),
+      y: yGap * z,
       'text-anchor': 'start',
       'alignment-baseline': 'middle',
-      $onclick: () => onclick(z)
+      $onclick: () => onclick(z),
+      $style: { fontWeight: 'bold' }
     },
     zLabels[z])
 
-    gZLabels.push(zLabel)
-    gZColors.push(['circle', { cx: 0, cy: gapY * (gZColors.length - 2), r: 5, fill }])
+    s(_svg, text)
 
-    toUpdate.push([gLeftYLabels, gRightYLabels, zLabel])
+    zLabelsMinWidth = Math.max(zLabelsMinWidth, text.getBBox().width)
+
+    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])) {
-        gGraph.push(['g', ['circle', { cx: px, cy: valuesPx[x], r: 5, fill }]])
+        s(gGraph, ['g', ['circle', { cx: px, cy: valuesPx[x], r: 5, fill }]])
 
         if (!isNaN(valuesPx[x - 1])) {
-          gGraph.push(['line', { x1: px, x2: xPx[x - 1], y1: valuesPx[x], y2: valuesPx[x - 1], stroke: fill }])
+          s(gGraph, ['line', { x1: px, x2: xPx[x - 1], y1: valuesPx[x], y2: valuesPx[x - 1], stroke: fill }])
         }
       }
     })
   })
 
+  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)
+
+      xLabelsMinHeight = Math.max(xLabelsMinHeight, xLabelsRotate ? text.getBBox().width : text.getBBox().height)
+
+      s(gXLabels, text)
+    })
+  }
+
+  const svgW = width + yLabelsLeftMinWidth + yLabelsRightMinWidth + zLabelsMinWidth + 4 * PADDING
+  const svgH = height + xLabelsMinHeight + (xLabels.length > 0 ? 3 : 2) * PADDING
+
+  s(gGraph, { transform: `translate(${yLabelsLeftMinWidth + PADDING} ${PADDING})` })
+
+  gYLabelsL.forEach(g => s(g, { transform: `translate(${yLabelsLeftMinWidth} ${PADDING})` }))
+  gYLabelsR.forEach(g => s(g, { transform: `translate(${width + yLabelsLeftMinWidth + 2 * PADDING} ${PADDING})` }))
+
+  s(gZColors, { transform: `translate(${width + yLabelsLeftMinWidth + yLabelsRightMinWidth + 3 * PADDING} ${PADDING})` })
+  s(gXLabels, { transform: `translate(${yLabelsLeftMinWidth + PADDING} ${height + 2 * PADDING})` })
+
   onclick(0)
 
-  return s(...svg)
+  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 + yLabelsLeftMinWidth + yLabelsRightMinWidth + 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;
 };