@apps-in-toss/web-bridge 1.10.1 → 1.11.0

package/dist/index.cjs

@@ -1072,26 +1072,33 @@ function createCustomAdFetcher() {
 var pendingLoad2 = null;
 function initialize(options) {
   const { callbacks } = options;
-  if (window.TossAdsSpaceKit != null && window.TossAdsSpaceKit.isInitialized()) {
-    callbacks?.onInitializationFailed?.(new Error("[toss-ad] Already initialized."));
-    return;
-  }
-  if (pendingLoad2 != null) {
-    callbacks?.onInitializationFailed?.(new Error("[toss-ad] initialization already in progress."));
-  }
   const resolveInitialized = () => callbacks?.onInitialized?.();
   const rejectInitialized = (error) => {
     const normalizedError = error instanceof Error ? error : new Error(String(error));
     callbacks?.onInitializationFailed?.(normalizedError);
   };
-  pendingLoad2 = loadAdsSdk().then((sdk) => {
+  const existingSdk = getAdsSdk();
+  if (existingSdk?.isInitialized()) {
+    resolveInitialized();
+    return;
+  }
+  if (pendingLoad2 != null) {
+    pendingLoad2.then(resolveInitialized).catch(rejectInitialized);
+    return;
+  }
+  const initPromise = loadAdsSdk().then((sdk) => {
+    if (sdk.isInitialized()) {
+      return;
+    }
     const customAdFetcher = createCustomAdFetcher();
     const config = { environment: "live", customAdFetcher, opener: openUrlOpener };
     sdk.init(config);
-    resolveInitialized();
-  }).catch((error) => {
-    pendingLoad2 = null;
-    rejectInitialized(error);
+  });
+  pendingLoad2 = initPromise;
+  initPromise.then(resolveInitialized).catch(rejectInitialized).finally(() => {
+    if (pendingLoad2 === initPromise) {
+      pendingLoad2 = null;
+    }
   });
 }
 function attach(adGroupId, target, options = {}) {
@@ -1130,6 +1137,131 @@ function attach(adGroupId, target, options = {}) {
     rejectAttached(error);
   }
 }
+var DEFAULT_ATTACH_PADDING_BANNER = "16px 20px";
+var DEFAULT_ATTACH_PADDING_NATIVE_IMAGE = "20px";
+var DEFAULT_ATTACH_THEME = "auto";
+var DEFAULT_ATTACH_TONE = "blackAndWhite";
+var DEFAULT_ATTACH_VARIANT = "expanded";
+var ATTACH_CLASS_NAME = "toss-ads-attach";
+var ATTACH_STYLE_ID = "toss-ads-attach-style";
+function ensureAttachStyles(container) {
+  const documentRef = container.ownerDocument;
+  if (!documentRef) {
+    return;
+  }
+  if (documentRef.getElementById(ATTACH_STYLE_ID)) {
+    return;
+  }
+  const style = documentRef.createElement("style");
+  style.id = ATTACH_STYLE_ID;
+  style.textContent = `
+    .${ATTACH_CLASS_NAME} { background: #ffffff; }
+    .${ATTACH_CLASS_NAME}.toss-ads-tone-grey { background: #f2f4f7; }
+    @media (prefers-color-scheme: dark) {
+      .${ATTACH_CLASS_NAME} { background: #17171c; }
+      .${ATTACH_CLASS_NAME}.toss-ads-tone-grey { background: #101013; }
+    }
+    .${ATTACH_CLASS_NAME}.toss-ads-theme-light { background: #ffffff; }
+    .${ATTACH_CLASS_NAME}.toss-ads-theme-light.toss-ads-tone-grey { background: #f2f4f7; }
+    .${ATTACH_CLASS_NAME}.toss-ads-theme-dark { background: #17171c; }
+    .${ATTACH_CLASS_NAME}.toss-ads-theme-dark.toss-ads-tone-grey { background: #101013; }
+  `;
+  const styleContainer = documentRef.head ?? documentRef.body ?? documentRef.documentElement;
+  if (!styleContainer) {
+    return;
+  }
+  styleContainer.appendChild(style);
+}
+function attachBanner(adGroupId, target, options = {}) {
+  const {
+    callbacks,
+    theme = DEFAULT_ATTACH_THEME,
+    tone = DEFAULT_ATTACH_TONE,
+    variant = DEFAULT_ATTACH_VARIANT
+  } = options;
+  const wrapper = document.createElement("div");
+  wrapper.style.width = "100%";
+  wrapper.style.height = "100%";
+  wrapper.style.boxSizing = "border-box";
+  wrapper.style.display = "flex";
+  wrapper.style.flexDirection = "column";
+  wrapper.style.justifyContent = "center";
+  wrapper.style.overflow = "hidden";
+  if (variant === "card") {
+    wrapper.style.padding = "0 10px";
+  }
+  const element = document.createElement("div");
+  element.classList.add(ATTACH_CLASS_NAME);
+  if (tone === "grey") {
+    element.classList.add("toss-ads-tone-grey");
+  }
+  if (theme === "light") {
+    element.classList.add("toss-ads-theme-light");
+  } else if (theme === "dark") {
+    element.classList.add("toss-ads-theme-dark");
+  }
+  if (variant === "card") {
+    element.style.borderRadius = "16px";
+    element.style.overflow = "hidden";
+  }
+  wrapper.appendChild(element);
+  let isAttached = false;
+  let slot = null;
+  const rejectAttached = (error) => {
+    const normalizedError = error instanceof Error ? error : new Error(String(error));
+    callbacks?.onAdFailedToRender?.({
+      slotId: "",
+      adGroupId,
+      adMetadata: {},
+      error: { code: 0, message: normalizedError.message }
+    });
+  };
+  const wrappedCallbacks = wrapCallbacks(adGroupId, callbacks);
+  try {
+    const spaceId = adGroupId;
+    const sdk = getAdsSdk();
+    if (!sdk) {
+      throw new Error("[toss-ad] Call initialize() before attaching an ad.");
+    }
+    if (!sdk.banner) {
+      throw new Error("[toss-ad] Loaded TossAdsSpaceKit does not support banner ads.");
+    }
+    const container = typeof target === "string" ? document.querySelector(target) : target;
+    if (!container) {
+      throw new Error(`[toss-ad] Failed to find target element: ${target}`);
+    }
+    ensureAttachStyles(container);
+    container.appendChild(wrapper);
+    isAttached = true;
+    const slotOptions = {
+      spaceId,
+      autoLoad: true,
+      theme: theme === "auto" ? void 0 : theme,
+      renderPadding: (styleId) => {
+        if (styleId === "1") {
+          return DEFAULT_ATTACH_PADDING_BANNER;
+        } else {
+          return DEFAULT_ATTACH_PADDING_NATIVE_IMAGE;
+        }
+      },
+      callbacks: wrappedCallbacks
+    };
+    slot = sdk.banner.createSlot(element, slotOptions);
+  } catch (error) {
+    if (isAttached && wrapper.parentNode) {
+      wrapper.parentNode.removeChild(wrapper);
+    }
+    rejectAttached(error);
+  }
+  return {
+    destroy() {
+      slot?.destroy();
+      if (isAttached && wrapper.parentNode) {
+        wrapper.parentNode.removeChild(wrapper);
+      }
+    }
+  };
+}
 function destroy(slotId) {
   const sdk = getAdsSdk();
   if (!sdk?.banner) {
@@ -1184,6 +1316,9 @@ var TossAds = {
   attach: Object.assign(attach, {
     isSupported: fetchTossAd.isSupported
   }),
+  attachBanner: Object.assign(attachBanner, {
+    isSupported: fetchTossAd.isSupported
+  }),
   destroy: Object.assign(destroy, {
     isSupported: fetchTossAd.isSupported
   }),

package/dist/index.d.cts

@@ -842,6 +842,7 @@ interface BannerSlotOptions {
     refetchIntervalMs?: number;
     theme?: 'light' | 'dark';
     padding?: string;
+    renderPadding?: (styleId: string) => string;
     callbacks?: BannerSlotCallbacks;
 }
 interface BannerSlot {
@@ -868,9 +869,19 @@ interface AttachOptions {
     padding?: string;
     callbacks?: BannerSlotCallbacks;
 }
+interface AttachBannerOptions {
+    theme?: 'auto' | 'light' | 'dark';
+    tone?: 'blackAndWhite' | 'grey';
+    variant?: 'card' | 'expanded';
+    callbacks?: BannerSlotCallbacks;
+}
+interface AttachBannerResult {
+    destroy: () => void;
+}
 
 declare function initialize(options: InitializeOptions): void;
 declare function attach(adGroupId: string, target: string | HTMLElement, options?: AttachOptions): void;
+declare function attachBanner(adGroupId: string, target: string | HTMLElement, options?: AttachBannerOptions): AttachBannerResult;
 declare function destroy(slotId: string): void;
 declare function destroyAll(): void;
 declare const TossAds: {
@@ -880,6 +891,9 @@ declare const TossAds: {
     attach: typeof attach & {
         isSupported: () => boolean;
     };
+    attachBanner: typeof attachBanner & {
+        isSupported: () => boolean;
+    };
     destroy: typeof destroy & {
         isSupported: () => boolean;
     };
@@ -892,4 +906,4 @@ declare const getServerTime: (() => Promise<number | undefined>) & {
     isSupported: () => boolean;
 };
 
-export { type AddAccessoryButtonOptions, type AppsInTossEvent, type AppsInTossGlobals, type CompletedOrRefundedOrdersResult, GoogleAdMob, type GraniteEvent, IAP, type IapCreateOneTimePurchaseOrderOptions, type IapProductListItem, SafeAreaInsets$1 as SafeAreaInsets, Storage, type TdsEvent, TossAds, type AttachOptions as TossAdsAttachOptions, type BannerSlotCallbacks as TossAdsBannerSlotCallbacks, type BannerSlotErrorPayload as TossAdsBannerSlotErrorPayload, type BannerSlotEventPayload as TossAdsBannerSlotEventPayload, type InitializeOptions as TossAdsInitializeOptions, appsInTossEvent, env, fetchAlbumPhotos, fetchContacts, getAppsInTossGlobals, getClipboardText, getCurrentLocation, getSafeAreaInsets, getServerTime, graniteEvent, isMinVersionSupported, loadFullScreenAd, openCamera, partner, setClipboardText, showFullScreenAd, startUpdateLocation, tdsEvent };
+export { type AddAccessoryButtonOptions, type AppsInTossEvent, type AppsInTossGlobals, type CompletedOrRefundedOrdersResult, GoogleAdMob, type GraniteEvent, IAP, type IapCreateOneTimePurchaseOrderOptions, type IapProductListItem, SafeAreaInsets$1 as SafeAreaInsets, Storage, type TdsEvent, TossAds, type AttachBannerOptions as TossAdsAttachBannerOptions, type AttachBannerResult as TossAdsAttachBannerResult, type AttachOptions as TossAdsAttachOptions, type BannerSlotCallbacks as TossAdsBannerSlotCallbacks, type BannerSlotErrorPayload as TossAdsBannerSlotErrorPayload, type BannerSlotEventPayload as TossAdsBannerSlotEventPayload, type InitializeOptions as TossAdsInitializeOptions, appsInTossEvent, env, fetchAlbumPhotos, fetchContacts, getAppsInTossGlobals, getClipboardText, getCurrentLocation, getSafeAreaInsets, getServerTime, graniteEvent, isMinVersionSupported, loadFullScreenAd, openCamera, partner, setClipboardText, showFullScreenAd, startUpdateLocation, tdsEvent };

package/dist/index.d.ts

@@ -842,6 +842,7 @@ interface BannerSlotOptions {
     refetchIntervalMs?: number;
     theme?: 'light' | 'dark';
     padding?: string;
+    renderPadding?: (styleId: string) => string;
     callbacks?: BannerSlotCallbacks;
 }
 interface BannerSlot {
@@ -868,9 +869,19 @@ interface AttachOptions {
     padding?: string;
     callbacks?: BannerSlotCallbacks;
 }
+interface AttachBannerOptions {
+    theme?: 'auto' | 'light' | 'dark';
+    tone?: 'blackAndWhite' | 'grey';
+    variant?: 'card' | 'expanded';
+    callbacks?: BannerSlotCallbacks;
+}
+interface AttachBannerResult {
+    destroy: () => void;
+}
 
 declare function initialize(options: InitializeOptions): void;
 declare function attach(adGroupId: string, target: string | HTMLElement, options?: AttachOptions): void;
+declare function attachBanner(adGroupId: string, target: string | HTMLElement, options?: AttachBannerOptions): AttachBannerResult;
 declare function destroy(slotId: string): void;
 declare function destroyAll(): void;
 declare const TossAds: {
@@ -880,6 +891,9 @@ declare const TossAds: {
     attach: typeof attach & {
         isSupported: () => boolean;
     };
+    attachBanner: typeof attachBanner & {
+        isSupported: () => boolean;
+    };
     destroy: typeof destroy & {
         isSupported: () => boolean;
     };
@@ -892,4 +906,4 @@ declare const getServerTime: (() => Promise<number | undefined>) & {
     isSupported: () => boolean;
 };
 
-export { type AddAccessoryButtonOptions, type AppsInTossEvent, type AppsInTossGlobals, type CompletedOrRefundedOrdersResult, GoogleAdMob, type GraniteEvent, IAP, type IapCreateOneTimePurchaseOrderOptions, type IapProductListItem, SafeAreaInsets$1 as SafeAreaInsets, Storage, type TdsEvent, TossAds, type AttachOptions as TossAdsAttachOptions, type BannerSlotCallbacks as TossAdsBannerSlotCallbacks, type BannerSlotErrorPayload as TossAdsBannerSlotErrorPayload, type BannerSlotEventPayload as TossAdsBannerSlotEventPayload, type InitializeOptions as TossAdsInitializeOptions, appsInTossEvent, env, fetchAlbumPhotos, fetchContacts, getAppsInTossGlobals, getClipboardText, getCurrentLocation, getSafeAreaInsets, getServerTime, graniteEvent, isMinVersionSupported, loadFullScreenAd, openCamera, partner, setClipboardText, showFullScreenAd, startUpdateLocation, tdsEvent };
+export { type AddAccessoryButtonOptions, type AppsInTossEvent, type AppsInTossGlobals, type CompletedOrRefundedOrdersResult, GoogleAdMob, type GraniteEvent, IAP, type IapCreateOneTimePurchaseOrderOptions, type IapProductListItem, SafeAreaInsets$1 as SafeAreaInsets, Storage, type TdsEvent, TossAds, type AttachBannerOptions as TossAdsAttachBannerOptions, type AttachBannerResult as TossAdsAttachBannerResult, type AttachOptions as TossAdsAttachOptions, type BannerSlotCallbacks as TossAdsBannerSlotCallbacks, type BannerSlotErrorPayload as TossAdsBannerSlotErrorPayload, type BannerSlotEventPayload as TossAdsBannerSlotEventPayload, type InitializeOptions as TossAdsInitializeOptions, appsInTossEvent, env, fetchAlbumPhotos, fetchContacts, getAppsInTossGlobals, getClipboardText, getCurrentLocation, getSafeAreaInsets, getServerTime, graniteEvent, isMinVersionSupported, loadFullScreenAd, openCamera, partner, setClipboardText, showFullScreenAd, startUpdateLocation, tdsEvent };

package/dist/index.js

@@ -1025,26 +1025,33 @@ function createCustomAdFetcher() {
 var pendingLoad2 = null;
 function initialize(options) {
   const { callbacks } = options;
-  if (window.TossAdsSpaceKit != null && window.TossAdsSpaceKit.isInitialized()) {
-    callbacks?.onInitializationFailed?.(new Error("[toss-ad] Already initialized."));
-    return;
-  }
-  if (pendingLoad2 != null) {
-    callbacks?.onInitializationFailed?.(new Error("[toss-ad] initialization already in progress."));
-  }
   const resolveInitialized = () => callbacks?.onInitialized?.();
   const rejectInitialized = (error) => {
     const normalizedError = error instanceof Error ? error : new Error(String(error));
     callbacks?.onInitializationFailed?.(normalizedError);
   };
-  pendingLoad2 = loadAdsSdk().then((sdk) => {
+  const existingSdk = getAdsSdk();
+  if (existingSdk?.isInitialized()) {
+    resolveInitialized();
+    return;
+  }
+  if (pendingLoad2 != null) {
+    pendingLoad2.then(resolveInitialized).catch(rejectInitialized);
+    return;
+  }
+  const initPromise = loadAdsSdk().then((sdk) => {
+    if (sdk.isInitialized()) {
+      return;
+    }
     const customAdFetcher = createCustomAdFetcher();
     const config = { environment: "live", customAdFetcher, opener: openUrlOpener };
     sdk.init(config);
-    resolveInitialized();
-  }).catch((error) => {
-    pendingLoad2 = null;
-    rejectInitialized(error);
+  });
+  pendingLoad2 = initPromise;
+  initPromise.then(resolveInitialized).catch(rejectInitialized).finally(() => {
+    if (pendingLoad2 === initPromise) {
+      pendingLoad2 = null;
+    }
   });
 }
 function attach(adGroupId, target, options = {}) {
@@ -1083,6 +1090,131 @@ function attach(adGroupId, target, options = {}) {
     rejectAttached(error);
   }
 }
+var DEFAULT_ATTACH_PADDING_BANNER = "16px 20px";
+var DEFAULT_ATTACH_PADDING_NATIVE_IMAGE = "20px";
+var DEFAULT_ATTACH_THEME = "auto";
+var DEFAULT_ATTACH_TONE = "blackAndWhite";
+var DEFAULT_ATTACH_VARIANT = "expanded";
+var ATTACH_CLASS_NAME = "toss-ads-attach";
+var ATTACH_STYLE_ID = "toss-ads-attach-style";
+function ensureAttachStyles(container) {
+  const documentRef = container.ownerDocument;
+  if (!documentRef) {
+    return;
+  }
+  if (documentRef.getElementById(ATTACH_STYLE_ID)) {
+    return;
+  }
+  const style = documentRef.createElement("style");
+  style.id = ATTACH_STYLE_ID;
+  style.textContent = `
+    .${ATTACH_CLASS_NAME} { background: #ffffff; }
+    .${ATTACH_CLASS_NAME}.toss-ads-tone-grey { background: #f2f4f7; }
+    @media (prefers-color-scheme: dark) {
+      .${ATTACH_CLASS_NAME} { background: #17171c; }
+      .${ATTACH_CLASS_NAME}.toss-ads-tone-grey { background: #101013; }
+    }
+    .${ATTACH_CLASS_NAME}.toss-ads-theme-light { background: #ffffff; }
+    .${ATTACH_CLASS_NAME}.toss-ads-theme-light.toss-ads-tone-grey { background: #f2f4f7; }
+    .${ATTACH_CLASS_NAME}.toss-ads-theme-dark { background: #17171c; }
+    .${ATTACH_CLASS_NAME}.toss-ads-theme-dark.toss-ads-tone-grey { background: #101013; }
+  `;
+  const styleContainer = documentRef.head ?? documentRef.body ?? documentRef.documentElement;
+  if (!styleContainer) {
+    return;
+  }
+  styleContainer.appendChild(style);
+}
+function attachBanner(adGroupId, target, options = {}) {
+  const {
+    callbacks,
+    theme = DEFAULT_ATTACH_THEME,
+    tone = DEFAULT_ATTACH_TONE,
+    variant = DEFAULT_ATTACH_VARIANT
+  } = options;
+  const wrapper = document.createElement("div");
+  wrapper.style.width = "100%";
+  wrapper.style.height = "100%";
+  wrapper.style.boxSizing = "border-box";
+  wrapper.style.display = "flex";
+  wrapper.style.flexDirection = "column";
+  wrapper.style.justifyContent = "center";
+  wrapper.style.overflow = "hidden";
+  if (variant === "card") {
+    wrapper.style.padding = "0 10px";
+  }
+  const element = document.createElement("div");
+  element.classList.add(ATTACH_CLASS_NAME);
+  if (tone === "grey") {
+    element.classList.add("toss-ads-tone-grey");
+  }
+  if (theme === "light") {
+    element.classList.add("toss-ads-theme-light");
+  } else if (theme === "dark") {
+    element.classList.add("toss-ads-theme-dark");
+  }
+  if (variant === "card") {
+    element.style.borderRadius = "16px";
+    element.style.overflow = "hidden";
+  }
+  wrapper.appendChild(element);
+  let isAttached = false;
+  let slot = null;
+  const rejectAttached = (error) => {
+    const normalizedError = error instanceof Error ? error : new Error(String(error));
+    callbacks?.onAdFailedToRender?.({
+      slotId: "",
+      adGroupId,
+      adMetadata: {},
+      error: { code: 0, message: normalizedError.message }
+    });
+  };
+  const wrappedCallbacks = wrapCallbacks(adGroupId, callbacks);
+  try {
+    const spaceId = adGroupId;
+    const sdk = getAdsSdk();
+    if (!sdk) {
+      throw new Error("[toss-ad] Call initialize() before attaching an ad.");
+    }
+    if (!sdk.banner) {
+      throw new Error("[toss-ad] Loaded TossAdsSpaceKit does not support banner ads.");
+    }
+    const container = typeof target === "string" ? document.querySelector(target) : target;
+    if (!container) {
+      throw new Error(`[toss-ad] Failed to find target element: ${target}`);
+    }
+    ensureAttachStyles(container);
+    container.appendChild(wrapper);
+    isAttached = true;
+    const slotOptions = {
+      spaceId,
+      autoLoad: true,
+      theme: theme === "auto" ? void 0 : theme,
+      renderPadding: (styleId) => {
+        if (styleId === "1") {
+          return DEFAULT_ATTACH_PADDING_BANNER;
+        } else {
+          return DEFAULT_ATTACH_PADDING_NATIVE_IMAGE;
+        }
+      },
+      callbacks: wrappedCallbacks
+    };
+    slot = sdk.banner.createSlot(element, slotOptions);
+  } catch (error) {
+    if (isAttached && wrapper.parentNode) {
+      wrapper.parentNode.removeChild(wrapper);
+    }
+    rejectAttached(error);
+  }
+  return {
+    destroy() {
+      slot?.destroy();
+      if (isAttached && wrapper.parentNode) {
+        wrapper.parentNode.removeChild(wrapper);
+      }
+    }
+  };
+}
 function destroy(slotId) {
   const sdk = getAdsSdk();
   if (!sdk?.banner) {
@@ -1137,6 +1269,9 @@ var TossAds = {
   attach: Object.assign(attach, {
     isSupported: fetchTossAd.isSupported
   }),
+  attachBanner: Object.assign(attachBanner, {
+    isSupported: fetchTossAd.isSupported
+  }),
   destroy: Object.assign(destroy, {
     isSupported: fetchTossAd.isSupported
   }),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/web-bridge",
   "type": "module",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Web Bridge for Apps In Toss",
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -27,11 +27,11 @@
     "dist"
   ],
   "dependencies": {
-    "@apps-in-toss/types": "1.10.1"
+    "@apps-in-toss/types": "1.11.0"
   },
   "devDependencies": {
-    "@apps-in-toss/bridge-core": "1.10.1",
-    "@apps-in-toss/native-modules": "^1.10.1",
+    "@apps-in-toss/bridge-core": "1.11.0",
+    "@apps-in-toss/native-modules": "^1.11.0",
     "@swc/core": "^1.12.7",
     "picocolors": "^1.1.1",
     "ts-morph": "^26.0.0",