hyperapp-is 0.1.0

package/README.npm.md

@@ -0,0 +1,107 @@
+# hyperapp-is
+
+Lightweight. Declarative. Composable.
+
+Reusable component foundation library for Hyperapp v2.
+
+State-structure independent design + RAF-based animation system.
+
+---
+
+## Features
+
+- State-path based reusable component design
+- Local state helpers  
+	`getLocalState`, `setLocalState`, `createLocalKey`
+- Action composition utility  
+	`concatAction`
+- Class / props utilities  
+	`getClassList`, `deleteKeys`
+- requestAnimationFrame task system  
+	`RAFTask`, `subscription_RAFManager`
+- Built-in animated Carousel component
+
+---
+
+## Installation
+
+``` bash
+npm install hyperapp-is
+```
+
+Peer dependencies:
+
+- hyperapp v2
+- hyperapp-jsx-pragma (when using JSX)
+
+---
+
+## Basic Usage (Carousel Example)
+
+``` ts
+import { app } from "hyperapp"
+import h from "hyperapp-jsx-pragma"
+import {
+	RAFTask, subscription_RAFManager,
+	Carousel, effect_InitCarousel
+} from "hyperapp-is"
+
+interface State {
+	tasks: RAFTask<State>[]
+}
+
+const initState: State = {
+	tasks: []
+}
+
+app({
+	node: document.getElementById("app") as HTMLElement,
+	init: [initState, effect_InitCarousel(["tasks"], {
+		id      : "carousel",
+		duration: 2000,
+		delay   : 1000,
+		step    : 1
+	})],
+
+	subscriptions: (state) => [
+		subscription_RAFManager(state, ["tasks"])
+	],
+
+	view: (state) => (<Carousel
+		state    = { state }
+		id       = "carousel"
+		keyNames = { ["tasks"] }
+	>
+		<div>Slide 1</div>
+		<div>Slide 2</div>
+		<div>Slide 3</div>
+	</Carousel>)
+})
+```
+
+---
+
+## Concept
+
+hyperapp-is allows components to:
+
+- Remain independent from root state structure
+- Store internal state without polluting user state
+- Compose actions safely
+- Manage animations declaratively via RAFTask
+
+Designed for building reusable UI components on top of Hyperapp.
+
+---
+
+## Documentation
+
+Full documentation and detailed design notes are available on GitHub:
+
+https://github.com/is4416/hyperapp-is
+
+---
+
+## License
+
+MIT

package/dist/hyperapp-is/animation/easing.d.ts

@@ -0,0 +1,15 @@
+export declare const progress_easing: {
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+    easeInOutCubic: (t: number) => number;
+    easeInQuart: (t: number) => number;
+    easeOutQuart: (t: number) => number;
+    easeInOutQuart: (t: number) => number;
+    easeOutBack: (t: number) => number;
+    easeOutBounce: (t: number) => number;
+    easeOutElastic: (t: number) => number;
+};

package/dist/hyperapp-is/animation/easing.js

@@ -0,0 +1,57 @@
+// hyperapp-ui / animation / easing.ts
+// ---------- ---------- ---------- ---------- ----------
+// progress_easing
+// ---------- ---------- ---------- ---------- ----------
+export const progress_easing = {
+    // basic
+    linear: (t) => t,
+    easeInQuad: (t) => t * t,
+    easeOutQuad: (t) => 1 - (1 - t) * (1 - t),
+    easeInOutQuad: (t) => t < 0.5
+        ? 2 * t * t
+        : 1 - Math.pow(-2 * t + 2, 2) / 2,
+    // cubic
+    easeInCubic: (t) => t * t * t,
+    easeOutCubic: (t) => 1 - Math.pow(1 - t, 3),
+    easeInOutCubic: (t) => t < 0.5
+        ? 4 * t * t * t
+        : 1 - Math.pow(-2 * t + 2, 3) / 2,
+    // quart
+    easeInQuart: (t) => t * t * t * t,
+    easeOutQuart: (t) => 1 - Math.pow(1 - t, 4),
+    easeInOutQuart: (t) => t < 0.5
+        ? 8 * t * t * t * t
+        : 1 - Math.pow(-2 * t + 2, 4) / 2,
+    // back (跳ねる)
+    easeOutBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+    },
+    // bounce
+    easeOutBounce: (t) => {
+        const n1 = 7.5625;
+        const d1 = 2.75;
+        if (t < 1 / d1) {
+            return n1 * t * t;
+        }
+        else if (t < 2 / d1) {
+            return n1 * (t -= 1.5 / d1) * t + 0.75;
+        }
+        else if (t < 2.5 / d1) {
+            return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        }
+        else {
+            return n1 * (t -= 2.625 / d1) * t + 0.984375;
+        }
+    },
+    // elastic
+    easeOutElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0
+            ? 0
+            : t === 1
+                ? 1
+                : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+    }
+};

