@tempots/dom 5.0.1 → 5.1.0

package/README.md

@@ -0,0 +1 @@
+# @tempots/dom

package/components/For.d.ts

@@ -0,0 +1,9 @@
+import { type Signal } from '../prop';
+import { SeparatorProps } from './Repeat';
+import { type JSX } from '../jsx-runtime';
+export interface ForProps<T> {
+    of: Signal<T[]>;
+    separator?: (value: Signal<SeparatorProps>) => JSX.DOMNode;
+    children?: (value: Signal<T>, index: number) => JSX.DOMNode;
+}
+export declare function For<T>({ of, children: render, separator }: ForProps<T>): JSX.DOMNode;

package/{dist/components → components}/For.js

@@ -3,7 +3,7 @@ import { makeRenderable } from '../jsx-runtime';
 import { FragmentImpl } from './Fragment';
 import { OnRemoveImpl } from './OnRemove';
 // <For of={values}>{(value) => <span>{value}</span>}</For>
-export function For({ of, children: render }) {
+export function For({ of, children: render, separator }) {
     const times = of.map(v => v.length);
     return new RepeatImpl(times, (index) => {
         const value = of.at(index);
@@ -11,5 +11,5 @@ export function For({ of, children: render }) {
             makeRenderable(render?.(value, index)),
             new OnRemoveImpl(value.clean)
         ]);
-    });
+    }, separator);
 }

package/{dist/components → components}/OneOf.js

