hyperapp-is 0.1.0

package/dist/hyperapp-is/core/component.js

@@ -0,0 +1,193 @@
+// hyperapp-ui / core / component.ts
+import { h, text } from "hyperapp";
+import { getValue, setValue } from "./state";
+// ========== ========== ========== ========== ==========
+// 補助関数
+// ========== ========== ========== ========== ==========
+// ---------- ---------- ---------- ---------- ----------
+// el
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * h 関数のラッパー
+ * 他でjsxを使用した場合、hが競合する可能性があるので作成した
+ *
+ * @template S
+ * @param   {string} tag - タグ名
+ * @returns {(props:{ [key: string] any }, ...children:any[]) => VNode<S>}
+ */
+export const el = (tag) => (props, ...children) => h(tag, props !== null && props !== void 0 ? props : {}, children
+    .flat()
+    .map((child) => typeof child === "object" ? child : text(child)));
+/* element */
+const button = el("button");
+// ---------- ---------- ---------- ---------- ----------
+// concatAction
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * アクションを結合して結果を返す
+ *
+ * @template S
+ * @template E
+ * @param   {undefined | (state: S, e: E) => S | [S, Effect<S>]} action   - 結合するアクション
+ * @param   {S}                                                  newState - 結合するステート
+ * @param   {E}                                                  e        - イベント (任意のイベント型)
+ * @returns {S | [S, Effect<S>]}
+ */
+export const concatAction = function (action, newState, e) {
+    if (!action)
+        return newState;
+    const effect = (dispatch) => {
+        // 次の描画を待たないと、newStateと同時にdispatchが走ってしまい、DOMが存在しない可能性がある
+        // effect_initializeNodesを機能させるため、dispatch を描画後まで保留する
+        requestAnimationFrame(() => {
+            dispatch((state) => action(state, e));
+        });
+    };
+    return [newState, effect];
+};
+// ---------- ---------- ---------- ---------- ----------
+// getClassList
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * props から classList を取得
+ *
+ * @param   {Record<string, any>} props - props
+ * @returns {string[]}
+ */
+export const getClassList = (props) => {
+    return props.class
+        ? props.class.trim().split(" ").filter(Boolean)
+        : [];
+};
+// ---------- ---------- ---------- ---------- ----------
+// deleteKeys
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * props から不要なキーを削除する
+ *
+ * @template T
+ * @param   {T}            props - props
+ * @param   {(keyof T)[])} keys  - 削除するキー
+ * @returns {Omit<T, (typeof keys)[number]>}
+ */
+export const deleteKeys = (props, ...keys) => {
+    const result = { ...props };
+    keys.forEach(key => delete result[key]);
+    return result;
+};
+// ========== ========== ========== ========== ==========
+// コンポーネント
+// ========== ========== ========== ========== ==========
+// ---------- ---------- ---------- ---------- ----------
+// Route
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * ステート内の文字とmatchした時、VNodeを返す
+ *
+ * @template S
+ * @param   {Record<string, any>} props          - props
+ * @param   {S}                   props.state    - ステート
+ * @param   {string[]}            props.keyNames - ステート内の文字までのパス
+ * @param   {string}              props.match    - 一致判定する文字
+ * @param   {any}                 children       - 出力する内容 (VNode / 配列 / 文字など)
+ * @returns {VNode<S> | null}
+ */
+export const Route = function (props, children) {
+    const { state, keyNames, match } = props;
+    const selectedName = getValue(state, keyNames, "");
+    // nullの場合、VNodeは生成されない
+    return selectedName === match ? children : null;
+};
+// ---------- ---------- ---------- ---------- ----------
+// SelectButton
+// ---------- ---------- ---------- ---------- ----------
+const REVERSE_PREFIX = "r_";
+/**
+ * クリックで、クラス名のselectをトグルするボタン
+ *
+ * @template S
+ * @param   {Record<string, any>} props          - props
+ * @param   {S}                   props.state    - ステート
+ * @param   {string[]}            props.keyNames - ステート内の文字配列までのパス
+ * @param   {string}              props.id       - ユニークID
+ * @param   {boolean}            [props.reverse] - 反転選択するか
+ * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
+ * @returns {VNode<S>}
+ */
+export const SelectButton = function (props, children) {
+    const { state, keyNames, id, reverse = false } = props;
+    // classList
+    const classList = getClassList(props).filter(item => {
+        const name = item.toLowerCase();
+        return name !== "select" && name !== "reverse";
+    });
+    const selectedNames = getValue(state, keyNames, []);
+    if (selectedNames.includes(id))
+        classList.push("select");
+    if (selectedNames.includes(`${REVERSE_PREFIX}${id}`))
+        classList.push("reverse");
+    // action
+    const action = (state, e) => {
+        const selectedNames = getValue(state, keyNames, []);
+        const newList = selectedNames.includes(id)
+            ? reverse
+                ? selectedNames.filter(item => item !== id).concat(`${REVERSE_PREFIX}${id}`)
+                : selectedNames.filter(item => item !== id)
+            : selectedNames.includes(`${REVERSE_PREFIX}${id}`)
+                ? selectedNames.filter(item => item !== `${REVERSE_PREFIX}${id}`)
+                : selectedNames.concat(id);
+        const newState = setValue(state, keyNames, newList);
+        return concatAction(props.onclick, newState, e);
+    };
+    // VNode
+    return button({
+        type: "button",
+        ...deleteKeys(props, "state", "keyNames", "reverse"),
+        class: classList.join(" "),
+        onclick: action
+    }, children);
+};
+// ---------- ---------- ---------- ---------- ----------
+// OptionButton
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * クリックで、クラス名のselectを排他的に選択するボタン
+ *
+ * @template S
+ * @param   {Record<string, any>} props          - props
+ * @param   {S}                   props.state    - ステート
+ * @param   {string[]}            props.keyNames - ステート内の文字までのパス
+ * @param   {string}              props.id       - ユニークID
+ * @param   {boolean}            [props.reverse] - 反転選択するか
+ * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
+ * @returns {VNode<S>}
+ */
+export const OptionButton = function (props, children) {
+    const { state, keyNames, id, reverse = false } = props;
+    // classList
+    const classList = getClassList(props).filter(item => {
+        const name = item.toLowerCase();
+        return name !== "select" && name !== "reverse";
+    });
+    const selectedName = getValue(state, keyNames, "");
+    if (selectedName === id)
+        classList.push("select");
+    if (selectedName === `${REVERSE_PREFIX}${id}`)
+        classList.push("reverse");
+    // action
+    const action = (state, e) => {
+        const selectedName = getValue(state, keyNames, "");
+        const newValue = selectedName === id && reverse
+            ? `${REVERSE_PREFIX}${id}`
+            : id;
+        const newState = setValue(state, keyNames, newValue);
+        return concatAction(props.onclick, newState, e);
+    };
+    // VNode
+    return button({
+        type: "button",
+        ...deleteKeys(props, "state", "keyNames", "reverse"),
+        class: classList.join(" "),
+        onclick: action
+    }, children);
+};

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