package/dist/hyperapp-is/animation/index.d.ts

@@ -0,0 +1,5 @@
+export type { InternalEffect, RAFEvent } from "./raf";
+export type { CSSProperty } from "./properties";
+export { RAFTask, subscription_RAFManager } from "./raf";
+export { progress_easing } from "./easing";
+export { createUnits, createRAFProperties, effect_RAFProperties } from "./properties";

package/dist/hyperapp-is/animation/index.js

@@ -0,0 +1,3 @@
+export { RAFTask, subscription_RAFManager } from "./raf";
+export { progress_easing } from "./easing";
+export { createUnits, createRAFProperties, effect_RAFProperties } from "./properties";

package/dist/hyperapp-is/animation/properties.d.ts

@@ -0,0 +1,64 @@
+import { Dispatch } from "hyperapp";
+import { InternalEffect, RAFTask } from "./raf";
+/**
+ * アニメーション進捗 (0〜1) を受け取り CSS 値を返す関数
+ *
+ * @type {Object.<string, Object.<string, (progress: number) => string>>} CSSProperty
+ * @property {Object.<string, (progress: number) => string>} [selector]
+ * @param {number} progress
+ */
+export interface CSSProperty {
+    [selector: string]: {
+        [name: string]: (progress: number) => string;
+    };
+}
+/**
+ * CSSProperty[] から、doms と styles のセットに変換
+ *
+ * @param   {CSSProperty[]} properties - プロパティ配列
+ * @returns {doms: HTMLElement[], styles:{ [name: string]: (progress: number) => string}}
+ */
+export declare const createUnits: (properties: CSSProperty[]) => {
+    doms: HTMLElement[];
+    styles: {
+        [name: string]: (progress: number) => string;
+    };
+}[];
+/**
+ * subscription_RAFManager をベースにした CSS アニメーション RAFTask を作成する
+ * props は基本的に RAFTask の値
+ *
+ * @param {CSSProperty[]} props.properties - セレクタとスタイル設定のセット配列
+ */
+export declare const createRAFProperties: <S>(props: {
+    id: string;
+    groupID?: string;
+    duration: number;
+    delay?: number;
+    finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>];
+    priority?: number;
+    extension?: {
+        [key: string]: any;
+    };
+    properties: CSSProperty[];
+}) => RAFTask<S>;
+/**
+ * subscription_RAFManager をベースにした CSS アニメーションエフェクト
+ * props は基本的に RAFTask の値
+ *
+ * @param {CSSProperty[]} props.properties - セレクタとスタイル設定のセット配列
+ * @param {string[]}      props.keyNames   - RAFTask 配列までのパス
+ */
+export declare const effect_RAFProperties: <S>(props: {
+    id: string;
+    groupID?: string;
+    duration: number;
+    delay?: number;
+    finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>];
+    priority?: number;
+    extension?: {
+        [key: string]: any;
+    };
+    properties: CSSProperty[];
+    keyNames: string[];
+}) => (dispatch: Dispatch<S>) => void;

package/dist/hyperapp-is/animation/properties.js

