@plaidev/karte-action-sdk 1.1.126-27950980.e8e536b0 → 1.1.126-27952306.7e987116

package/dist/hydrate/index.es.d.ts

@@ -890,21 +890,28 @@ declare function onTime(time: number, fn: Function): () => void;
 /**
  * アクションのログの記録の管理
  */
+/** @internal */
 type LogLevel = "info" | "error" | "warn";
+/** @internal */
 type Log = {
     level: LogLevel;
     messages: any;
     date?: Date;
 };
+/** @internal */
 type Event = {
     name: string;
     values?: any;
     date?: Date;
 };
+/** @internal */
 declare function getLogs(): Log[];
+/** @internal */
 declare function getEvents(): Event[];
 /**
  * ログを送信する関数群
+ *
+ * @internal
  */
 declare const logger: {
     info: (...messages: any[]) => void;
@@ -917,6 +924,8 @@ declare const logger: {
 };
 /**
  * メッセージを実行ログに表示する
+ *
+ * @internal
  */
 declare function listenLogger(): () => void;
 /**
@@ -1116,6 +1125,13 @@ declare const loadActionTableRows: (config: ActionTableRowsRequestConfig, api_ke
 declare const loadActionTableQuery: (config: ActionTableQueryRequestConfig, api_key: string, endpoint?: string) => Promise<unknown>;
 declare const loadActionTable: (config: Array<ActionTableRequestConfig>, api_key: string, endpoint?: string) => Promise<{}>;
 type _Props$0 = Props;
+/** @internal */
+declare const ACTION_HOOK_LABEL = "__ACTION_HOOK__";
+/** @internal */
+type ActionHookLog = {
+    name: string;
+    values?: any;
+};
 /**
  * アクションのライフサイクルで呼び出されるフック
  *
@@ -2127,6 +2143,8 @@ declare namespace widget {
     /**
      * {@link setInternalHandlers} function to set internal event handlers.
      *
+     * @param handlers - New internal event handlers
+     *
      * @internal
      */
     function setInternalHandlers(handlers: {
@@ -2144,6 +2162,34 @@ declare namespace widget {
     }): {
         [key: string]: ActionEventHandler[];
     };
+    /**
+     * Store to handle internal event handlers for widget API
+     *
+     * @internal
+     */
+    const widgetHandlers: Store<{
+        [key: string]: ActionEventHandler[];
+    }>;
+    /**
+     * {@link getWidgetHandlers} function to get internal event handlers for widget API.
+     *
+     * @param handlers - New internal widget event handlers
+     *
+     * @returns Current internal widget handlers
+     *
+     * @internal
+     */
+    function getWidgetHandlers(): {
+        [key: string]: ActionEventHandler[];
+    };
+    /**
+     * {@link setWidgetHandlers} function to set internal event handlers.
+     *
+     * @internal
+     */
+    function setWidgetHandlers(handlers: {
+        [key: string]: ActionEventHandler[];
+    }): void;
     /**
      * Store to handle custom event handlers
      *
@@ -2556,6 +2602,13 @@ declare namespace widget {
         hide_on_time_count?: number;
     }
     type _Props = Props;
+    /** @internal */
+    const ACTION_HOOK_LABEL = "__ACTION_HOOK__";
+    /** @internal */
+    type ActionHookLog = {
+        name: string;
+        values?: any;
+    };
     /**
      * アクションのライフサイクルで呼び出されるフック
      *
@@ -3017,8 +3070,8 @@ declare namespace widget {
      */
     export { showAction as show, closeAction as hide };
 }
-export { loadGlobalScript, loadGlobalStyle, applyGlobalCss, initialize, finalize, setAutoStart, getState, setState, getStates, isOpened, getCustomVariables, setCustomVariables, updateCustomVariables, getCustomHandlers, setCustomHandlers, updateCustomHandlers, getSystem, setActionSetting, customHandlers, customVariables, formData, state, opened, closed, destroyed, stopped, isClosed, setClosed, getStoreState, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, Style, StateName, WritingModes, WritingMode, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonStyle, DefaultFormButtonStyle, FormSelectStyle, DefaultFormSelectStyle, FormRatingButtonType, FormRatingButtonTypes, DefaultFormRatingButtonType, create, destroy, closeAction, showAction, loadStyle, applyCss, getActionShadowRoot, onCreate, onShow, onClose, onDestroy, onChangeState, showModal, ensureModalRoot, show, close, createApp, createFog, KARTE_MODAL_ROOT, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, widget };
-export type { CloseTrigger, CustomVariables, ActionEventHandler, SystemConfig, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionProps, ActionOptions, ActionHook, ActionCloseHook, ActionChangeStateHook, SendFunction, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
+export { loadGlobalScript, loadGlobalStyle, applyGlobalCss, initialize, finalize, setAutoStart, getState, setState, getStates, isOpened, getCustomVariables, setCustomVariables, updateCustomVariables, getCustomHandlers, setCustomHandlers, updateCustomHandlers, getSystem, setActionSetting, customHandlers, customVariables, formData, state, opened, closed, destroyed, stopped, isClosed, setClosed, getStoreState, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, Style, StateName, WritingModes, WritingMode, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonStyle, DefaultFormButtonStyle, FormSelectStyle, DefaultFormSelectStyle, FormRatingButtonType, FormRatingButtonTypes, DefaultFormRatingButtonType, create, destroy, closeAction, showAction, loadStyle, applyCss, getActionShadowRoot, onCreate, onShow, onClose, onDestroy, onChangeState, showModal, ensureModalRoot, show, close, createApp, createFog, KARTE_MODAL_ROOT, ACTION_HOOK_LABEL, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, widget };
+export type { CloseTrigger, CustomVariables, ActionEventHandler, SystemConfig, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionProps, ActionOptions, ActionHook, ActionCloseHook, ActionChangeStateHook, SendFunction, ActionHookLog, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
 export { default as State } from './components/State.svelte';
 export { default as StateItem } from './components/StateItem.svelte';
 export { default as Modal } from './components/Modal.svelte';

package/dist/hydrate/index.es.js

@@ -437,6 +437,32 @@ function updateInternalHandlers(handlers) {
     });
     return getInternalHandlers();
 }
+/**
+ * Store to handle internal event handlers for widget API
+ *
+ * @internal
+ */
+const widgetHandlers = writable({});
+/**
+ * {@link getWidgetHandlers} function to get internal event handlers for widget API.
+ *
+ * @param handlers - New internal widget event handlers
+ *
+ * @returns Current internal widget handlers
+ *
+ * @internal
+ */
+function getWidgetHandlers() {
+    return get(widgetHandlers);
+}
+/**
+ * {@link setWidgetHandlers} function to set internal event handlers.
+ *
+ * @internal
+ */
+function setWidgetHandlers(handlers) {
+    widgetHandlers.set(handlers);
+}
 /**
  * Store to handle custom event handlers
  *
@@ -908,9 +934,11 @@ const EVENTS_LIMIT = 1000;
 let logs = [];
 // KARTEイベント
 let events = [];
+/** @internal */
 function getLogs() {
     return logs;
 }
+/** @internal */
 function getEvents() {
     return events;
 }
@@ -920,22 +948,24 @@ function w(w) {
 }
 /**
  * ログを送信する関数群
+ *
+ * @internal
  */
 const logger = {
     info: (...messages) => {
-        const log = { level: 'info', messages, date: new Date() };
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     log: (...messages) => {
-        const log = { level: 'info', messages, date: new Date() };
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     error: (...messages) => {
-        const log = { level: 'error', messages, date: new Date() };
+        const log = cloneToJson({ level: 'error', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     warn: (...messages) => {
-        const log = { level: 'warn', messages, date: new Date() };
+        const log = cloneToJson({ level: 'warn', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     event: (name, values) => {
@@ -954,6 +984,8 @@ const logger = {
 };
 /**
  * メッセージを実行ログに表示する
+ *
+ * @internal
  */
 function listenLogger() {
     const handler = (event) => {
@@ -997,6 +1029,8 @@ function listenLogger() {
 const { info, log, error, warn } = console;
 /**
  * consoleログを実行ログに表示する
+ *
+ * @internal
  */
 function listenConsoleLogger() {
     const cleanup = listenLogger();
@@ -1024,6 +1058,14 @@ function listenConsoleLogger() {
         console.warn = warn;
     };
 }
+function cloneToJson(data) {
+    try {
+        return JSON.parse(JSON.stringify(data));
+    }
+    catch (e) {
+        return data;
+    }
+}
 
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
     if (direction === 'down' && deltaRate > 0) {
@@ -1442,6 +1484,8 @@ const loadActionTable = async (config, api_key, endpoint) => {
     }, {});
 };
 
+/** @internal */
+const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
 /**
  * アクションが作成 (create) される前にフックする関数
  *
@@ -1495,12 +1539,12 @@ function onClose(fn) {
  * @public
  */
 function onDestroy(fn) {
-    let { onDestoryHandlers } = getInternalHandlers();
-    if (!onDestoryHandlers) {
-        onDestoryHandlers = [];
+    let { onDestroyHandlers } = getInternalHandlers();
+    if (!onDestroyHandlers) {
+        onDestroyHandlers = [];
     }
-    onDestoryHandlers.push(fn);
-    updateInternalHandlers({ onDestoryHandlers });
+    onDestroyHandlers.push(fn);
+    updateInternalHandlers({ onDestroyHandlers });
 }
 /**
  * アクションのステートが変更された (changeState) 後にフックする関数
@@ -1541,13 +1585,21 @@ function create(App, options = {
     };
     const actionProps = { send: options.send, data };
     initialize({ send: options.send });
-    // NOTE: onCreateより前にListenする必要がある
-    window.addEventListener(ACTION_DESTROY_EVENT, () => {
+    const handleDestroy = () => {
         const { onDestroyHandlers } = getInternalHandlers();
-        onDestroyHandlers?.forEach(h => h(actionProps));
-        // 複数回onDestroyを呼ばないようにする処理
-        window.removeEventListener('beforeunload', dispatchDestroyEvent);
-    });
+        onDestroyHandlers?.forEach(h => {
+            const actionHookLog = { name: 'onDestroy' };
+            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+            h(actionProps);
+        });
+        // 旧Widget APIの内部で利用するため、実行ログは出力しない
+        const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
+        if (onDestroyWidgetHandlers) {
+            onDestroyWidgetHandlers.forEach(h => h(actionProps));
+        }
+    };
+    // NOTE: onCreateより前にListenする必要がある
+    window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
     window.addEventListener('beforeunload', dispatchDestroyEvent, false);
     setSystem({
         // @ts-ignore
@@ -1569,9 +1621,14 @@ function create(App, options = {
         window.removeEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
         const { onCloseHandlers } = getInternalHandlers();
         if (onCloseHandlers) {
-            onCloseHandlers.forEach(h => h({ send: options.send, data }, trigger));
+            onCloseHandlers.forEach(h => {
+                const actionHookLog = { name: 'onClose', values: { trigger } };
+                console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                h({ send: options.send, data }, trigger);
+            });
         }
         finalize();
+        dispatchDestroyEvent();
         app.$destroy();
         app = null;
     };
@@ -1597,12 +1654,28 @@ function create(App, options = {
                 onShow: (props) => {
                     const { onShowHandlers } = getInternalHandlers();
                     if (onShowHandlers) {
-                        onShowHandlers.forEach(h => h(props));
+                        onShowHandlers.forEach(h => {
+                            const actionHookLog = { name: 'onShow' };
+                            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                            h(props);
+                        });
                     }
                 },
                 onChangeState: (props, newState) => {
                     const { onChangeStateHandlers } = getInternalHandlers();
                     if (onChangeStateHandlers) {
+                        onChangeStateHandlers.forEach(h => {
+                            const actionHookLog = {
+                                name: 'onChangeState',
+                                values: { newState },
+                            };
+                            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                            h(props, newState);
+                        });
+                    }
+                    // 旧Widget APIの内部で利用するため、実行ログは出力しない
+                    const { onChangeStateHandlers: onChangeWidgetStateHandlers } = getWidgetHandlers();
+                    if (onChangeWidgetStateHandlers) {
                         onChangeStateHandlers.forEach(h => h(props, newState));
                     }
                 },
@@ -1636,14 +1709,20 @@ function create(App, options = {
     }
     const { onCreateHandlers } = getInternalHandlers();
     if (onCreateHandlers) {
-        onCreateHandlers.forEach(h => h({ send: options.send, data }));
+        onCreateHandlers.forEach(h => {
+            h({ send: options.send, data });
+            console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
+        });
     }
     // 初期化処理
     // NOTE: onCreateの後に実行する必要がある
     if (isDestroyed()) {
         return () => {
+            loggerCleanup();
             window.removeEventListener(ACTION_SHOW_EVENT, show);
             window.removeEventListener(ACTION_CLOSE_EVENT, handleClose);
+            window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+            window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
         };
     }
     let hideCleanup = NOOP;
@@ -1659,6 +1738,8 @@ function create(App, options = {
         loggerCleanup();
         window.removeEventListener(ACTION_SHOW_EVENT, show);
         window.removeEventListener(ACTION_CLOSE_EVENT, handleClose);
+        window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+        window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
     };
 }
 /**
@@ -1974,15 +2055,21 @@ const STORE_LS_KEY_PREFIX = 'krt___';
 const valCallbacks = {};
 const eventCallbacks = {};
 const memoryStore = {};
-onChangeState((_props, newState) => {
-    setVal('state', newState);
-});
-onDestroy(() => {
-    Object.entries(eventCallbacks).map(([name, cbs]) => {
-        cbs.forEach(cb => {
-            window.removeEventListener(name, cb);
-        });
-    });
+setWidgetHandlers({
+    onChangeState: [
+        (_props, newState) => {
+            setVal('state', newState);
+        },
+    ],
+    onDestroy: [
+        () => {
+            Object.entries(eventCallbacks).map(([name, cbs]) => {
+                cbs.forEach(cb => {
+                    window.removeEventListener(name, cb);
+                });
+            });
+        },
+    ],
 });
 /**
  * 変数を設定する
@@ -8444,4 +8531,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultEdgePosition, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, FormRatingButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };
+export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultEdgePosition, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, FormRatingButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };

package/dist/index.es.d.ts

@@ -890,21 +890,28 @@ declare function onTime(time: number, fn: Function): () => void;
 /**
  * アクションのログの記録の管理
  */
+/** @internal */
 type LogLevel = "info" | "error" | "warn";
+/** @internal */
 type Log = {
     level: LogLevel;
     messages: any;
     date?: Date;
 };
+/** @internal */
 type Event = {
     name: string;
     values?: any;
     date?: Date;
 };
+/** @internal */
 declare function getLogs(): Log[];
+/** @internal */
 declare function getEvents(): Event[];
 /**
  * ログを送信する関数群
+ *
+ * @internal
  */
 declare const logger: {
     info: (...messages: any[]) => void;
@@ -917,6 +924,8 @@ declare const logger: {
 };
 /**
  * メッセージを実行ログに表示する
+ *
+ * @internal
  */
 declare function listenLogger(): () => void;
 /**
@@ -1116,6 +1125,13 @@ declare const loadActionTableRows: (config: ActionTableRowsRequestConfig, api_ke
 declare const loadActionTableQuery: (config: ActionTableQueryRequestConfig, api_key: string, endpoint?: string) => Promise<unknown>;
 declare const loadActionTable: (config: Array<ActionTableRequestConfig>, api_key: string, endpoint?: string) => Promise<{}>;
 type _Props$0 = Props;
+/** @internal */
+declare const ACTION_HOOK_LABEL = "__ACTION_HOOK__";
+/** @internal */
+type ActionHookLog = {
+    name: string;
+    values?: any;
+};
 /**
  * アクションのライフサイクルで呼び出されるフック
  *
@@ -2127,6 +2143,8 @@ declare namespace widget {
     /**
      * {@link setInternalHandlers} function to set internal event handlers.
      *
+     * @param handlers - New internal event handlers
+     *
      * @internal
      */
     function setInternalHandlers(handlers: {
@@ -2144,6 +2162,34 @@ declare namespace widget {
     }): {
         [key: string]: ActionEventHandler[];
     };
+    /**
+     * Store to handle internal event handlers for widget API
+     *
+     * @internal
+     */
+    const widgetHandlers: Store<{
+        [key: string]: ActionEventHandler[];
+    }>;
+    /**
+     * {@link getWidgetHandlers} function to get internal event handlers for widget API.
+     *
+     * @param handlers - New internal widget event handlers
+     *
+     * @returns Current internal widget handlers
+     *
+     * @internal
+     */
+    function getWidgetHandlers(): {
+        [key: string]: ActionEventHandler[];
+    };
+    /**
+     * {@link setWidgetHandlers} function to set internal event handlers.
+     *
+     * @internal
+     */
+    function setWidgetHandlers(handlers: {
+        [key: string]: ActionEventHandler[];
+    }): void;
     /**
      * Store to handle custom event handlers
      *
@@ -2556,6 +2602,13 @@ declare namespace widget {
         hide_on_time_count?: number;
     }
     type _Props = Props;
+    /** @internal */
+    const ACTION_HOOK_LABEL = "__ACTION_HOOK__";
+    /** @internal */
+    type ActionHookLog = {
+        name: string;
+        values?: any;
+    };
     /**
      * アクションのライフサイクルで呼び出されるフック
      *
@@ -3017,8 +3070,8 @@ declare namespace widget {
      */
     export { showAction as show, closeAction as hide };
 }
-export { loadGlobalScript, loadGlobalStyle, applyGlobalCss, initialize, finalize, setAutoStart, getState, setState, getStates, isOpened, getCustomVariables, setCustomVariables, updateCustomVariables, getCustomHandlers, setCustomHandlers, updateCustomHandlers, getSystem, setActionSetting, customHandlers, customVariables, formData, state, opened, closed, destroyed, stopped, isClosed, setClosed, getStoreState, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, Style, StateName, WritingModes, WritingMode, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonStyle, DefaultFormButtonStyle, FormSelectStyle, DefaultFormSelectStyle, FormRatingButtonType, FormRatingButtonTypes, DefaultFormRatingButtonType, create, destroy, closeAction, showAction, loadStyle, applyCss, getActionShadowRoot, onCreate, onShow, onClose, onDestroy, onChangeState, showModal, ensureModalRoot, show, close, createApp, createFog, KARTE_MODAL_ROOT, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, widget };
-export type { CloseTrigger, CustomVariables, ActionEventHandler, SystemConfig, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionProps, ActionOptions, ActionHook, ActionCloseHook, ActionChangeStateHook, SendFunction, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
+export { loadGlobalScript, loadGlobalStyle, applyGlobalCss, initialize, finalize, setAutoStart, getState, setState, getStates, isOpened, getCustomVariables, setCustomVariables, updateCustomVariables, getCustomHandlers, setCustomHandlers, updateCustomHandlers, getSystem, setActionSetting, customHandlers, customVariables, formData, state, opened, closed, destroyed, stopped, isClosed, setClosed, getStoreState, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, Style, StateName, WritingModes, WritingMode, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonStyle, DefaultFormButtonStyle, FormSelectStyle, DefaultFormSelectStyle, FormRatingButtonType, FormRatingButtonTypes, DefaultFormRatingButtonType, create, destroy, closeAction, showAction, loadStyle, applyCss, getActionShadowRoot, onCreate, onShow, onClose, onDestroy, onChangeState, showModal, ensureModalRoot, show, close, createApp, createFog, KARTE_MODAL_ROOT, ACTION_HOOK_LABEL, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, widget };
+export type { CloseTrigger, CustomVariables, ActionEventHandler, SystemConfig, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionProps, ActionOptions, ActionHook, ActionCloseHook, ActionChangeStateHook, SendFunction, ActionHookLog, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
 export { default as State } from './components/State.svelte';
 export { default as StateItem } from './components/StateItem.svelte';
 export { default as Modal } from './components/Modal.svelte';

package/dist/index.es.js

@@ -439,6 +439,32 @@ function updateInternalHandlers(handlers) {
     });
     return getInternalHandlers();
 }
+/**
+ * Store to handle internal event handlers for widget API
+ *
+ * @internal
+ */
+const widgetHandlers = writable({});
+/**
+ * {@link getWidgetHandlers} function to get internal event handlers for widget API.
+ *
+ * @param handlers - New internal widget event handlers
+ *
+ * @returns Current internal widget handlers
+ *
+ * @internal
+ */
+function getWidgetHandlers() {
+    return get(widgetHandlers);
+}
+/**
+ * {@link setWidgetHandlers} function to set internal event handlers.
+ *
+ * @internal
+ */
+function setWidgetHandlers(handlers) {
+    widgetHandlers.set(handlers);
+}
 /**
  * Store to handle custom event handlers
  *
@@ -958,9 +984,11 @@ const EVENTS_LIMIT = 1000;
 let logs = [];
 // KARTEイベント
 let events = [];
+/** @internal */
 function getLogs() {
     return logs;
 }
+/** @internal */
 function getEvents() {
     return events;
 }
@@ -970,22 +998,24 @@ function w(w) {
 }
 /**
  * ログを送信する関数群
+ *
+ * @internal
  */
 const logger = {
     info: (...messages) => {
-        const log = { level: 'info', messages, date: new Date() };
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     log: (...messages) => {
-        const log = { level: 'info', messages, date: new Date() };
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     error: (...messages) => {
-        const log = { level: 'error', messages, date: new Date() };
+        const log = cloneToJson({ level: 'error', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     warn: (...messages) => {
-        const log = { level: 'warn', messages, date: new Date() };
+        const log = cloneToJson({ level: 'warn', messages, date: new Date() });
         w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
     event: (name, values) => {
@@ -1004,6 +1034,8 @@ const logger = {
 };
 /**
  * メッセージを実行ログに表示する
+ *
+ * @internal
  */
 function listenLogger() {
     const handler = (event) => {
@@ -1044,6 +1076,14 @@ function listenLogger() {
         window.removeEventListener('message', handler, false);
     };
 }
+function cloneToJson(data) {
+    try {
+        return JSON.parse(JSON.stringify(data));
+    }
+    catch (e) {
+        return data;
+    }
+}
 
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
     if (direction === 'down' && deltaRate > 0) {
@@ -1527,6 +1567,8 @@ const loadActionTable = async (config, api_key, endpoint) => {
     }, {});
 };
 
+/** @internal */
+const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
 /**
  * アクションが作成 (create) される前にフックする関数
  *
@@ -1580,12 +1622,12 @@ function onClose(fn) {
  * @public
  */
 function onDestroy(fn) {
-    let { onDestoryHandlers } = getInternalHandlers();
-    if (!onDestoryHandlers) {
-        onDestoryHandlers = [];
+    let { onDestroyHandlers } = getInternalHandlers();
+    if (!onDestroyHandlers) {
+        onDestroyHandlers = [];
     }
-    onDestoryHandlers.push(fn);
-    updateInternalHandlers({ onDestoryHandlers });
+    onDestroyHandlers.push(fn);
+    updateInternalHandlers({ onDestroyHandlers });
 }
 /**
  * アクションのステートが変更された (changeState) 後にフックする関数
@@ -1626,13 +1668,21 @@ function create(App, options = {
     };
     const actionProps = { send: options.send, data };
     initialize({ send: options.send });
-    // NOTE: onCreateより前にListenする必要がある
-    window.addEventListener(ACTION_DESTROY_EVENT, () => {
+    const handleDestroy = () => {
         const { onDestroyHandlers } = getInternalHandlers();
-        onDestroyHandlers?.forEach(h => h(actionProps));
-        // 複数回onDestroyを呼ばないようにする処理
-        window.removeEventListener('beforeunload', dispatchDestroyEvent);
-    });
+        onDestroyHandlers?.forEach(h => {
+            const actionHookLog = { name: 'onDestroy' };
+            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+            h(actionProps);
+        });
+        // 旧Widget APIの内部で利用するため、実行ログは出力しない
+        const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
+        if (onDestroyWidgetHandlers) {
+            onDestroyWidgetHandlers.forEach(h => h(actionProps));
+        }
+    };
+    // NOTE: onCreateより前にListenする必要がある
+    window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
     window.addEventListener('beforeunload', dispatchDestroyEvent, false);
     setSystem({
         // @ts-ignore
@@ -1654,9 +1704,14 @@ function create(App, options = {
         window.removeEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
         const { onCloseHandlers } = getInternalHandlers();
         if (onCloseHandlers) {
-            onCloseHandlers.forEach(h => h({ send: options.send, data }, trigger));
+            onCloseHandlers.forEach(h => {
+                const actionHookLog = { name: 'onClose', values: { trigger } };
+                console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                h({ send: options.send, data }, trigger);
+            });
         }
         finalize();
+        dispatchDestroyEvent();
         app.$destroy();
         app = null;
     };
@@ -1682,12 +1737,28 @@ function create(App, options = {
                 onShow: (props) => {
                     const { onShowHandlers } = getInternalHandlers();
                     if (onShowHandlers) {
-                        onShowHandlers.forEach(h => h(props));
+                        onShowHandlers.forEach(h => {
+                            const actionHookLog = { name: 'onShow' };
+                            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                            h(props);
+                        });
                     }
                 },
                 onChangeState: (props, newState) => {
                     const { onChangeStateHandlers } = getInternalHandlers();
                     if (onChangeStateHandlers) {
+                        onChangeStateHandlers.forEach(h => {
+                            const actionHookLog = {
+                                name: 'onChangeState',
+                                values: { newState },
+                            };
+                            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                            h(props, newState);
+                        });
+                    }
+                    // 旧Widget APIの内部で利用するため、実行ログは出力しない
+                    const { onChangeStateHandlers: onChangeWidgetStateHandlers } = getWidgetHandlers();
+                    if (onChangeWidgetStateHandlers) {
                         onChangeStateHandlers.forEach(h => h(props, newState));
                     }
                 },
@@ -1732,7 +1803,10 @@ function create(App, options = {
     }
     const { onCreateHandlers } = getInternalHandlers();
     if (onCreateHandlers) {
-        onCreateHandlers.forEach(h => h({ send: options.send, data }));
+        onCreateHandlers.forEach(h => {
+            h({ send: options.send, data });
+            console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
+        });
     }
     // 初期化処理
     // NOTE: onCreateの後に実行する必要がある
@@ -1740,6 +1814,8 @@ function create(App, options = {
         return () => {
             window.removeEventListener(ACTION_SHOW_EVENT, show);
             window.removeEventListener(ACTION_CLOSE_EVENT, handleClose);
+            window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+            window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
         };
     }
     let hideCleanup = NOOP;
@@ -1754,6 +1830,8 @@ function create(App, options = {
         showCleanup();
         window.removeEventListener(ACTION_SHOW_EVENT, show);
         window.removeEventListener(ACTION_CLOSE_EVENT, handleClose);
+        window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+        window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
     };
 }
 /**
@@ -2068,15 +2146,21 @@ const STORE_LS_KEY_PREFIX = 'krt___';
 const valCallbacks = {};
 const eventCallbacks = {};
 const memoryStore = {};
-onChangeState((_props, newState) => {
-    setVal('state', newState);
-});
-onDestroy(() => {
-    Object.entries(eventCallbacks).map(([name, cbs]) => {
-        cbs.forEach(cb => {
-            window.removeEventListener(name, cb);
-        });
-    });
+setWidgetHandlers({
+    onChangeState: [
+        (_props, newState) => {
+            setVal('state', newState);
+        },
+    ],
+    onDestroy: [
+        () => {
+            Object.entries(eventCallbacks).map(([name, cbs]) => {
+                cbs.forEach(cb => {
+                    window.removeEventListener(name, cb);
+                });
+            });
+        },
+    ],
 });
 /**
  * 変数を設定する
@@ -7917,4 +8001,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultEdgePosition, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, FormRatingButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };
+export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultEdgePosition, DefaultFormButtonStyle, DefaultFormRatingButtonType, DefaultFormSelectStyle, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormCheckBoxes, FormRadioButtons, FormRatingButtonTypes, FormRatingButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getEvents, getLogs, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };

package/dist/templates.cjs.js

@@ -64,7 +64,7 @@ function createIndexTsx(script = '') {
 import "https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver";
 import { create } from "@plaidev/karte-action-sdk";
 
-import { props } from "./gen";
+import { props, localVariablesQuery } from "./gen";
 import App from "./App.svelte";
 import onCreate from "./customScript";
 ${script}
@@ -73,6 +73,7 @@ const action = (options: { send: Send; props: Props; variables: Variables }): Ka
     props,
     send: options.send,
     variables: options.variables,
+    localVariablesQuery,
     onCreate,
   });
 };

package/dist/templates.js

@@ -62,7 +62,7 @@ function createIndexTsx(script = '') {
 import "https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver";
 import { create } from "@plaidev/karte-action-sdk";
 
-import { props } from "./gen";
+import { props, localVariablesQuery } from "./gen";
 import App from "./App.svelte";
 import onCreate from "./customScript";
 ${script}
@@ -71,6 +71,7 @@ const action = (options: { send: Send; props: Props; variables: Variables }): Ka
     props,
     send: options.send,
     variables: options.variables,
+    localVariablesQuery,
     onCreate,
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.126-27950980.e8e536b0",
+  "version": "1.1.126-27952306.7e987116",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",