@plaidev/karte-action-sdk 1.1.57 → 1.1.58

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

@@ -1,4 +1,5 @@
 import { Writable } from "svelte/store";
+import { SvelteComponentDev } from "svelte/internal";
 declare const PropTypes: readonly [
     "BooleanKeyword",
     "NumberKeyword",
@@ -338,6 +339,52 @@ declare function showOnTime<Props extends {
     show_on_time: boolean;
     show_on_time_count: number;
 }>(props: Props, fn?: Function): () => void;
+/**
+ * An options for {@link createApp}
+ */
+interface AppOptions<Props, Variables> {
+    /**
+     * {@link Send} function to receive events triggered in Karte action.
+     *
+     * @default () => {}
+     */
+    send?: Function;
+    /**
+     * {@link Props} used in Karte action.
+     *
+     * @default {}
+     */
+    props?: Props;
+    /**
+     * {@link Variables} in which user variables or action table used in Karte action.
+     *
+     * @default {}
+     */
+    variables?: Variables;
+}
+/**
+ * App application instance that is with {@link createApp}
+ *
+ * @description Currently, svelte component is supported only.
+ */
+interface App {
+    /**
+     * The method to destroy an app instance.
+     */
+    close: () => void;
+    /**
+     * The method to show an app instance.
+     */
+    show: () => void;
+}
+/**
+ * Create an application instance.
+ *
+ * @param App - An entry point of svelte component.
+ * @param options - An {@link AppOptions | options}
+ * @return An {@link App | app} instance
+ */
+declare const createApp: <Props, Variables>(App: typeof SvelteComponentDev, options?: AppOptions<Props, Variables>) => App;
 declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
 declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
 declare function createFog({ color, opacity, zIndex, onclick }: {
@@ -364,7 +411,7 @@ declare const collection: (config: {
     } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
     set(key: string, value: string, cb: (err: Error | null) => void): void;
 };
-export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ensureModalRoot, h, createFog, EmbedLogic, embed, collection };
+export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, AppOptions, App, createApp, ensureModalRoot, h, createFog, EmbedLogic, embed, collection };
 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

@@ -366,6 +366,51 @@ function showOnTime(props, fn) {
         : NOOP;
 }
 
+/**
+ * Create an application instance.
+ *
+ * @param App - An entry point of svelte component.
+ * @param options - An {@link AppOptions | options}
+ * @return An {@link App | app} instance
+ */
+const createApp = (App, options = {
+    send: () => { },
+    props: {},
+    variables: {},
+}) => {
+    let app = null;
+    const close = () => {
+        if (app) {
+            app.$destory();
+            app = null;
+        }
+    };
+    const appArgs = {
+        target: null,
+        props: {
+            send: options.send,
+            close,
+            data: {
+                ...options.props,
+                ...options.variables,
+            },
+        },
+    };
+    {
+        const win = ensureModalRoot(false);
+        appArgs.target = win;
+        appArgs.hydrate = true;
+    }
+    return {
+        close,
+        show: () => {
+            if (app) {
+                return;
+            }
+            app = new App(appArgs);
+        },
+    };
+};
 const KARTE_MODAL_ROOT = 'karte-modal-root';
 function ensureModalRoot(useShadow = true) {
     let el = document.getElementById(KARTE_MODAL_ROOT);
@@ -2535,4 +2580,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, closeApp, closed, collection, createFog, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };
+export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, closeApp, closed, collection, createApp, createFog, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };

package/dist/index.es.d.ts

@@ -1,4 +1,5 @@
 import { Writable } from "svelte/store";
+import { SvelteComponentDev } from "svelte/internal";
 declare const PropTypes: readonly [
     "BooleanKeyword",
     "NumberKeyword",
@@ -338,6 +339,52 @@ declare function showOnTime<Props extends {
     show_on_time: boolean;
     show_on_time_count: number;
 }>(props: Props, fn?: Function): () => void;
+/**
+ * An options for {@link createApp}
+ */
+interface AppOptions<Props, Variables> {
+    /**
+     * {@link Send} function to receive events triggered in Karte action.
+     *
+     * @default () => {}
+     */
+    send?: Function;
+    /**
+     * {@link Props} used in Karte action.
+     *
+     * @default {}
+     */
+    props?: Props;
+    /**
+     * {@link Variables} in which user variables or action table used in Karte action.
+     *
+     * @default {}
+     */
+    variables?: Variables;
+}
+/**
+ * App application instance that is with {@link createApp}
+ *
+ * @description Currently, svelte component is supported only.
+ */
+interface App {
+    /**
+     * The method to destroy an app instance.
+     */
+    close: () => void;
+    /**
+     * The method to show an app instance.
+     */
+    show: () => void;
+}
+/**
+ * Create an application instance.
+ *
+ * @param App - An entry point of svelte component.
+ * @param options - An {@link AppOptions | options}
+ * @return An {@link App | app} instance
+ */
+declare const createApp: <Props, Variables>(App: typeof SvelteComponentDev, options?: AppOptions<Props, Variables>) => App;
 declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
 declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
 declare function createFog({ color, opacity, zIndex, onclick }: {
@@ -364,7 +411,7 @@ declare const collection: (config: {
     } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
     set(key: string, value: string, cb: (err: Error | null) => void): void;
 };
-export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ensureModalRoot, h, createFog, EmbedLogic, embed, collection };
+export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, execOnClickOperation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, AppOptions, App, createApp, ensureModalRoot, h, createFog, EmbedLogic, embed, collection };
 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

@@ -366,6 +366,50 @@ function showOnTime(props, fn) {
         : NOOP;
 }
 
+/**
+ * Create an application instance.
+ *
+ * @param App - An entry point of svelte component.
+ * @param options - An {@link AppOptions | options}
+ * @return An {@link App | app} instance
+ */
+const createApp = (App, options = {
+    send: () => { },
+    props: {},
+    variables: {},
+}) => {
+    let app = null;
+    const close = () => {
+        if (app) {
+            app.$destory();
+            app = null;
+        }
+    };
+    const appArgs = {
+        target: null,
+        props: {
+            send: options.send,
+            close,
+            data: {
+                ...options.props,
+                ...options.variables,
+            },
+        },
+    };
+    {
+        const win = ensureModalRoot(true);
+        appArgs.target = win;
+    }
+    return {
+        close,
+        show: () => {
+            if (app) {
+                return;
+            }
+            app = new App(appArgs);
+        },
+    };
+};
 const KARTE_MODAL_ROOT = 'karte-modal-root';
 function ensureModalRoot(useShadow = true) {
     let el = document.getElementById(KARTE_MODAL_ROOT);
@@ -2351,4 +2395,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, closeApp, closed, collection, createFog, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };
+export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, OnClickOperationOptions, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, closeApp, closed, collection, createApp, createFog, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.57",
+  "version": "1.1.58",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",
@@ -67,6 +67,7 @@
   },
   "scripts": {
     "dev": "jiti ./scripts/preview.ts",
+    "dev:hydrate": "jiti ./scripts/preview.ts --hydrate",
     "setup:default": "jiti ./scripts/default.ts",
     "setup:template": "jiti ./scripts/template.ts",
     "setup:concat": "jiti ./scripts/concat.ts",