@@ -0,0 +1,108 @@
+// hyperapp-ui / animation / properties.ts
+import { getValue, setValue } from "../core/state";
+import { RAFTask } from "./raf";
+// ---------- ---------- ---------- ---------- ----------
+// createUnits
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * CSSProperty[] から、doms と styles のセットに変換
+ *
+ * @param   {CSSProperty[]} properties - プロパティ配列
+ * @returns {doms: HTMLElement[], styles:{ [name: string]: (progress: number) => string}}
+ */
+export const createUnits = function (properties) {
+    return properties.map(p => {
+        const selector = Object.keys(p)[0];
+        return {
+            doms: Array.from(document.querySelectorAll(selector)),
+            styles: p[selector]
+        };
+    });
+};
+// ---------- ---------- ---------- ---------- ----------
+// createRAFProperties
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * subscription_RAFManager をベースにした CSS アニメーション RAFTask を作成する
+ * props は基本的に RAFTask の値
+ *
+ * @param {CSSProperty[]} props.properties - セレクタとスタイル設定のセット配列
+ */
+export const createRAFProperties = function (props) {
+    const { id, groupID, duration, delay, priority, extension, properties } = props;
+    // action
+    const action = (state, rafTask) => {
+        var _a;
+        const progress = (_a = rafTask.progress) !== null && _a !== void 0 ? _a : 0;
+        const units = createUnits(properties);
+        // set styles
+        units.forEach(unit => {
+            for (const [name, fn] of Object.entries(unit.styles)) {
+                unit.doms.forEach(dom => dom.style.setProperty(name, fn(progress)));
+            }
+        });
+        return state;
+    };
+    // finish
+    const finish = (state, rafTask) => {
+        const units = createUnits(properties);
+        // release gpu layer
+        units.forEach(unit => {
+            unit.doms.forEach(dom => dom.style.willChange = "");
+        });
+        return [
+            state,
+            (dispatch) => {
+                const fn = props.finish;
+                if (fn) {
+                    requestAnimationFrame(() => requestAnimationFrame(() => dispatch((state) => fn(state, rafTask))));
+                }
+            }
+        ];
+    };
+    return new RAFTask({
+        id, groupID, duration, delay,
+        action, finish,
+        priority,
+        extension: {
+            ...extension,
+            properties
+        }
+    });
+};
+// ---------- ---------- ---------- ---------- ----------
+// effect_RAFProperties
+// ---------- ---------- ---------- ---------- ----------
+const GPU_LAYER = new Set(["transform", "opacity"]);
+/**
+ * subscription_RAFManager をベースにした CSS アニメーションエフェクト
+ * props は基本的に RAFTask の値
+ *
+ * @param {CSSProperty[]} props.properties - セレクタとスタイル設定のセット配列
+ * @param {string[]}      props.keyNames   - RAFTask 配列までのパス
+ */
+export const effect_RAFProperties = function (props) {
+    const { id, groupID, duration, delay, finish, priority, extension, properties, keyNames } = props;
+    // get doms
+    const units = createUnits(properties);
+    // set GPU Layer
+    units.forEach(unit => {
+        const val = [...new Set(Object.keys(unit.styles))].filter(name => GPU_LAYER.has(name)).join(",");
+        unit.doms.forEach(dom => dom.style.willChange = val);
+    });
+    // newTask
+    const newTask = createRAFProperties({
+        id, groupID, duration, delay, finish, priority, extension, properties
+    });
+    // set newTask
+    return (dispatch) => {
+        requestAnimationFrame(() => {
+            dispatch((state) => {
+                const tasks = getValue(state, keyNames, [])
+                    .filter(task => task.id !== id)
+                    .concat(newTask);
+                return setValue(state, keyNames, tasks);
+            });
+        });
+    };
+};

package/dist/hyperapp-is/animation/raf.d.ts

