@chronocide/hyper 0.3.2 → 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

@@ -1,7 +1,6 @@
 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;
@@ -16,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>(component: Component<T>) => (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, Component, HTMLVoidElementTagName };
+export type { Attributes, Child, HTMLVoidElementTagName };

package/dist/hyper.js

@@ -17,7 +17,7 @@ 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 = (component) => (root) => {
+const list$1 = (render) => (root) => {
   const cache = /* @__PURE__ */ new Map();
   return (next) => {
     const refs = /* @__PURE__ */ new WeakSet();
@@ -27,7 +27,7 @@ const list$1 = (component) => (root) => {
       let element = cache.get(data);
       if (element === child) return;
       if (!element) {
-        element = component(data);
+        element = render(data, i);
         cache.set(data, element);
       }
       if (refs.has(element)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronocide/hyper",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "type": "module",
   "types": "dist/hyper.d.ts",
   "exports": {
@@ -17,7 +17,7 @@
   "license": "AGPL-3.0-only",
   "scripts": {
     "env": "node scripts/env.ts",
-    "test": "node --env-file=.env --test src/**/*.spec.ts",
+    "test": "node --env-file=.env --test src/**/*.spec.ts && tsc --noEmit",
     "build": "rollup -c",
     "preversion": "npm run test",
     "version": "npm run build && git add -A dist",