@tempots/dom 6.0.0 → 7.0.0

package/components/FadeIn.d.ts

@@ -1,7 +1,7 @@
-import { Clear } from "../clean";
-import { DOMContext } from "../dom-context";
-import { Renderable } from "../renderable";
-import { Animatable } from "./animatable";
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type Renderable } from '../renderable';
+import { type Animatable } from './animatable';
 export declare class FadeInImpl implements Renderable {
     private readonly end;
     private readonly start;

package/components/FadeIn.js

@@ -1,4 +1,4 @@
-import { getComputedAnimatable, applyInterpolatedAnimatable, applyAnimatable } from "./animatable";
+import { getComputedAnimatable, applyInterpolatedAnimatable, applyAnimatable } from './animatable';
 export class FadeInImpl {
     end;
     start;

package/components/FadeOut.d.ts

@@ -1,7 +1,7 @@
-import { Clear } from "../clean";
-import { DOMContext } from "../dom-context";
-import { Renderable } from "../renderable";
-import { Animatable } from "./animatable";
+import { type Clear } from '../clean';
+import { type DOMContext } from '../dom-context';
+import { type Renderable } from '../renderable';
+import { type Animatable } from './animatable';
 export declare class FadeOutImpl implements Renderable {
     private readonly end;
     private readonly duration;

package/components/FadeOut.js

@@ -1,4 +1,4 @@
-import { getComputedAnimatable, applyInterpolatedAnimatable } from "./animatable";
+import { getComputedAnimatable, applyInterpolatedAnimatable } from './animatable';
 export class FadeOutImpl {
     end;
     duration;

package/components/For.d.ts

@@ -1,9 +1,18 @@
 import { type Signal } from '../prop';
-import { SeparatorProps } from './Repeat';
+import { type PositionProps } 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;
+    separator?: (value: Signal<PositionProps>) => JSX.DOMNode;
+    children?: (value: Signal<T>, pos: Signal<PositionProps>) => JSX.DOMNode;
 }
 export declare function For<T>({ of, children: render, separator }: ForProps<T>): JSX.DOMNode;
+export interface ForWithPositionProps<T> {
+    of: Signal<T[]>;
+    separator?: (value: Signal<PositionProps>) => JSX.DOMNode;
+    children?: (data: Signal<{
+        value: T;
+        pos: PositionProps;
+    }>) => JSX.DOMNode;
+}
+export declare function ForWithPosition<T>({ of, children: render, separator }: ForWithPositionProps<T>): JSX.DOMNode;

package/components/For.js

@@ -5,10 +5,22 @@ import { OnRemove } from './OnRemove';
 // <For of={values} separator={() => ", "}>{(value) => <span>{value}</span>}</For>
 export function For({ of, children: render, separator }) {
     const times = of.map(v => v.length);
-    return new RepeatImpl(times, (index) => {
-        const value = of.at(index);
+    return new RepeatImpl(times, (pos) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const value = of.combine(pos, (arr, { index }) => arr.at(index));
         return new FragmentImpl([
-            makeRenderable(render?.(value, index)),
+            makeRenderable(render?.(value, pos)),
+            OnRemove({ clear: value.clean })
+        ]);
+    }, separator);
+}
+export function ForWithPosition({ of, children: render, separator }) {
+    const times = of.map(v => v.length);
+    return new RepeatImpl(times, (pos) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const value = of.combine(pos, (arr, { index }) => arr.at(index));
+        return new FragmentImpl([
+            makeRenderable(render?.(value.combine(pos, (v, p) => ({ value: v, pos: p })))),
             OnRemove({ clear: value.clean })
         ]);
     }, separator);

package/components/OnRemove.js

@@ -1,4 +1,4 @@
 import { LifecycleImpl } from './Lifecycle';
 export function OnRemove(props) {
-    return new LifecycleImpl(() => { }, (_, removeTree) => props.clear(removeTree));
+    return new LifecycleImpl(() => { }, (_, removeTree) => { props.clear(removeTree); });
 }

package/components/OneOf.d.ts

@@ -37,24 +37,24 @@ export declare function OneOfUnion<T extends {
     [_ in K]: string;
 }, K extends string>(props: OneOfUnionProps<T, K>): JSX.DOMNode;
 export type OneOfUnionTypeProps<T extends {
-    [_ in "type"]: string;
+    [_ in 'type']: string;
 }> = {
     match: Signal<T>;
 } & {
-    [KK in T["type"]]: (value: Signal<T extends {
-        [_ in "type"]: KK;
+    [KK in T['type']]: (value: Signal<T extends {
+        [_ in 'type']: KK;
     } ? T : never>) => JSX.DOMNode;
 };
 export declare function OneOfUnionType<T extends {
     type: string;
 }>(props: OneOfUnionTypeProps<T>): JSX.DOMNode;
 export type OneOfUnionKindProps<T extends {
-    [_ in "kind"]: string;
+    [_ in 'kind']: string;
 }> = {
     match: Signal<T>;
 } & {
-    [KK in T["kind"]]: (value: Signal<T extends {
-        [_ in "kind"]: KK;
+    [KK in T['kind']]: (value: Signal<T extends {
+        [_ in 'kind']: KK;
     } ? T : never>) => JSX.DOMNode;
 };
 export declare function OneOfUnionKind<T extends {

package/components/OneOf.js

@@ -50,16 +50,19 @@ export function OneOfLiteral(props) {
     const obj = keys.reduce((acc, k) => {
         acc[k] = () => cases[k];
         return acc;
+        // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter, @typescript-eslint/consistent-type-assertions
     }, {});
-    return new OneOfImpl(match.map(k => ({ [k]: null })), obj);
+    return new OneOfImpl(
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    match.map(k => ({ [k]: null })), obj);
 }
 export function OneOfUnion(props) {
     const { match, using, ...cases } = props;
     return new OneOfImpl(match.map(t => ({ [t[using]]: t })), cases);
 }
 export function OneOfUnionType(props) {
-    return OneOfUnion({ ...props, using: "type" });
+    return OneOfUnion({ ...props, using: 'type' });
 }
 export function OneOfUnionKind(props) {
-    return OneOfUnion({ ...props, using: "kind" });
+    return OneOfUnion({ ...props, using: 'kind' });
 }

package/components/Repeat.d.ts

@@ -1,26 +1,28 @@
-import { Signal } from '../prop';
+/** @jsxImportSource .. */
+import { type 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;
+import { type JSX } from '../jsx';
+export interface PositionProps {
+    readonly first: boolean;
+    readonly last: boolean;
+    readonly index: number;
 }
+export declare function makePosition(index: number, length: number): PositionProps;
 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);
+    constructor(times: Signal<number>, children: (pos: Signal<PositionProps>) => JSX.DOMNode, separator?: ((sep: Signal<PositionProps>) => JSX.DOMNode) | undefined);
     readonly appendTo: (ctx: DOMContext) => Clear;
     readonly appendToWithoutSeparator: (ctx: DOMContext) => Clear;
-    readonly appendToWithSeparator: (ctx: DOMContext, separator: (sep: Signal<SeparatorProps>) => JSX.DOMNode) => Clear;
+    readonly appendToWithSeparator: (ctx: DOMContext, separator: (sep: Signal<PositionProps>) => JSX.DOMNode) => Clear;
 }
 export interface RepeatProps {
     times: Signal<number>;
-    children?: (index: number) => JSX.DOMNode;
-    separator?: (sep: Signal<SeparatorProps>) => JSX.DOMNode;
+    children?: (pos: Signal<PositionProps>) => JSX.DOMNode;
+    separator?: (sep: Signal<PositionProps>) => JSX.DOMNode;
 }
 export declare function Repeat(props: RepeatProps): Renderable;
-export declare function conjuctions(other: JSX.DOMNode, lastConjunction?: JSX.DOMNode, firstConjunction?: JSX.DOMNode): (sep: Signal<SeparatorProps>) => JSX.DOMNode;
+export declare function conjuctions(other: JSX.DOMNode, lastConjunction?: JSX.DOMNode, firstConjunction?: JSX.DOMNode): (sep: Signal<PositionProps>) => JSX.DOMNode;

package/components/Repeat.js

@@ -1,6 +1,16 @@
+import { jsx as _jsx } from "../jsx-runtime";
+/** @jsxImportSource .. */
 import { Prop } from '../prop';
 import { Fragment } from './Fragment';
 import { makeRenderable } from '../jsx-runtime';
+import { OneOf } from './OneOf';
+export function makePosition(index, length) {
+    return {
+        first: index === 0,
+        last: index === length - 1,
+        index
+    };
+}
 export class RepeatImpl {
     times;
     children;
@@ -11,7 +21,7 @@ export class RepeatImpl {
         this.separator = separator;
     }
     appendTo = (ctx) => {
-        if (!this.separator) {
+        if (this.separator == null) {
             return this.appendToWithoutSeparator(ctx);
         }
         else {
@@ -22,16 +32,24 @@ export class RepeatImpl {
         const newCtx = ctx.makeReference();
         const count = this.times.get();
         const clears = new Array(count);
+        const positions = new Array(count);
         for (let i = 0; i < count; i++) {
-            clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+            positions[i] = new Prop(makePosition(i, count));
+            clears[i] = makeRenderable(this.children(positions[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);
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                positions.pop().clean();
+            }
+            for (let i = 0; i < positions.length; i++) {
+                positions[i].set(makePosition(i, newCount));
             }
             for (let i = clears.length; i < newCount; i++) {
-                clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+                positions[i] = new Prop(makePosition(i, count));
+                clears[i] = makeRenderable(this.children(positions[i])).appendTo(newCtx);
             }
         });
         return (removeTree) => {
@@ -47,8 +65,10 @@ export class RepeatImpl {
         const separatorProps = new Array(Math.max(0, count - 1));
         const separatorClears = new Array(Math.max(0, count - 1));
         const clears = new Array(count);
+        const positions = new Array(count);
         for (let i = 0; i < count; i++) {
-            clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+            positions[i] = new Prop(makePosition(i, count));
+            clears[i] = makeRenderable(this.children(positions[i])).appendTo(newCtx);
             if (i < count - 1) {
                 separatorProps[i] = Prop.of({
                     first: i === 0,
@@ -62,6 +82,8 @@ export class RepeatImpl {
             while (newCount < clears.length) {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 clears.pop()(true);
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                positions.pop().clean();
                 if (separatorClears.length > 0) {
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     separatorClears.pop()(true);
@@ -69,6 +91,9 @@ export class RepeatImpl {
                     separatorProps.pop().clean();
                 }
             }
+            for (let i = 0; i < positions.length; i++) {
+                positions[i].set(makePosition(i, newCount));
+            }
             for (let i = 0; i < separatorProps.length; i++) {
                 separatorProps[i].set({
                     first: i === 0,
@@ -77,7 +102,8 @@ export class RepeatImpl {
                 });
             }
             for (let i = clears.length; i < newCount; i++) {
-                clears[i] = makeRenderable(this.children(i)).appendTo(newCtx);
+                positions[i] = new Prop(makePosition(i, count));
+                clears[i] = makeRenderable(this.children(positions[i])).appendTo(newCtx);
                 if (i < newCount - 1) {
                     separatorProps[i] = Prop.of({
                         first: i === 0,
@@ -103,16 +129,16 @@ export function Repeat(props) {
 }
 export function conjuctions(other, lastConjunction, firstConjunction) {
     return (sep) => {
-        return sep.map(({ first, last }) => {
-            if (last) {
-                return lastConjunction ?? other;
-            }
-            else if (first) {
-                return firstConjunction ?? other;
-            }
-            else {
-                return other;
-            }
-        });
+        return _jsx(OneOf, { match: sep.map(({ first, last }) => {
+                if (last) {
+                    return { last: true };
+                }
+                else if (first) {
+                    return { first: true };
+                }
+                else {
+                    return { other: true };
+                }
+            }), first: () => firstConjunction ?? other, last: () => lastConjunction ?? other, other: () => other });
     };
 }

package/components/animatable.js

@@ -1,17 +1,17 @@
 export function parseColorChannels(color) {
     let match = color.match(/rgba?\((\d+), (\d+), (\d+)(, (\d+))?\)/);
-    if (match) {
+    if (match != null) {
         return [
             Number(match[1]),
             Number(match[2]),
             Number(match[3]),
-            match[4] ? Number(match[5]) : 1,
+            match[4] != null ? Number(match[5]) : 1,
             'rgba'
         ];
     }
     else {
         match = color.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/);
-        if (match) {
+        if (match != null) {
             return [
                 parseInt(match[1], 16),
                 parseInt(match[2], 16),
@@ -22,12 +22,12 @@ export function parseColorChannels(color) {
         }
         else {
             match = color.match(/hsla?\((\d+), (\d+)%?, (\d+)%?(, (\d+))?\)/);
-            if (match) {
+            if (match != null) {
                 return [
                     Number(match[1]),
                     Number(match[2]),
                     Number(match[3]),
-                    match[4] ? Number(match[5]) : 1,
+                    match[4] != null ? Number(match[5]) : 1,
                     'hsla'
                 ];
             }
@@ -38,7 +38,7 @@ export function parseColorChannels(color) {
 function parseBoxShadow(cssString) {
     const boxShadowRegex = /^(inset\s)?(-?\d+)([a-zA-Z]*)(\s+)(-?\d+)([a-zA-Z]*)(?:\s+(-?\d+)([a-zA-Z]*))?(?:\s+(-?\d+)([a-zA-Z]*))?(?:\s+(-?\d+)([a-zA-Z]*))?(?:\s+)([a-zA-Z0-9(),.]+)$/i;
     const match = cssString.match(boxShadowRegex);
-    if (!match) {
+    if (match == null) {
         return {
             inset: false,
             x: 0,
@@ -49,8 +49,8 @@ function parseBoxShadow(cssString) {
         };
     }
     const [, inset, x, , , y, , blur, , spread, , color] = match;
-    const parsedBlur = blur ? parseInt(blur, 10) : 0;
-    const parsedSpread = spread ? parseInt(spread, 10) : 0;
+    const parsedBlur = blur != null ? parseInt(blur, 10) : 0;
+    const parsedSpread = spread != null ? parseInt(spread, 10) : 0;
     return {
         inset: !!inset,
         x: parseInt(x, 10),
@@ -78,7 +78,7 @@ export function colorChannelsToString(channels) {
 }
 export function interpolateColor(startColor, endColor) {
     const [startR, startG, startB, startA, startType] = parseColorChannels(startColor);
-    const [endR, endG, endB, endA, endType] = parseColorChannels(endColor);
+    const [endR, endG, endB, endA] = parseColorChannels(endColor);
     return (t) => {
         const r = startR + (endR - startR) * t;
         const g = startG + (endG - startG) * t;
@@ -234,11 +234,12 @@ export function applyAnimatableProp(el, key, value) {
 }
 const interpolationCache = new Map();
 function getInterpolate(from, to, type) {
-    if (interpolationCache.has(type + ":" + from + to)) {
+    if (interpolationCache.has(type + ':' + from + to)) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return interpolationCache.get(from + to);
     }
     const f = interpolateColor(from, to);
-    interpolationCache.set(type + ":" + from + to, f);
+    interpolationCache.set(type + ':' + from + to, f);
     return f;
 }
 function getColorInterpolation(from, to) {

package/index.d.ts

@@ -26,7 +26,7 @@ export { OnRemove, type OnRemoveProps } from './components/OnRemove';
 export { OneOfImpl, OneOf, type OneOfProps, OneOfLiteral, type OneOfLiteralProps, OneOfUnion, type OneOfUnionProps, OneOfUnionKind, type OneOfUnionKindProps, OneOfUnionType, type OneOfUnionTypeProps } from './components/OneOf';
 export { PortalImpl, Portal, type PortalProps } from './components/Portal';
 export { PropertyImpl, Property, type PropertyProps } from './components/Property';
-export { RepeatImpl, Repeat, type RepeatProps, conjuctions } from './components/Repeat';
+export { RepeatImpl, Repeat, type RepeatProps, conjuctions, type PositionProps } from './components/Repeat';
 export { ShowImpl, Show, type ShowProps } from './components/Show';
 export { TextImpl, Text, type TextProps } from './components/Text';
 export { TextContentImpl, TextContent, type TextContentProps } from './components/TextContent';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@tempots/dom",
   "main": "index.js",
   "types": "index.d.ts",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "scripts": {
     "watch": "tsc --watch",
     "build": "tsc",