@@ -0,0 +1,2 @@
+export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./state";
+export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./component";

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

@@ -0,0 +1,2 @@
+export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./state";
+export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./component";

package/dist/hyperapp-is/core/state.d.ts

@@ -0,0 +1,54 @@
+/**
+ * パスを辿って、ステートから値を取得する
+ *
+ * @template S
+ * @template D
+ * @param   {S}        state    - ステート
+ * @param   {string[]} keyNames - 値までのパス
+ * @param   {D}        def      - デフォルト値
+ * @returns {D}                 - 型保証は呼び出し側の責任
+ */
+export declare const getValue: <S, D>(state: S, keyNames: string[], def: D) => D;
+/**
+ * パスを辿って、ステートに値を設定して返す
+ *
+ * @template S
+ * @param   {S}        state    - ステート
+ * @param   {string[]} keyNames - 値までのパス
+ * @param   {any}      value    - 設定する値
+ * @returns {S}
+ */
+export declare const setValue: <S>(state: S, keyNames: string[], value: any) => S;
+/**
+ * IDからユニーク文字列を作成する
+ *
+ * @param   {string} id - ユニークID
+ * @returns {string}
+ */
+export declare const createLocalKey: (id: string) => string;
+/**
+ * ステートから、ローカルステートを取得する
+ *
+ * @template S
+ * @param   {S}                   state - ステート
+ * @param   {string}              id    - ユニークID
+ * @param   {Record<string, any>} def   - 初期値
+ * @returns {Record<string, any>}
+ */
+export declare const getLocalState: <S>(state: S, id: string, def: {
+    [key: string]: any;
+}) => {
+    [key: string]: any;
+};
+/**
+ * ローカルステートを更新してステートを返す
+ *
+ * @template S
+ * @param   {S}                   state - ステート
+ * @param   {string}              id    - ユニークID
+ * @param   {Record<string, any>} value - 設定するローカルステート
+ * @returns {S}
+ */
+export declare const setLocalState: <S>(state: S, id: string, value: {
+    [key: string]: any;
+}) => S;

