@chronocide/hyper 0.3.1 → 0.3.2

package/README.md

@@ -1,9 +1,9 @@
-<div style="text-align: center">
+<div align="center">
   <h1>@chronocide/hyper</h1>
-  <p>Tiny <b>TSX</b> DOM library.</p>
+  <p>Tiny DOM library</p>
 </div>
 
-<div style="text-align: center">
+<div align="center">
   <a href="/LICENSE">
     <img alt="License AGPLv3" src="https://img.shields.io/badge/license-AGPLv3-blue.svg" />
   </a>
@@ -13,10 +13,13 @@
   </a>
 </div>
 
-Hyper is a tiny TypeScript library designed to ease working with the DOM. Hyper tries to be as simple as possible whilst maintaining good developer experience and currently features:
+---
 
- - Relies on native API's (DOM)
- - All state is stored within the DOM[*](#exception), no vDOM
+`hyper` is a tiny TypeScript library designed to ease working with the DOM. `hyper` tries to be as simple as possible whilst maintaining good developer experience and currently features:
+
+- Simple wrapper around native API's (DOM)
+- No vDOM, all state is stored within the DOM[*](#exception)
+- List caching
 
 <p id="exception"><code>document</code> is stored internally, this prevents binding it for every single call.</p>
 
@@ -28,7 +31,7 @@ npm i @chronocide/hyper
 
 ## Usage
 
-```TS
+```ts
 import h from '@chronocide/hyper';
 
 const img = h('img')({ src: '/cat.png' })(); // HTMLImageElement
@@ -38,30 +41,31 @@ document.body.appendChild(img);
 
 ### List
 
-Components are cached and only updated if the data is changed, order does not matter. Data does not need to be unique, duplicate nodes are cloned.
+List items can be cached using `list`, only updated if the data is changed; order does not matter. Data does not need to be unique, as duplicate nodes are cloned.
 
-```TS
+```ts
 import type { Component } from '@chronocide/hyper';
-import { list } from '@chronocide/hyper';
+
+import h, { list } from '@chronocide/hyper';
 
 type Planet = { id: string; name: string };
 
-const data: Planet[] = [
+const planets: Planet[] = [
   { id: 'jupiter', name: 'Jupiter' },
   { id: 'mars', name: 'Mars' },
   { id: 'pluto', name: 'Pluto' }
 ];
 
-const ul = h('ul')()();
+const ul = h('ul')()(); // <ul></ul>
 const component: Component<Planet> = planet => h('li')()(planet.name);
 
 const update = list<Planet>(component)(ul);
-update(data);
+update(planets); // <ul><li>Jupiter</li><li>Mars</li><li>Pluto</li></ul>
 ```
 
-### Testing
+## Testing
 
-Hyper relies on the DOM, which may not always be available. In those cases, it's possible to set a custom DOM using `env`:
+`hyper` relies on the DOM, which may not always be available. In those cases, it's possible to set a custom DOM using `env`:
 
 ```TS
 import { env } from '@chronocide/hyper';
@@ -75,7 +79,7 @@ Examples can be found in the test files, such as [hyper.spec.ts](/src/hyper.spec
 
 ## Development
 
-Hyper uses `puppeteer` for browser testing and does not install Chrome by default. To run tests, create an `.env` file by running
+`hyper` uses `puppeteer` for browser testing and does not install Chrome by default. To run tests, create an `.env` file using:
 
 ```sh
 npm run env

package/dist/hyper.d.ts

@@ -1,24 +1,22 @@
-type Attributes = Record<string, unknown>;
-
-type Child = Node | string;
-type HTMLVoidElementTagName = 'area' | 'base' | 'br' | 'col' | 'embed' | 'hr' | 'img' | 'input' | 'link' | 'meta' | 'source' | 'track' | 'wbr';
-
-declare class Env {
-    private _document;
-    get document(): Document;
-    set document(document: Document);
-    constructor();
-}
-
-type Component<T> = (data: T) => Element;
-declare const _default$1: <T>(component: Component<T>) => (root: Element) => (next: T[]) => void;
-
-declare const env: Env;
-declare const _default: <T extends keyof HTMLElementTagNameMap>(tag: T) => <P extends Attributes>(attributes?: P | undefined) => (...children: T extends HTMLVoidElementTagName ? never[] : Child[]) => HTMLElementTagNameMap[T];
-
-declare const svg: <T extends keyof SVGElementTagNameMap>(tag: T) => <P extends Attributes>(attributes?: P | undefined) => (...children: Child[]) => SVGElementTagNameMap[T];
-declare const mathml: <T extends keyof MathMLElementEventMap>(tag: T) => <P extends Attributes>(attributes?: P | undefined) => (...children: Child[]) => MathMLElement;
-declare const xml: (tag: string) => <P extends Attributes>(attributes?: P) => (...children: Child[]) => HTMLElement;
-
-export { _default as default, env, _default$1 as list, mathml, svg, xml };
-export type { Attributes, Child, Component, HTMLVoidElementTagName };
+type Attributes = Record<string, unknown>;
+type Child = Node | string;
+type HTMLVoidElementTagName = 'area' | 'base' | 'br' | 'col' | 'embed' | 'hr' | 'img' | 'input' | 'link' | 'meta' | 'source' | 'track' | 'wbr';
+type Component<T> = (data: T) => Element;
+
+declare class Env {
+    private _document;
+    get document(): Document;
+    set document(document: Document);
+    constructor();
+}
+
+declare const env: Env;
+declare const _default: <T extends keyof HTMLElementTagNameMap>(tag: T) => <P extends Attributes>(attributes?: P | undefined) => (...children: T extends HTMLVoidElementTagName ? never[] : Child[]) => HTMLElementTagNameMap[T];
+
+declare const svg: <T extends keyof SVGElementTagNameMap>(tag: T) => <P extends Attributes>(attributes?: P | undefined) => (...children: Child[]) => SVGElementTagNameMap[T];
+declare const mathml: <T extends keyof MathMLElementEventMap>(tag: T) => <P extends Attributes>(attributes?: P | undefined) => (...children: Child[]) => MathMLElement;
+declare const xml: (tag: string) => <P extends Attributes>(attributes?: P) => (...children: Child[]) => HTMLElement;
+declare const list: <T>(component: Component<T>) => (root: Element) => (next: T[]) => void;
+
+export { _default as default, env, list, mathml, svg, xml };
+export type { Attributes, Child, Component, HTMLVoidElementTagName };

package/dist/hyper.js

@@ -1,69 +1,68 @@
-const maybe = (fn) => (x) => {
-  if (x === null || x === void 0) return null;
-  return fn(x);
-};
-
-const attributes = (element) => (attributes2) => Object.entries(attributes2).forEach(([k, v]) => {
-  if (typeof v === "string") element.setAttribute(k, v);
-  if (typeof v === "number") element.setAttribute(k, `${v}`);
-  if (v === true) element.toggleAttribute(k, v);
-});
-
-const create = (element) => (attributes$1) => (children) => {
-  maybe(attributes(element))(attributes$1);
-  element.append(...children);
-  return element;
-};
-const html = (document) => (tag) => (attributes) => (...children) => create(document.createElement(tag))(attributes)(children);
-const svg$1 = (document) => (tag) => (attributes) => (...children) => create(document.createElementNS("http://www.w3.org/2000/svg", tag))(attributes)(children);
-const mathml$1 = (document) => (tag) => (attributes) => (...children) => create(document.createElementNS("http://www.w3.org/1998/Math/MathML", tag))(attributes)(children);
-const xml$1 = (document) => (tag) => (attributes) => (...children) => create(document.createElementNS("http://www.w3.org/1999/xhtml", tag))(attributes)(children);
-
-class Env {
-  _document;
-  get document() {
-    if (!this._document) throw new Error("Missing document");
-    return this._document;
-  }
-  set document(document2) {
-    this._document = document2;
-  }
-  constructor() {
-    this._document = typeof document === "undefined" ? null : document;
-  }
-}
-
-var list = (component) => (root) => {
-  const cache = /* @__PURE__ */ new Map();
-  return (next) => {
-    const refs = /* @__PURE__ */ new WeakSet();
-    while (root.children.length > next.length) root.lastChild?.remove();
-    next.forEach((data, i) => {
-      const child = root.children.item(i);
-      let element = cache.get(data);
-      if (element === child) return;
-      if (!element) {
-        element = component(data);
-        cache.set(data, element);
-      }
-      if (refs.has(element)) {
-        element = element.cloneNode(true);
-      } else {
-        refs.add(element);
-      }
-      if (child) {
-        root.replaceChild(element, child);
-      } else {
-        root.appendChild(element);
-      }
-    });
-  };
-};
-
-const env = new Env();
-var hyper = (tag) => html(env.document)(tag);
-const svg = (tag) => svg$1(env.document)(tag);
-const mathml = (tag) => mathml$1(env.document)(tag);
-const xml = (tag) => xml$1(env.document)(tag);
-
-export { hyper as default, env, list, mathml, svg, xml };
+const maybe = (fn) => (x) => {
+  if (x === null || x === void 0) return null;
+  return fn(x);
+};
+
+const setAttributes = (element) => (attributes) => Object.entries(attributes).forEach(([k, v]) => {
+  if (typeof v === "string") element.setAttribute(k, v);
+  if (typeof v === "number") element.setAttribute(k, `${v}`);
+  if (v === true) element.toggleAttribute(k, v);
+});
+const create = (element) => (attributes) => (children) => {
+  maybe(setAttributes(element))(attributes);
+  element.append(...children);
+  return element;
+};
+const html = (document) => (tag) => (attributes) => (...children) => create(document.createElement(tag))(attributes)(children);
+const svg$1 = (document) => (tag) => (attributes) => (...children) => create(document.createElementNS("http://www.w3.org/2000/svg", tag))(attributes)(children);
+const mathml$1 = (document) => (tag) => (attributes) => (...children) => create(document.createElementNS("http://www.w3.org/1998/Math/MathML", tag))(attributes)(children);
+const xml$1 = (document) => (tag) => (attributes) => (...children) => create(document.createElementNS("http://www.w3.org/1999/xhtml", tag))(attributes)(children);
+const list$1 = (component) => (root) => {
+  const cache = /* @__PURE__ */ new Map();
+  return (next) => {
+    const refs = /* @__PURE__ */ new WeakSet();
+    while (root.children.length > next.length) root.lastChild?.remove();
+    next.forEach((data, i) => {
+      const child = root.children.item(i);
+      let element = cache.get(data);
+      if (element === child) return;
+      if (!element) {
+        element = component(data);
+        cache.set(data, element);
+      }
+      if (refs.has(element)) {
+        element = element.cloneNode(true);
+      } else {
+        refs.add(element);
+      }
+      if (child) {
+        root.replaceChild(element, child);
+      } else {
+        root.appendChild(element);
+      }
+    });
+  };
+};
+
+class Env {
+  _document;
+  get document() {
+    if (!this._document) throw new Error("Missing document");
+    return this._document;
+  }
+  set document(document2) {
+    this._document = document2;
+  }
+  constructor() {
+    this._document = typeof document === "undefined" ? null : document;
+  }
+}
+
+const env = new Env();
+var hyper = (tag) => html(env.document)(tag);
+const svg = (tag) => svg$1(env.document)(tag);
+const mathml = (tag) => mathml$1(env.document)(tag);
+const xml = (tag) => xml$1(env.document)(tag);
+const list = list$1;
+
+export { hyper as default, env, list, mathml, svg, xml };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronocide/hyper",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "types": "dist/hyper.d.ts",
   "exports": {
@@ -11,24 +11,26 @@
     "dist/**/*"
   ],
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=24.11.1"
   },
   "author": "Chronocide",
   "license": "AGPL-3.0-only",
   "scripts": {
-    "env": "node --experimental-strip-types --no-warnings scripts/env.ts",
-    "test": "node --env-file=.env --experimental-strip-types --no-warnings --test src/**/*.spec.ts",
+    "env": "node scripts/env.ts",
+    "test": "node --env-file=.env --test src/**/*.spec.ts",
     "build": "rollup -c",
     "preversion": "npm run test",
     "version": "npm run build && git add -A dist",
     "postversion": "git push && git push --tags"
   },
+  "optionalDependencies": {
+    "eslint": "^9.28.0",
+    "@chronocide/eslint-config": "github:chronoDave/eslint-config"
+  },
   "devDependencies": {
-    "@chronocide/eslint-config": "github:chronoDave/eslint-config",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.15.29",
     "esbuild": "^0.25.5",
-    "eslint": "^9.28.0",
     "jsdom": "^26.1.0",
     "puppeteer-core": "^24.14.0",
     "rollup": "^4.42.0",