@jackens/nnn 2023.8.17

package/nnn.d.ts

@@ -0,0 +1,180 @@
+/**
+ * The type of arguments of the `$c` helper.
+ */
+export type $CNode = {
+  [attributeOrSelector: string]: string | number | $CNode;
+};
+
+/**
+ * The type of arguments of the `$c` helper.
+ */
+export type $CRoot = Record<string, $CNode>;
+
+/**
+ * The type of arguments of the `$escapeValues` and `$escape` helpers.
+ */
+export type $EscapeMap = Map<any, (value?: any) => string>;
+
+/**
+ * The type of arguments of the `$h` and `$s` helpers.
+ */
+export type $HArgs = [
+  string | Node,
+  ...(Record<string, any> | null | undefined | Node | string | number | $HArgs)[]
+];
+
+/**
+ * A simple CSS-in-JS helper.
+ *
+ * The `root` parameter provides a hierarchical description of CSS rules.
+ *
+ * - Keys of sub-objects whose values are NOT objects are treated as CSS attribute, and values are treated as values of those CSS attributes; the concatenation of keys of all parent objects is a CSS rule.
+ * - All keys ignore the part starting with a splitter (default: `$$`) sign until the end of the key (e.g. `src$$1` → `src`, `@font-face$$1` → `@font-face`).
+ * - In keys specifying CSS attribute, all uppercase letters are replaced by lowercase letters with an additional `-` character preceding them (e.g. `fontFamily` → `font-family`).
+ * - Commas in keys that makes a CSS rule cause it to “split” and create separate rules for each part (e.g. `{div:{margin:1,'.a,.b,.c':{margin:2}}}` → `div{margin:1}div.a,div.b,div.c{margin:2}`).
+ * - Top-level keys that begin with `@` are not concatenated with sub-object keys.
+ */
+export function $c(root: $CRoot, splitter?: string): string;
+
+/**
+ * A helper for creating a chart based on a table (conf. <https://jackens.github.io/chartable/>).
+ */
+export function $chartable(options?: {
+  bottomPx?: number;
+  headerColumn?: boolean;
+  headerRow?: boolean;
+  leftPx?: number;
+  rightPx?: number;
+  series?: number[][];
+  seriesLabels?: string[];
+  table?: HTMLTableElement;
+  title?: string;
+  topPx?: number;
+  xGapPx?: number;
+  xLabels?: string[];
+  yGapPx?: number;
+  yMax?: number;
+}): SVGSVGElement;
+
+/**
+ * A helper that checks equality of the given arguments.
+ */
+export function $eq(x: any, y: any): boolean;
+
+/**
+ * A generic helper for escaping `values` by given `escapeMap` (in *TemplateStrings* flavor).
+ */
+export function $escape(escapeMap: $EscapeMap, template: TemplateStringsArray, ...values: any[]): string;
+
+/**
+ * A generic helper for escaping `values` by given `escapeMap`.
+ */
+export function $escapeValues(escapeMap: $EscapeMap, values: any[]): string[];
+
+/**
+ * A helper that implements typographic corrections specific to Polish typography.
+ */
+export function $fixTypography(node: Node): void;
+
+/**
+ * A convenient helper for getting values of nested objects.
+ */
+export function $get(defaultValue: any, ref: any, ...keys: (string | number | symbol)[]): any;
+
+/**
+ * A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `HTMLElement`s (see also `$s`).
+ *
+ * - The first argument of type `string` specifies the tag of the element to be created.
+ * - The first argument of type `Node` specifies the element to be modified.
+ * - All other arguments of type `Record<string, any>` are mappings of attributes and properties.
+ *   Keys starting with `$` specify *properties* (without the leading `$`) to be set on the element being created or modified.
+ *   (Note that `$` is not a valid attribute name character.)
+ *   All other keys specify *attributes* to be set by `setAttribute`.
+ *   An attribute equal to `false` causes the attribute to be removed by `removeAttribute`.
+ * - All other arguments of type `null` or `undefined` are simply ignored.
+ * - All other arguments of type `Node` are appended to the element being created or modified.
+ * - All other arguments of type `string`/`number` are converted to `Text` nodes and appended to the element being created or modified.
+ * - All other arguments of type `$HArgs` are passed to `$h` and the results are appended to the element being created or modified.
+ */
+export function $h<T extends keyof HTMLElementTagNameMap>(tag: T, ...args: $HArgs[1][]): HTMLElementTagNameMap[T];
+export function $h<N extends Node>(node: N, ...args: $HArgs[1][]): N;
+export function $h(...args: $HArgs): Node;
+
+/**
+ * A replacement for the `in` operator (not to be confused with the `for-in` loop) that works properly.
+ */
+export function $in(key: any, ref: any): boolean;
+
+/**
+ * A helper that checks if the given argument is of a certain type.
+ */
+export function $is(type: BigIntConstructor, arg: any): arg is bigint;
+export function $is(type: BooleanConstructor, arg: any): arg is boolean;
+export function $is(type: NumberConstructor, arg: any): arg is number;
+export function $is(type: StringConstructor, arg: any): arg is string;
+export function $is(type: SymbolConstructor, arg: any): arg is symbol;
+export function $is(type: undefined, arg: any): arg is null | undefined;
+export function $is<T extends abstract new (...args: any[]) => any>(type: T, arg: any): arg is InstanceType<T>;
+
+/**
+ * Language translations helper.
+ */
+export function $locale(
+  locales: Record<string, Record<string, string | Record<string, string>>>,
+  defaultLanguage: string,
+  languages?: readonly string[]
+): (text?: string, version?: string) => string;
+
+/**
+ * A generic helper for syntax highlighting (see also `$nanolightJs`).
+ */
+export function $nanolight(
+  pattern: RegExp,
+  highlighters: ((chunk: string, index: number) => $HArgs[1])[],
+  code: string
+): $HArgs[1][];
+
+/**
+ * A helper for highlighting JavaScript.
+ */
+export function $nanolightJs(codeJs: string): $HArgs[1][];
+
+/**
+ * A helper for choosing the correct singular and plural.
+ */
+export function $plUral(singular: string, plural2: string, plural5: string, value: number): string;
+
+/**
+ * A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `SVGElement`s (see also `$h`).
+ *
+ * - The first argument of type `string` specifies the tag of the element to be created.
+ * - The first argument of type `Node` specifies the element to be modified.
+ * - All other arguments of type `Record<string, any>` are mappings of attributes and properties.
+ *   Keys starting with `$` specify *properties* (without the leading `$`) to be set on the element being created or modified.
+ *   (Note that `$` is not a valid attribute name character.)
+ *   All other keys specify *attributes* to be set by `setAttributeNS`.
+ *   An attribute equal to `false` causes the attribute to be removed by `removeAttributeNS`.
+ * - All other arguments of type `null` or `undefined` are simply ignored.
+ * - All other arguments of type `Node` are appended to the element being created or modified.
+ * - All other arguments of type `string`/`number` are converted to `Text` nodes and appended to the element being created or modified.
+ * - All other arguments of type `$HArgs` are passed to `$s` and the results are appended to the element being created or modified.
+ */
+export function $s<T extends keyof SVGElementTagNameMap>(tag: T, ...args: $HArgs[1][]): SVGElementTagNameMap[T];
+export function $s<N extends Node>(node: N, ...args: $HArgs[1][]): N;
+export function $s(...args: $HArgs): Node;
+
+/**
+ * A convenient helper for setting values of nested objects.
+ */
+export function $set(value: any, ref: any, ...keys: (string | number | symbol)[]): void;
+
+/**
+ * A helper that generates a UUID v1 identifier (with a creation timestamp).
+ *
+ * - The optional `node` parameter should have the format `/^[0123456789abcdef]+$/`.
+ *   Its value will be trimmed to last 12 characters and left padded with zeros.
+ */
+export function $uuid1(options?: {
+  date?: Date;
+  node?: string;
+}): string;

