@apps-in-toss/framework 0.0.11 → 0.0.12

package/dist/index.cjs

@@ -199,14 +199,6 @@ async function fetchAlbumPhotos(options) {
     maxCount: options.maxCount ?? DEFAULT_MAX_COUNT,
     maxWidth: options.maxWidth ?? DEFAULT_MAX_WIDTH
   });
-  if (options.base64) {
-    return albumPhotos.map((photo) => {
-      return {
-        ...photo,
-        dataUri: `data:image/jpeg;base64,${photo.dataUri}`
-      };
-    });
-  }
   return albumPhotos;
 }
 
@@ -265,6 +257,11 @@ __export(constant_bridges_exports, {
   getOperationalEnvironment: () => getOperationalEnvironment
 });
 
+// src/env.ts
+var env = {
+  getDeploymentId: () => __DEV__ ? "local" : global.__appsInToss?.deploymentId
+};
+
 // src/event-bridges.ts
 var event_bridges_exports = {};
 __export(event_bridges_exports, {
@@ -278,7 +275,12 @@ function WebView({ local, onMessage, ...props }) {
     if (__DEV__) {
       return `http://${local.host}:${local.port}`;
     }
-    return AppsInTossModule.getWebBundleURL({}).url;
+    const url = new URL(AppsInTossModule.getWebBundleURL({}).url);
+    const deploymentId = env.getDeploymentId();
+    if (deploymentId) {
+      url.searchParams.set("_deploymentId", deploymentId);
+    }
+    return url.toString();
   }, [local]);
   const handler = (0, import_react_native_bedrock4.useBridgeHandler)({
     onMessage,
@@ -302,9 +304,13 @@ function WebView({ local, onMessage, ...props }) {
     {
       ref: handler.ref,
       ...props,
-      source: { uri },
+      source: {
+        uri
+      },
       sharedCookiesEnabled: true,
       thirdPartyCookiesEnabled: true,
+      cacheEnabled: false,
+      cacheMode: "LOAD_NO_CACHE",
       onMessage: handler.onMessage,
       injectedJavaScript: handler.injectedJavaScript,
       injectedJavaScriptBeforeContentLoaded: handler.injectedJavaScript
@@ -335,11 +341,6 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   return location;
 }
 
-// src/env.ts
-var env = {
-  getDeploymentId: () => __DEV__ ? "local" : global.__appsInToss?.deploymentId
-};
-
 // src/types.ts
 var Accuracy2 = /* @__PURE__ */ ((Accuracy3) => {
   Accuracy3[Accuracy3["Lowest"] = 1] = "Lowest";

package/dist/index.d.cts

@@ -300,17 +300,36 @@ interface ContactEntity {
  * - `nextOffset`: 다음 호출에 사용할 오프셋 값이에요. 더 가져올 연락처가 없으면 `null`이에요.
  * - `done`: 모든 연락처를 다 가져왔는지 여부를 나타내요. 모두 가져왔다면 `true`예요.
  *
+ * @signature
+ * ```typescript
+ * function fetchContacts({ size, offset, query }: {
+ *  size: number;
+ *  offset: number;
+ *  query?: {
+ *    contains?: string;
+ *  };
+ * }): Promise<{
+ *  result: ContactEntity[];
+ *  nextOffset: number | null;
+ *  done: boolean;
+ *  }>;
+ * ```
+ *
  * @example
  * ### 특정 문자열이 포함된 연락처 목록 가져오기
  *
  * ```tsx
  * import React, { useState } from 'react';
  * import { View, Text, Button } from 'react-native';
- * import { fetchContacts } from '@apps-in-toss/framework';
+ * import { fetchContacts, ContactEntity } from '@apps-in-toss/framework';
  *
  * // 특정 문자열을 포함한 연락처 목록을 가져와 화면에 표시하는 컴포넌트
  * function ContactsList() {
- *   const [contacts, setContacts] = useState({
+ *   const [contacts, setContacts] = useState<{
+ *     result: ContactEntity[];
+ *     nextOffset: number | null;
+ *     done: boolean;
+ *   }>({
  *     result: [],
  *     nextOffset: null,
  *     done: false,
@@ -326,7 +345,7 @@ interface ContactEntity {
  *       const response = await fetchContacts({
  *         size: 10,
  *         offset: contacts.nextOffset ?? 0,
- *         query: { contains: '홍길동' },
+ *         query: { contains: '김' },
  *       });
  *       setContacts((prev) => ({
  *         result: [...prev.result, ...response.result],
@@ -399,6 +418,8 @@ interface FetchAlbumPhotosOptions {
  * import { View, Image, Button } from 'react-native';
  * import { fetchAlbumPhotos } from '@apps-in-toss/framework';
  *
+ * const base64 = true;
+ *
  * // 앨범 사진 목록을 가져와 화면에 표시하는 컴포넌트
  * function AlbumPhotoList() {
  *   const [albumPhotos, setAlbumPhotos] = useState([]);
@@ -406,7 +427,7 @@ interface FetchAlbumPhotosOptions {
  *   const handlePress = async () => {
  *     try {
  *       const response = await fetchAlbumPhotos({
- *         base64: true,
+ *         base64,
  *         maxWidth: 360,
  *       });
  *       setAlbumPhotos((prev) => ([...prev, ...response]));
@@ -417,9 +438,12 @@ interface FetchAlbumPhotosOptions {
  *
  *   return (
  *     <View>
- *       {albumPhotos.map((image) => (
- *         <Image source={{ uri: image.dataUri }} key={image.id} />
- *       ))}
+ *       {albumPhotos.map((image) => {
+ *         // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
+ *         const imageUri = base64 ? 'data:image/jpeg;base64,' + image.dataUri : image.dataUri;
+ *
+ *         return <Image source={{ uri: imageUri }} key={image.id} />;
+ *       })}
  *       <Button title="앨범 가져오기" onPress={handlePress} />
  *     </View>
  *   );
@@ -517,23 +541,28 @@ interface OpenCameraOptions {
  * import { View, Text, Button, Image } from 'react-native';
  * import { openCamera } from '@apps-in-toss/framework';
  *
+ * const base64 = true;
+ *
  * // 카메라를 실행하고 촬영된 이미지를 화면에 표시하는 컴포넌트
  * function Camera() {
  *   const [image, setImage] = useState(null);
  *
  *   const handlePress = async () => {
  *     try {
- *       const response = await openCamera({ base64: false });
+ *       const response = await openCamera({ base64 });
  *       setImage(response);
  *     } catch (error) {
  *       console.error('사진을 가져오는 데 실패했어요:', error);
  *     }
  *   };
  *
+ *   // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
+ *   const imageUri = base64 ? 'data:image/jpeg;base64,' + image.dataUri : image.dataUri;
+ *
  *   return (
  *     <View>
  *       {image ? (
- *         <Image source={{ uri: image.dataUri }} style={{ width: 200, height: 200 }} />
+ *         <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
  *       ) : (
  *         <Text>사진이 없어요</Text>
  *       )}
@@ -608,7 +637,7 @@ declare function appLogin(): Promise<{
  */
 declare function getOperationalEnvironment(): 'toss' | 'sandbox';
 
-interface WebViewProps extends Omit<WebViewProps$1, 'source' | 'sharedCookiesEnabled' | 'thirdPartyCookiesEnabled' | 'injectedJavaScriptBeforeContentLoaded'> {
+interface WebViewProps extends Omit<WebViewProps$1, 'cacheEnabled' | 'source' | 'sharedCookiesEnabled' | 'thirdPartyCookiesEnabled' | 'injectedJavaScriptBeforeContentLoaded'> {
     local: {
         port: number;
         host: number;

package/dist/index.d.ts

@@ -300,17 +300,36 @@ interface ContactEntity {
  * - `nextOffset`: 다음 호출에 사용할 오프셋 값이에요. 더 가져올 연락처가 없으면 `null`이에요.
  * - `done`: 모든 연락처를 다 가져왔는지 여부를 나타내요. 모두 가져왔다면 `true`예요.
  *
+ * @signature
+ * ```typescript
+ * function fetchContacts({ size, offset, query }: {
+ *  size: number;
+ *  offset: number;
+ *  query?: {
+ *    contains?: string;
+ *  };
+ * }): Promise<{
+ *  result: ContactEntity[];
+ *  nextOffset: number | null;
+ *  done: boolean;
+ *  }>;
+ * ```
+ *
  * @example
  * ### 특정 문자열이 포함된 연락처 목록 가져오기
  *
  * ```tsx
  * import React, { useState } from 'react';
  * import { View, Text, Button } from 'react-native';
- * import { fetchContacts } from '@apps-in-toss/framework';
+ * import { fetchContacts, ContactEntity } from '@apps-in-toss/framework';
  *
  * // 특정 문자열을 포함한 연락처 목록을 가져와 화면에 표시하는 컴포넌트
  * function ContactsList() {
- *   const [contacts, setContacts] = useState({
+ *   const [contacts, setContacts] = useState<{
+ *     result: ContactEntity[];
+ *     nextOffset: number | null;
+ *     done: boolean;
+ *   }>({
  *     result: [],
  *     nextOffset: null,
  *     done: false,
@@ -326,7 +345,7 @@ interface ContactEntity {
  *       const response = await fetchContacts({
  *         size: 10,
  *         offset: contacts.nextOffset ?? 0,
- *         query: { contains: '홍길동' },
+ *         query: { contains: '김' },
  *       });
  *       setContacts((prev) => ({
  *         result: [...prev.result, ...response.result],
@@ -399,6 +418,8 @@ interface FetchAlbumPhotosOptions {
  * import { View, Image, Button } from 'react-native';
  * import { fetchAlbumPhotos } from '@apps-in-toss/framework';
  *
+ * const base64 = true;
+ *
  * // 앨범 사진 목록을 가져와 화면에 표시하는 컴포넌트
  * function AlbumPhotoList() {
  *   const [albumPhotos, setAlbumPhotos] = useState([]);
@@ -406,7 +427,7 @@ interface FetchAlbumPhotosOptions {
  *   const handlePress = async () => {
  *     try {
  *       const response = await fetchAlbumPhotos({
- *         base64: true,
+ *         base64,
  *         maxWidth: 360,
  *       });
  *       setAlbumPhotos((prev) => ([...prev, ...response]));
@@ -417,9 +438,12 @@ interface FetchAlbumPhotosOptions {
  *
  *   return (
  *     <View>
- *       {albumPhotos.map((image) => (
- *         <Image source={{ uri: image.dataUri }} key={image.id} />
- *       ))}
+ *       {albumPhotos.map((image) => {
+ *         // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
+ *         const imageUri = base64 ? 'data:image/jpeg;base64,' + image.dataUri : image.dataUri;
+ *
+ *         return <Image source={{ uri: imageUri }} key={image.id} />;
+ *       })}
  *       <Button title="앨범 가져오기" onPress={handlePress} />
  *     </View>
  *   );
@@ -517,23 +541,28 @@ interface OpenCameraOptions {
  * import { View, Text, Button, Image } from 'react-native';
  * import { openCamera } from '@apps-in-toss/framework';
  *
+ * const base64 = true;
+ *
  * // 카메라를 실행하고 촬영된 이미지를 화면에 표시하는 컴포넌트
  * function Camera() {
  *   const [image, setImage] = useState(null);
  *
  *   const handlePress = async () => {
  *     try {
- *       const response = await openCamera({ base64: false });
+ *       const response = await openCamera({ base64 });
  *       setImage(response);
  *     } catch (error) {
  *       console.error('사진을 가져오는 데 실패했어요:', error);
  *     }
  *   };
  *
+ *   // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
+ *   const imageUri = base64 ? 'data:image/jpeg;base64,' + image.dataUri : image.dataUri;
+ *
  *   return (
  *     <View>
  *       {image ? (
- *         <Image source={{ uri: image.dataUri }} style={{ width: 200, height: 200 }} />
+ *         <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
  *       ) : (
  *         <Text>사진이 없어요</Text>
  *       )}
@@ -608,7 +637,7 @@ declare function appLogin(): Promise<{
  */
 declare function getOperationalEnvironment(): 'toss' | 'sandbox';
 
-interface WebViewProps extends Omit<WebViewProps$1, 'source' | 'sharedCookiesEnabled' | 'thirdPartyCookiesEnabled' | 'injectedJavaScriptBeforeContentLoaded'> {
+interface WebViewProps extends Omit<WebViewProps$1, 'cacheEnabled' | 'source' | 'sharedCookiesEnabled' | 'thirdPartyCookiesEnabled' | 'injectedJavaScriptBeforeContentLoaded'> {
     local: {
         port: number;
         host: number;

package/dist/index.js

@@ -156,14 +156,6 @@ async function fetchAlbumPhotos(options) {
     maxCount: options.maxCount ?? DEFAULT_MAX_COUNT,
     maxWidth: options.maxWidth ?? DEFAULT_MAX_WIDTH
   });
-  if (options.base64) {
-    return albumPhotos.map((photo) => {
-      return {
-        ...photo,
-        dataUri: `data:image/jpeg;base64,${photo.dataUri}`
-      };
-    });
-  }
   return albumPhotos;
 }
 
@@ -224,6 +216,11 @@ __export(constant_bridges_exports, {
   getOperationalEnvironment: () => getOperationalEnvironment
 });
 
+// src/env.ts
+var env = {
+  getDeploymentId: () => __DEV__ ? "local" : global.__appsInToss?.deploymentId
+};
+
 // src/event-bridges.ts
 var event_bridges_exports = {};
 __export(event_bridges_exports, {
@@ -237,7 +234,12 @@ function WebView({ local, onMessage, ...props }) {
     if (__DEV__) {
       return `http://${local.host}:${local.port}`;
     }
-    return AppsInTossModule.getWebBundleURL({}).url;
+    const url = new URL(AppsInTossModule.getWebBundleURL({}).url);
+    const deploymentId = env.getDeploymentId();
+    if (deploymentId) {
+      url.searchParams.set("_deploymentId", deploymentId);
+    }
+    return url.toString();
   }, [local]);
   const handler = useBridgeHandler({
     onMessage,
@@ -261,9 +263,13 @@ function WebView({ local, onMessage, ...props }) {
     {
       ref: handler.ref,
       ...props,
-      source: { uri },
+      source: {
+        uri
+      },
       sharedCookiesEnabled: true,
       thirdPartyCookiesEnabled: true,
+      cacheEnabled: false,
+      cacheMode: "LOAD_NO_CACHE",
       onMessage: handler.onMessage,
       injectedJavaScript: handler.injectedJavaScript,
       injectedJavaScriptBeforeContentLoaded: handler.injectedJavaScript
@@ -294,11 +300,6 @@ function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   return location;
 }
 
-// src/env.ts
-var env = {
-  getDeploymentId: () => __DEV__ ? "local" : global.__appsInToss?.deploymentId
-};
-
 // src/types.ts
 var Accuracy2 = /* @__PURE__ */ ((Accuracy3) => {
   Accuracy3[Accuracy3["Lowest"] = 1] = "Lowest";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/framework",
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "The framework for Apps In Toss",
   "scripts": {
     "prepack": "yarn build",
@@ -55,7 +55,7 @@
     "ait": "./bin/ait.js"
   },
   "dependencies": {
-    "@apps-in-toss/cli": "0.0.11"
+    "@apps-in-toss/cli": "0.0.12"
   },
   "devDependencies": {
     "@react-native-bedrock/mpack-next": "0.0.13",
@@ -90,5 +90,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d0dfa84af3118a71ea3705c440e639fb5b1a010b"
+  "gitHead": "38b91e6f4a323333a6039119dd523fc44559bcae"
 }