@chronocide/hyper 0.4.0 → 0.5.0

package/README.md

@@ -43,23 +43,22 @@ document.body.appendChild(img);
 
 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
-import type { Component } from '@chronocide/hyper';
+**Note**, `list` only supports `string` and `number` type.
 
+```ts
 import h, { list } from '@chronocide/hyper';
 
 type Planet = { id: string; name: string };
 
-const planets: Planet[] = [
-  { id: 'jupiter', name: 'Jupiter' },
-  { id: 'mars', name: 'Mars' },
-  { id: 'pluto', name: 'Pluto' }
-];
+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 component: Component<Planet> = planet => h('li')()(planet.name);
+const render = (id: string) => h('li')()(planets.get(id)?.name ?? '-');
 
-const update = list<Planet>(component)(ul);
+const update = list(render)(ul);
 update(planets); // <ul><li>Jupiter</li><li>Mars</li><li>Pluto</li></ul>
 ```
 

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

package/package.json

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