haori 0.2.0 → 0.4.0

package/dist/src/procedure.js

@@ -31,6 +31,58 @@ function resolveProcedureHaoriApi() {
     const hasRequiredMethods = PROCEDURE_HAORI_METHOD_NAMES.every(methodName => typeof candidate?.[methodName] === 'function');
     return hasRequiredMethods ? candidate : Haori;
 }
+const QUERY_TRANSPORT_METHODS = new Set(['GET', 'HEAD', 'OPTIONS']);
+/**
+ * URL クエリ化の対象メソッドかどうかを判定します。
+ *
+ * @param method 判定対象の HTTP メソッド。
+ * @return クエリ送信対象なら true。
+ */
+function isQueryTransportMethod(method) {
+    return QUERY_TRANSPORT_METHODS.has(method.toUpperCase());
+}
+/**
+ * 送信データを URLSearchParams に追加します。
+ *
+ * @param params 追加先の URLSearchParams。
+ * @param payload 追加対象の送信データ。
+ * @return 戻り値はありません。
+ */
+function appendPayloadToSearchParams(params, payload) {
+    for (const [key, value] of Object.entries(payload)) {
+        if (value === undefined) {
+            continue;
+        }
+        if (value === null) {
+            params.append(key, '');
+        }
+        else if (Array.isArray(value)) {
+            value.forEach(item => {
+                params.append(key, String(item));
+            });
+        }
+        else if (typeof value === 'object' || typeof value === 'function') {
+            params.append(key, JSON.stringify(value));
+        }
+        else {
+            params.append(key, String(value));
+        }
+    }
+}
+/**
+ * 送信データをクエリ文字列へ付加した URL を返します。
+ *
+ * @param fetchUrl 元のフェッチ URL。
+ * @param payload 追加対象の送信データ。
+ * @return クエリ文字列を付加した URL。
+ */
+function appendPayloadToUrl(fetchUrl, payload) {
+    const url = new URL(fetchUrl, window.location.href);
+    const params = new URLSearchParams(url.search);
+    appendPayloadToSearchParams(params, payload);
+    url.search = params.toString();
+    return url.toString();
+}
 /**
  * 手続き的処理管理クラスです。
  */
@@ -401,6 +453,16 @@ ${body}
             const paramsString = fragment.getRawAttribute(bindParamsAttr);
             options.bindParams = paramsString.split('&').map(p => p.trim());
         }
