@chronocide/hyper 0.5.0 → 0.6.0

package/README.md

@@ -41,25 +41,25 @@ document.body.appendChild(img);
 
 ### List
 
-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.
-
-**Note**, `list` only supports `string` and `number` type.
+Keeping track of children within a list can be tedious, especially if using immutable data. `list` caches elements based on keys and compares each data entry, only updating the child i the data has changed. Keys do not need to be unique, duplicate elements are cloned.
 
 ```ts
 import h, { list } from '@chronocide/hyper';
 
 type Planet = { id: string; name: string };
 
-const planets = new Map<string, Planet>();
-planets.add('jupiter', { id: 'jupiter', name: 'Jupiter' });
-planets.add('mars', { id: 'mars', name: 'Mars' });
-planets.add('pluto', { id: 'pluto', name: 'Pluto' });
-
 const ul = h('ul')()(); // <ul></ul>
-const render = (id: string) => h('li')()(planets.get(id)?.name ?? '-');
+const render = (planet: Planet) => h('li')({ id: planet.id })(planet.name);
+const key = (planet: Planet) => planet.id;
+const update = list<Planet>(render)(key)(ul);
+
+const planets: Planet[] = [
+  { id: 'jupiter', name: 'Jupiter' },
+  { id: 'mars', name: 'Mars' },
+  { id: 'pluto', name: 'Pluto' }
+];
 
-const update = list(render)(ul);
-update(planets); // <ul><li>Jupiter</li><li>Mars</li><li>Pluto</li></ul>
+update(planets); // <ul><li id="jupiter">Jupiter</li><li id="mars">Mars</li><li id="pluto">Pluto</li></ul>
 ```
 
 ## Testing

package/dist/hyper.d.ts

@@ -15,7 +15,7 @@ declare const _default: <T extends keyof HTMLElementTagNameMap>(tag: T) => <P ex
 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 extends string | number>(render: (data: T, i: number) => Element) => (root: Element) => (next: T[]) => void;
+declare const list: <T>(render: (x: T, i: number, arr: T[]) => Element) => (key: (x: T) => string) => (root: Element) => (next: T[]) => void;
 
 export { _default as default, env, list, mathml, svg, xml };
 export type { Attributes, Child, HTMLVoidElementTagName };

package/dist/hyper.js

@@ -17,18 +17,19 @@ const html = (document) => (tag) => (attributes) => (...children) => create(docu
 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 = (render) => (root) => {
+const list$1 = (render) => (key) => (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) => {
+    next.forEach((x, i) => {
+      const k = key(x);
       const child = root.children.item(i);
-      let element = cache.get(data);
+      let element = cache.get(k);
       if (element === child) return;
       if (!element) {
-        element = render(data, i);
-        cache.set(data, element);
+        element = render(x, i, next);
+        cache.set(k, element);
       }
       if (refs.has(element)) {
         element = element.cloneNode(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronocide/hyper",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "types": "dist/hyper.d.ts",
   "exports": {