@@ -0,0 +1,71 @@
+import { Effect, Subscription } from "hyperapp";
+/**
+ * 戻値としては返されないことを示したエフェクト
+ * Effect の型エイリアス
+ */
+export type InternalEffect<S> = Effect<S>;
+/**
+ * RAFTask の action, finish
+ * 型エイリアス
+ */
+export type RAFEvent<S> = (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>];
+declare const _isStart: unique symbol;
+export declare class RAFTask<S> {
+    #private;
+    constructor(props: {
+        id: string;
+        groupID?: string;
+        duration: number;
+        delay?: number;
+        action: RAFEvent<S>;
+        finish?: RAFEvent<S>;
+        priority?: number;
+        extension?: {
+            [key: string]: any;
+        };
+    });
+    get id(): string;
+    get groupID(): string | undefined;
+    get duration(): number;
+    get delay(): number;
+    get action(): RAFEvent<S>;
+    get finish(): RAFEvent<S> | undefined;
+    get priority(): number;
+    get extension(): {
+        [key: string]: any;
+    };
+    get progress(): number;
+    get deltaTime(): number;
+    get isDone(): boolean;
+    get paused(): boolean;
+    set groupID(val: string | undefined);
+    set priority(val: number);
+    set extension(val: {
+        [key: string]: any;
+    });
+    set isDone(val: boolean);
+    set paused(val: boolean);
+    /**
+     * アクションを開始して良いか判定する
+     * 現在時間等のアップデートも同時に行われる
+     * subscription_RAFManager でのみ使用される
+     *
+     * @param   {number} now - requestAnimatinFrame が返す絶対時間
+     * @returns {boolan}     - アクションを実行して良いか判定
+     */
+    private [_isStart];
+    /**
+     * 時間を初期化したクローンを作成して返す
+     */
+    clone(): RAFTask<S>;
+}
+/**
+ * RAFTask 配列をフレームごとに実行するサブスクリプション
+ *
+ * @template S
+ * @param   {S}        state    - ステート
+ * @param   {string[]} keyNames - RAFTask 配列までのパス
+ * @returns {Subscription<S>}
+ */
+export declare const subscription_RAFManager: <S>(state: S, keyNames: string[]) => Subscription<S>;
+export {};

package/dist/hyperapp-is/animation/raf.js

