hyperapp-is 0.1.50 → 0.2.0

package/dist/{hyperapp-is/animation → animation}/easing.d.ts

@@ -1,3 +1,7 @@
+/**
+ * RAFTask.progress に適用する
+ * イージング関数集
+ */
 export declare const progress_easing: {
     linear: (t: number) => number;
     easeInQuad: (t: number) => number;

package/dist/{hyperapp-is/animation → animation}/easing.js

@@ -1,7 +1,7 @@
-// hyperapp-is / animation / easing.ts
-// ---------- ---------- ---------- ---------- ----------
-// progress_easing
-// ---------- ---------- ---------- ---------- ----------
+/**
+ * RAFTask.progress に適用する
+ * イージング関数集
+ */
 export const progress_easing = {
     // basic
     linear: (t) => t,

package/dist/{hyperapp-is/animation → animation}/properties.d.ts

@@ -1,32 +1,25 @@
-import { Dispatch } from "hyperapp";
-import { InternalEffect, RAFTask } from "./raf";
+import type { Dispatch, Effect } from "hyperapp";
+import { RAFTask } from "./raf";
+export type { CSSProperty };
+export { createRAFProperties, effect_RAFProperties };
 /**
  * アニメーション進捗 (0〜1) を受け取り CSS 値を返す関数
  */
-export interface CSSProperty {
+interface CSSProperty {
     [selector: string]: {
         [name: string]: (progress: number) => string;
     };
 }
-/**
- * CSSProperty[] から、doms と styles のセットに変換
- */
-export declare const createUnits: (properties: CSSProperty[]) => {
-    doms: HTMLElement[];
-    styles: {
-        [name: string]: (progress: number) => string;
-    };
-}[];
 /**
  * subscription_RAFManager をベースにした CSS アニメーション RAFTask を作成する
  * props は基本的に RAFTask の値
  */
-export declare const createRAFProperties: <S>(props: {
+declare const createRAFProperties: <S>(props: {
     id: string;
     groupID?: string;
     duration: number;
     delay?: number;
-    finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>];
+    finish?: (state: S, rafTask: RAFTask<S>) => S | [S, Effect<S>];
     priority?: number;
     extension?: Record<string, any>;
     properties: CSSProperty[];
@@ -35,12 +28,12 @@ export declare const createRAFProperties: <S>(props: {
  * subscription_RAFManager をベースにした CSS アニメーションエフェクト
  * props は基本的に RAFTask の値
  */
-export declare const effect_RAFProperties: <S>(props: {
+declare const effect_RAFProperties: <S>(props: {
     id: string;
     groupID?: string;
     duration: number;
     delay?: number;
-    finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>];
+    finish?: (state: S, rafTask: RAFTask<S>) => S | [S, Effect<S>];
     priority?: number;
     extension?: Record<string, any>;
     properties: CSSProperty[];

package/dist/{hyperapp-is/animation → animation}/properties.js

@@ -1,13 +1,20 @@
-// hyperapp-is / animation / properties.ts
+// ---------- ---------- ---------- ---------- ----------
+// import
+// ---------- ---------- ---------- ---------- ----------
+// hyprerapp-is
 import { getValue, setValue } from "../core/state";
 import { RAFTask } from "./raf";
+export { createRAFProperties, effect_RAFProperties };
 // ---------- ---------- ---------- ---------- ----------
-// createUnits
+// implementation
+// ---------- ---------- ---------- ---------- ----------
+// GPU_LAYER を適用させる CSS プロパティ
+const GPU_LAYER = new Set(["transform", "opacity"]);
 // ---------- ---------- ---------- ---------- ----------
 /**
  * CSSProperty[] から、doms と styles のセットに変換
  */
-export const createUnits = function (properties) {
+const createUnits = function (properties) {
     return properties.map(p => {
         const selector = Object.keys(p)[0];
         return {
@@ -17,20 +24,17 @@ export const createUnits = function (properties) {
     });
 };
 // ---------- ---------- ---------- ---------- ----------
-// createRAFProperties
-// ---------- ---------- ---------- ---------- ----------
 /**
  * subscription_RAFManager をベースにした CSS アニメーション RAFTask を作成する
  * props は基本的に RAFTask の値
  */
-export const createRAFProperties = function (props) {
+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 progress = rafTask.progress ?? 0;
         const units = createUnits(properties);
         // set styles
         units.forEach(unit => {
@@ -70,14 +74,11 @@ export const createRAFProperties = function (props) {
     });
 };
 // ---------- ---------- ---------- ---------- ----------
-// effect_RAFProperties
-// ---------- ---------- ---------- ---------- ----------
-const GPU_LAYER = new Set(["transform", "opacity"]);
 /**
  * subscription_RAFManager をベースにした CSS アニメーションエフェクト
  * props は基本的に RAFTask の値
  */
-export const effect_RAFProperties = function (props) {
+const effect_RAFProperties = function (props) {
     const { id, groupID, duration, delay, finish, priority, extension, properties, keyNames } = props;
     // get doms
     const units = createUnits(properties);

package/dist/{hyperapp-is/animation → animation}/raf.d.ts

@@ -1,17 +1,16 @@
-import { Effect, Subscription } from "hyperapp";
-import { Keys_ArrayRAFTask } from "../core/state";
-/**
- * 戻値としては返されないことを示したエフェクト
- * Effect の型エイリアス
- */
-export type InternalEffect<S> = Effect<S>;
+import type { Effect, Subscription } from "hyperapp";
+export type { RAFEvent };
+export { RAFTask, subscription_RAFManager };
+declare const _isStart: unique symbol;
 /**
  * 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> {
+type RAFEvent<S> = (state: S, rafTask: RAFTask<S>) => S | [S, Effect<S>];
+/**
+ * requestAnimationFrame を利用して実行する、タスクを管理するクラス
+ */
+declare class RAFTask<S> {
     #private;
     constructor(props: {
         id: string;
@@ -53,6 +52,6 @@ export declare class RAFTask<S> {
 }
 /**
  * RAFTask 配列の実行を管理するサブスクリプション
+ * keyNames には、RAFTask[] までのパスを指定する
  */
-export declare const subscription_RAFManager: <S>(state: S, keyNames: Keys_ArrayRAFTask) => Subscription<S>;
-export {};
+declare const subscription_RAFManager: <S>(state: S, keyNames: string[]) => Subscription<S>;

package/dist/animation/raf.js

@@ -0,0 +1,192 @@
+// ---------- ---------- ---------- ---------- ----------
+// import
+// ---------- ---------- ---------- ---------- ----------
+// hyperapp-is
+import { getValue, setValue } from "../core/state";
+export { RAFTask, subscription_RAFManager };
+// ---------- ---------- ---------- ---------- ----------
+// implementation
+// ---------- ---------- ---------- ---------- ----------
+// Symbol
+// subscription_RAFManager のみで使用される専用メソッド
+// Symbol を知らない限り、モジュールの外からは呼べない
+const _isStart = Symbol("RAFTask.isStart");
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * requestAnimationFrame を利用して実行する、タスクを管理するクラス
+ */
+class RAFTask {
+    // field
+    #id;
+    #groupID;
+    #duration;
+    #delay;
+    #action;
+    #finish;
+    #priority;
+    #extension;
+    #startTime;
+    #currentTime;
+    #pausedTime;
+    #paused;
+    #deltaTime;
+    #isDone;
+    // constructor
+    constructor(props) {
+        this.#id = props.id;
+        this.#groupID = props.groupID;
+        this.#duration = props.duration;
+        this.#delay = props.delay ?? 0;
+        this.#action = props.action;
+        this.#finish = props.finish;
+        this.#priority = props.priority ?? 0;
+        this.#extension = props.extension ?? {};
+        this.#isDone = false;
+        this.#paused = false;
+    }
+    // getter
+    get id() { return this.#id; }
+    get groupID() { return this.#groupID; }
+    get duration() { return this.#duration; }
+    get delay() { return this.#delay; }
+    get action() { return this.#action; }
+    get finish() { return this.#finish; }
+    get priority() { return this.#priority; }
+    get extension() { return this.#extension; }
+    get progress() {
+        if (this.#startTime === undefined || this.#currentTime === undefined)
+            return 0;
+        return Math.min(1, Math.max(0, (this.#currentTime - this.#startTime) /
+            Math.max(1, this.#duration)));
+    }
+    get deltaTime() { return this.#deltaTime ?? 0; }
+    get isDone() {
+        if (this.#isDone)
+            return true;
+        if (this.#pausedTime !== undefined)
+            return false;
+        return this.progress === 1;
+    }
+    get paused() { return this.#paused; }
+    // setter
+    set groupID(val) { this.#groupID = val; }
+    set priority(val) { this.#priority = val; }
+    set extension(val) { this.#extension = val; }
+    set isDone(val) { this.#isDone = val; }
+    set paused(val) { this.#paused = val; }
+    // ---------- ---------- ----------
+    // private method: _isStart
+    // ---------- ---------- ----------
+    /**
+     * アクションを開始して良いか判定する
+     * 現在時間等のアップデートも同時に行われる
+     * subscription_RAFManager でのみ使用される
+     */
+    [_isStart](now) {
+        // done
+        if (this.isDone)
+            return false;
+        // startTime
+        if (this.#startTime === undefined)
+            this.#startTime = now + this.#delay;
+        // pause
+        if (this.paused) {
+            if (this.#pausedTime === undefined)
+                this.#pausedTime = now;
+            this.#deltaTime = 0;
+            this.#currentTime = now;
+            return false;
+        }
+        // resume
+        if (!this.paused && this.#pausedTime !== undefined) {
+            this.#startTime = this.#startTime + now - this.#pausedTime;
+            this.#pausedTime = undefined;
+        }
+        // deltaTime
+        this.#deltaTime = now < this.#startTime
+            ? 0
+            : now - (this.#currentTime ?? now);
+        // currentTime
+        this.#currentTime = now;
+        // result
+        this.#isDone = this.progress === 1;
+        return !this.#isDone;
+    }
+    // ---------- ---------- ----------
+    // 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
+        });
+    }
+}
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * RAFTask 配列の実行を管理するサブスクリプション
+ * keyNames には、RAFTask[] までのパスを指定する
+ */
+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, []);
+                    // newTasks
+                    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)
+    ];
+};

package/dist/core/component.d.ts

@@ -0,0 +1,23 @@
+import type { VNode, Effect } from "hyperapp";
+export { el, concatAction, getClassList, deleteKeys };
+/**
+ * h 関数のラッパー
+ */
+declare const el: <S = any>(tag: string) => (props?: {
+    [key: string]: any;
+}, ...children: any[]) => VNode<S>;
+/**
+ * アクションを結合する
+ * 結合したアクションは、1フレーム後に実行される
+ */
+declare const concatAction: <S, E>(action: undefined | ((state: S, e: E) => S | [S, Effect<S>]), newState: S, e: E) => S | [S, Effect<S>];
+/**
+ * props から クラスリストを取得する
+ */
+declare const getClassList: (props: {
+    [key: string]: any;
+}) => string[];
+/**
+ * props から 指定されたキーを削除する
+ */
+declare const deleteKeys: <T extends Record<string, any>>(props: T, ...keys: (keyof T)[]) => Omit<T, (typeof keys)[number]>;

package/dist/core/component.js

@@ -0,0 +1,52 @@
+// ---------- ---------- ---------- ---------- ----------
+// import
+// ---------- ---------- ---------- ---------- ----------
+import { h, text } from "hyperapp";
+// ---------- ---------- ---------- ---------- ----------
+// exports
+// ---------- ---------- ---------- ---------- ----------
+export { el, concatAction, getClassList, deleteKeys };
+// ---------- ---------- ---------- ---------- ----------
+// implementation
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * h 関数のラッパー
+ */
+const el = (tag) => (props, ...children) => h(tag, props ?? {}, children
+    .flat()
+    .filter(child => child !== null &&
+    child !== undefined)
+    .map((child) => typeof child === "object" ? child : text(`${child}`)));
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * アクションを結合する
+ * 結合したアクションは、1フレーム後に実行される
+ */
+const concatAction = function (action, newState, e) {
+    if (!action)
+        return newState;
+    const effect = (dispatch) => {
+        requestAnimationFrame(() => {
+            dispatch((state) => action(state, e));
+        });
+    };
+    return [newState, effect];
+};
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * props から クラスリストを取得する
+ */
+const getClassList = (props) => {
+    return props.class
+        ? props.class.trim().split(" ").filter(Boolean)
+        : [];
+};
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * props から 指定されたキーを削除する
+ */
+const deleteKeys = (props, ...keys) => {
+    const result = { ...props };
+    keys.forEach(key => delete result[key]);
+    return result;
+};

package/dist/core/effects.d.ts

@@ -0,0 +1,10 @@
+import { Effect } from "hyperapp";
+export { effect_toast };
+/**
+ * 一定時間値を設定した後、元の値に戻す
+ */
+declare const effect_toast: <S>(props: {
+    keyNames: string[];
+    value: any;
+    duration?: number;
+}) => Effect<S>;

package/dist/core/effects.js

@@ -0,0 +1,34 @@
+// ---------- ---------- ---------- ---------- ----------
+// import
+// ---------- ---------- ---------- ---------- ----------
+// hyperapp-is
+import { getValue, setValue } from "./state";
+// ---------- ---------- ---------- ---------- ----------
+// exports
+// ---------- ---------- ---------- ---------- ----------
+export { effect_toast };
+// ---------- ---------- ---------- ---------- ----------
+// implementation
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * 一定時間値を設定した後、元の値に戻す
+ */
+const effect_toast = function (props) {
+    const { keyNames, value, duration = 2000 } = props;
+    const fn = (dispatch, thisValue) => {
+        setTimeout(() => {
+            dispatch((state) => {
+                if (getValue(state, keyNames, undefined) !== value)
+                    return state;
+                return setValue(state, keyNames, thisValue);
+            });
+        }, duration);
+    }; // end fn
+    return (dispatch) => {
+        dispatch((state) => {
+            const thisValue = getValue(state, keyNames, undefined);
+            fn(dispatch, thisValue);
+            return setValue(state, keyNames, value);
+        });
+    };
+};

package/dist/core/state.d.ts

@@ -0,0 +1,21 @@
+export { getValue, setValue, getLocalState, setLocalState, createLocalKey };
+/**
+ * state の keyNames をたどって値を取得する
+ */
+declare const getValue: <S, D>(state: S, keyNames: string[], def: D) => D;
+/**
+ * state の keyNames をたどって値を設定する
+ */
+declare const setValue: <S>(state: S, keyNames: string[], value: any) => S;
+/**
+ * ユニーク文字を作成する
+ */
+declare const createLocalKey: (id: string) => string;
+/**
+ * state にぶら下げられたローカルステートを取得する
+ */
+declare const getLocalState: <S, T>(state: S, id: string, def: T) => T;
+/**
+ * state にローカルステートをぶら下げる
+ */
+declare const setLocalState: <S, T>(state: S, id: string, value: T) => S;

package/dist/{hyperapp-is/core → core}/state.js

@@ -1,11 +1,14 @@
-// hyperapp-is / core / state.ts
 // ---------- ---------- ---------- ---------- ----------
-// getValue
+// exports
+// ---------- ---------- ---------- ---------- ----------
+export { getValue, setValue, getLocalState, setLocalState, createLocalKey };
+// ---------- ---------- ---------- ---------- ----------
+// implementation
 // ---------- ---------- ---------- ---------- ----------
 /**
- * パスを辿って、ステートから値を取得する
+ * state の keyNames をたどって値を取得する
  */
-export const getValue = function (state, keyNames, def) {
+const getValue = function (state, keyNames, def) {
     let result = state;
     for (const key of keyNames) {
         if (result == null ||
@@ -21,12 +24,10 @@ export const getValue = function (state, keyNames, def) {
     return result;
 };
 // ---------- ---------- ---------- ---------- ----------
-// setValue
-// ---------- ---------- ---------- ---------- ----------
 /**
- * パスを辿って、ステートに値を設定して返す
+ * state の keyNames をたどって値を設定する
  */
-export const setValue = function (state, keyNames, value) {
+const setValue = function (state, keyNames, value) {
     let result = { ...state };
     let current = result;
     for (let i = 0; i < keyNames.length; i++) {
@@ -47,19 +48,15 @@ export const setValue = function (state, keyNames, value) {
     return result;
 };
 // ---------- ---------- ---------- ---------- ----------
-// createLocalKey
-// ---------- ---------- ---------- ---------- ----------
 /**
- * IDからユニーク文字列を作成する
+ * ユニーク文字を作成する
  */
-export const createLocalKey = (id) => `local_key_${id}`;
-// ---------- ---------- ---------- ---------- ----------
-// getLocalState
+const createLocalKey = (id) => `local_key_${id}`;
 // ---------- ---------- ---------- ---------- ----------
 /**
- * ステートから、ローカルステートを取得する
+ * state にぶら下げられたローカルステートを取得する
  */
-export const getLocalState = function (state, id, def) {
+const getLocalState = function (state, id, def) {
     const localKey = createLocalKey(id);
     const obj = Object.prototype.hasOwnProperty.call(state, localKey)
         ? state[localKey]
@@ -70,12 +67,10 @@ export const getLocalState = function (state, id, def) {
     };
 };
 // ---------- ---------- ---------- ---------- ----------
-// setLocalState
-// ---------- ---------- ---------- ---------- ----------
 /**
- * ローカルステートを更新してステートを返す
+ * state にローカルステートをぶら下げる
  */
-export const setLocalState = function (state, id, value) {
+const setLocalState = function (state, id, value) {
     const localKey = createLocalKey(id);
     const obj = Object.prototype.hasOwnProperty.call(state, localKey)
         ? state[localKey]

package/dist/dom/dialog.d.ts

@@ -0,0 +1,6 @@
+export { withLoadingDialog };
+/**
+ * タスク実行中にローディングダイアログを表示する
+ * onCancel を指定した場合は、Esc キーで onCancel が呼び出される
+ */
+declare const withLoadingDialog: <T>(task: () => Promise<T>, onCancel?: () => void) => Promise<T>;

package/dist/dom/dialog.js

@@ -0,0 +1,85 @@
+// ---------- ---------- ---------- ---------- ----------
+// exports
+// ---------- ---------- ---------- ---------- ----------
+export { withLoadingDialog };
+// ---------- ---------- ---------- ---------- ----------
+// implementation
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * タスク実行中にローディングダイアログを表示する
+ * onCancel を指定した場合は、Esc キーで onCancel が呼び出される
+ */
+const withLoadingDialog = async function (task, onCancel) {
+    // dialog
+    const dialog = document.createElement("dialog");
+    dialog.className = "withLoadingDialog";
+    // Esc
+    let canceled = false;
+    dialog.addEventListener("cancel", e => {
+        if (!onCancel) {
+            e.preventDefault();
+            return;
+        }
+        if (canceled)
+            return;
+        canceled = true;
+        onCancel();
+    });
+    dialog.style.margin = "auto auto";
+    dialog.style.padding = "0";
+    dialog.style.border = "0";
+    dialog.style.outline = "none";
+    dialog.style.backgroundColor = "transparent";
+    // svg
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 -960 960 960");
+    svg.setAttribute("width", "24px");
+    svg.setAttribute("height", "24px");
+    svg.setAttribute("fill", "#1F1F1F");
+    svg.animate([
+        { transform: "rotate(0deg)" },
+        { transform: "rotate(360deg)" }
+    ], {
+        duration: 1000,
+        iterations: Infinity,
+        easing: "linear"
+    });
+    // path
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", "M325-111.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480.5-80Q398-80 325-111.5Z");
+    // span
+    const span = document.createElement("span");
+    span.textContent = "Loading...";
+    span.style.marginLeft = "0.5rem";
+    // append
+    svg.appendChild(path);
+    dialog.appendChild(svg);
+    dialog.appendChild(span);
+    // result
+    let timerID = undefined;
+    try {
+        timerID = setTimeout(() => {
+            if (timerID === undefined)
+                return;
+            document.body.appendChild(dialog);
+            try {
+                dialog.showModal();
+            }
+            catch {
+                dialog.remove();
+            }
+        }, 250);
+        return await task();
+    }
+    finally {
+        // clear timer
+        if (timerID !== 0) {
+            clearTimeout(timerID);
+            timerID = undefined;
+        }
+        // remove dialog
+        if (dialog.open)
+            dialog.close();
+        dialog.remove();
+    }
+};