@apps-in-toss/framework 1.4.6 → 1.4.8

package/dist/index.cjs

@@ -1377,10 +1377,11 @@ var import_native_modules18 = require("@apps-in-toss/native-modules");
 var appsInTossAsyncBridges = __toESM(require("@apps-in-toss/native-modules/async-bridges"), 1);
 var appsInTossConstantBridges = __toESM(require("@apps-in-toss/native-modules/constant-bridges"), 1);
 var appsInTossEventBridges = __toESM(require("@apps-in-toss/native-modules/event-bridges"), 1);
+var import_react_native_safe_area_context4 = require("@granite-js/native/react-native-safe-area-context");
 var import_react_native32 = require("@granite-js/react-native");
 var import_tds_react_native14 = require("@toss/tds-react-native");
 var import_private9 = require("@toss/tds-react-native/private");
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_native33 = require("react-native");
 
 // src/components/GameWebView.tsx
@@ -1609,6 +1610,9 @@ function useBridgeHandler({
     )};`,
     [constantHandlerMap]
   );
+  (0, import_react23.useEffect)(() => {
+    ref.current?.injectJavaScript(injectedJavaScript);
+  }, [injectedJavaScript]);
   const createHandleOnEvent = (functionName, eventId) => (response) => {
     ref.current?.injectJavaScript(`
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onEvent/${eventId}', ${JSON.stringify(response, null, 0)});
@@ -1678,14 +1682,50 @@ function parseNativeEventData(data) {
   }
 }
 
