hyperapp-is 0.1.6 → 0.1.7

package/README.md

@@ -127,6 +127,7 @@ JSX を使用する場合は `hyperapp-jsx-pragma` を前提としています
 npm で非公開の関数 (実験用)は、解説に記載します
 
 **core / state.ts**
+- [Keys](#keys)
 - [getValue](#getvalue)
 - [setValue](#setvalue)
 - [getLocalState](#getlocalstate)
@@ -134,6 +135,8 @@ npm で非公開の関数 (実験用)は、解説に記載します
 - [createLocalKey](#createlocalkey)
 
 **core / component.ts**
+- [Keys_String](#keys_string-keys_arraystring)
+- [Keys_ArrayString](#keys_string-keys_arraystring)
 - [el](#el)
 - [concatAction](#concataction)
 - [getClassList](#getclasslist)
@@ -142,6 +145,15 @@ npm で非公開の関数 (実験用)は、解説に記載します
 - [SelectButton](#selectbutton)
 - [OptionButton](#optionbutton)
 
+**core / navigator.ts**
+- [Keys_NavigatorItem](#keys_navigatoritem)
+- [NavigatorItem](#navigatoritem)
+- [JsonEntry](#jsonentry)
+- [NavigatorColumn](#navigatorcolumn)
+- [convertJsonToNavigatorItem](#convertjsontonavigatoritem)
+- [getParentItems](#getparentitems)
+- [NavigatorFinder](#navigatorfinder)
+
 **animation / step.ts**
 - [effect_throwMessageStart](#effect_throwmessagestart)
 - [effect_throwMessagePause](#effect_throwmessagepause--effect_throwmessageresume)
@@ -198,11 +210,17 @@ src
 	 │
 	 ├ core
 	 │  ├ state.ts
+	 │  │   Keys
 	 │  │   getValue, setValue, getLocalState, setLocalState, createLocalKey
 	 │  │
-	 │  └ component.ts
-	 │       el, concatAction, getClassList, deleteKeys
-	 │       Route, SelectButton, OptionButton
+	 │  ├ component.ts
+	 │  │   Keys_String, Keys_ArrayString
+	 │  │   el, concatAction, getClassList, deleteKeys
+	 │  │   Route, SelectButton, OptionButton
+	 │  │
+	 │  └ navigator.ts
+	 │       Keys_NavigatorItem, NavigatorItem, JsonEntry, NavigatorColumn
+	 │       convertJsonToNavigatorItem, getParentItems, NavigatorFinder
 	 │
 	 ├ animation
 	 │  ├ step.ts
@@ -249,6 +267,15 @@ src
 
 ## hyperapp-is/core
 
+### Keys
+ステートの任意の値までのパスを表す、文字配列の型エイリアス
+
+```ts
+export type Keys = readonly string[]
+```
+
+---
+
 ### getValue
 パスを辿ってステートから値を取得  
 安全にアクセス可能
@@ -327,6 +354,11 @@ export const createLocalKey = (id: string): string => `local_key_${ id }`
 
 ---
 
+### Keys_String, Keys_ArrayString
+ステートの任意の値までのパスを表す、文字配列の型エイリアス
+
+---
+
 ### el
 Hyperapp の h 関数ラッパー。JSX と競合する場合に使用  
 children の処理も同時に行っているため、本ライブラリでは VNode を作成する際に使用しています
@@ -465,6 +497,142 @@ export const OptionButton = function <S> (
 - props.reverse?: 反転選択するか
 - children      : 子要素 (VNode / string / 配列など)
 
+---
+
+### Keys_NavigatorItem
+ステートの任意の値までのパスを表す、文字配列の型エイリアス
+
+---
+
+### NavigatorItem
+ツリー構造となるナビゲーションオブジェクト
+
+```ts
+export interface NavigatorItem {
+	parent     : NavigatorItem | null
+	name       : string
+	properties?: Record<string, any>
+	children  ?: NavigatorItem[]
+	path       : string
+	extension ?: Record<string, any>
+}
+```
+
+- parent    : 親アイテム
+- name      : 名前
+- properties: プロパティ
+- children  : 子アイテム
+- path      : パス
+- extension : 拡張オブジェクト
+
+---
+
+### JsonEntry
+getEntriesの返す値
+
+```ts
+export interface JsonEntry <D> {
+	name      : string
+	data      : D
+	isProperty: boolean
+	isNode    : boolean
+}
+```
+
+- name      : 名前
+- data      : データ
+- isProperty: プロパティか
+- isNode    : ディレクトリか
+
+---
+
+### NavigatorColumn
+NavigatorFinder に渡すヘッダーと値
+
+```ts
+export interface NavigatorColumn {
+	name: string
+	val : (item: NavigatorItem) => any
+}
+```
+
+- name: 名前
+- val : 値を返す関数
+
+---
+
+### convertJsonToNavigatorItem
+Json から NavigatorItem に変換  
+getEntries の採用により、JSON の形を問わない
+
+```ts
+export const convertJsonToNavigatorItem = function <D> (
+	props: {
+		parent     : NavigatorItem | null
+		name       : string
+		data       : D
+		getEntries : (data: D, depth: number) => JsonEntry<D>[]
+		isNode     : boolean
+		depth     ?: number
+		extension ?: (item: NavigatorItem, data: D, depth: number) => Record<string, any> | undefined
+	}
+): NavigatorItem
+```
+
+- parent    : 親アイテム
+- name      : 名前
+- data      : データ
+- getEntries: JsonEntry配列を返す関数
+- isNode    : ディレクトリか
+- depth     : 階層の深さ
+- extension : 拡張オブジェクトを作成する関数
+
+---
+
+### getParentItems
+NavigatorItem から 親アイテムのリストを取得する  
+自分自信はリストに含まない
+
+```ts
+export const getParentItems = (
+	item: NavigatorItem | undefined
+): NavigatorItem[]
+```
+
+---
+
+### NavigatorFinder
+ナビゲーターファインダーコンポーネント
+
+```ts
+export const NavigatorFinder = function <S> (
+	props: {
+		state         : S
+		currentKeys   : Keys_NavigatorItem
+		columns      ?: NavigatorColumn[]
+		maxItemsCount?: number
+		itemClick    ?: (state: S, item: NavigatorItem) => S | [S, Effect<S>]
+		afterRender  ?: (props: {
+			state     : S
+			current  ?: NavigatorItem
+			extension?: Record<string, any>
+		}, vnode: VNode<S>) => VNode<S>
+		extension   ?: Record<string, any>
+		[key: string]: any
+	}
+): VNode<S>
+```
+
+- state        : ステート
+- currentKeys  : カレント NavigatorItem までのパス
+- columns      : NavigatorColumn の配列
+- maxItemsCount: 最大表示するアイテム数
+- itemClick    : アイテムをクリックした時のアクション
+- afterRender  : レンダーフック
+- extension    : レンダーフックに渡す拡張情報
+
+---
+
 ## hyperapp-is/animation
 
 ### effect_throwMessageStart
@@ -599,7 +767,7 @@ export class RAFTask <S> {
 		action    : RAFEvent<S>
 		finish   ?: RAFEvent<S>
 		priority ?: number
-		extension?: { [key: string]: any }
+		extension?: Record<string, any>
 	})
 
 	// getter
@@ -614,7 +782,7 @@ export class RAFTask <S> {
 	// getter / setter
 	groupID  : string | undefined
 	priority : number
-	extension: { [key: string]: any }
+	extension: Record<string, any>
 	isDone   : boolean
 	paused   : boolean
 
@@ -729,7 +897,7 @@ export const createRAFProperties = function <S> (
 		finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>]
 
 		priority ?: number
-		extension?: { [key: string]: any }
+		extension?: Record<string, any>
 
 		properties: CSSProperty[]
 	}
@@ -756,7 +924,7 @@ export const effect_RAFProperties = function <S>(
 		finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>]
 
 		priority ?: number
-		extension?: { [key: string]: any }
+		extension?: Record<string, any>
 
 		properties: CSSProperty[]
 		keyNames  : string[]
@@ -808,7 +976,7 @@ export const createRAFTranslate = function <S> (
 		finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>]
 
 		priority ?: number
-		extension?: { [key: string]: any }
+		extension?: Record<string, any>
 
 		translateState: TranslateState
 	}
@@ -836,7 +1004,7 @@ export const effect_translateStart = function <S> (
 		finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>]
 
 		priority ?: number
-		extension?: { [key: string]: any }
+		extension?: Record<string, any>
 
 		easing ?: (t: number) => number
 
@@ -1023,7 +1191,7 @@ export interface CarouselState <S> {
 	duration ?: number
 	delay    ?: number
 	priority ?: number
-	extension?: { [key: string]: any }
+	extension?: Record<string, any>
 
 	// event
 	action?: RAFEvent<S>

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

@@ -1,4 +1,4 @@
-// hyperapp-ui / animation / easing.ts
+// hyperapp-is / animation / easing.ts
 // ---------- ---------- ---------- ---------- ----------
 // progress_easing
 // ---------- ---------- ---------- ---------- ----------

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

@@ -1,3 +1,4 @@
+// hyperapp-is / animation / index.ts
 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

@@ -37,9 +37,7 @@ export declare const createRAFProperties: <S>(props: {
     delay?: number;
     finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>];
     priority?: number;
-    extension?: {
-        [key: string]: any;
-    };
+    extension?: Record<string, any>;
     properties: CSSProperty[];
 }) => RAFTask<S>;
 /**
@@ -56,9 +54,7 @@ export declare const effect_RAFProperties: <S>(props: {
     delay?: number;
     finish?: (state: S, rafTask: RAFTask<S>) => S | [S, InternalEffect<S>];
     priority?: number;
-    extension?: {
-        [key: string]: any;
-    };
+    extension?: Record<string, any>;
     properties: CSSProperty[];
     keyNames: string[];
 }) => (dispatch: Dispatch<S>) => void;

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

@@ -1,4 +1,4 @@
-// hyperapp-ui / animation / properties.ts
+// hyperapp-is / animation / properties.ts
 import { getValue, setValue } from "../core/state";
 import { RAFTask } from "./raf";
 // ---------- ---------- ---------- ---------- ----------

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

@@ -1,4 +1,5 @@
 import { Effect, Subscription } from "hyperapp";
+import { Keys_ArrayRAFTask } from "../core/state";
 /**
  * 戻値としては返されないことを示したエフェクト
  * Effect の型エイリアス
@@ -20,9 +21,7 @@ export declare class RAFTask<S> {
         action: RAFEvent<S>;
         finish?: RAFEvent<S>;
         priority?: number;
-        extension?: {
-            [key: string]: any;
-        };
+        extension?: Record<string, any>;
     });
     get id(): string;
     get groupID(): string | undefined;
@@ -31,18 +30,14 @@ export declare class RAFTask<S> {
     get action(): RAFEvent<S>;
     get finish(): RAFEvent<S> | undefined;
     get priority(): number;
-    get extension(): {
-        [key: string]: any;
-    };
+    get extension(): Record<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 extension(val: Record<string, any>);
     set isDone(val: boolean);
     set paused(val: boolean);
     /**
@@ -63,9 +58,9 @@ export declare class RAFTask<S> {
  * RAFTask 配列をフレームごとに実行するサブスクリプション
  *
  * @template S
- * @param   {S}        state    - ステート
- * @param   {string[]} keyNames - RAFTask 配列までのパス
+ * @param   {S}                 state    - ステート
+ * @param   {Keys_ArrayRAFTask} keyNames - RAFTask 配列までのパス
  * @returns {Subscription<S>}
  */
-export declare const subscription_RAFManager: <S>(state: S, keyNames: string[]) => Subscription<S>;
+export declare const subscription_RAFManager: <S>(state: S, keyNames: Keys_ArrayRAFTask) => Subscription<S>;
 export {};

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

@@ -1,4 +1,4 @@
-// hyperapp-ui / animation / raf.ts
+// hyperapp-is / 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");
@@ -143,8 +143,8 @@ export class RAFTask {
  * RAFTask 配列をフレームごとに実行するサブスクリプション
  *
  * @template S
- * @param   {S}        state    - ステート
- * @param   {string[]} keyNames - RAFTask 配列までのパス
+ * @param   {S}                 state    - ステート
+ * @param   {Keys_ArrayRAFTask} keyNames - RAFTask 配列までのパス
  * @returns {Subscription<S>}
  */
 export const subscription_RAFManager = function (state, keyNames) {

package/dist/hyperapp-is/animationView/carousel.d.ts

@@ -1,4 +1,5 @@
 import { VNode, Dispatch } from "hyperapp";
+import { Keys_Number, Keys_ArrayRAFTask } from "../core/state";
 import { RAFEvent, RAFTask } from "../animation/raf";
 /**
  * Carousel コンポーネント情報
@@ -19,7 +20,7 @@ import { RAFEvent, RAFTask } from "../animation/raf";
  * @property {number} [duration] - 1回あたりの実行時間 (ms)
  * @property {number} [delay]    - 待機時間 (ms)
  * @property {number} [priority] - 処理優先巡視 (未実装)
- * @property {{ [key: string]: any}} [extension] - 拡張用プロパティ
+ * @property {Record<string, any>} [extension] - 拡張用プロパティ
  *
  * event
  * @property {RAFEvent<S>} [action] - 毎フレーム発生するイベント
@@ -29,7 +30,7 @@ import { RAFEvent, RAFTask } from "../animation/raf";
  * @property {(t: number) => number} easing - easing 関数
  *
  * report
- * @property {string[]} [reportPageIndex] - 現在表示中インデックスの出力パス
+ * @property {Keys_Number} [reportPageIndex] - 現在表示中インデックスの出力パス
  */
 export interface CarouselState<S> {
     id: string;
@@ -38,13 +39,11 @@ export interface CarouselState<S> {
     duration?: number;
     delay?: number;
     priority?: number;
-    extension?: {
-        [key: string]: any;
-    };
+    extension?: Record<string, any>;
     action?: RAFEvent<S>;
     finish?: RAFEvent<S>;
     easing?: (t: number) => number;
-    reportPageIndex?: string[];
+    reportPageIndex?: Keys_Number;
 }
 /**
  * 外部から Carousel コンポーネントを操作するためのクラス
@@ -67,19 +66,19 @@ export interface CarouselController<S> {
  * Carousel Component
  *
  * @template S
- * @param {Object}   props                - props
- * @param {S}        props.state          - ステート
- * @param {string}   props.id             - ユニークID (DOM id)
- * @param {string[]} props.keyNames       - RAFTask 配列までのパス
- * @param {boolean} [props.controlButton] - ページ切り替えボタンを表示する (未実装)
- * @param {boolean} [props.controlBar]    - 現在位置を示すステータスバーを表示する
- * @param {number}  [skipSpeedRate]       - skip 時に duration に乗じる値
- * @param {any}      children             - 表示するページ (HTMLLIElement の子になる)
+ * @param {Object}            props                - props
+ * @param {S}                 props.state          - ステート
+ * @param {string}            props.id             - ユニークID (DOM id)
+ * @param {Keys_ArrayRAFTask} props.keyNames       - RAFTask 配列までのパス
+ * @param {boolean}          [props.controlButton] - ページ切り替えボタンを表示する (未実装)
+ * @param {boolean}          [props.controlBar]    - 現在位置を示すステータスバーを表示する
+ * @param {number}           [skipSpeedRate]       - skip 時に duration に乗じる値
+ * @param {any}               children             - 表示するページ (HTMLLIElement の子になる)
  */
 export declare const Carousel: <S>(props: {
     state: S;
     id: string;
-    keyNames: string[];
+    keyNames: Keys_ArrayRAFTask;
     controlButton?: boolean;
     controlBar?: boolean;
     skipSpeedRate?: number;
@@ -88,8 +87,8 @@ export declare const Carousel: <S>(props: {
 /**
  * カルーセルを初期化し起動するエフェクト
  *
- * @param {string[]}      keyNames      - RAFTask 配列までのパス
- * @param {CarouselState} carouselState - カルーセル情報
+ * @param {Keys_ArrayRAFTask} keyNames      - RAFTask 配列までのパス
+ * @param {CarouselState}     carouselState - カルーセル情報
  * @returns {(dispatch: Dispatch<S>) => void}
  */
-export declare const effect_InitCarousel: <S>(keyNames: string[], carouselState: CarouselState<S>) => (dispatch: Dispatch<S>) => void;
+export declare const effect_InitCarousel: <S>(keyNames: Keys_ArrayRAFTask, carouselState: CarouselState<S>) => (dispatch: Dispatch<S>) => void;

package/dist/hyperapp-is/animationView/carousel.js

@@ -1,6 +1,4 @@
-// ---------- ---------- ---------- ---------- ----------
-// import
-// ---------- ---------- ---------- ---------- ----------
+// hyperapp-is / animationView / carousel.ts
 import { getValue, setValue, createLocalKey } from "../core/state";
 import { el, deleteKeys } from "../core/component";
 import { RAFTask } from "../animation/raf";
@@ -16,14 +14,14 @@ const button = el("button");
  * Carousel Component
  *
  * @template S
- * @param {Object}   props                - props
- * @param {S}        props.state          - ステート
- * @param {string}   props.id             - ユニークID (DOM id)
- * @param {string[]} props.keyNames       - RAFTask 配列までのパス
- * @param {boolean} [props.controlButton] - ページ切り替えボタンを表示する (未実装)
- * @param {boolean} [props.controlBar]    - 現在位置を示すステータスバーを表示する
- * @param {number}  [skipSpeedRate]       - skip 時に duration に乗じる値
- * @param {any}      children             - 表示するページ (HTMLLIElement の子になる)
+ * @param {Object}            props                - props
+ * @param {S}                 props.state          - ステート
+ * @param {string}            props.id             - ユニークID (DOM id)
+ * @param {Keys_ArrayRAFTask} props.keyNames       - RAFTask 配列までのパス
+ * @param {boolean}          [props.controlButton] - ページ切り替えボタンを表示する (未実装)
+ * @param {boolean}          [props.controlBar]    - 現在位置を示すステータスバーを表示する
+ * @param {number}           [skipSpeedRate]       - skip 時に duration に乗じる値
+ * @param {any}               children             - 表示するページ (HTMLLIElement の子になる)
  */
 export const Carousel = function (props, children) {
     var _a;
@@ -111,7 +109,7 @@ export const Carousel = function (props, children) {
         onmouseleave: action_mouseleave
     }, items.map(item => li({}, item))), 
     // controlButton, controlBar
-    (controlButton || controlBar) && div({}, controlButton
+    (controlButton || controlBar) ? div({}, controlButton
         ? button({ onclick: action_prevPage }, "<")
         : null, controlBar
         ? ul({}, items.map((_, i) => li({
@@ -122,15 +120,15 @@ export const Carousel = function (props, children) {
         param
             ? i === index ? "◉" : "・"
             : "・")))
-        : ul({}), controlButton
+        : null, controlButton
         ? button({ onclick: action_nextPage }, ">")
-        : null));
+        : null) : null);
 };
 /**
  * カルーセルを初期化し起動するエフェクト
  *
- * @param {string[]}      keyNames      - RAFTask 配列までのパス
- * @param {CarouselState} carouselState - カルーセル情報
+ * @param {Keys_ArrayRAFTask} keyNames      - RAFTask 配列までのパス
+ * @param {CarouselState}     carouselState - カルーセル情報
  * @returns {(dispatch: Dispatch<S>) => void}
  */
 export const effect_InitCarousel = function (keyNames, carouselState) {

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

@@ -1 +1,2 @@
+// hyperapp-is / animationView / index.ts
 export { Carousel, effect_InitCarousel } from "./carousel";

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

@@ -1,4 +1,5 @@
 import { VNode, Effect } from "hyperapp";
+import { Keys_String, Keys_ArrayString } from "./state";
 /**
  * h 関数のラッパー
  * 他でjsxを使用した場合、hが競合する可能性があるので作成した
@@ -45,14 +46,14 @@ export declare const deleteKeys: <T extends Record<string, any>>(props: T, ...ke
  * @template S
  * @param   {Record<string, any>} props          - props
  * @param   {S}                   props.state    - ステート
- * @param   {string[]}            props.keyNames - ステート内の文字までのパス
+ * @param   {Keys_String}         props.keyNames - ステート内の文字までのパス
  * @param   {string}              props.match    - 一致判定する文字
  * @param   {any}                 children       - 出力する内容 (VNode / 配列 / 文字など)
  * @returns {VNode<S> | null}
  */
 export declare const Route: <S>(props: {
     state: S;
-    keyNames: string[];
+    keyNames: Keys_String;
     match: string;
 }, children: any) => VNode<S> | null;
 /**
@@ -61,7 +62,7 @@ export declare const Route: <S>(props: {
  * @template S
  * @param   {Record<string, any>} props          - props
  * @param   {S}                   props.state    - ステート
- * @param   {string[]}            props.keyNames - ステート内の文字配列までのパス
+ * @param   {Keys_ArrayString}    props.keyNames - ステート内の文字配列までのパス
  * @param   {string}              props.id       - ユニークID
  * @param   {boolean}            [props.reverse] - 反転選択するか
  * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
@@ -69,7 +70,7 @@ export declare const Route: <S>(props: {
  */
 export declare const SelectButton: <S>(props: {
     state: S;
-    keyNames: string[];
+    keyNames: Keys_ArrayString;
     id: string;
     reverse?: boolean;
     [key: string]: any;
@@ -80,7 +81,7 @@ export declare const SelectButton: <S>(props: {
  * @template S
  * @param   {Record<string, any>} props          - props
  * @param   {S}                   props.state    - ステート
- * @param   {string[]}            props.keyNames - ステート内の文字までのパス
+ * @param   {Keys_String}         props.keyNames - ステート内の文字までのパス
  * @param   {string}              props.id       - ユニークID
  * @param   {boolean}            [props.reverse] - 反転選択するか
  * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
@@ -88,7 +89,7 @@ export declare const SelectButton: <S>(props: {
  */
 export declare const OptionButton: <S>(props: {
     state: S;
-    keyNames: string[];
+    keyNames: Keys_String;
     id: string;
     reverse?: boolean;
     [key: string]: any;

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

@@ -1,4 +1,4 @@
-// hyperapp-ui / core / component.ts
+// hyperapp-is / core / component.ts
 import { h, text } from "hyperapp";
 import { getValue, setValue } from "./state";
 // ========== ========== ========== ========== ==========
@@ -87,7 +87,7 @@ export const deleteKeys = (props, ...keys) => {
  * @template S
  * @param   {Record<string, any>} props          - props
  * @param   {S}                   props.state    - ステート
- * @param   {string[]}            props.keyNames - ステート内の文字までのパス
+ * @param   {Keys_String}         props.keyNames - ステート内の文字までのパス
  * @param   {string}              props.match    - 一致判定する文字
  * @param   {any}                 children       - 出力する内容 (VNode / 配列 / 文字など)
  * @returns {VNode<S> | null}
@@ -108,7 +108,7 @@ const REVERSE_PREFIX = "r_";
  * @template S
  * @param   {Record<string, any>} props          - props
  * @param   {S}                   props.state    - ステート
- * @param   {string[]}            props.keyNames - ステート内の文字配列までのパス
+ * @param   {Keys_ArrayString}    props.keyNames - ステート内の文字配列までのパス
  * @param   {string}              props.id       - ユニークID
  * @param   {boolean}            [props.reverse] - 反転選択するか
  * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
@@ -156,7 +156,7 @@ export const SelectButton = function (props, children) {
  * @template S
  * @param   {Record<string, any>} props          - props
  * @param   {S}                   props.state    - ステート
- * @param   {string[]}            props.keyNames - ステート内の文字までのパス
+ * @param   {Keys_String}         props.keyNames - ステート内の文字までのパス
  * @param   {string}              props.id       - ユニークID
  * @param   {boolean}            [props.reverse] - 反転選択するか
  * @param   {any}                 children       - 子要素 (VNode / string / 配列など)

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

@@ -1,2 +1,6 @@
+export type { Keys } from "./state";
 export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./state";
+export type { Keys_String, Keys_ArrayString } from "./component";
 export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./component";
+export type { Keys_NavigatorItem, NavigatorItem, JsonEntry, NavigatorColumn } from "./navigator";
+export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder } from "./navigator";

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

@@ -1,2 +1,4 @@
+// hyperapp-is / core / index.ts
 export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./state";
 export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./component";
+export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder } from "./navigator";

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

@@ -0,0 +1,74 @@
+import { VNode, Effect } from "hyperapp";
+import { Keys_NavigatorItem } from "./state";
+/**
+ * ツリー構造となるナビゲーションオブジェクト
+ *
+ * parent     - 親アイテム
+ * name       - 名前
+ * properties - プロパティオブジェクト
+ * children   - 子アイテムリスト (undefinedのときはファイル)
+ * path       - パス
+ * extension  - 拡張情報
+ */
+export interface NavigatorItem {
+    parent: NavigatorItem | null;
+    name: string;
+    properties?: Record<string, any>;
+    children?: NavigatorItem[];
+    path: string;
+    extension?: Record<string, any>;
+}
+/**
+ * getEntriesで返すオブジェクト
+ *
+ * name       - 名前
+ * data       - データ
+ * isNode     - ディレクトリか
+ */
+export interface JsonEntry<D> {
+    name: string;
+    data: D;
+    isNode: boolean;
+}
+/**
+ * ヘッダー名と値
+ */
+export interface NavigatorColumn {
+    name: string;
+    val: (item: NavigatorItem) => any;
+}
+/**
+ * Json から NavigatorItem に変換
+ * getEntries の採用により、JSON の形を問わない
+ * extension により、任意情報を保存できる
+ */
+export declare const convertJsonToNavigatorItem: <D>(props: {
+    parent: NavigatorItem | null;
+    name: string;
+    data: D;
+    getEntries: (data: D, depth: number) => JsonEntry<D>[];
+    isNode: boolean;
+    depth?: number;
+    extension?: (item: NavigatorItem, data: D, depth: number) => Record<string, any> | undefined;
+}) => NavigatorItem;
+/**
+ * NavigatorItem の親をリストで取得する
+ */
+export declare const getParentItems: (item: NavigatorItem | undefined) => NavigatorItem[];
+/**
+ * ナビゲーションファインダーコンポーネント
+ */
+export declare const NavigatorFinder: <S>(props: {
+    state: S;
+    currentKeys: Keys_NavigatorItem;
+    columns?: (directory: NavigatorItem | undefined) => NavigatorColumn[];
+    maxItemsCount?: number;
+    itemClick?: (state: S, item: NavigatorItem) => S | [S, Effect<S>];
+    afterRender?: (props: {
+        state: S;
+        current?: NavigatorItem;
+        extension?: Record<string, any>;
+    }, vnode: VNode<S>) => VNode<S>;
+    extension?: Record<string, any>;
+    [key: string]: any;
+}) => VNode<S>;

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

@@ -0,0 +1,195 @@
+// hyperapp-is / core / navigator.ts
+import { getValue, setValue } from "./state";
+import { el, deleteKeys } from "./component";
+/* element */
+const div = el("div");
+const table = el("table");
+const thead = el("thead");
+const tbody = el("tbody");
+const tr = el("tr");
+const th = el("th");
+const td = el("td");
+const ul = el("ul");
+const ol = el("ol");
+const li = el("li");
+const button = el("button");
+const input = el("input");
+const span = el("span");
+// ---------- ---------- ---------- ---------- ----------
+// convertJsonToNavigatorItem
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * Json から NavigatorItem に変換
+ * getEntries の採用により、JSON の形を問わない
+ * extension により、任意情報を保存できる
+ */
+export const convertJsonToNavigatorItem = function (props) {
+    const { parent, name, data, getEntries, isNode, depth = 0, extension } = props;
+    const result = {
+        parent,
+        name,
+        path: parent ? parent.path + "/" + name : "/" + name
+    };
+    // 拡張情報
+    if (extension) {
+        const ext = extension(result, data, depth);
+        if (ext)
+            result.extension = ext;
+    }
+    const properties = {};
+    let hasProperty = false;
+    const children = [];
+    getEntries(data, depth).forEach(entry => {
+        const isProperty = typeof entry.data !== "object" || Array.isArray(entry.data);
+        // プロパティ
+        if (isProperty) {
+            properties[entry.name] = entry.data;
+            hasProperty = true;
+            // 子アイテム
+        }
+        else {
+            children.push(convertJsonToNavigatorItem({
+                parent: result,
+                name: entry.name,
+                data: entry.data,
+                getEntries,
+                isNode: entry.isNode,
+                depth: depth + 1,
+                extension
+            }));
+        }
+    });
+    if (hasProperty)
+        result.properties = properties;
+    if (isNode)
+        result.children = children; // ファイルのときは undefined
+    return result;
+};
+// ---------- ---------- ---------- ---------- ----------
+// getParentItems
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * NavigatorItem の親をリストで取得する
+ */
+export const getParentItems = (item) => {
+    if (!item)
+        return [];
+    const result = [];
+    let cd = item.parent;
+    while (cd) {
+        result.push(cd);
+        cd = cd.parent;
+    }
+    return result.reverse();
+};
+// ---------- ---------- ---------- ---------- ----------
+// NavigatorFinder Component
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * ナビゲーションファインダーコンポーネント
+ */
+export const NavigatorFinder = function (props) {
+    var _a, _b;
+    const { state, currentKeys, maxItemsCount = 0, itemClick, afterRender, extension } = props;
+    const current = getValue(state, currentKeys, undefined);
+    // createColumns
+    const createColumns = (_a = props.columns) !== null && _a !== void 0 ? _a : ((directory) => {
+        const result = [];
+        if (!directory)
+            return result;
+        result.push({
+            name: "name",
+            val: (item) => item.name
+        });
+        // get properties
+        const children = directory.children;
+        if (children) {
+            // get names
+            const names = [];
+            // get properties
+            // 子アイテムのプロパティをすべて確認して抽出しています
+            children.forEach(child => {
+                if (!child.children)
+                    return;
+                if (child.properties) {
+                    Object.keys(child.properties).forEach(key => names.push(key));
+                }
+            });
+            // add NavigatorColumn
+            Array.from(new Set(names)).forEach(name => {
+                result.push({
+                    name,
+                    val: (item) => {
+                        var _a;
+                        const p = item.properties;
+                        return p
+                            ? (_a = p[name]) !== null && _a !== void 0 ? _a : ""
+                            : "";
+                    }
+                });
+            });
+        }
+        return result;
+    }); // end createColumns
+    const columns = createColumns(current);
+    // parentItems
+    const parentItems = getParentItems(current);
+    if (current)
+        parentItems.push(current);
+    // getItems
+    const getItems = (item) => {
+        if (!item || item.children === undefined)
+            return [];
+        const count = maxItemsCount === 0
+            ? item.children.length
+            : Math.min(maxItemsCount, item.children.length);
+        return item.children.slice(0, count);
+    }; // end getItems
+    // items
+    const items = getItems(current);
+    const count = current
+        ? (_b = current.children) === null || _b === void 0 ? void 0 : _b.length
+        : 0;
+    // action_parentClick
+    const action_parentClick = (state, item) => {
+        return setValue(state, currentKeys, item);
+    };
+    // action_itemClick
+    const action_itemClick = (state, item) => {
+        // 子アイテムがすべてプロパティのときは移動しない
+        const children = item.children;
+        if (!children)
+            return state;
+        if (!children.some(child => typeof child === "object" && !Array.isArray(child)))
+            return state;
+        return setValue(state, currentKeys, item);
+    };
+    // VNode
+    const vnode = div({
+        ...deleteKeys(props, "state", "currentKeys", "columns", "itemClick", "afterRender", "extension")
+    }, 
+    // toolBar
+    div({
+        class: "toolBar"
+    }, "toolBar (未実装)"), 
+    // parentItems
+    ol({}, parentItems.map(parent => li({
+        key: parent.path,
+        onclick: [action_parentClick, parent]
+    }, parent.name))), 
+    // items
+    table({}, thead({}, tr({}, columns.map(col => th({}, col.name)))), tbody({}, items.map(item => tr({
+        key: item.path,
+        onclick: item.children === undefined
+            ? itemClick ? [itemClick, item] : undefined
+            : [action_itemClick, item]
+    }, columns.map(col => td({
+        title: col.val(item)
+    }, col.val(item))))))), 
+    // statusBar
+    div({
+        class: "statusBar"
+    }, `items ${items.length} / ${count}`));
+    // afterRender
+    return afterRender ? afterRender({ state, current, extension }, vnode) : vnode;
+};

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

@@ -1,24 +1,35 @@
+/**
+ * ステートへのパス
+ * 参照する値の型がわかりやすいよう、複数パターンをここで集約
+ */
+export type Keys = readonly string[];
+export type Keys_String = Keys;
+export type Keys_ArrayString = Keys;
+export type Keys_Number = Keys;
+export type Keys_ArrayNumber = Keys;
+export type Keys_ArrayRAFTask = Keys;
+export type Keys_NavigatorItem = Keys;
 /**
  * パスを辿って、ステートから値を取得する
  *
  * @template S
  * @template D
- * @param   {S}        state    - ステート
- * @param   {string[]} keyNames - 値までのパス
- * @param   {D}        def      - デフォルト値
- * @returns {D}                 - 型保証は呼び出し側の責任
+ * @param   {S}    state    - ステート
+ * @param   {Keys} keyNames - 値までのパス
+ * @param   {D}    def      - デフォルト値
+ * @returns {D}             - 型保証は呼び出し側の責任
  */
-export declare const getValue: <S, D>(state: S, keyNames: string[], def: D) => D;
+export declare const getValue: <S, D>(state: S, keyNames: Keys, def: D) => D;
 /**
  * パスを辿って、ステートに値を設定して返す
  *
  * @template S
- * @param   {S}        state    - ステート
- * @param   {string[]} keyNames - 値までのパス
- * @param   {any}      value    - 設定する値
+ * @param   {S}    state    - ステート
+ * @param   {Keys} keyNames - 値までのパス
+ * @param   {any}  value    - 設定する値
  * @returns {S}
  */
-export declare const setValue: <S>(state: S, keyNames: string[], value: any) => S;
+export declare const setValue: <S>(state: S, keyNames: Keys, value: any) => S;
 /**
  * IDからユニーク文字列を作成する
  *
@@ -35,11 +46,7 @@ export declare const createLocalKey: (id: string) => string;
  * @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;
-};
+export declare const getLocalState: <S>(state: S, id: string, def: Record<string, any>) => Record<string, any>;
 /**
  * ローカルステートを更新してステートを返す
  *
@@ -49,6 +56,4 @@ export declare const getLocalState: <S>(state: S, id: string, def: {
  * @param   {Record<string, any>} value - 設定するローカルステート
  * @returns {S}
  */
-export declare const setLocalState: <S>(state: S, id: string, value: {
-    [key: string]: any;
-}) => S;
+export declare const setLocalState: <S>(state: S, id: string, value: Record<string, any>) => S;

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

@@ -1,4 +1,4 @@
-// hyperapp-ut / core / state.ts
+// hyperapp-is / core / state.ts
 // ---------- ---------- ---------- ---------- ----------
 // getValue
 // ---------- ---------- ---------- ---------- ----------
@@ -7,10 +7,10 @@
  *
  * @template S
  * @template D
- * @param   {S}        state    - ステート
- * @param   {string[]} keyNames - 値までのパス
- * @param   {D}        def      - デフォルト値
- * @returns {D}                 - 型保証は呼び出し側の責任
+ * @param   {S}    state    - ステート
+ * @param   {Keys} keyNames - 値までのパス
+ * @param   {D}    def      - デフォルト値
+ * @returns {D}             - 型保証は呼び出し側の責任
  */
 export const getValue = function (state, keyNames, def) {
     let result = state;
@@ -34,9 +34,9 @@ export const getValue = function (state, keyNames, def) {
  * パスを辿って、ステートに値を設定して返す
  *
  * @template S
- * @param   {S}        state    - ステート
- * @param   {string[]} keyNames - 値までのパス
- * @param   {any}      value    - 設定する値
+ * @param   {S}    state    - ステート
+ * @param   {Keys} keyNames - 値までのパス
+ * @param   {any}  value    - 設定する値
  * @returns {S}
  */
 export const setValue = function (state, keyNames, value) {

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

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

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

@@ -1 +1,2 @@
-export { getScrollMargin, getMatrixState, marquee } from "./utils";
+// hyperapp-is / dom / index.ts
+export { getScrollMargin, getMatrixState } from "./utils";

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

@@ -47,22 +47,3 @@ export interface MatrixState {
  * @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

@@ -1,4 +1,4 @@
-// hyperapp-ui / dom / utils.ts
+// hyperapp-is / dom / utils.ts
 // ---------- ---------- ---------- ---------- ----------
 // getScrollMargin
 // ---------- ---------- ---------- ---------- ----------
@@ -73,87 +73,3 @@ export const getMatrixState = (dom) => {
         }
     };
 };
-// ---------- ---------- ---------- ---------- ----------
-// 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

@@ -1,7 +1,14 @@
-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";
+export type { Keys, Keys_String, Keys_ArrayString, Keys_Number, Keys_ArrayNumber, Keys_ArrayRAFTask, Keys_NavigatorItem, } from "./core/state";
+export type { NavigatorItem, JsonEntry, NavigatorColumn } from "./core/navigator";
+export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./core/state";
+export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./core/component";
+export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder } from "./core/navigator";
+export type { InternalEffect, RAFEvent } from "./animation/raf";
+export type { CSSProperty } from "./animation/properties";
+export { RAFTask, subscription_RAFManager } from "./animation/raf";
+export { progress_easing } from "./animation/easing";
+export { createUnits, createRAFProperties, effect_RAFProperties } from "./animation/properties";
+export type { CarouselState, CarouselController } from "./animationView/carousel";
+export { Carousel, effect_InitCarousel } from "./animationView/carousel";
+export type { ScrollMargin, MatrixState } from "./dom/utils";
+export { getScrollMargin, getMatrixState } from "./dom/utils";

package/dist/hyperapp-is/index.js

@@ -1,5 +1,9 @@
-// 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";
+// hyperapp-is / index.ts
+export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./core/state";
+export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./core/component";
+export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder } from "./core/navigator";
+export { RAFTask, subscription_RAFManager } from "./animation/raf";
+export { progress_easing } from "./animation/easing";
+export { createUnits, createRAFProperties, effect_RAFProperties } from "./animation/properties";
+export { Carousel, effect_InitCarousel } from "./animationView/carousel";
+export { getScrollMargin, getMatrixState } from "./dom/utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperapp-is",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "UI foundation library for Hyperapp by is4416",
   "license": "MIT",
   "type": "module",
@@ -37,5 +37,8 @@
   "devDependencies": {
     "typescript": "^5.0.0",
     "vite": "^7.3.0"
+  },
+  "dependencies": {
+    "marked": "^17.0.4"
   }
 }