package/dist/hyperapp-is/core/state.js

@@ -0,0 +1,118 @@
+// hyperapp-ut / core / state.ts
+// ---------- ---------- ---------- ---------- ----------
+// getValue
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * パスを辿って、ステートから値を取得する
+ *
+ * @template S
+ * @template D
+ * @param   {S}        state    - ステート
+ * @param   {string[]} keyNames - 値までのパス
+ * @param   {D}        def      - デフォルト値
+ * @returns {D}                 - 型保証は呼び出し側の責任
+ */
+export const getValue = function (state, keyNames, def) {
+    let result = state;
+    for (const key of keyNames) {
+        if (result == null ||
+            typeof result !== "object")
+            return def;
+        if (Object.prototype.hasOwnProperty.call(result, key)) {
+            result = result[key];
+        }
+        else {
+            return def;
+        }
+    }
+    return result;
+};
+// ---------- ---------- ---------- ---------- ----------
+// setValue
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * パスを辿って、ステートに値を設定して返す
+ *
+ * @template S
+ * @param   {S}        state    - ステート
+ * @param   {string[]} keyNames - 値までのパス
+ * @param   {any}      value    - 設定する値
+ * @returns {S}
+ */
+export const setValue = function (state, keyNames, value) {
+    let result = { ...state };
+    let current = result;
+    for (let i = 0; i < keyNames.length; i++) {
+        const key = keyNames[i];
+        if (Object.prototype.hasOwnProperty.call(current, key) &&
+            current[key] != null &&
+            typeof current[key] === "object") {
+            current[key] = { ...current[key] };
+        }
+        else {
+            current[key] = {};
+        }
+        if (keyNames.length - 1 === i) {
+            current[key] = value;
+        }
+        current = current[key];
+    }
+    return result;
+};
+// ---------- ---------- ---------- ---------- ----------
+// createLocalKey
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * IDからユニーク文字列を作成する
+ *
+ * @param   {string} id - ユニークID
+ * @returns {string}
+ */
+export const createLocalKey = (id) => `local_key_${id}`;
+// ---------- ---------- ---------- ---------- ----------
+// getLocalState
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * ステートから、ローカルステートを取得する
+ *
+ * @template S
+ * @param   {S}                   state - ステート
+ * @param   {string}              id    - ユニークID
+ * @param   {Record<string, any>} def   - 初期値
+ * @returns {Record<string, any>}
+ */
+export const getLocalState = function (state, id, def) {
+    const localKey = createLocalKey(id);
+    const obj = Object.prototype.hasOwnProperty.call(state, localKey)
+        ? state[localKey]
+        : {};
+    return {
+        ...def,
+        ...obj
+    };
+};
+// ---------- ---------- ---------- ---------- ----------
+// setLocalState
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * ローカルステートを更新してステートを返す
+ *
+ * @template S
+ * @param   {S}                   state - ステート
+ * @param   {string}              id    - ユニークID
+ * @param   {Record<string, any>} value - 設定するローカルステート
+ * @returns {S}
+ */
+export const setLocalState = function (state, id, value) {
+    const localKey = createLocalKey(id);
+    const obj = Object.prototype.hasOwnProperty.call(state, localKey)
+        ? state[localKey]
+        : {};
+    return {
+        ...state,
+        [localKey]: {
+            ...obj,
+            ...value
+        }
+    };
+};

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

@@ -0,0 +1,2 @@
+export type { ScrollMargin, MatrixState } from "./utils";
+export { getScrollMargin, getMatrixState, marquee } from "./utils";

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

@@ -0,0 +1 @@
+export { getScrollMargin, getMatrixState, marquee } from "./utils";