+// src/core/hooks/useSafeAreaInsetsEmitter.tsx
+var import_react_native_safe_area_context3 = require("@granite-js/native/react-native-safe-area-context");
+var import_react24 = require("react");
+var EventEmitter = class {
+  listeners = {};
+  on(event, listener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(listener);
+  }
+  emit(event, ...args) {
+    if (!this.listeners[event]) {
+      return;
+    }
+    this.listeners[event].forEach((listener) => listener(...args));
+  }
+  off(event, listener) {
+    if (!this.listeners[event]) {
+      return;
+    }
+    this.listeners[event] = this.listeners[event].filter((l) => l !== listener);
+  }
+};
+function useSafeAreaInsetsEmitter() {
+  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+  const emitter = (0, import_react24.useMemo)(() => new EventEmitter(), []);
+  (0, import_react24.useEffect)(() => {
+    emitter.emit("safeAreaInsetsChange", insets);
+    return () => {
+      emitter.off("safeAreaInsetsChange", (listener) => listener(insets));
+    };
+  }, [emitter, insets]);
+  return emitter;
+}
+
 // src/core/hooks/useWebBackHandler.tsx
 var import_react_native27 = require("@granite-js/react-native");
 var import_tds_react_native13 = require("@toss/tds-react-native");
 var import_es_hangul5 = require("es-hangul");
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/hooks/useWebviewHistoryStack.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var INITIAL_STATE = { stack: [], index: -1 };
 function reducer(state, action) {
   switch (action.type) {
@@ -1716,11 +1756,11 @@ function reducer(state, action) {
   }
 }
 function useWebViewHistory() {
-  const [state, dispatch] = (0, import_react24.useReducer)(reducer, INITIAL_STATE);
-  const onNavigationStateChange = (0, import_react24.useCallback)(({ url, canGoForward: canGoForward2 }) => {
+  const [state, dispatch] = (0, import_react25.useReducer)(reducer, INITIAL_STATE);
+  const onNavigationStateChange = (0, import_react25.useCallback)(({ url, canGoForward: canGoForward2 }) => {
     dispatch({ type: "NAVIGATION_CHANGE", url, canGoForward: canGoForward2 });
   }, []);
-  const { canGoBack, canGoForward } = (0, import_react24.useMemo)(() => {
+  const { canGoBack, canGoForward } = (0, import_react25.useMemo)(() => {
     const canBack = state.index > 0;
     const canFwd = state.index >= 0 && state.index < state.stack.length - 1;
     return { canGoBack: canBack, canGoForward: canFwd };
@@ -1753,19 +1793,19 @@ function useWebBackHandler(webViewRef) {
   const logging = useNavigationBarLogging();
   const { openConfirm } = (0, import_tds_react_native13.useDialog)();
   const global2 = getAppsInTossGlobals();
-  const addEventListener = (0, import_react25.useCallback)(
+  const addEventListener = (0, import_react26.useCallback)(
     (handler) => {
       addWebBackEventListener(handler);
     },
     [addWebBackEventListener]
   );
-  const removeEventListener = (0, import_react25.useCallback)(
+  const removeEventListener = (0, import_react26.useCallback)(
     (handler) => {
       removeWebBackEventListener(handler);
     },
     [removeWebBackEventListener]
   );
-  const handleWebBack = (0, import_react25.useCallback)(async () => {
+  const handleWebBack = (0, import_react26.useCallback)(async () => {
     if (hasWebBackEvent) {
       for (const handler of webBackHandlersRef) {
         handler();
@@ -1798,7 +1838,7 @@ function useWebBackHandler(webViewRef) {
     openConfirm,
     webViewRef
   ]);
-  const handleWebHome = (0, import_react25.useCallback)(() => {
+  const handleWebHome = (0, import_react26.useCallback)(() => {
     logging.homeButtonClick();
     if (hasWebBackEvent) {
       for (const handler of webBackHandlersRef) {
@@ -1808,7 +1848,7 @@ function useWebBackHandler(webViewRef) {
     }
     webViewRef.current?.injectJavaScript(HISTORY_HOME_SCRIPT);
   }, [hasWebBackEvent, webBackHandlersRef, logging, webViewRef]);
-  return (0, import_react25.useMemo)(
+  return (0, import_react26.useMemo)(
     () => ({ addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange }),
     [addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange]
   );
@@ -1986,11 +2026,11 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 var import_native_modules16 = require("@apps-in-toss/native-modules");
 var import_react_native29 = require("@granite-js/react-native");
-var import_react26 = require("react");
+var import_react27 = require("react");
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = (0, import_react_native29.useVisibility)();
-  const [location, setLocation] = (0, import_react26.useState)(null);
-  (0, import_react26.useEffect)(() => {
+  const [location, setLocation] = (0, import_react27.useState)(null);
+  (0, import_react27.useEffect)(() => {
     if (!isVisible) {
       return;
     }
@@ -2009,11 +2049,11 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
 
 // src/hooks/useWaitForReturnNavigator.tsx
 var import_react_native30 = require("@granite-js/react-native");
-var import_react27 = require("react");
+var import_react28 = require("react");
 function useWaitForReturnNavigator() {
-  const callbacks = (0, import_react27.useRef)([]).current;
+  const callbacks = (0, import_react28.useRef)([]).current;
   const navigation = (0, import_react_native30.useNavigation)();
-  const startNavigating = (0, import_react27.useCallback)(
+  const startNavigating = (0, import_react28.useCallback)(
     (route, params) => {
       return new Promise((resolve) => {
         callbacks.push(resolve);
@@ -2022,7 +2062,7 @@ function useWaitForReturnNavigator() {
     },
     [callbacks, navigation]
   );
-  const handleVisibilityChange = (0, import_react27.useCallback)(
+  const handleVisibilityChange = (0, import_react28.useCallback)(
     (state) => {
       if (state === "visible" && callbacks.length > 0) {
         for (const callback of callbacks) {
@@ -2130,14 +2170,16 @@ function WebView({ type, local, onMessage, ...props }) {
   if (!TYPES.includes(type)) {
     throw new Error(`Invalid WebView type: '${type}'`);
   }
-  const webViewRef = (0, import_react28.useRef)(null);
+  const webViewRef = (0, import_react29.useRef)(null);
   const webBackHandler = useWebBackHandler(webViewRef);
-  const uri = (0, import_react28.useMemo)(() => getWebViewUri(local), [local]);
+  const uri = (0, import_react29.useMemo)(() => getWebViewUri(local), [local]);
   const top = (0, import_private9.useSafeAreaTop)();
   const bottom = (0, import_private9.useSafeAreaBottom)();
+  const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const global2 = getAppsInTossGlobals();
   const navigationBarContext = useNavigationBarContext();
-  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react28.useState)(
+  const safeAreaInsetsEmitter = useSafeAreaInsetsEmitter();
+  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = (0, import_react29.useState)(
     props.allowsBackForwardNavigationGestures
   );
   const handler = useBridgeHandler({
@@ -2154,6 +2196,12 @@ function WebView({ type, local, onMessage, ...props }) {
       },
       entryMessageExited: ({ onEvent, onError }) => import_native_modules18.appsInTossEvent.addEventListener("entryMessageExited", { onEvent, onError }),
       updateLocationEvent: ({ onEvent, onError, options }) => import_native_modules18.appsInTossEvent.addEventListener("updateLocationEvent", { onEvent, onError, options }),
+      safeAreaInsetsChange: ({ onEvent }) => {
+        safeAreaInsetsEmitter.on("safeAreaInsetsChange", onEvent);
+        return () => {
+          safeAreaInsetsEmitter.off("safeAreaInsetsChange", onEvent);
+        };
+      },
       /** @internal */
       appBridgeCallbackEvent: ({ onEvent, onError, options }) => import_native_modules18.appsInTossEvent.addEventListener("appBridgeCallbackEvent", { onEvent, onError, options }),
       /** AdMob */
@@ -2172,6 +2220,8 @@ function WebView({ type, local, onMessage, ...props }) {
       ...appsInTossConstantBridges,
       getSafeAreaTop: () => top,
       getSafeAreaBottom: () => bottom,
+      getSafeAreaLeft: () => insets.left,
+      getSafeAreaRight: () => insets.right,
       ...Object.fromEntries(Object.entries(global2).map(([key, value]) => [key, () => value])),
       /** AdMob */
       loadAdMobInterstitialAd_isSupported: import_native_modules18.GoogleAdMob.loadAdMobInterstitialAd.isSupported,
@@ -2216,7 +2266,7 @@ function WebView({ type, local, onMessage, ...props }) {
       completeProductGrant: import_native_modules18.IAP.completeProductGrant
     }
   });
-  const headerPropForExternalWebView = (0, import_react28.useMemo)(() => {
+  const headerPropForExternalWebView = (0, import_react29.useMemo)(() => {
     const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
     const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
     const withBackButton = parsedNavigationBar?.withBackButton ?? true;
@@ -2237,7 +2287,7 @@ function WebView({ type, local, onMessage, ...props }) {
     colorPreference: "light"
   });
   const refs = mergeRefs(handler.ref, webViewRef);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const callback = () => {
       webBackHandler.handleWebBack();
       return true;
@@ -2334,12 +2384,8 @@ function useGlobalScripts() {
     })();
   `;
   return {
-    beforeLoad: mergeScripts(
-      global2.webViewType === "game" && applyGameResourcesCache
-    ),
-    afterLoad: mergeScripts(
-      disableTextSelectionCSS
-    )
+    beforeLoad: mergeScripts(global2.webViewType === "game" && applyGameResourcesCache),
+    afterLoad: mergeScripts(disableTextSelectionCSS)
   };
 }
 function mergeScripts(...scripts) {

package/dist/index.js

@@ -1358,10 +1358,11 @@ import {
 import * as appsInTossAsyncBridges from "@apps-in-toss/native-modules/async-bridges";
 import * as appsInTossConstantBridges from "@apps-in-toss/native-modules/constant-bridges";
 import * as appsInTossEventBridges from "@apps-in-toss/native-modules/event-bridges";
+import { useSafeAreaInsets as useSafeAreaInsets4 } from "@granite-js/native/react-native-safe-area-context";
 import { getSchemeUri as getSchemeUri6 } from "@granite-js/react-native";
 import { ExternalWebViewScreen, tdsEvent } from "@toss/tds-react-native";
 import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop3 } from "@toss/tds-react-native/private";
-import { useEffect as useEffect12, useMemo as useMemo6, useRef as useRef6, useState as useState8 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo7, useRef as useRef6, useState as useState8 } from "react";
 import { BackHandler as BackHandler2, Platform as Platform6 } from "react-native";
 
 // src/components/GameWebView.tsx
@@ -1529,7 +1530,7 @@ var PartnerWebView = forwardRef2(function PartnerWebViewScreen({ onBackButtonCli
 });
 
 // src/bridge-handler/useBridgeHandler.tsx
-import { useCallback as useCallback10, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect11, useMemo as useMemo3, useRef as useRef4 } from "react";
 function serializeError(error) {
   return JSON.stringify(error, (_, value) => {
     if (value instanceof Error) {
@@ -1594,6 +1595,9 @@ function useBridgeHandler({
     )};`,
     [constantHandlerMap]
   );
+  useEffect11(() => {
+    ref.current?.injectJavaScript(injectedJavaScript);
+  }, [injectedJavaScript]);
   const createHandleOnEvent = (functionName, eventId) => (response) => {
     ref.current?.injectJavaScript(`
       window.__GRANITE_NATIVE_EMITTER.emit('${functionName}/onEvent/${eventId}', ${JSON.stringify(response, null, 0)});
@@ -1663,14 +1667,50 @@ function parseNativeEventData(data) {
   }
 }
 
+// src/core/hooks/useSafeAreaInsetsEmitter.tsx
+import { useSafeAreaInsets as useSafeAreaInsets3 } from "@granite-js/native/react-native-safe-area-context";
+import { useEffect as useEffect12, useMemo as useMemo4 } from "react";
+var EventEmitter = class {
+  listeners = {};
+  on(event, listener) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(listener);
+  }
+  emit(event, ...args) {
+    if (!this.listeners[event]) {
+      return;
+    }
+    this.listeners[event].forEach((listener) => listener(...args));
+  }
+  off(event, listener) {
+    if (!this.listeners[event]) {
+      return;
+    }
+    this.listeners[event] = this.listeners[event].filter((l) => l !== listener);
+  }
+};
+function useSafeAreaInsetsEmitter() {
+  const insets = useSafeAreaInsets3();
+  const emitter = useMemo4(() => new EventEmitter(), []);
+  useEffect12(() => {
+    emitter.emit("safeAreaInsetsChange", insets);
+    return () => {
+      emitter.off("safeAreaInsetsChange", (listener) => listener(insets));
+    };
+  }, [emitter, insets]);
+  return emitter;
+}
+
 // src/core/hooks/useWebBackHandler.tsx
 import { closeView as closeView6, useBackEventState } from "@granite-js/react-native";
 import { useDialog as useDialog7 } from "@toss/tds-react-native";
 import { josa as josa5 } from "es-hangul";
-import { useCallback as useCallback12, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo6 } from "react";
 
 // src/hooks/useWebviewHistoryStack.tsx
-import { useCallback as useCallback11, useMemo as useMemo4, useReducer } from "react";
+import { useCallback as useCallback11, useMemo as useMemo5, useReducer } from "react";
 var INITIAL_STATE = { stack: [], index: -1 };
 function reducer(state, action) {
   switch (action.type) {
@@ -1705,7 +1745,7 @@ function useWebViewHistory() {
   const onNavigationStateChange = useCallback11(({ url, canGoForward: canGoForward2 }) => {
     dispatch({ type: "NAVIGATION_CHANGE", url, canGoForward: canGoForward2 });
   }, []);
-  const { canGoBack, canGoForward } = useMemo4(() => {
+  const { canGoBack, canGoForward } = useMemo5(() => {
     const canBack = state.index > 0;
     const canFwd = state.index >= 0 && state.index < state.stack.length - 1;
     return { canGoBack: canBack, canGoForward: canFwd };
@@ -1793,7 +1833,7 @@ function useWebBackHandler(webViewRef) {
     }
     webViewRef.current?.injectJavaScript(HISTORY_HOME_SCRIPT);
   }, [hasWebBackEvent, webBackHandlersRef, logging, webViewRef]);
-  return useMemo5(
+  return useMemo6(
     () => ({ addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange }),
     [addEventListener, removeEventListener, handleWebBack, handleWebHome, onNavigationStateChange]
   );
@@ -1971,11 +2011,11 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 import { startUpdateLocation } from "@apps-in-toss/native-modules";
 import { useVisibility as useVisibility3 } from "@granite-js/react-native";
-import { useEffect as useEffect11, useState as useState7 } from "react";
+import { useEffect as useEffect13, useState as useState7 } from "react";
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = useVisibility3();
   const [location, setLocation] = useState7(null);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isVisible) {
       return;
     }
@@ -2117,11 +2157,13 @@ function WebView({ type, local, onMessage, ...props }) {
   }
   const webViewRef = useRef6(null);
   const webBackHandler = useWebBackHandler(webViewRef);
-  const uri = useMemo6(() => getWebViewUri(local), [local]);
+  const uri = useMemo7(() => getWebViewUri(local), [local]);
   const top = useSafeAreaTop3();
   const bottom = useSafeAreaBottom();
+  const insets = useSafeAreaInsets4();
   const global2 = getAppsInTossGlobals();
   const navigationBarContext = useNavigationBarContext();
+  const safeAreaInsetsEmitter = useSafeAreaInsetsEmitter();
   const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = useState8(
     props.allowsBackForwardNavigationGestures
   );
@@ -2139,6 +2181,12 @@ function WebView({ type, local, onMessage, ...props }) {
       },
       entryMessageExited: ({ onEvent, onError }) => appsInTossEvent4.addEventListener("entryMessageExited", { onEvent, onError }),
       updateLocationEvent: ({ onEvent, onError, options }) => appsInTossEvent4.addEventListener("updateLocationEvent", { onEvent, onError, options }),
+      safeAreaInsetsChange: ({ onEvent }) => {
+        safeAreaInsetsEmitter.on("safeAreaInsetsChange", onEvent);
+        return () => {
+          safeAreaInsetsEmitter.off("safeAreaInsetsChange", onEvent);
+        };
+      },
       /** @internal */
       appBridgeCallbackEvent: ({ onEvent, onError, options }) => appsInTossEvent4.addEventListener("appBridgeCallbackEvent", { onEvent, onError, options }),
       /** AdMob */
@@ -2157,6 +2205,8 @@ function WebView({ type, local, onMessage, ...props }) {
       ...appsInTossConstantBridges,
       getSafeAreaTop: () => top,
       getSafeAreaBottom: () => bottom,
+      getSafeAreaLeft: () => insets.left,
+      getSafeAreaRight: () => insets.right,
       ...Object.fromEntries(Object.entries(global2).map(([key, value]) => [key, () => value])),
       /** AdMob */
       loadAdMobInterstitialAd_isSupported: GoogleAdMob.loadAdMobInterstitialAd.isSupported,
@@ -2201,7 +2251,7 @@ function WebView({ type, local, onMessage, ...props }) {
       completeProductGrant: IAP.completeProductGrant
     }
   });
-  const headerPropForExternalWebView = useMemo6(() => {
+  const headerPropForExternalWebView = useMemo7(() => {
     const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
     const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
     const withBackButton = parsedNavigationBar?.withBackButton ?? true;
@@ -2222,7 +2272,7 @@ function WebView({ type, local, onMessage, ...props }) {
     colorPreference: "light"
   });
   const refs = mergeRefs(handler.ref, webViewRef);
-  useEffect12(() => {
+  useEffect14(() => {
     const callback = () => {
       webBackHandler.handleWebBack();
       return true;
@@ -2319,12 +2369,8 @@ function useGlobalScripts() {
     })();
   `;
   return {
-    beforeLoad: mergeScripts(
-      global2.webViewType === "game" && applyGameResourcesCache
-    ),
-    afterLoad: mergeScripts(
-      disableTextSelectionCSS
-    )
+    beforeLoad: mergeScripts(global2.webViewType === "game" && applyGameResourcesCache),
+    afterLoad: mergeScripts(disableTextSelectionCSS)
   };
 }
 function mergeScripts(...scripts) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
@@ -56,11 +56,11 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/analytics": "1.4.6",
-    "@apps-in-toss/cli": "1.4.6",
-    "@apps-in-toss/native-modules": "1.4.6",
-    "@apps-in-toss/plugins": "1.4.6",
-    "@apps-in-toss/types": "1.4.6",
+    "@apps-in-toss/analytics": "1.4.8",
+    "@apps-in-toss/cli": "1.4.8",
+    "@apps-in-toss/native-modules": "1.4.8",
+    "@apps-in-toss/plugins": "1.4.8",
+    "@apps-in-toss/types": "1.4.8",
     "es-hangul": "^2.3.2"
   },
   "devDependencies": {
@@ -96,5 +96,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8ed7aaf219f9afa8146361cc4508d0c425f3b3d6"
+  "gitHead": "cc855970b30e1ce9098bd639b48212b8e21c0722"
 }