@tempots/dom 5.0.2 → 5.1.0

package/components/For.d.ts

@@ -1,7 +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 }: ForProps<T>): JSX.DOMNode;
+export declare function For<T>({ of, children: render, separator }: ForProps<T>): JSX.DOMNode;

package/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/components/Repeat.d.ts

@@ -1,15 +1,25 @@
-import { type Signal } from '../prop';
+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;
-    constructor(times: Signal<number>, children: (index: number) => Renderable);
+    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) => Renderable;
+    children?: (index: number) => JSX.DOMNode;
+    separator?: (sep: Signal<SeparatorProps>) => JSX.DOMNode;
 }
 export declare function Repeat(props: RepeatProps): Renderable;

package/components/Repeat.js

@@ -1,33 +1,103 @@
+import { Prop } from '../prop';
 import { Fragment } from './Fragment';
+import { makeRenderable } from '../jsx-runtime';
 export class RepeatImpl {
     times;
     children;
-    constructor(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] = this.children(i).appendTo(newCtx);
+            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] = this.children(i).appendTo(newCtx);
+                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: [] }))); }
+export function Repeat(props) {
+    return new RepeatImpl(props.times, props.children ?? (() => Fragment({ children: [] })), props.separator);
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tempots/dom",
-  "version": "5.0.2",
   "main": "index.js",
   "types": "index.d.ts",
+  "version": "5.1.0",
   "scripts": {
     "watch": "tsc --watch",
     "build": "tsc",

package/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/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) {