@@ -11,8 +11,8 @@ export class OneOfImpl {
         const pair = this.match.get();
         let key = pair[0];
         const value = pair[1];
+        const stableCtx = ctx.makeReference();
         let prop = new Prop(value);
-        let stableCtx = ctx.makeReference();
         let newCtx = stableCtx.makeReference();
         let clear = makeRenderable(this.cases[key](prop)).appendTo(newCtx);
         const cancel = this.match.subscribe(([newKey, newValue]) => {

package/components/Repeat.d.ts

@@ -0,0 +1,25 @@
+import { Signal } from '../prop';
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type Renderable } from '../renderable';
+import { JSX } from '../jsx';
+export interface SeparatorProps {
+    first: boolean;
+    last: boolean;
+    index: number;
+}
+export declare class RepeatImpl implements Renderable {
+    private readonly times;
+    private readonly children;
+    private readonly separator?;
+    constructor(times: Signal<number>, children: (index: number) => JSX.DOMNode, separator?: ((sep: Signal<SeparatorProps>) => JSX.DOMNode) | undefined);
+    readonly appendTo: (ctx: DOMContext) => Clear;
+    readonly appendToWithoutSeparator: (ctx: DOMContext) => Clear;
+    readonly appendToWithSeparator: (ctx: DOMContext, separator: (sep: Signal<SeparatorProps>) => JSX.DOMNode) => Clear;
+}
+export interface RepeatProps {
+    times: Signal<number>;
+    children?: (index: number) => JSX.DOMNode;
+    separator?: (sep: Signal<SeparatorProps>) => JSX.DOMNode;
+}
+export declare function Repeat(props: RepeatProps): Renderable;

package/components/Repeat.js

@@ -0,0 +1,103 @@
+import { Prop } from '../prop';
+import { Fragment } from './Fragment';
+import { makeRenderable } from '../jsx-runtime';
+export class RepeatImpl {
+    times;
+    children;
+    separator;
+    constructor(times, children, separator) {
+        this.times = times;
+        this.children = children;
+        this.separator = separator;
+    }
+    appendTo = (ctx) => {
+        if (!this.separator) {
+            return this.appendToWithoutSeparator(ctx);
+        }
+        else {
+            return this.appendToWithSeparator(ctx, this.separator);
+        }
+    };
+    appendToWithoutSeparator = (ctx) => {
+        const newCtx = ctx.makeReference();
+        const count = this.times.get();
+        const clears = new Array(count);
+        for (let i = 0; i < count; i++) {
+            clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+        }
+        const cancel = this.times.subscribe((newCount) => {
+            while (newCount < clears.length) {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                clears.pop()(true);
+            }
+            for (let i = clears.length; i < newCount; i++) {
+                clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+            }
+        });
+        return (removeTree) => {
+            newCtx.requestClear(removeTree, () => {
+                cancel();
+                clears.forEach(clear => { clear(removeTree); });
+            });
+        };
+    };
+    appendToWithSeparator = (ctx, separator) => {
+        const newCtx = ctx.makeReference();
+        const count = this.times.get();
+        const separatorProps = new Array(Math.max(0, count - 1));
+        const separatorClears = new Array(Math.max(0, count - 1));
+        const clears = new Array(count);
+        for (let i = 0; i < count; i++) {
+            clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+            if (i < count - 1) {
+                separatorProps[i] = Prop.of({
+                    first: i === 0,
+                    last: i === count - 2,
+                    index: i
+                });
+                separatorClears[i] = makeRenderable(separator(separatorProps[i])).appendTo(newCtx);
+            }
+        }
+        const cancel = this.times.subscribe((newCount) => {
+            while (newCount < clears.length) {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                clears.pop()(true);
+                if (separatorClears.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    separatorClears.pop()(true);
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    separatorProps.pop().clean();
+                }
+            }
+            for (let i = 0; i < separatorProps.length; i++) {
+                separatorProps[i].set({
+                    first: i === 0,
+                    last: i === newCount - 2,
+                    index: i
+                });
+            }
+            for (let i = clears.length; i < newCount; i++) {
+                clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+                if (i < newCount - 1) {
+                    separatorProps[i] = Prop.of({
+                        first: i === 0,
+                        last: i === newCount - 2,
+                        index: i
+                    });
+                    separatorClears[i] = makeRenderable(separator(separatorProps[i])).appendTo(newCtx);
+                }
+            }
+        });
+        return (removeTree) => {
+            newCtx.requestClear(removeTree, () => {
+                cancel();
+                clears.forEach(clear => { clear(removeTree); });
+                separatorClears.forEach(clear => { clear(removeTree); });
+                separatorProps.forEach(signal => { signal.clean(); });
+            });
+        };
+    };
+}
+export function Repeat(props) {
+    return new RepeatImpl(props.times, props.children ?? (() => Fragment({ children: [] })), props.separator);
+}

package/package.json

@@ -1,19 +1,17 @@
 {
   "name": "@tempots/dom",
-  "version": "5.0.1",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "version": "5.1.0",
   "scripts": {
     "watch": "tsc --watch",
     "build": "tsc",
     "test": "jest",
     "test:watch": "jest --watch",
     "coverage": "jest --coverage",
-    "npm:publish": "yarn publish --access public"
+    "npm:prep": "yarn build && cp README.md package.json dist",
+    "npm:publish": "yarn npm:prep && (cd dist && yarn publish --access public)"
   },
-  "files": [
-    "dist"
-  ],
   "dependencies": {},
   "devDependencies": {
     "@happy-dom/jest-environment": "^9.1.7",

package/{dist/prop.d.ts → prop.d.ts}

@@ -29,6 +29,8 @@ export declare class Signal<T> {
     readonly feed: (prop: Prop<T>) => Prop<T>;
     readonly deriveProp: () => Prop<T>;
     readonly clean: () => void;
+    readonly count: () => Signal<number>;
+    readonly animate: (duration: number, interpolate: (start: T, end: T, delta: number) => T, initialValue?: T | null, easing?: (t: number) => number) => Signal<T>;
 }
 export declare class Prop<T> extends Signal<T> {
     static isProp<T = unknown>(x: unknown): x is Prop<T>;

package/{dist/prop.js → prop.js}

@@ -137,6 +137,47 @@ export class Signal {
     clean = () => {
         this._listeners.length = 0;
     };
+    count = () => {
+        let count = 0;
+        return this.map(() => ++count);
+    };
+    animate = (duration, interpolate, initialValue = null, easing = t => t) => {
+        let startValue = initialValue ?? this.get();
+        let endValue = this.get();
+        const prop = new Prop(startValue);
+        let startTime = 0;
+        let endTime = 0;
+        let animationFrame = null;
+        const animate = (time) => {
+            if (this._listeners.length === 0) {
+                animationFrame = null;
+                return;
+            }
+            if (time < endTime) {
+                const delta = (time - startTime) / (endTime - startTime);
+                prop.set(interpolate(startValue, endValue, easing(delta)));
+                animationFrame = requestAnimationFrame(animate);
+            }
+            else {
+                prop.set(endValue);
+                animationFrame = null;
+            }
+        };
+        this.subscribe(value => {
+            if (animationFrame != null)
+                cancelAnimationFrame(animationFrame);
+            if (this._listeners.length === 0) {
+                animationFrame = null;
+                return;
+            }
+            startValue = prop.get();
+            endValue = value;
+            startTime = performance.now();
+            endTime = startTime + duration;
+            animationFrame = requestAnimationFrame(animate);
+        });
+        return prop;
+    };
 }
 export class Prop extends Signal {
     static isProp(x) {

package/dist/components/For.d.ts

@@ -1,7 +0,0 @@
-import { type Signal } from '../prop';
-import { type JSX } from '../jsx-runtime';
-export interface ForProps<T> {
-    of: Signal<T[]>;
-    children?: (value: Signal<T>, index: number) => JSX.DOMNode;
-}
-export declare function For<T>({ of, children: render }: ForProps<T>): JSX.DOMNode;

package/dist/components/Repeat.d.ts

@@ -1,15 +0,0 @@
-import { type Signal } from '../prop';
-import { type Clear } from '../clean';
-import { type DOMContext } from '../dom-context';
-import { type Renderable } from '../renderable';
-export declare class RepeatImpl implements Renderable {
-    private readonly times;
-    private readonly children;
-    constructor(times: Signal<number>, children: (index: number) => Renderable);
-    readonly appendTo: (ctx: DOMContext) => Clear;
-}
-export interface RepeatProps {
-    times: Signal<number>;
-    children?: (index: number) => Renderable;
-}
-export declare function Repeat(props: RepeatProps): Renderable;

package/dist/components/Repeat.js

@@ -1,33 +0,0 @@
-import { Fragment } from './Fragment';
-export class RepeatImpl {
-    times;
-    children;
-    constructor(times, children) {
-        this.times = times;
-        this.children = children;
-    }
-    appendTo = (ctx) => {
-        const newCtx = ctx.makeReference();
-        const count = this.times.get();
-        const clears = new Array(count);
-        for (let i = 0; i < count; i++) {
-            clears[i] = this.children(i).appendTo(newCtx);
-        }
-        const cancel = this.times.subscribe((newCount) => {
-            while (newCount < clears.length) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                clears.pop()(true);
-            }
-            for (let i = clears.length; i < newCount; i++) {
-                clears[i] = this.children(i).appendTo(newCtx);
-            }
-        });
-        return (removeTree) => {
-            newCtx.requestClear(removeTree, () => {
-                cancel();
-                clears.forEach(clear => { clear(removeTree); });
-            });
-        };
-    };
-}
-export function Repeat(props) { return new RepeatImpl(props.times, props.children ?? (() => Fragment({ children: [] }))); }