@plaidev/karte-action-sdk 1.1.267-29071733.fabf64a6 → 1.1.267-29082453.379cb476

package/dist/svelte5/index.es.js

@@ -38,9 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 /** @internal */
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
-const isPreview = () => {
-    return false;
-};
+const isPreview = () => (isInFrame() );
+const isCanvasPreview = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
+        'true'
+    : false;
+const isOnSite = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
+    : true;
+const isInFrame = () => window && window.self !== window.top;
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -758,6 +764,8 @@ const state = writable('/');
  * @public
  */
 function setState$1(stateId, options) {
+    if (isPreview() && options?.disableInPreview)
+        return;
     state.set(stateId);
 }
 /**
@@ -1168,7 +1176,9 @@ function cloneToJson(data) {
 
 // prettier-ignore
 /** @internal */
-const actionId = typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
+const actionId = isPreview()
+    ? ALL_ACTION_ID
+    : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
         ? __FLYER_GEN_ACTION_ID_ON_BUILD__
         : randStr();
 /** @internal */
@@ -1576,7 +1586,9 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
 /** @internal */
 const loadActionTable = async (config, data, api_key, collection_endpoint) => {
     console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
-    const results = await Promise.all(config
+    const results = isPreview()
+        ? config.map(c => c.preview_value)
+        : await Promise.all(config
             .filter(c => c.resolver === 'action-table-row' ||
             c.resolver === 'action-table-rows' ||
             c.resolver === 'action-table-query')
@@ -1724,6 +1736,7 @@ function createModal(App, options = {
         close(trigger);
     };
     const show = async (trigger = 'none') => {
+        console.log('show trigger', trigger);
         if (app) {
             return;
         }
@@ -2302,7 +2315,8 @@ function getActionRoot() {
     return root.shadowRoot;
 }
 /** @internal */
-function ensureActionRoot() {
+function ensureActionRoot(useShadow = true) {
+    console.log('useShadow', useShadow);
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2313,11 +2327,13 @@ function ensureActionRoot() {
         style: { display: 'block' },
     };
     let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    console.log('el', el);
     if (el == null) {
         el = h('div', rootAttrs);
         document.body.appendChild(el);
     }
-    const isShadow = !!document.body.attachShadow;
+    const isShadow = !!document.body.attachShadow && useShadow;
+    console.log('isShadow', isShadow);
     if (isShadow) {
         return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
     }
@@ -2386,7 +2402,7 @@ function createApp(App, options = {
             },
         },
     };
-    const win = ensureModalRoot();
+    const win = ensureModalRoot(true);
     appArgs.target = win;
     return {
         close,
@@ -2906,7 +2922,10 @@ function Header($$anchor, $$props) {
 			$fonts()
 		),
 		() => {
-			if ($fonts().length > 0) {
+			if (isPreview()) {
+				// フォントのロードが遅れてエディタのプレビューがガタつく対策
+				$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
+			} else if ($fonts().length > 0) {
 				$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
 			}
 		}
@@ -3467,7 +3486,7 @@ const EASING = {
     none: linear,
 };
 /**
- * The function to activate svelte animation v2.
+ * The function to activate svelte animation.
  *
  * @param node - A target node of animation. This argument is passed by svelte, by default.
  * @param customAnimationOptions - A custom animation option object
@@ -3476,8 +3495,8 @@ const EASING = {
  *
  * @internal
  */
-function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
-    if (disabled) {
+function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
+    if (!isOnSite()) {
         return {};
     }
     let [x, y] = [0, 0];
@@ -6360,11 +6379,6 @@ function Modal($$anchor, $$props) {
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
-	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
-	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
-
-	console.log('isOnSite', isOnSite);
-
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6410,7 +6424,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (!isCanvasPreview && isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6516,7 +6530,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (!isCanvasPreview && placement() && placement().position !== null) {
+			if (!isCanvasPreview() && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6533,7 +6547,7 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isCanvasPreview && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
 
 					$.get(transforms).push({
@@ -6569,7 +6583,7 @@ function Modal($$anchor, $$props) {
 		() => {
 			let margin = DefaultModalPlacement.margin;
 
-			if (!isCanvasPreview && placement() && placement().margin !== null) {
+			if (!isCanvasPreview() && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6580,7 +6594,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isCanvasPreview && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6694,7 +6708,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
+			if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
 		});
 	}
 
@@ -6725,10 +6739,9 @@ function Modal($$anchor, $$props) {
 				$.derived_safe_equal
 			);
 
-			$.transition(1, div, () => customAnimationV2, () => ({
+			$.transition(1, div, () => customAnimation, () => ({
 				transforms: $.get(transforms),
-				animationStyle: animation(),
-				disabled: !isOnSite
+				animationStyle: animation()
 			}));
 
 			$.append($$anchor, div);

package/dist/svelte5/index.front2.es.js

@@ -38,9 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 /** @internal */
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
-const isPreview = () => {
-    return false;
-};
+const isPreview = () => (isInFrame() );
+const isCanvasPreview = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
+        'true'
+    : false;
+const isOnSite = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
+    : true;
+const isInFrame = () => window && window.self !== window.top;
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -758,6 +764,8 @@ const state = writable('/');
  * @public
  */
 function setState$1(stateId, options) {
+    if (isPreview() && options?.disableInPreview)
+        return;
     state.set(stateId);
 }
 /**
@@ -1168,7 +1176,9 @@ function cloneToJson(data) {
 
 // prettier-ignore
 /** @internal */
-const actionId = typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
+const actionId = isPreview()
+    ? ALL_ACTION_ID
+    : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
         ? __FLYER_GEN_ACTION_ID_ON_BUILD__
         : randStr();
 /** @internal */
@@ -1576,7 +1586,9 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
 /** @internal */
 const loadActionTable = async (config, data, api_key, collection_endpoint) => {
     console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
-    const results = await Promise.all(config
+    const results = isPreview()
+        ? config.map(c => c.preview_value)
+        : await Promise.all(config
             .filter(c => c.resolver === 'action-table-row' ||
             c.resolver === 'action-table-rows' ||
             c.resolver === 'action-table-query')
@@ -1724,6 +1736,7 @@ function createModal(App, options = {
         close(trigger);
     };
     const show = async (trigger = 'none') => {
+        console.log('show trigger', trigger);
         if (app) {
             return;
         }
@@ -2302,7 +2315,8 @@ function getActionRoot() {
     return root.shadowRoot;
 }
 /** @internal */
-function ensureActionRoot() {
+function ensureActionRoot(useShadow = true) {
+    console.log('useShadow', useShadow);
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -2313,11 +2327,13 @@ function ensureActionRoot() {
         style: { display: 'block' },
     };
     let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    console.log('el', el);
     if (el == null) {
         el = h('div', rootAttrs);
         document.body.appendChild(el);
     }
-    const isShadow = !!document.body.attachShadow;
+    const isShadow = !!document.body.attachShadow && useShadow;
+    console.log('isShadow', isShadow);
     if (isShadow) {
         return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
     }
@@ -2386,7 +2402,7 @@ function createApp(App, options = {
             },
         },
     };
-    const win = ensureModalRoot();
+    const win = ensureModalRoot(true);
     appArgs.target = win;
     return {
         close,
@@ -2906,7 +2922,10 @@ function Header($$anchor, $$props) {
 			$fonts()
 		),
 		() => {
-			if ($fonts().length > 0) {
+			if (isPreview()) {
+				// フォントのロードが遅れてエディタのプレビューがガタつく対策
+				$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
+			} else if ($fonts().length > 0) {
 				$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
 			}
 		}
@@ -3467,7 +3486,7 @@ const EASING = {
     none: linear,
 };
 /**
- * The function to activate svelte animation v2.
+ * The function to activate svelte animation.
  *
  * @param node - A target node of animation. This argument is passed by svelte, by default.
  * @param customAnimationOptions - A custom animation option object
@@ -3476,8 +3495,8 @@ const EASING = {
  *
  * @internal
  */
-function customAnimationV2(node, { transforms, animationStyle, delay = 0, duration = 1000, disabled, }) {
-    if (disabled) {
+function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
+    if (!isOnSite()) {
         return {};
     }
     let [x, y] = [0, 0];
@@ -6360,11 +6379,6 @@ function Modal($$anchor, $$props) {
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
-	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
-	const isOnSite = (document.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true';
-
-	console.log('isOnSite', isOnSite);
-
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6410,7 +6424,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (!isCanvasPreview && isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6516,7 +6530,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (!isCanvasPreview && placement() && placement().position !== null) {
+			if (!isCanvasPreview() && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6533,7 +6547,7 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isCanvasPreview && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
 
 					$.get(transforms).push({
@@ -6569,7 +6583,7 @@ function Modal($$anchor, $$props) {
 		() => {
 			let margin = DefaultModalPlacement.margin;
 
-			if (!isCanvasPreview && placement() && placement().margin !== null) {
+			if (!isCanvasPreview() && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6580,7 +6594,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isCanvasPreview && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6694,7 +6708,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
+			if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
 		});
 	}
 
@@ -6725,10 +6739,9 @@ function Modal($$anchor, $$props) {
 				$.derived_safe_equal
 			);
 
-			$.transition(1, div, () => customAnimationV2, () => ({
+			$.transition(1, div, () => customAnimation, () => ({
 				transforms: $.get(transforms),
-				animationStyle: animation(),
-				disabled: !isOnSite
+				animationStyle: animation()
 			}));
 
 			$.append($$anchor, div);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.267-29071733.fabf64a6",
+  "version": "1.1.267-29082453.379cb476",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",