@@ -0,0 +1,202 @@
+// hyperapp-ui / animation / raf.ts
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _RAFTask_id, _RAFTask_groupID, _RAFTask_duration, _RAFTask_delay, _RAFTask_action, _RAFTask_finish, _RAFTask_priority, _RAFTask_extension, _RAFTask_startTime, _RAFTask_currentTime, _RAFTask_pausedTime, _RAFTask_paused, _RAFTask_deltaTime, _RAFTask_isDone;
+import { getValue, setValue } from "../core/state";
+// ---------- ---------- ---------- ---------- ----------
+// class RAFTask
+// ---------- ---------- ---------- ---------- ----------
+// Symbol
+// subscription_RAFManager のみで使用される専用メソッド
+// Symbol を知らない限り、モジュールの外からは呼べない
+const _isStart = Symbol("RAFTask.isStart");
+export class RAFTask {
+    // constructor
+    constructor(props) {
+        var _a, _b, _c;
+        // field
+        _RAFTask_id.set(this, void 0);
+        _RAFTask_groupID.set(this, void 0);
+        _RAFTask_duration.set(this, void 0);
+        _RAFTask_delay.set(this, void 0);
+        _RAFTask_action.set(this, void 0);
+        _RAFTask_finish.set(this, void 0);
+        _RAFTask_priority.set(this, void 0);
+        _RAFTask_extension.set(this, void 0);
+        _RAFTask_startTime.set(this, void 0);
+        _RAFTask_currentTime.set(this, void 0);
+        _RAFTask_pausedTime.set(this, void 0);
+        _RAFTask_paused.set(this, void 0);
+        _RAFTask_deltaTime.set(this, void 0);
+        _RAFTask_isDone.set(this, void 0);
+        __classPrivateFieldSet(this, _RAFTask_id, props.id, "f");
+        __classPrivateFieldSet(this, _RAFTask_groupID, props.groupID, "f");
+        __classPrivateFieldSet(this, _RAFTask_duration, props.duration, "f");
+        __classPrivateFieldSet(this, _RAFTask_delay, (_a = props.delay) !== null && _a !== void 0 ? _a : 0, "f");
+        __classPrivateFieldSet(this, _RAFTask_action, props.action, "f");
+        __classPrivateFieldSet(this, _RAFTask_finish, props.finish, "f");
+        __classPrivateFieldSet(this, _RAFTask_priority, (_b = props.priority) !== null && _b !== void 0 ? _b : 0, "f");
+        __classPrivateFieldSet(this, _RAFTask_extension, (_c = props.extension) !== null && _c !== void 0 ? _c : {}, "f");
+        __classPrivateFieldSet(this, _RAFTask_isDone, false, "f");
+        __classPrivateFieldSet(this, _RAFTask_paused, false, "f");
+    }
+    // getter
+    get id() { return __classPrivateFieldGet(this, _RAFTask_id, "f"); }
+    get groupID() { return __classPrivateFieldGet(this, _RAFTask_groupID, "f"); }
+    get duration() { return __classPrivateFieldGet(this, _RAFTask_duration, "f"); }
+    get delay() { return __classPrivateFieldGet(this, _RAFTask_delay, "f"); }
+    get action() { return __classPrivateFieldGet(this, _RAFTask_action, "f"); }
+    get finish() { return __classPrivateFieldGet(this, _RAFTask_finish, "f"); }
+    get priority() { return __classPrivateFieldGet(this, _RAFTask_priority, "f"); }
+    get extension() { return __classPrivateFieldGet(this, _RAFTask_extension, "f"); }
+    get progress() {
+        if (__classPrivateFieldGet(this, _RAFTask_startTime, "f") === undefined || __classPrivateFieldGet(this, _RAFTask_currentTime, "f") === undefined)
+            return 0;
+        return Math.min(1, Math.max(0, (__classPrivateFieldGet(this, _RAFTask_currentTime, "f") - __classPrivateFieldGet(this, _RAFTask_startTime, "f")) /
+            Math.max(1, __classPrivateFieldGet(this, _RAFTask_duration, "f"))));
+    }
+    get deltaTime() { var _a; return (_a = __classPrivateFieldGet(this, _RAFTask_deltaTime, "f")) !== null && _a !== void 0 ? _a : 0; }
+    get isDone() {
+        if (__classPrivateFieldGet(this, _RAFTask_isDone, "f"))
+            return true;
+        if (__classPrivateFieldGet(this, _RAFTask_pausedTime, "f") !== undefined)
+            return false;
+        return this.progress === 1;
+    }
+    get paused() { return __classPrivateFieldGet(this, _RAFTask_paused, "f"); }
+    // setter
+    set groupID(val) { __classPrivateFieldSet(this, _RAFTask_groupID, val, "f"); }
+    set priority(val) { __classPrivateFieldSet(this, _RAFTask_priority, val, "f"); }
+    set extension(val) { __classPrivateFieldSet(this, _RAFTask_extension, val, "f"); }
+    set isDone(val) { __classPrivateFieldSet(this, _RAFTask_isDone, val, "f"); }
+    set paused(val) { __classPrivateFieldSet(this, _RAFTask_paused, val, "f"); }
+    // private method: _isStart
+    /**
+     * アクションを開始して良いか判定する
+     * 現在時間等のアップデートも同時に行われる
+     * subscription_RAFManager でのみ使用される
+     *
+     * @param   {number} now - requestAnimatinFrame が返す絶対時間
+     * @returns {boolan}     - アクションを実行して良いか判定
+     */
+    [(_RAFTask_id = new WeakMap(), _RAFTask_groupID = new WeakMap(), _RAFTask_duration = new WeakMap(), _RAFTask_delay = new WeakMap(), _RAFTask_action = new WeakMap(), _RAFTask_finish = new WeakMap(), _RAFTask_priority = new WeakMap(), _RAFTask_extension = new WeakMap(), _RAFTask_startTime = new WeakMap(), _RAFTask_currentTime = new WeakMap(), _RAFTask_pausedTime = new WeakMap(), _RAFTask_paused = new WeakMap(), _RAFTask_deltaTime = new WeakMap(), _RAFTask_isDone = new WeakMap(), _isStart)](now) {
+        var _a;
+        // done
+        if (this.isDone)
+            return false;
+        // startTime
+        if (__classPrivateFieldGet(this, _RAFTask_startTime, "f") === undefined)
+            __classPrivateFieldSet(this, _RAFTask_startTime, now + __classPrivateFieldGet(this, _RAFTask_delay, "f"), "f");
+        // pause
+        if (this.paused) {
+            if (__classPrivateFieldGet(this, _RAFTask_pausedTime, "f") === undefined)
+                __classPrivateFieldSet(this, _RAFTask_pausedTime, now, "f");
+            __classPrivateFieldSet(this, _RAFTask_deltaTime, 0, "f");
+            __classPrivateFieldSet(this, _RAFTask_currentTime, now, "f");
+            return false;
+        }
+        // resume
+        if (!this.paused && __classPrivateFieldGet(this, _RAFTask_pausedTime, "f") !== undefined) {
+            __classPrivateFieldSet(this, _RAFTask_startTime, __classPrivateFieldGet(this, _RAFTask_startTime, "f") + now - __classPrivateFieldGet(this, _RAFTask_pausedTime, "f"), "f");
+            __classPrivateFieldSet(this, _RAFTask_pausedTime, undefined, "f");
+        }
+        // deltaTime
+        __classPrivateFieldSet(this, _RAFTask_deltaTime, now < __classPrivateFieldGet(this, _RAFTask_startTime, "f")
+            ? 0
+            : now - ((_a = __classPrivateFieldGet(this, _RAFTask_currentTime, "f")) !== null && _a !== void 0 ? _a : now), "f");
+        // currentTime
+        __classPrivateFieldSet(this, _RAFTask_currentTime, now, "f");
+        // result
+        __classPrivateFieldSet(this, _RAFTask_isDone, this.progress === 1, "f");
+        return !__classPrivateFieldGet(this, _RAFTask_isDone, "f");
+    }
+    // method: clone
+    /**
+     * 時間を初期化したクローンを作成して返す
+     */
+    clone() {
+        return new RAFTask({
+            id: this.id,
+            groupID: this.groupID,
+            duration: this.duration,
+            delay: this.delay,
+            action: this.action,
+            finish: this.finish,
+            priority: this.priority,
+            extension: this.extension
+        });
+    }
+}
+// ---------- ---------- ---------- ---------- ----------
+// subscription_RAFManager
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * RAFTask 配列をフレームごとに実行するサブスクリプション
+ *
+ * @template S
+ * @param   {S}        state    - ステート
+ * @param   {string[]} keyNames - RAFTask 配列までのパス
+ * @returns {Subscription<S>}
+ */
+export const subscription_RAFManager = function (state, keyNames) {
+    let rID = 0; // rAF timerID
+    // result
+    return [
+        (dispatch, payload) => {
+            if (payload.length === 0)
+                return () => {
+                    if (rID !== 0)
+                        cancelAnimationFrame(rID);
+                };
+            // rAF callback
+            const loop = (now) => {
+                dispatch((state) => {
+                    const tasks = getValue(state, keyNames, []);
+                    const newTasks = tasks.map(task => {
+                        if (task.isDone)
+                            return null;
+                        // action
+                        if (task[_isStart](now)) {
+                            requestAnimationFrame(() => dispatch((state) => task.action(state, task)));
+                        }
+                        // finish
+                        if (task.isDone) {
+                            const fn = task.finish;
+                            if (fn) {
+                                requestAnimationFrame(() => dispatch((state) => fn(state, task)));
+                            }
+                            return null;
+                        }
+                        // next
+                        return task;
+                    }).filter(task => task !== null);
+                    // next loop
+                    if (newTasks.length !== 0)
+                        rID = requestAnimationFrame(loop);
+                    // set state
+                    return setValue(state, keyNames, newTasks);
+                });
+            };
+            // set animation
+            rID = requestAnimationFrame(loop);
+            // finalize
+            return () => {
+                if (rID !== 0)
+                    cancelAnimationFrame(rID);
+            };
+        },
+        // payload
+        getValue(state, keyNames, [])
+            .filter(task => !task.isDone)
+            .sort((a, b) => b.priority - a.priority)
+    ];
+};