+        const bindAppendAttr = event
+            ? Procedure.attrName(event, 'bind-append')
+            : Procedure.attrName(null, 'bind-append', true);
+        if (fragment.hasAttribute(bindAppendAttr)) {
+            const paramsString = fragment.getRawAttribute(bindAppendAttr);
+            options.bindAppendParams = paramsString
+                .split('&')
+                .map(p => p.trim())
+                .filter(Boolean);
+        }
         if (event) {
             if (fragment.hasAttribute(Procedure.attrName(event, 'adjust'))) {
                 const adjustSelector = fragment.getRawAttribute(Procedure.attrName(event, 'adjust'));
@@ -600,180 +662,194 @@ ${body}
      * @returns 実行結果のPromise
      */
     run() {
+        return this.runWithResult().then(() => undefined);
+    }
+    /**
+     * 一連の処理を実行し、成功したかどうかを返します。
+     *
+     * @returns 成功した場合は true、途中停止や失敗時は false
+     */
+    runWithResult() {
+        return this.execute();
+    }
+    /**
+     * 一連の処理を実行します。成功結果を内部で扱うための実体です。
+     *
+     * @returns 実行成功時は true、停止や失敗時は false
+     */
+    async execute() {
         if (Object.keys(this.options).length === 0) {
-            return Promise.resolve();
+            return false;
         }
         if (this.options.formFragment &&
             this.validate(this.options.formFragment) === false) {
-            return Promise.resolve();
+            return false;
         }
-        return this.confirm().then(confirmed => {
-            if (!confirmed) {
-                return Promise.resolve();
-            }
-            let fetchUrl = this.options.fetchUrl;
-            let fetchOptions = this.options.fetchOptions;
-            if (this.options.beforeCallback) {
-                const result = this.options.beforeCallback(fetchUrl || null, fetchOptions || null);
-                if (result !== undefined && result !== null) {
-                    if (result === false || (typeof result === 'object' && result.stop)) {
-                        return Promise.resolve();
-                    }
-                    if (typeof result === 'object') {
-                        fetchUrl = ('fetchUrl' in result ? result.fetchUrl : fetchUrl);
-                        fetchOptions = ('fetchOptions' in result ? result.fetchOptions : fetchOptions);
-                    }
+        const confirmed = await this.confirm();
+        if (!confirmed) {
+            return false;
+        }
+        let fetchUrl = this.options.fetchUrl;
+        let fetchOptions = this.options.fetchOptions;
+        if (this.options.beforeCallback) {
+            const result = this.options.beforeCallback(fetchUrl || null, fetchOptions || null);
+            if (result !== undefined && result !== null) {
+                if (result === false || (typeof result === 'object' && result.stop)) {
+                    return false;
+                }
+                if (typeof result === 'object') {
+                    fetchUrl = ('fetchUrl' in result ? result.fetchUrl : fetchUrl);
+                    fetchOptions = ('fetchOptions' in result ? result.fetchOptions : fetchOptions);
                 }
             }
-            // フォーム値と data を統合してペイロードを作成
-            const payload = {};
-            if (this.options.formFragment) {
-                const formValues = Form.getValues(this.options.formFragment);
-                Object.assign(payload, formValues);
-            }
-            if (this.options.data && typeof this.options.data === 'object') {
-                Object.assign(payload, this.options.data);
+        }
+        // フォーム値と data を統合してペイロードを作成
+        const payload = {};
+        if (this.options.formFragment) {
+            const formValues = Form.getValues(this.options.formFragment);
+            Object.assign(payload, formValues);
+        }
+        if (this.options.data && typeof this.options.data === 'object') {
+            Object.assign(payload, this.options.data);
+        }
+        const hasPayload = Object.keys(payload).length > 0;
+        if (fetchUrl) {
+            const finalOptions = { ...(fetchOptions || {}) };
+            const headers = new Headers(finalOptions.headers || undefined);
+            const requestedMethod = (finalOptions.method || 'GET').toUpperCase();
+            const isDemoQueryNormalization = Env.runtime === 'demo' && !isQueryTransportMethod(requestedMethod);
+            const method = isDemoQueryNormalization ? 'GET' : requestedMethod;
+            finalOptions.method = method;
+            if (method === 'GET' || method === 'HEAD' || method === 'OPTIONS') {
+                if (hasPayload) {
+                    fetchUrl = appendPayloadToUrl(fetchUrl, payload);
+                }
             }
-            const hasPayload = Object.keys(payload).length > 0;
-            if (fetchUrl) {
-                const finalOptions = { ...(fetchOptions || {}) };
-                const headers = new Headers(finalOptions.headers || undefined);
-                const method = (finalOptions.method || 'GET').toUpperCase();
-                if (method === 'GET' || method === 'HEAD' || method === 'OPTIONS') {
-                    if (hasPayload) {
-                        const url = new URL(fetchUrl, window.location.href);
-                        const params = new URLSearchParams(url.search);
-                        for (const [k, v] of Object.entries(payload)) {
-                            if (v === undefined) {
-                                continue;
-                            }
-                            if (v === null) {
-                                params.append(k, '');
-                            }
-                            else if (Array.isArray(v)) {
-                                v.forEach(item => {
-                                    params.append(k, String(item));
-                                });
-                            }
-                            else if (typeof v === 'object' || typeof v === 'function') {
-                                params.append(k, JSON.stringify(v));
-                            }
-                            else {
-                                params.append(k, String(v));
-                            }
+            else if (hasPayload) {
+                const contentType = headers.get('Content-Type') || '';
+                if (/multipart\/form-data/i.test(contentType)) {
+                    headers.delete('Content-Type');
+                    const formData = new FormData();
+                    for (const [k, v] of Object.entries(payload)) {
+                        if (v === undefined || v === null) {
+                            formData.append(k, '');
                         }
-                        url.search = params.toString();
-                        fetchUrl = url.toString();
-                    }
-                }
-                else if (hasPayload) {
-                    const contentType = headers.get('Content-Type') || '';
-                    if (/multipart\/form-data/i.test(contentType)) {
-                        headers.delete('Content-Type');
-                        const formData = new FormData();
-                        for (const [k, v] of Object.entries(payload)) {
-                            if (v === undefined || v === null) {
-                                formData.append(k, '');
-                            }
-                            else if (v instanceof Blob) {
-                                formData.append(k, v);
-                            }
-                            else if (Array.isArray(v)) {
-                                v.forEach(item => formData.append(k, String(item)));
-                            }
-                            else if (typeof v === 'object') {
-                                formData.append(k, JSON.stringify(v));
-                            }
-                            else {
-                                formData.append(k, String(v));
-                            }
+                        else if (v instanceof Blob) {
+                            formData.append(k, v);
                         }
-                        finalOptions.body = formData;
-                    }
-                    else if (/application\/x-www-form-urlencoded/i.test(contentType)) {
-                        const params = new URLSearchParams();
-                        for (const [k, v] of Object.entries(payload)) {
-                            if (v === undefined) {
-                                continue;
-                            }
-                            if (v === null) {
-                                params.append(k, '');
-                            }
-                            else if (Array.isArray(v)) {
-                                v.forEach(item => params.append(k, String(item)));
-                            }
-                            else if (typeof v === 'object') {
-                                params.append(k, JSON.stringify(v));
-                            }
-                            else {
-                                params.append(k, String(v));
-                            }
+                        else if (Array.isArray(v)) {
+                            v.forEach(item => formData.append(k, String(item)));
+                        }
+                        else if (typeof v === 'object') {
+                            formData.append(k, JSON.stringify(v));
+                        }
+                        else {
+                            formData.append(k, String(v));
                         }
-                        finalOptions.body = params;
-                    }
-                    else {
-                        headers.set('Content-Type', 'application/json');
-                        finalOptions.body = JSON.stringify(payload);
                     }
+                    finalOptions.body = formData;
                 }
-                finalOptions.headers = headers;
-                // fetchstartイベントを発火
-                if (this.options.targetFragment && fetchUrl) {
-                    const startedAt = performance.now();
-                    HaoriEvent.fetchStart(this.options.targetFragment.getTarget(), fetchUrl, finalOptions, hasPayload ? payload : undefined);
-                    return fetch(fetchUrl, finalOptions)
-                        .then(response => {
-                        return this.handleFetchResult(response, fetchUrl || undefined, startedAt);
-                    })
-                        .catch(error => {
-                        if (fetchUrl) {
-                            HaoriEvent.fetchError(this.options.targetFragment.getTarget(), fetchUrl, error);
+                else if (/application\/x-www-form-urlencoded/i.test(contentType)) {
+                    const params = new URLSearchParams();
+                    for (const [k, v] of Object.entries(payload)) {
+                        if (v === undefined) {
+                            continue;
                         }
-                        throw error;
-                    });
-                }
-                else if (fetchUrl) {
-                    return fetch(fetchUrl, finalOptions).then(response => {
-                        return this.handleFetchResult(response, fetchUrl || undefined);
-                    });
+                        if (v === null) {
+                            params.append(k, '');
+                        }
+                        else if (Array.isArray(v)) {
+                            v.forEach(item => params.append(k, String(item)));
+                        }
+                        else if (typeof v === 'object') {
+                            params.append(k, JSON.stringify(v));
+                        }
+                        else {
+                            params.append(k, String(v));
+                        }
+                    }
+                    finalOptions.body = params;
                 }
                 else {
-                    return Promise.resolve();
+                    headers.set('Content-Type', 'application/json');
+                    finalOptions.body = JSON.stringify(payload);
                 }
             }
-            else {
-                // fetchUrlが無い場合(changeイベント等)、bindFragmentsが無ければformFragmentにバインド
-                if ((!this.options.bindFragments ||
-                    this.options.bindFragments.length === 0) &&
-                    this.options.formFragment &&
-                    hasPayload) {
-                    // 双方向バインディング: フォーム値を自動的にバインディングデータに反映
-                    const formFragment = this.options.formFragment;
-                    const formElement = formFragment.getTarget();
-                    formElement.setAttribute(`${Env.prefix}bind`, JSON.stringify(payload));
-                    const bindingData = formFragment.getBindingData();
-                    Object.assign(bindingData, payload);
-                    return Core.setBindingData(formElement, bindingData);
-                }
-                const merged = hasPayload ? payload : {};
-                const response = new Response(JSON.stringify(merged), {
-                    headers: { 'Content-Type': 'application/json' },
+            finalOptions.headers = headers;
+            let queryString;
+            if (isDemoQueryNormalization) {
+                queryString = fetchUrl
+                    ? new URL(fetchUrl, window.location.href).search || undefined
+                    : undefined;
+                headers.delete('Content-Type');
+                Log.info('Haori demo fetch normalization', {
+                    runtime: Env.runtime,
+                    requestedMethod,
+                    effectiveMethod: method,
+                    transportMode: 'query-get',
+                    url: fetchUrl,
+                    payload: hasPayload ? payload : undefined,
+                    queryString,
+                });
+            }
+            // fetchstartイベントを発火
+            if (this.options.targetFragment && fetchUrl) {
+                const startedAt = performance.now();
+                const fetchStartMetadata = {
+                    runtime: Env.runtime,
+                    requestedMethod,
+                    effectiveMethod: method,
+                    transportMode: isDemoQueryNormalization ? 'query-get' : 'http',
+                    ...(isDemoQueryNormalization ? { queryString } : {}),
+                };
+                HaoriEvent.fetchStart(this.options.targetFragment.getTarget(), fetchUrl, finalOptions, hasPayload ? payload : undefined, fetchStartMetadata);
+                return fetch(fetchUrl, finalOptions)
+                    .then(response => {
+                    return this.handleFetchResult(response, fetchUrl || undefined, startedAt);
+                })
+                    .catch(error => {
+                    if (fetchUrl) {
+                        HaoriEvent.fetchError(this.options.targetFragment.getTarget(), fetchUrl, error);
+                    }
+                    throw error;
                 });
-                return this.handleFetchResult(response);
             }
+            return fetch(fetchUrl, finalOptions).then(response => {
+                return this.handleFetchResult(response, fetchUrl || undefined);
+            });
+        }
+        // fetchUrlが無い場合(changeイベント等)、bindFragmentsが無ければformFragmentにバインド
+        if ((!this.options.bindFragments ||
+            this.options.bindFragments.length === 0) &&
+            this.options.formFragment &&
+            hasPayload) {
+            // 双方向バインディング: フォーム値を自動的にバインディングデータに反映
+            const formFragment = this.options.formFragment;
+            const formElement = formFragment.getTarget();
+            formElement.setAttribute(`${Env.prefix}bind`, JSON.stringify(payload));
+            const bindingData = formFragment.getBindingData();
+            Object.assign(bindingData, payload);
+            await Core.setBindingData(formElement, bindingData);
+            return true;
+        }
+        const merged = hasPayload ? payload : {};
+        const response = new Response(JSON.stringify(merged), {
+            headers: { 'Content-Type': 'application/json' },
         });
+        return this.handleFetchResult(response);
     }
     /**
      * フェッチ後の処理を実行します。
      */
-    handleFetchResult(response, url, startedAt) {
+    async handleFetchResult(response, url, startedAt) {
         const activeHaori = resolveProcedureHaoriApi();
         // エラー応答時は以後の処理を停止し、メッセージを伝播
         if (!response.ok) {
             if (this.options.targetFragment && url) {
                 HaoriEvent.fetchError(this.options.targetFragment.getTarget(), url, new Error(`${response.status} ${response.statusText}`), response.status, startedAt);
             }
-            return this.handleFetchError(response);
+            await this.handleFetchError(response);
+            return false;
         }
         // fetchendイベントを発火
         if (this.options.targetFragment && url && startedAt) {
@@ -783,7 +859,7 @@ ${body}
             const result = this.options.afterCallback(response);
             if (result !== undefined && result !== null) {
                 if (result === false || (typeof result === 'object' && result.stop)) {
-                    return Promise.resolve();
+                    return false;
                 }
                 if (typeof result === 'object' && 'response' in result) {
                     response = ('response' in result ? result.response : response);
@@ -842,30 +918,19 @@ ${body}
             });
         }
         // 仕様順序: 先に各種操作（bind/adjust/row/reset/refetch/click/open/close）を完了
-        return Promise.all(promises)
-            .then(() => {
-            // その後にダイアログ/トーストを表示
-            if (this.options.dialogMessage) {
-                return activeHaori.dialog(this.options.dialogMessage);
-            }
-            return Promise.resolve();
-        })
-            .then(() => {
-            if (this.options.toastMessage) {
-                return activeHaori.toast(this.options.toastMessage, 'info');
-            }
-            return Promise.resolve();
-        })
-            .then(() => {
-            this.pushHistory();
-            return Promise.resolve();
-        })
-            .then(() => {
-            if (this.options.redirectUrl) {
-                window.location.href = this.options.redirectUrl;
-            }
-            return Promise.resolve();
-        });
+        await Promise.all(promises);
+        // その後にダイアログ/トーストを表示
+        if (this.options.dialogMessage) {
+            await activeHaori.dialog(this.options.dialogMessage);
+        }
+        if (this.options.toastMessage) {
+            await activeHaori.toast(this.options.toastMessage, 'info');
+        }
+        this.pushHistory();
+        if (this.options.redirectUrl) {
+            window.location.href = this.options.redirectUrl;
+        }
+        return true;
     }
     /**
      * history.pushState を実行します。
@@ -989,7 +1054,7 @@ ${body}
                 if (entries.length === 0) {
                     // 汎用メッセージ
                     await addGeneralMessage(`${response.status} ${response.statusText}`);
-                    return;
+                    return false;
                 }
                 // メッセージを反映
                 for (const e of entries) {
@@ -1000,7 +1065,7 @@ ${body}
                         await addGeneralMessage(e.message);
                     }
                 }
-                return;
+                return false;
             }
             catch {
                 // JSON 解析失敗時はテキストにフォールバック
@@ -1019,6 +1084,7 @@ ${body}
         catch {
             await addGeneralMessage(`${response.status} ${response.statusText}`);
         }
+        return false;
     }
     /**
      * 対象のフラグメント以下の入力要素に対してバリデーションを実行します。
@@ -1106,7 +1172,21 @@ ${body}
             if (this.options.bindArg) {
                 this.options.bindFragments.forEach(fragment => {
                     const bindingData = fragment.getBindingData();
-                    bindingData[this.options.bindArg] = data;
+                    const bindArg = this.options.bindArg;
+                    if (data &&
+                        typeof data === 'object' &&
+                        !Array.isArray(data)) {
+                        const currentValue = bindingData[bindArg];
+                        const currentObject = currentValue &&
+                            typeof currentValue === 'object' &&
+                            !Array.isArray(currentValue)
+                            ? currentValue
+                            : {};
+                        bindingData[bindArg] = this.mergeAppendBindingData(fragment, data, currentObject);
+                    }
+                    else {
+                        bindingData[bindArg] = data;
+                    }
                     promises.push(Core.setBindingData(fragment.getTarget(), bindingData));
                 });
             }
@@ -1116,12 +1196,32 @@ ${body}
             }
             else {
                 this.options.bindFragments.forEach(fragment => {
-                    promises.push(Core.setBindingData(fragment.getTarget(), data));
+                    const resolvedData = this.mergeAppendBindingData(fragment, data);
+                    promises.push(Core.setBindingData(fragment.getTarget(), resolvedData));
                 });
             }
             return Promise.all(promises).then(() => undefined);
         });
     }
+    /**
+     * bind-append 指定があるキーについて、既存配列と結合したデータを返します。
+     */
+    mergeAppendBindingData(fragment, data, currentData = fragment.getBindingData()) {
+        if (!this.options.bindAppendParams ||
+            this.options.bindAppendParams.length === 0) {
+            return data;
+        }
+        const merged = { ...data };
+        const current = currentData;
+        for (const key of this.options.bindAppendParams) {
+            const incoming = merged[key];
+            const existing = current[key];
+            if (Array.isArray(existing) && Array.isArray(incoming)) {
+                merged[key] = existing.concat(incoming);
+            }
+        }
+        return merged;
+    }
     /**
      * 値の増減を行います。
      */