package/dist/hyperapp-is/dom/utils.d.ts

@@ -0,0 +1,68 @@
+/**
+ * スクロールの余白
+ *
+ * @type {Object} ScrollMargin
+ * @property {number} top    - 上までの余白
+ * @property {number} left   - 左までの余白
+ * @property {number} right  - 右までの余白
+ * @property {number} bottom - 下までの余白
+ */
+export interface ScrollMargin {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+}
+/**
+ * スクロールの余白を取得する
+ *
+ * @param   {Event} e - イベント
+ * @returns {ScrollMargin}
+ */
+export declare const getScrollMargin: (e: Event) => ScrollMargin;
+/**
+ * transform 情報
+ */
+export interface MatrixState {
+    translate: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    scale: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    rotate: {
+        x: number;
+        y: number;
+        z: number;
+    };
+}
+/**
+ * DOM から transfrom 情報を取得する
+ *
+ * @param {HTMLElement} dom - 情報を取得する DOM
+ * @returns {MatrixState}
+ */
+export declare const getMatrixState: (dom: HTMLElement) => MatrixState | null;
+/**
+ * Carousel 風に DOM が流れるアニメーションを実行する
+ *
+ * @param {Object}                 props          - props
+ * @param {HTMLElement}            props.element  - DOM
+ * @param {number}                 props.duration - 実行時間 (ms)
+ * @param {number}                 props.interval - 待機時間 (ms)
+ * @param {(t: number) => number} [props.easing]  - easing 関数
+ * @returns {{start: () => void, stop: () => void}}
+ */
+export declare const marquee: <S>(props: {
+    element: HTMLElement;
+    duration: number;
+    interval: number;
+    easing?: (t: number) => number;
+}) => {
+    start: () => void;
+    stop: () => void;
+};

package/dist/hyperapp-is/dom/utils.js

@@ -0,0 +1,159 @@
+// hyperapp-ui / dom / utils.ts
+// ---------- ---------- ---------- ---------- ----------
+// getScrollMargin
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * スクロールの余白を取得する
+ *
+ * @param   {Event} e - イベント
+ * @returns {ScrollMargin}
+ */
+export const getScrollMargin = function (e) {
+    const el = e.currentTarget;
+    if (!el)
+        return { top: 0, left: 0, right: 0, bottom: 0 };
+    return {
+        top: el.scrollTop,
+        left: el.scrollLeft,
+        right: el.scrollWidth - (el.clientWidth + el.scrollLeft),
+        bottom: el.scrollHeight - (el.clientHeight + el.scrollTop)
+    };
+};
+// ---------- ---------- ---------- ---------- ----------
+// getMatrixState
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * DOM から transfrom 情報を取得する
+ *
+ * @param {HTMLElement} dom - 情報を取得する DOM
+ * @returns {MatrixState}
+ */
+export const getMatrixState = (dom) => {
+    const style = getComputedStyle(dom);
+    const transform = style.transform;
+    if (!transform || transform === 'none')
+        return null;
+    let m;
+    try {
+        m = new DOMMatrix(transform);
+    }
+    catch {
+        return null;
+    }
+    const scaleX = Math.hypot(m.m11, m.m12, m.m13);
+    const scaleY = Math.hypot(m.m21, m.m22, m.m23);
+    const scaleZ = Math.hypot(m.m31, m.m32, m.m33);
+    let rotateX = 0;
+    let rotateY = 0;
+    let rotateZ = 0;
+    if (scaleX && scaleY && scaleZ) {
+        rotateY = Math.asin(-m.m13 / scaleZ);
+        const EPS = 1e-8;
+        if (Math.cos(rotateY) > EPS) {
+            rotateX = Math.atan2(m.m23 / scaleZ, m.m33 / scaleZ);
+            rotateZ = Math.atan2(m.m12 / scaleY, m.m11 / scaleX);
+        }
+    }
+    return {
+        translate: {
+            x: m.m41,
+            y: m.m42,
+            z: m.m43
+        },
+        scale: {
+            x: scaleX,
+            y: scaleY,
+            z: scaleZ
+        },
+        // radian
+        rotate: {
+            x: rotateX,
+            y: rotateY,
+            z: rotateZ
+        }
+    };
+};
+// ---------- ---------- ---------- ---------- ----------
+// marquee
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * Carousel 風に DOM が流れるアニメーションを実行する
+ *
+ * @param {Object}                 props          - props
+ * @param {HTMLElement}            props.element  - DOM
+ * @param {number}                 props.duration - 実行時間 (ms)
+ * @param {number}                 props.interval - 待機時間 (ms)
+ * @param {(t: number) => number} [props.easing]  - easing 関数
+ * @returns {{start: () => void, stop: () => void}}
+ */
+export const marquee = function (props) {
+    const { element, duration, interval, easing = (t) => t } = props;
+    // function calcWidth
+    const calcWidth = () => {
+        const children = Array.from(element.children);
+        return !children || children.length < 2
+            ? 0
+            : children[1].offsetLeft - children[0].offsetLeft;
+    };
+    // variable
+    let rID = 0;
+    let timerID = 0;
+    let startTime = 0;
+    let width = 0;
+    // requestAnimationFrame callback
+    const action = (now) => {
+        // set startTime
+        if (startTime === 0)
+            startTime = now;
+        // get progress
+        const progress = Math.min((now - startTime) / Math.max(1, duration));
+        // set property
+        element.style.transform = `translateX(${-easing(progress) * width}px)`;
+        // next
+        if (progress < 1) {
+            rID = requestAnimationFrame(action);
+            return;
+        }
+        // reset property
+        element.style.transform = `translateX(0px)`;
+        // set children
+        const firstChild = element.children[0];
+        if (!firstChild)
+            return;
+        // loop
+        element.appendChild(firstChild);
+        // loop
+        timerID = window.setTimeout(() => {
+            startTime = 0;
+            rID = requestAnimationFrame(action);
+        }, interval);
+    };
+    // result
+    return {
+        start: () => {
+            // 二重起動防止
+            if (rID !== 0)
+                return;
+            // get width
+            width = calcWidth();
+            if (width === 0)
+                return;
+            // set gpu layer
+            element.style.willChange = "transform";
+            // start animation
+            rID = requestAnimationFrame(action);
+        },
+        stop: () => {
+            // cancel animation
+            cancelAnimationFrame(rID);
+            // stop timer
+            clearTimeout(timerID);
+            // clear gpy layer
+            element.style.willChange = "";
+            element.style.transform = "";
+            // clear ID
+            rID = 0;
+            timerID = 0;
+        }
+    };
+};

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