package/nnn.js

@@ -0,0 +1,638 @@
+/**
+ * @typedef {[
+ *   string | Node,
+ *   ...(Record<string, any> | null | undefined | Node | string | number | $HArgs)[]
+ * ]} $HArgs
+ */
+
+/**
+ * @typedef {{
+ *   [attributeOrSelector: string]: string | number | $CNode;
+ * }} $CNode
+ */
+
+/**
+ * @typedef {Record<string, $CNode>} $CRoot
+ */
+
+/**
+ * @typedef {Map<any, (value?: any) => string>} $EscapeMap
+ */
+
+const _c = (
+  /** @type {$CNode}   */ node,
+  /** @type {string}   */ prefix,
+  /** @type {string[]} */ result,
+  /** @type {(text: string) => string} */ split
+) => {
+  const /** @type {[$CNode | string[], string][]} */ queue = [[node, prefix]]
+
+  while (queue.length) {
+    const [style2, prefix2] = queue.shift() ?? []
+
+    if (style2 == null || prefix2 == null) {
+      continue
+    }
+
+    if ($is(Array, style2)) {
+      result.push(prefix2, prefix2 !== '' ? '{' : '', style2.join(';'), prefix2 !== '' ? '}' : '')
+    } else {
+      const /** @type {[$CNode | string[], string][]} */ todo = []
+      let /** @type {string[]} */ attributes = []
+      let attributesPushed = false
+
+      for (const key in style2) {
+        const value = style2[key]
+
+        if ($is(String, value) || $is(Number, value)) {
+          if (!attributesPushed) {
+            attributesPushed = true
+            attributes = []
+            todo.push([attributes, prefix2])
+          }
+
+          attributes.push(`${split(key).replace(/([A-Z])/g, (_, letter) => '-' + letter.toLowerCase())}:${value}`)
+        } else {
+          attributesPushed = false
+
+          const /** @type {string[]} */ newPrefix = []
+          const keySplitted = key.split(',')
+
+          for (const prefixItem of prefix2.split(',')) {
+            for (const keyItem of keySplitted) {
+              newPrefix.push(prefixItem + keyItem)
+            }
+          }
+
+          todo.push([value, newPrefix.join(',')])
+        }
+      }
+
+      queue.unshift(...todo)
+    }
+  }
+}
+
+export const $c = (/** @type {$CRoot} */ root, splitter = '$$') => {
+  const split = (/** @type {string} */ text) => text.split(splitter)[0]
+  const /** @type {string[]} */ result = []
+
+  for (const key in root) {
+    const value = root[key]
+
+    if (key[0] === '@') {
+      result.push(split(key) + '{')
+      _c(value, '', result, split)
+      result.push('}')
+    } else {
+      _c(value, split(key), result, split)
+    }
+  }
+
+  return result.join('')
+}
+
+const _COLORS = ['#e22', '#e73', '#fc3', '#ad4', '#4d9', '#3be', '#45d', '#c3e']
+
+/**
+ * @param {{
+ *   bottomPx?: number;
+ *   headerColumn?: boolean;
+ *   headerRow?: boolean;
+ *   leftPx?: number;
+ *   rightPx?: number;
+ *   series?: number[][];
+ *   seriesLabels?: string[];
+ *   table?: HTMLTableElement;
+ *   title?: string;
+ *   topPx?: number;
+ *   xGapPx?: number;
+ *   xLabels?: string[];
+ *   yGapPx?: number;
+ *   yMax?: number;
+ * }} options
+ */
+export const $chartable = ({
+  bottomPx = 50,
+  headerColumn = false,
+  headerRow = true,
+  leftPx = 200,
+  rightPx = 200,
+  series = [],
+  seriesLabels = [],
+  table,
+  title,
+  topPx = 70,
+  xGapPx = 70,
+  xLabels = [],
+  yGapPx = 30,
+  yMax = 10
+} = {}) => {
+  if (table != null) {
+    series = []
+    seriesLabels = []
+    xLabels = []
+    table.querySelectorAll('tr').forEach((row, r) => row.querySelectorAll('td,th').forEach((col, c) => {
+      const s = c - +headerColumn
+      const v = r - +headerRow
+      // @ts-expect-error
+      const value = col.innerText
+
+      if (s >= 0 && v >= 0) {
+        $set(parseFloat(value), series, s, v)
+      } else if (s >= 0 && v < 0) {
+        seriesLabels[s] = value
+      } else if (s < 0 && v >= 0) {
+        xLabels[v] = value
+      }
+    }))
+  }
+
+  const ranges = series.map(values => {
+    const validValues = values.filter(value => !isNaN(value))
+    return [Math.min(...validValues), Math.max(...validValues)]
+  })
+
+  let bestScales = [Infinity, -Infinity, Infinity, -Infinity, Infinity]
+
+  ranges.forEach(([min1, max0]) => ranges.forEach(([min0, max1]) => {
+    if (min0 >= min1 && max1 >= max0) {
+      let min2 = Infinity
+      let max2 = -Infinity
+
+      ranges.forEach(([min, max]) => {
+        if (min < min1 || max1 < max) {
+          if (min2 > min) {
+            min2 = min
+          }
+          if (max2 < max) {
+            max2 = max
+          }
+        }
+      })
+
+      const cost = ranges.reduce((result, [min, max]) =>
+        (result += 1 - (max - min) / (min1 <= min && max <= max1 ? max1 - min1 : max2 - min2)), 0)
+
+      if (bestScales[4] > cost) {
+        bestScales = [min1, max1, min2, max2, cost]
+      }
+    }
+  }))
+
+  const [min1, max1, min2, max2] = bestScales
+  const xMax = series[0].length
+  const xi = Array.from({ length: xMax }, (_, x) => x * xGapPx)
+  const yi = Array.from({ length: yMax }, (_, y) => y * yGapPx)
+  const w = xGapPx * (xMax - 1)
+  const h = yGapPx * (yMax - 1)
+  const svgW = leftPx + w + rightPx
+  const svgH = topPx + h + bottomPx
+  const /** @type {$HArgs} */ graph = ['g',
+    { transform: `translate(${leftPx} ${topPx})` },
+    ...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 {$HArgs} */ leftDots = ['g',
+    { class: 'chartable-left-legend-dots', transform: 'translate(-80 0)' }]
+  const /** @type {$HArgs} */ leftLabels = ['g',
+    { class: 'chartable-left-legend-labels', transform: 'translate(-95 0)' }]
+  const /** @type {$HArgs} */ rightDots = ['g',
+    { class: 'chartable-right-legend-dots', transform: 'translate(80 0)' }]
+  const /** @type {$HArgs} */ rightLabels = ['g',
+    { class: 'chartable-right-legend-labels', transform: 'translate(95 0)' }]
+  const yLabel = (/** @type {number} */ min, /** @type {number} */ max, /** @type {number} */ y) =>
+    (min + (max - min) * (yMax - 1 - y) / (yMax - 1)).toFixed(2).replace(/\.?0+$/, '')
+
+  series.forEach((values, s) => {
+    const cls = `chartable-series-${s + 1}`
+    const color = _COLORS[s % _COLORS.length]
+    let [min, max] = ranges[s]
+
+    if (min1 <= min && max <= max1) {
+      min = min1
+      max = max1
+      leftDots.push(['circle', { class: cls, cx: 0, cy: yGapPx * (leftDots.length - 2), r: 5, fill: color }])
+      leftLabels.push(['text', { x: 0, y: yGapPx * (leftLabels.length - 2), 'text-anchor': 'end', 'alignment-baseline': 'middle' }, seriesLabels[s]])
+    } else {
+      min = min2
+      max = max2
+      rightDots.push(['circle', { class: cls, cx: 0, cy: yGapPx * (rightDots.length - 2), r: 5, fill: color }])
+      rightLabels.push(['text', { x: 0, y: yGapPx * (rightLabels.length - 2), 'text-anchor': 'start', 'alignment-baseline': 'middle' }, seriesLabels[s]])
+    }
+
+    const y = values.map(v => isNaN(v) ? v : h * (max - v) / (max - min))
+
+    xi.forEach((x, i) => {
+      if (!isNaN(y[i])) {
+        graph.push(['circle', { class: cls, cx: x, cy: y[i], r: 5, fill: color }])
+
+        if (!isNaN(y[i - 1])) {
+          graph.push(['line', { class: cls, x1: x, x2: xi[i - 1], y1: y[i], y2: y[i - 1], stroke: color }])
+        }
+      }
+    })
+  })
+
+  return $s('svg', {
+    viewBox: `0 0 ${svgW} ${svgH}`,
+    width: `${svgW}px`,
+    height: `${svgH}px`,
+    class: 'chartable'
+  }, title != null
+    ? ['text',
+        { x: svgW / 2, y: topPx / 2, 'text-anchor': 'middle', 'alignment-baseline': 'middle', class: 'chartable-title' },
+        title]
+    : null,
+  graph,
+  min1 < Infinity
+    ? ['g',
+        { transform: `translate(${leftPx} ${topPx})` },
+        ['g',
+          { class: 'chartable-left-y-labels', transform: 'translate(-15 0)' },
+          ...yi.map((y, i) => ['text',
+            { x: 0, y, 'text-anchor': 'end', 'alignment-baseline': 'middle' },
+            yLabel(min1, max1, i)])],
+        leftDots, leftLabels]
+    : null,
+  min2 < Infinity
+    ? ['g',
+        { transform: `translate(${leftPx + w} ${topPx})` },
+        ['g',
+          { class: 'chartable-right-y-labels', transform: 'translate(15 0)' },
+          ...yi.map((y, i) => ['text',
+            { x: 0, y, 'text-anchor': 'start', 'alignment-baseline': 'middle' },
+            yLabel(min2, max2, i)])],
+        rightDots, rightLabels]
+    : null,
+  xLabels.length > 0
+    ? ['g',
+        { transform: `translate(${leftPx} ${topPx + h})` },
+        ['g',
+          { class: 'chartable-x-labels', transform: 'translate(0 15)' },
+          ...xi.map((x, i) => ['text',
+            { x, y: 0, 'text-anchor': 'middle', 'alignment-baseline': 'hanging' },
+            xLabels[i]])]]
+    : null
+  )
+}
+
+export const $eq = /** @returns {boolean} */ (/** @type {any} */ x, /** @type {any} */ y) => {
+  if (x === y) {
+    return true
+  }
+
+  const xConstructor = x?.constructor
+
+  if (xConstructor === y?.constructor) {
+    if (xConstructor === Number) {
+      return (isNaN(x) && isNaN(y)) || +x === +y
+    }
+
+    if (xConstructor === Date) {
+      return +x === +y
+    }
+
+    if (xConstructor === String || xConstructor === RegExp) {
+      return '' + x === '' + y
+    }
+
+    if (xConstructor === Array) {
+      return x.length === y.length && x.every((/** @type {any} */ item, /** @type {number} */ index) => $eq(item, y[index]))
+    }
+
+    if (xConstructor === Object) {
+      const keysOfX = Object.keys(x)
+      return keysOfX.length === Object.keys(y).length && keysOfX.every(key => $eq(x[key], y[key]))
+    }
+
+    if (xConstructor === Set || xConstructor === Map) {
+      if (x.size !== y.size) {
+        return false
+      }
+      const xa = [...x]
+      const ya = [...y]
+      return xa.every(xv => ya.find(yv => $eq(xv, yv)))
+    }
+  }
+
+  return false
+}
+
+export const $escape = (
+  /** @type {$EscapeMap}           */ escapeMap,
+  /** @type {TemplateStringsArray} */ template,
+  /** @type {any[]}                */ ...values
+) => String.raw(template, ...$escapeValues(escapeMap, values))
+
+export const $escapeValues = (
+  /** @type {$EscapeMap} */ escapeMap,
+  /** @type {any[]}      */ values
+) => values.map(value => (escapeMap.get(value?.constructor) ?? escapeMap.get(undefined))?.(value) ?? '')
+
+const TAGS_TO_SKIP = { IFRAME: 1, NOSCRIPT: 1, PRE: 1, SCRIPT: 1, STYLE: 1, TEXTAREA: 1 }
+
+export const $fixTypography = (/** @type {Node} */ node) => {
+  const /** @type {Node[]} */ queue = [node]
+
+  while (queue.length > 0) {
+    const node0 = queue.shift()
+
+    if (node0 instanceof Element) {
+      for (let i = 0; i < node0.childNodes.length; ++i) {
+        const childNode = node0.childNodes[i]
+
+        if (childNode instanceof Text) {
+          queue.push(childNode)
+        } else if (childNode instanceof Element && !$in(childNode.tagName, TAGS_TO_SKIP)) {
+          queue.push(childNode)
+        }
+      }
+    } else if (node0 instanceof Text && node0.nodeValue != null && node0.nodeValue.trim() !== '') {
+      let /** @type {Node} */ previousNode = node0
+
+      node0.nodeValue.split(/(\s|\(|„)([aiouwz—]\s)/gi).forEach((chunk, i) => {
+        i %= 3
+
+        const currentNode = i === 2
+          ? $h('span', { style: 'white-space:nowrap' }, chunk)
+          : i === 1
+            ? document.createTextNode(chunk)
+            : document.createTextNode(chunk.replace(/(\/(?=[^/\s])|\.(?=[^\s]))/g, '$1\u200B'))
+
+        if (node0.parentNode != null) {
+          node0.parentNode.insertBefore(currentNode, previousNode.nextSibling)
+        }
+
+        previousNode = currentNode
+      })
+
+      node0.parentNode?.removeChild(node0)
+    }
+  }
+}
+
+export const $get = (
+  /** @type {any} */ defaultValue,
+  /** @type {any} */ ref,
+  /** @type {(string | number | symbol)[]} */ ...keys
+) => {
+  for (const key of keys) {
+    if (!$in(key, ref)) {
+      return defaultValue
+    }
+
+    ref = ref[key]
+  }
+
+  return ref
+}
+
+const /** @type {Record<string, string>} */ NS = {
+  xlink: 'http://www.w3.org/1999/xlink'
+}
+
+/**
+ * @type {{
+ *   (namespaceURI?: null | undefined): {
+ *     <T extends keyof HTMLElementTagNameMap>(tag:  T, ...args: $HArgs[1][]): HTMLElementTagNameMap[T];
+ *     <N extends Node>                       (node: N, ...args: $HArgs[1][]): N;
+ *     (...args: $HArgs): Node;
+ *   };
+ *   (namespaceURI: 'http://www.w3.org/2000/svg'): {
+ *     <T extends keyof SVGElementTagNameMap> (tag:  T, ...args: $HArgs[1][]): SVGElementTagNameMap[T];
+ *     <N extends Node>                       (node: N, ...args: $HArgs[1][]): N;
+ *     (...args: $HArgs): Node;
+ *   };
+ * }}
+ */
+const _h = (/** @type {string?=} */ namespaceURI) => {
+  const createElement = namespaceURI == null
+    ? (/** @type {string } */ tag) => document.createElement(tag)
+    : (/** @type {string } */ tag) => document.createElementNS(namespaceURI, tag)
+
+  const h = (/** @type {$HArgs[0]} */ tagOrNode, /** @type {$HArgs[1][]} */ ...args) => {
+    const node = $is(String, tagOrNode) ? createElement(tagOrNode) : tagOrNode
+
+    for (const arg of args) {
+      let child = null
+
+      if (arg instanceof Node) {
+        child = arg
+      } else if ($is(String, arg) || $is(Number, arg)) {
+        // @ts-expect-error
+        child = new Text(arg)
+      } else if ($is(Array, arg)) {
+        // @ts-expect-error
+        child = h(...arg)
+      } else if (arg != null) {
+        for (const name in arg) {
+          const value = arg[name]
+
+          if (name[0] === '$') {
+            const name1 = name.slice(1)
+
+            if ($is(Object, value)) {
+              // @ts-expect-error
+              node[name1] = node[name1] ?? {}
+              // @ts-expect-error
+              Object.assign(node[name1], value)
+            } else {
+              // @ts-expect-error
+              node[name1] = value
+            }
+          } else if (node instanceof Element) {
+            const indexOfColon = name.indexOf(':')
+
+            if (indexOfColon >= 0) {
+              const /** @type {string=} */ ns = NS[name.slice(0, indexOfColon)]
+
+              if (ns != null) {
+                const basename = name.slice(indexOfColon + 1)
+
+                if (value === true) {
+                  node.setAttributeNS(ns, basename, '')
+                } else if (value === false) {
+                  node.removeAttributeNS(ns, basename)
+                } else {
+                  node.setAttributeNS(ns, basename, $is(String, value) ? value : '' + value)
+                }
+              }
+            } else {
+              if (value === true) {
+                node.setAttribute(name, '')
+              } else if (value === false) {
+                node.removeAttribute(name)
+              } else {
+                node.setAttribute(name, $is(String, value) ? value : '' + value)
+              }
+            }
+          }
+        }
+      }
+
+      if (child != null) {
+        node.appendChild(child)
+      }
+    }
+
+    return node
+  }
+
+  return h
+}
+
+export const $h = _h()
+
+export const $in = (/** @type {any} */ key, /** @type {any} */ ref) =>
+  ($is(String, key) || $is(Number, key) || $is(Symbol, key)) && Object.hasOwnProperty.call(ref ?? Object, key)
+
+/**
+ * @template {abstract new (...args: any[]) => any} T
+ *
+ * @type {{
+ *   (type: BigIntConstructor,  arg: any): arg is bigint;
+ *   (type: BooleanConstructor, arg: any): arg is boolean;
+ *   (type: NumberConstructor,  arg: any): arg is number;
+ *   (type: StringConstructor,  arg: any): arg is string;
+ *   (type: SymbolConstructor,  arg: any): arg is symbol;
+ *   (type: undefined,          arg: any): arg is undefined | null;
+ *   <T extends abstract new (...args: any[]) => any>(type: T, arg: any): arg is InstanceType<T>;
+ * }}
+ *
+ * @returns {arg is bigint | boolean | number | string | symbol | undefined | null | InstanceType<T>}
+ */
+export const $is = (/** @type {T} */ type, /** @type {any} */ arg) => arg?.constructor === type
+
+const _locale = (
+  /** @type {Record<string, Record<string, string | Record<string, string>>>} */ locales,
+  /** @type {string} */ language,
+  /** @type {string} */ text,
+  /** @type {string} */ version
+) => {
+  // @ts-expect-error
+  const v = locales?.[language]?.[version]?.[text]
+
+  if ($is(String, v)) {
+    return v
+  }
+
+  const t = locales?.[language]?.[text]
+
+  return $is(String, t) ? t : text
+}
+
+export const $locale = (
+  /** @type {Record<string, Record<string, string | Record<string, string>>>} */ locales,
+  /** @type {string} */ defaultLanguage,
+  languages = navigator.languages
+) => {
+  for (const language of languages) {
+    if ($in(language, locales)) {
+      // @ts-expect-error
+      return _locale.bind(0, locales, language)
+    }
+  }
+
+  // @ts-expect-error
+  return _locale.bind(0, locales, defaultLanguage)
+}
+
+export const $nanolight = (
+  /** @type {RegExp} */ pattern,
+  /** @type {((chunk: string, index: number) => $HArgs[1])[]} */ highlighters,
+  /** @type {string} */ code
+) => {
+  const /** @type {$HArgs[1][]} */ result = []
+
+  code.split(pattern).forEach((chunk, index) => {
+    index %= highlighters.length
+    if (chunk != null) {
+      result.push(highlighters[index](chunk, index))
+    }
+  })
+
+  return result
+}
+
+// @ts-expect-error
+export const $nanolightJs = $nanolight.bind(0,
+  /('.*?'|".*?"|`[\s\S]*?`)|(\/\/.*?\n|\/\*[\s\S]*?\*\/)|(break|case|catch|const|continue|debugger|default|delete|do|else|eval|export\s+type|export|extends|false|finally|for|from|function|goto|if|import|in|instanceof|is|keyof|let|NaN|new|null|package|return|super|switch|this|throw|true|try|typeof|undefined|var|void|while|with|yield)(?!\w)|([<>=.?:&|!~*/%+-])|(0x[\dabcdef]+|0o[01234567]+|0b[01]+|\d+(?:\.[\d_]+)?(?:e[+-]?[\d_]+)?)|([$\w]+)(?=\()|([$\wąćęłńóśżźĄĆĘŁŃÓŚŻŹ]+)/,
+  [
+    chunk => chunk, // no match
+    chunk => ['u', chunk], // string literals
+    chunk => ['em', chunk], // comments
+    chunk => ['b', chunk], // keywords
+    chunk => ['b', chunk], // operators
+    chunk => ['u', chunk], // number literals
+    chunk => ['u', chunk], // function calls
+    chunk => ['i', chunk] // literals
+  ]
+)
+
+export const $plUral = (
+  /** @type {string} */ singular,
+  /** @type {string} */ plural2,
+  /** @type {string} */ plural5,
+  /** @type {number} */ value
+) => {
+  const absValue = Math.abs(value)
+  const absValueMod10 = absValue % 10
+
+  return value === 1
+    ? singular
+    : absValue === 12 || absValue === 13 || absValue === 14
+      ? plural5
+      : absValueMod10 === 2 || absValueMod10 === 3 || absValueMod10 === 4
+        ? plural2
+        : plural5
+}
+
+export const $s = _h('http://www.w3.org/2000/svg')
+
+export const $set = (
+  /** @type {any} */ value,
+  /** @type {any} */ ref,
+  /** @type {(string | number | symbol)[]} */ ...keys
+) => {
+  const last = keys.length - 1
+
+  if (last < 0) {
+    return
+  }
+
+  for (let k = 0; k < last; ++k) {
+    const key = keys[k]
+
+    if (!$in(key, ref)) {
+      ref[key] = $is(Number, keys[k + 1]) ? [] : {}
+    }
+
+    ref = ref[key]
+  }
+
+  ref[keys[last]] = value
+}
+
+const _ZEROS = '0'.repeat(16)
+let _counter = 0
+
+export const $uuid1 = ({
+  date = new Date(),
+  node = Math.random().toString(16).slice(2)
+} = {}) => {
+  const time = _ZEROS + (10_000 * (+date + 12_219_292_800_000)).toString(16)
+
+  _counter = (_counter + 1) & 0x3fff
+
+  return time.slice(-8).concat(
+    '-',
+    time.slice(-12, -8),
+    // @ts-expect-error
+    -1,
+    time.slice(-15, -12),
+    '-',
+    (8 | (_counter >> 12)).toString(16),
+    (_ZEROS + (_counter & 0xfff).toString(16)).slice(-3),
+    '-',
+    (_ZEROS + node).slice(-12))
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "author": "Jackens",
+  "description": "Jackens’ JavaScript helpers.",
+  "homepage": "https://jackens.github.io/doc/",
+  "keywords": [
+    "CSS-in-JS",
+    "DOM",
+    "HyperScript",
+    "RWD",
+    "deepEqual",
+    "equal",
+    "escape",
+    "h",
+    "highlight",
+    "in",
+    "is",
+    "locale",
+    "localization",
+    "nanolight",
+    "nnn",
+    "translation",
+    "typography",
+    "uuid",
+    "uuid1",
+    "uuidv1"
+  ],
+  "license": "MIT",
+  "main": "nnn.js",
+  "types": "nnn.d.ts",
+  "name": "@jackens/nnn",
+  "type": "module",
+  "version": "2023.8.17"
+}

package/readme.md

@@ -0,0 +1,5 @@
+# nnn
+
+Jackens’ JavaScript helpers.
+
+<https://jackens.github.io/doc/>