@@ -0,0 +1,7 @@
+export { getValue, setValue, getLocalState, setLocalState, createLocalKey, el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./core";
+export type { InternalEffect, RAFEvent, CSSProperty } from "./animation";
+export { RAFTask, subscription_RAFManager, progress_easing, createUnits, createRAFProperties, effect_RAFProperties } from "./animation";
+export type { CarouselState, CarouselController } from "./animationView";
+export { Carousel, effect_InitCarousel } from "./animationView";
+export type { ScrollMargin, MatrixState } from "./dom";
+export { getScrollMargin, getMatrixState, marquee } from "./dom";

package/dist/hyperapp-is/index.js

@@ -0,0 +1,5 @@
+// core
+export { getValue, setValue, getLocalState, setLocalState, createLocalKey, el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./core";
+export { RAFTask, subscription_RAFManager, progress_easing, createUnits, createRAFProperties, effect_RAFProperties } from "./animation";
+export { Carousel, effect_InitCarousel } from "./animationView";
+export { getScrollMargin, getMatrixState, marquee } from "./dom";

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "hyperapp-is",
+  "version": "0.1.0",
+  "description": "UI foundation library for Hyperapp by is4416",
+  "license": "MIT",
+  "type": "module",
+
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+
+  "readme": "README.npm.md",
+
+  "scripts": {
+    "build": "npm run build:lib",
+    "build:lib": "tsc -p tsconfig.lib.json",
+    "build:docs": "vite build",
+    "dev": "vite",
+    "pack:check": "npm pack",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+
+  "keywords": [
+    "hyperapp",
+    "ui",
+    "animation",
+    "raf",
+    "carousel"
+  ],
+
+  "peerDependencies": {
+    "hyperapp": "^2.0.0",
+    "hyperapp-jsx-pragma": "^1.3.0"
+  },
+
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^7.3.0"
+  }
+}