@hot-updater/react-native 0.5.1 → 0.5.2

package/dist/checkUpdate.d.ts

@@ -0,0 +1,6 @@
+import type { BundleArg, UpdateInfo } from "@hot-updater/core";
+export interface CheckForUpdateConfig {
+    source: BundleArg;
+    requestHeaders?: Record<string, string>;
+}
+export declare function checkForUpdate(config: CheckForUpdateConfig): Promise<UpdateInfo | null>;

package/dist/hooks/useEventCallback.d.ts

@@ -0,0 +1,4 @@
+type EventCallback<Args extends unknown[], R> = ((...args: Args) => R) | undefined;
+export declare function useEventCallback<Args extends unknown[], R>(fn: (...args: Args) => R): (...args: Args) => R;
+export declare function useEventCallback<Args extends unknown[], R>(fn: EventCallback<Args, R>): EventCallback<Args, R>;
+export {};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { checkForUpdate } from "./checkUpdate";
 import { wrap } from "./wrap";
 export type * from "./wrap";
 export type * from "./native";
@@ -8,7 +9,7 @@ export declare const HotUpdater: {
     getAppVersion: () => Promise<string | null>;
     getBundleId: () => string;
     addListener: <T extends keyof import("./native").HotUpdaterEvent>(eventName: T, listener: (event: import("./native").HotUpdaterEvent[T]) => void) => () => void;
-    ensureUpdateInfo: (source: import("@hot-updater/core").BundleArg, { appVersion, bundleId, platform }: import("@hot-updater/core").GetBundlesArgs, requestHeaders?: Record<string, string>) => Promise<import("@hot-updater/core").Bundle[] | import("@hot-updater/core").UpdateInfo>;
+    checkForUpdate: typeof checkForUpdate;
+    runUpdateProcess: ({ reloadOnForceUpdate, ...checkForUpdateConfig }: import("./runUpdateProcess").RunUpdateProcessConfig) => Promise<import("./runUpdateProcess").RunUpdateProcessResponse>;
     updateBundle: (bundleId: string, zipUrl: string | null) => Promise<boolean>;
-    getUpdateInfo: (bundles: import("@hot-updater/core").Bundle[], { platform, bundleId, appVersion }: import("@hot-updater/core").GetBundlesArgs) => Promise<import("@hot-updater/core").UpdateInfo | null>;
 };

package/dist/index.js

@@ -1582,9 +1582,18 @@ var __webpack_modules__ = {
         }, V = {
             transition: null
         };
+        exports1.useCallback = function(a, b) {
+            return U.current.useCallback(a, b);
+        };
         exports1.useEffect = function(a, b) {
             return U.current.useEffect(a, b);
         };
+        exports1.useLayoutEffect = function(a, b) {
+            return U.current.useLayoutEffect(a, b);
+        };
+        exports1.useRef = function(a) {
+            return U.current.useRef(a);
+        };
         exports1.useState = function(a) {
             return U.current.useState(a);
         };
@@ -1674,6 +1683,7 @@ __webpack_require__.d(__webpack_exports__, {
     HotUpdater: ()=>src_HotUpdater
 });
 const js_namespaceObject = require("@hot-updater/js");
+var external_react_native_ = __webpack_require__("react-native");
 const ensureUpdateInfo = async (source, { appVersion, bundleId, platform }, requestHeaders)=>{
     try {
         let bundles = null;
@@ -1692,8 +1702,13 @@ const ensureUpdateInfo = async (source, { appVersion, bundleId, platform }, requ
         return [];
     }
 };
+class HotUpdaterError extends Error {
+    constructor(message){
+        super(message);
+        this.name = "HotUpdaterError";
+    }
+}
 const core_namespaceObject = require("@hot-updater/core");
-var external_react_native_ = __webpack_require__("react-native");
 const HotUpdater = {
     HOT_UPDATER_BUNDLE_ID: core_namespaceObject.NIL_UUID
 };
@@ -1721,6 +1736,49 @@ const reload = ()=>{
     HotUpdaterNative.reload();
 };
 const getBundleId = ()=>HotUpdater.HOT_UPDATER_BUNDLE_ID;
+async function checkForUpdate(config) {
+    if (__DEV__) {
+        console.warn("[HotUpdater] __DEV__ is true, HotUpdater is only supported in production");
+        return null;
+    }
+    if (![
+        "ios",
+        "android"
+    ].includes(external_react_native_.Platform.OS)) throw new HotUpdaterError("HotUpdater is only supported on iOS and Android");
+    const currentAppVersion = await getAppVersion();
+    const platform = external_react_native_.Platform.OS;
+    const currentBundleId = await getBundleId();
+    if (!currentAppVersion) throw new HotUpdaterError("Failed to get app version");
+    const ensuredUpdateInfo = await ensureUpdateInfo(config.source, {
+        appVersion: currentAppVersion,
+        bundleId: currentBundleId,
+        platform
+    }, config.requestHeaders);
+    let updateInfo = null;
+    if (Array.isArray(ensuredUpdateInfo)) {
+        const bundles = ensuredUpdateInfo;
+        updateInfo = await (0, js_namespaceObject.getUpdateInfo)(bundles, {
+            appVersion: currentAppVersion,
+            bundleId: currentBundleId,
+            platform
+        });
+    } else updateInfo = ensuredUpdateInfo;
+    return updateInfo;
+}
+const runUpdateProcess = async ({ reloadOnForceUpdate = false, ...checkForUpdateConfig })=>{
+    const updateInfo = await checkForUpdate(checkForUpdateConfig);
+    if (!updateInfo) return {
+        status: "UP_TO_DATE"
+    };
+    const isUpdated = await updateBundle(updateInfo.id, updateInfo.fileUrl);
+    if (isUpdated && updateInfo.forceUpdate && reloadOnForceUpdate) reload();
+    if (!isUpdated) throw new Error("New update was found but failed to download the bundle.");
+    return {
+        status: updateInfo.status,
+        isForceUpdate: updateInfo.forceUpdate,
+        id: updateInfo.id
+    };
+};
 var react = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
 const createHotUpdaterStore = ()=>{
     let state = {
@@ -1751,88 +1809,65 @@ const createHotUpdaterStore = ()=>{
 };
 const hotUpdaterStore = createHotUpdaterStore();
 const useHotUpdaterStore = ()=>(0, react.useSyncExternalStore)(hotUpdaterStore.subscribe, hotUpdaterStore.getSnapshot, hotUpdaterStore.getSnapshot);
-class HotUpdaterError extends Error {
-    constructor(message){
-        super(message);
-        this.name = "HotUpdaterError";
-    }
-}
-async function checkUpdate(config) {
-    if (__DEV__) {
-        console.warn("[HotUpdater] __DEV__ is true, HotUpdater is only supported in production");
-        return null;
-    }
-    if (![
-        "ios",
-        "android"
-    ].includes(external_react_native_.Platform.OS)) throw new HotUpdaterError("HotUpdater is only supported on iOS and Android");
-    const currentAppVersion = await getAppVersion();
-    const platform = external_react_native_.Platform.OS;
-    const currentBundleId = await getBundleId();
-    if (!currentAppVersion) throw new HotUpdaterError("Failed to get app version");
-    const ensuredUpdateInfo = await ensureUpdateInfo(config.source, {
-        appVersion: currentAppVersion,
-        bundleId: currentBundleId,
-        platform
-    }, config.requestHeaders);
-    let updateInfo = null;
-    if (Array.isArray(ensuredUpdateInfo)) {
-        const bundles = ensuredUpdateInfo;
-        updateInfo = await (0, js_namespaceObject.getUpdateInfo)(bundles, {
-            appVersion: currentAppVersion,
-            bundleId: currentBundleId,
-            platform
-        });
-    } else updateInfo = ensuredUpdateInfo;
-    return updateInfo;
-}
-async function installUpdate(updateInfo) {
-    const isSuccess = await updateBundle(updateInfo.id, updateInfo.fileUrl || "");
-    if (isSuccess && updateInfo.forceUpdate) {
-        reload();
-        return true;
-    }
-    return isSuccess;
+function useEventCallback(fn) {
+    const callbackRef = (0, react.useRef)(()=>{
+        throw new Error("Cannot call an event handler while rendering.");
+    });
+    (0, react.useLayoutEffect)(()=>{
+        callbackRef.current = fn;
+    }, [
+        fn
+    ]);
+    return (0, react.useCallback)((...args)=>callbackRef.current?.(...args), [
+        callbackRef
+    ]);
 }
 function wrap(config) {
+    const { reloadOnForceUpdate = true, ...restConfig } = config;
     return (WrappedComponent)=>{
         const HotUpdaterHOC = ()=>{
             const { progress } = useHotUpdaterStore();
-            const [isCheckUpdateCompleted, setIsCheckUpdateCompleted] = (0, react.useState)(false);
+            const [status, setStatus] = (0, react.useState)("IDLE");
+            const initHotUpdater = useEventCallback(async ()=>{
+                try {
+                    setStatus("CHECK_FOR_UPDATE");
+                    const updateInfo = await checkForUpdate({
+                        source: restConfig.source,
+                        requestHeaders: restConfig.requestHeaders
+                    });
+                    if (!updateInfo) {
+                        restConfig.onUpdateProcessCompleted?.({
+                            status: "UP_TO_DATE"
+                        });
+                        setStatus("UPDATE_PROCESS_COMPLETED");
+                        return;
+                    }
+                    setStatus("UPDATING");
+                    const isSuccess = await updateBundle(updateInfo.id, updateInfo.fileUrl);
+                    if (!isSuccess) throw new Error("New update was found but failed to download the bundle.");
+                    if (updateInfo.forceUpdate && reloadOnForceUpdate) reload();
+                    restConfig.onUpdateProcessCompleted?.({
+                        id: updateInfo.id,
+                        status: updateInfo.status,
+                        isForceUpdate: updateInfo.forceUpdate
+                    });
+                    setStatus("UPDATE_PROCESS_COMPLETED");
+                } catch (error) {
+                    if (error instanceof HotUpdaterError) restConfig.onError?.(error);
+                    setStatus("UPDATE_PROCESS_COMPLETED");
+                    throw error;
+                }
+            });
             (0, react.useEffect)(()=>{
-                config.onProgress?.(progress);
+                restConfig.onProgress?.(progress);
             }, [
                 progress
             ]);
-            (0, react.useEffect)(()=>{
-                const initHotUpdater = async ()=>{
-                    try {
-                        const updateInfo = await checkUpdate(config);
-                        if (!updateInfo) {
-                            config.onCheckUpdateCompleted?.({
-                                isBundleUpdated: false
-                            });
-                            setIsCheckUpdateCompleted(true);
-                            return;
-                        }
-                        const isSuccess = await installUpdate(updateInfo);
-                        config.onCheckUpdateCompleted?.({
-                            isBundleUpdated: isSuccess
-                        });
-                        setIsCheckUpdateCompleted(true);
-                    } catch (error) {
-                        if (error instanceof HotUpdaterError) config.onError?.(error);
-                        setIsCheckUpdateCompleted(true);
-                        throw error;
-                    }
-                };
+            (0, react.useLayoutEffect)(()=>{
                 initHotUpdater();
-            }, [
-                config.source,
-                config.requestHeaders
-            ]);
-            if (config.fallbackComponent && (!isCheckUpdateCompleted || progress > 0 && progress < 1)) {
-                const Fallback = config.fallbackComponent;
+            }, []);
+            if (restConfig.fallbackComponent && "UPDATE_PROCESS_COMPLETED" !== status) {
+                const Fallback = restConfig.fallbackComponent;
                 return /*#__PURE__*/ React.createElement(Fallback, {
                     progress: progress
                 });
@@ -1851,9 +1886,9 @@ const src_HotUpdater = {
     getAppVersion: getAppVersion,
     getBundleId: getBundleId,
     addListener: addListener,
-    ensureUpdateInfo: ensureUpdateInfo,
-    updateBundle: updateBundle,
-    getUpdateInfo: js_namespaceObject.getUpdateInfo
+    checkForUpdate: checkForUpdate,
+    runUpdateProcess: runUpdateProcess,
+    updateBundle: updateBundle
 };
 var __webpack_export_target__ = exports;
 for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];

package/dist/index.mjs

@@ -1584,9 +1584,18 @@ var __webpack_modules__ = {
         }, V = {
             transition: null
         };
+        exports.useCallback = function(a, b) {
+            return U.current.useCallback(a, b);
+        };
         exports.useEffect = function(a, b) {
             return U.current.useEffect(a, b);
         };
+        exports.useLayoutEffect = function(a, b) {
+            return U.current.useLayoutEffect(a, b);
+        };
+        exports.useRef = function(a) {
+            return U.current.useRef(a);
+        };
         exports.useState = function(a) {
             return U.current.useState(a);
         };
@@ -1643,6 +1652,7 @@ function __webpack_require__(moduleId) {
         return module;
     };
 })();
+var external_react_native_ = __webpack_require__("react-native");
 const ensureUpdateInfo = async (source, { appVersion, bundleId, platform }, requestHeaders)=>{
     try {
         let bundles = null;
@@ -1661,7 +1671,12 @@ const ensureUpdateInfo = async (source, { appVersion, bundleId, platform }, requ
         return [];
     }
 };
-var external_react_native_ = __webpack_require__("react-native");
+class HotUpdaterError extends Error {
+    constructor(message){
+        super(message);
+        this.name = "HotUpdaterError";
+    }
+}
 const HotUpdater = {
     HOT_UPDATER_BUNDLE_ID: __WEBPACK_EXTERNAL_MODULE__hot_updater_core__.NIL_UUID
 };
@@ -1689,6 +1704,49 @@ const reload = ()=>{
     HotUpdaterNative.reload();
 };
 const getBundleId = ()=>HotUpdater.HOT_UPDATER_BUNDLE_ID;
+async function checkForUpdate(config) {
+    if (__DEV__) {
+        console.warn("[HotUpdater] __DEV__ is true, HotUpdater is only supported in production");
+        return null;
+    }
+    if (![
+        "ios",
+        "android"
+    ].includes(external_react_native_.Platform.OS)) throw new HotUpdaterError("HotUpdater is only supported on iOS and Android");
+    const currentAppVersion = await getAppVersion();
+    const platform = external_react_native_.Platform.OS;
+    const currentBundleId = await getBundleId();
+    if (!currentAppVersion) throw new HotUpdaterError("Failed to get app version");
+    const ensuredUpdateInfo = await ensureUpdateInfo(config.source, {
+        appVersion: currentAppVersion,
+        bundleId: currentBundleId,
+        platform
+    }, config.requestHeaders);
+    let updateInfo = null;
+    if (Array.isArray(ensuredUpdateInfo)) {
+        const bundles = ensuredUpdateInfo;
+        updateInfo = await (0, __WEBPACK_EXTERNAL_MODULE__hot_updater_js__.getUpdateInfo)(bundles, {
+            appVersion: currentAppVersion,
+            bundleId: currentBundleId,
+            platform
+        });
+    } else updateInfo = ensuredUpdateInfo;
+    return updateInfo;
+}
+const runUpdateProcess = async ({ reloadOnForceUpdate = false, ...checkForUpdateConfig })=>{
+    const updateInfo = await checkForUpdate(checkForUpdateConfig);
+    if (!updateInfo) return {
+        status: "UP_TO_DATE"
+    };
+    const isUpdated = await updateBundle(updateInfo.id, updateInfo.fileUrl);
+    if (isUpdated && updateInfo.forceUpdate && reloadOnForceUpdate) reload();
+    if (!isUpdated) throw new Error("New update was found but failed to download the bundle.");
+    return {
+        status: updateInfo.status,
+        isForceUpdate: updateInfo.forceUpdate,
+        id: updateInfo.id
+    };
+};
 var react = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
 const createHotUpdaterStore = ()=>{
     let state = {
@@ -1719,88 +1777,65 @@ const createHotUpdaterStore = ()=>{
 };
 const hotUpdaterStore = createHotUpdaterStore();
 const useHotUpdaterStore = ()=>(0, react.useSyncExternalStore)(hotUpdaterStore.subscribe, hotUpdaterStore.getSnapshot, hotUpdaterStore.getSnapshot);
-class HotUpdaterError extends Error {
-    constructor(message){
-        super(message);
-        this.name = "HotUpdaterError";
-    }
-}
-async function checkUpdate(config) {
-    if (__DEV__) {
-        console.warn("[HotUpdater] __DEV__ is true, HotUpdater is only supported in production");
-        return null;
-    }
-    if (![
-        "ios",
-        "android"
-    ].includes(external_react_native_.Platform.OS)) throw new HotUpdaterError("HotUpdater is only supported on iOS and Android");
-    const currentAppVersion = await getAppVersion();
-    const platform = external_react_native_.Platform.OS;
-    const currentBundleId = await getBundleId();
-    if (!currentAppVersion) throw new HotUpdaterError("Failed to get app version");
-    const ensuredUpdateInfo = await ensureUpdateInfo(config.source, {
-        appVersion: currentAppVersion,
-        bundleId: currentBundleId,
-        platform
-    }, config.requestHeaders);
-    let updateInfo = null;
-    if (Array.isArray(ensuredUpdateInfo)) {
-        const bundles = ensuredUpdateInfo;
-        updateInfo = await (0, __WEBPACK_EXTERNAL_MODULE__hot_updater_js__.getUpdateInfo)(bundles, {
-            appVersion: currentAppVersion,
-            bundleId: currentBundleId,
-            platform
-        });
-    } else updateInfo = ensuredUpdateInfo;
-    return updateInfo;
-}
-async function installUpdate(updateInfo) {
-    const isSuccess = await updateBundle(updateInfo.id, updateInfo.fileUrl || "");
-    if (isSuccess && updateInfo.forceUpdate) {
-        reload();
-        return true;
-    }
-    return isSuccess;
+function useEventCallback(fn) {
+    const callbackRef = (0, react.useRef)(()=>{
+        throw new Error("Cannot call an event handler while rendering.");
+    });
+    (0, react.useLayoutEffect)(()=>{
+        callbackRef.current = fn;
+    }, [
+        fn
+    ]);
+    return (0, react.useCallback)((...args)=>callbackRef.current?.(...args), [
+        callbackRef
+    ]);
 }
 function wrap(config) {
+    const { reloadOnForceUpdate = true, ...restConfig } = config;
     return (WrappedComponent)=>{
         const HotUpdaterHOC = ()=>{
             const { progress } = useHotUpdaterStore();
-            const [isCheckUpdateCompleted, setIsCheckUpdateCompleted] = (0, react.useState)(false);
+            const [status, setStatus] = (0, react.useState)("IDLE");
+            const initHotUpdater = useEventCallback(async ()=>{
+                try {
+                    setStatus("CHECK_FOR_UPDATE");
+                    const updateInfo = await checkForUpdate({
+                        source: restConfig.source,
+                        requestHeaders: restConfig.requestHeaders
+                    });
+                    if (!updateInfo) {
+                        restConfig.onUpdateProcessCompleted?.({
+                            status: "UP_TO_DATE"
+                        });
+                        setStatus("UPDATE_PROCESS_COMPLETED");
+                        return;
+                    }
+                    setStatus("UPDATING");
+                    const isSuccess = await updateBundle(updateInfo.id, updateInfo.fileUrl);
+                    if (!isSuccess) throw new Error("New update was found but failed to download the bundle.");
+                    if (updateInfo.forceUpdate && reloadOnForceUpdate) reload();
+                    restConfig.onUpdateProcessCompleted?.({
+                        id: updateInfo.id,
+                        status: updateInfo.status,
+                        isForceUpdate: updateInfo.forceUpdate
+                    });
+                    setStatus("UPDATE_PROCESS_COMPLETED");
+                } catch (error) {
+                    if (error instanceof HotUpdaterError) restConfig.onError?.(error);
+                    setStatus("UPDATE_PROCESS_COMPLETED");
+                    throw error;
+                }
+            });
             (0, react.useEffect)(()=>{
-                config.onProgress?.(progress);
+                restConfig.onProgress?.(progress);
             }, [
                 progress
             ]);
-            (0, react.useEffect)(()=>{
-                const initHotUpdater = async ()=>{
-                    try {
-                        const updateInfo = await checkUpdate(config);
-                        if (!updateInfo) {
-                            config.onCheckUpdateCompleted?.({
-                                isBundleUpdated: false
-                            });
-                            setIsCheckUpdateCompleted(true);
-                            return;
-                        }
-                        const isSuccess = await installUpdate(updateInfo);
-                        config.onCheckUpdateCompleted?.({
-                            isBundleUpdated: isSuccess
-                        });
-                        setIsCheckUpdateCompleted(true);
-                    } catch (error) {
-                        if (error instanceof HotUpdaterError) config.onError?.(error);
-                        setIsCheckUpdateCompleted(true);
-                        throw error;
-                    }
-                };
+            (0, react.useLayoutEffect)(()=>{
                 initHotUpdater();
-            }, [
-                config.source,
-                config.requestHeaders
-            ]);
-            if (config.fallbackComponent && (!isCheckUpdateCompleted || progress > 0 && progress < 1)) {
-                const Fallback = config.fallbackComponent;
+            }, []);
+            if (restConfig.fallbackComponent && "UPDATE_PROCESS_COMPLETED" !== status) {
+                const Fallback = restConfig.fallbackComponent;
                 return /*#__PURE__*/ React.createElement(Fallback, {
                     progress: progress
                 });
@@ -1819,8 +1854,8 @@ const src_HotUpdater = {
     getAppVersion: getAppVersion,
     getBundleId: getBundleId,
     addListener: addListener,
-    ensureUpdateInfo: ensureUpdateInfo,
-    updateBundle: updateBundle,
-    getUpdateInfo: __WEBPACK_EXTERNAL_MODULE__hot_updater_js__.getUpdateInfo
+    checkForUpdate: checkForUpdate,
+    runUpdateProcess: runUpdateProcess,
+    updateBundle: updateBundle
 };
 export { src_HotUpdater as HotUpdater, hotUpdaterStore, useHotUpdaterStore };

package/dist/native.d.ts

@@ -8,7 +8,7 @@ export declare const addListener: <T extends keyof HotUpdaterEvent>(eventName: T
  * Downloads files from given URLs.
  *
  * @param {string} bundleId - identifier for the bundle version.
- * @param {string | null} zipUrl - zip file URL.
+ * @param {string | null} zipUrl - zip file URL. If null, it means rolling back to the built-in bundle
  * @returns {Promise<boolean>} Resolves with true if download was successful, otherwise rejects with an error.
  */
 export declare const updateBundle: (bundleId: string, zipUrl: string | null) => Promise<boolean>;

package/dist/runUpdateProcess.d.ts

@@ -0,0 +1,17 @@
+import { type CheckForUpdateConfig } from "./checkUpdate";
+export type RunUpdateProcessResponse = {
+    status: "ROLLBACK" | "UPDATE";
+    isForceUpdate: boolean;
+    id: string;
+} | {
+    status: "UP_TO_DATE";
+};
+export interface RunUpdateProcessConfig extends CheckForUpdateConfig {
+    /**
+     * If `true`, the app will be reloaded when the downloaded bundle is a force update.
+     * If `false`, isForceUpdate will be returned as true but the app won't reload.
+     * @default false
+     */
+    reloadOnForceUpdate?: boolean;
+}
+export declare const runUpdateProcess: ({ reloadOnForceUpdate, ...checkForUpdateConfig }: RunUpdateProcessConfig) => Promise<RunUpdateProcessResponse>;

package/dist/wrap.d.ts

@@ -1,18 +1,45 @@
-import type { BundleArg, UpdateInfo } from "@hot-updater/core";
 import type React from "react";
+import { type CheckForUpdateConfig } from "./checkUpdate";
 import { HotUpdaterError } from "./error";
+import type { RunUpdateProcessResponse } from "./runUpdateProcess";
 import { type HotUpdaterState } from "./store";
-export interface CheckUpdateConfig {
-    source: BundleArg;
-    requestHeaders?: Record<string, string>;
-}
-export interface HotUpdaterConfig extends CheckUpdateConfig {
+export interface HotUpdaterConfig extends CheckForUpdateConfig {
+    /**
+     * Component to show while downloading a new bundle update.
+     *
+     * When an update exists and the bundle is being downloaded, this component will block access
+     * to the entry point and show download progress.
+     *
+     * @see {@link https://gronxb.github.io/hot-updater/guide/hot-updater/wrap.html#fallback-component}
+     *
+     * ```tsx
+     * HotUpdater.wrap({
+     *   source: "<update-server-url>",
+     *   fallbackComponent: ({ progress = 0 }) => (
+     *     <View style={styles.container}>
+     *       <Text style={styles.text}>Updating... {progress}%</Text>
+     *     </View>
+     *   )
+     * })(App)
+     * ```
+     *
+     * If not defined, the bundle will download in the background without blocking the screen.
+     */
     fallbackComponent?: React.FC<Pick<HotUpdaterState, "progress">>;
     onError?: (error: HotUpdaterError) => void;
     onProgress?: (progress: number) => void;
-    onCheckUpdateCompleted?: ({ isBundleUpdated, }: {
-        isBundleUpdated: boolean;
-    }) => void;
+    /**
+     * When a force update exists, the app will automatically reload.
+     * If `false`, When a force update exists, the app will not reload. `isForceUpdate` will be returned as `true` in `onUpdateProcessCompleted`.
+     * If `true`, When a force update exists, the app will automatically reload.
+     * @default true
+     */
+    reloadOnForceUpdate?: boolean;
+    /**
+     * Callback function that is called when the update process is completed.
+     *
+     * @see {@link https://gronxb.github.io/hot-updater/guide/hot-updater/wrap.html#onupdateprocesscompleted}
+     */
+    onUpdateProcessCompleted?: (response: RunUpdateProcessResponse) => void;
 }
-export declare function checkUpdate(config: CheckUpdateConfig): Promise<UpdateInfo | null>;
 export declare function wrap<P>(config: HotUpdaterConfig): (WrappedComponent: React.ComponentType) => React.ComponentType<P>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hot-updater/react-native",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "React Native OTA solution for self-hosted",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -75,8 +75,8 @@
     "react-native-builder-bob": "^0.33.1"
   },
   "dependencies": {
-    "@hot-updater/js": "0.5.1",
-    "@hot-updater/core": "0.5.1"
+    "@hot-updater/js": "0.5.2",
+    "@hot-updater/core": "0.5.2"
   },
   "scripts": {
     "build": "rslib build",

package/src/checkUpdate.ts

@@ -0,0 +1,59 @@
+import type { Bundle, BundleArg, UpdateInfo } from "@hot-updater/core";
+import { getUpdateInfo } from "@hot-updater/js";
+import { Platform } from "react-native";
+import { ensureUpdateInfo } from "./ensureUpdateInfo";
+import { HotUpdaterError } from "./error";
+import { getAppVersion, getBundleId } from "./native";
+
+export interface CheckForUpdateConfig {
+  source: BundleArg;
+  requestHeaders?: Record<string, string>;
+}
+
+export async function checkForUpdate(config: CheckForUpdateConfig) {
+  if (__DEV__) {
+    console.warn(
+      "[HotUpdater] __DEV__ is true, HotUpdater is only supported in production",
+    );
+    return null;
+  }
+
+  if (!["ios", "android"].includes(Platform.OS)) {
+    throw new HotUpdaterError(
+      "HotUpdater is only supported on iOS and Android",
+    );
+  }
+
+  const currentAppVersion = await getAppVersion();
+  const platform = Platform.OS as "ios" | "android";
+  const currentBundleId = await getBundleId();
+
+  if (!currentAppVersion) {
+    throw new HotUpdaterError("Failed to get app version");
+  }
+
+  const ensuredUpdateInfo = await ensureUpdateInfo(
+    config.source,
+    {
+      appVersion: currentAppVersion,
+      bundleId: currentBundleId,
+      platform,
+    },
+    config.requestHeaders,
+  );
+
+  let updateInfo: UpdateInfo | null = null;
+  if (Array.isArray(ensuredUpdateInfo)) {
+    const bundles: Bundle[] = ensuredUpdateInfo;
+
+    updateInfo = await getUpdateInfo(bundles, {
+      appVersion: currentAppVersion,
+      bundleId: currentBundleId,
+      platform,
+    });
+  } else {
+    updateInfo = ensuredUpdateInfo;
+  }
+
+  return updateInfo;
+}

package/src/hooks/useEventCallback.ts

@@ -0,0 +1,28 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+
+type EventCallback<Args extends unknown[], R> =
+  | ((...args: Args) => R)
+  | undefined;
+
+export function useEventCallback<Args extends unknown[], R>(
+  fn: (...args: Args) => R,
+): (...args: Args) => R;
+export function useEventCallback<Args extends unknown[], R>(
+  fn: EventCallback<Args, R>,
+): EventCallback<Args, R>;
+export function useEventCallback<Args extends unknown[], R>(
+  fn: EventCallback<Args, R>,
+): EventCallback<Args, R> {
+  const callbackRef = useRef<EventCallback<Args, R>>(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+
+  useLayoutEffect(() => {
+    callbackRef.current = fn;
+  }, [fn]);
+
+  return useCallback(
+    (...args: Args) => callbackRef.current?.(...args),
+    [callbackRef],
+  ) as (...args: Args) => R;
+}

package/src/index.ts

@@ -1,5 +1,4 @@
-import { getUpdateInfo } from "@hot-updater/js";
-import { ensureUpdateInfo } from "./ensureUpdateInfo";
+import { checkForUpdate } from "./checkUpdate";
 import {
   addListener,
   getAppVersion,
@@ -7,6 +6,7 @@ import {
   reload,
   updateBundle,
 } from "./native";
+import { runUpdateProcess } from "./runUpdateProcess";
 import { hotUpdaterStore } from "./store";
 import { wrap } from "./wrap";
 
@@ -27,7 +27,7 @@ export const HotUpdater = {
   getBundleId,
   addListener,
 
-  ensureUpdateInfo,
+  checkForUpdate,
+  runUpdateProcess,
   updateBundle,
-  getUpdateInfo,
 };

package/src/native.ts

@@ -52,7 +52,7 @@ export const addListener = <T extends keyof HotUpdaterEvent>(
  * Downloads files from given URLs.
  *
  * @param {string} bundleId - identifier for the bundle version.
- * @param {string | null} zipUrl - zip file URL.
+ * @param {string | null} zipUrl - zip file URL. If null, it means rolling back to the built-in bundle
  * @returns {Promise<boolean>} Resolves with true if download was successful, otherwise rejects with an error.
  */
 export const updateBundle = (

package/src/runUpdateProcess.ts

@@ -0,0 +1,47 @@
+import { type CheckForUpdateConfig, checkForUpdate } from "./checkUpdate";
+import { reload, updateBundle } from "./native";
+
+export type RunUpdateProcessResponse =
+  | {
+      status: "ROLLBACK" | "UPDATE";
+      isForceUpdate: boolean;
+      id: string;
+    }
+  | {
+      status: "UP_TO_DATE";
+    };
+
+export interface RunUpdateProcessConfig extends CheckForUpdateConfig {
+  /**
+   * If `true`, the app will be reloaded when the downloaded bundle is a force update.
+   * If `false`, isForceUpdate will be returned as true but the app won't reload.
+   * @default false
+   */
+  reloadOnForceUpdate?: boolean;
+}
+
+export const runUpdateProcess = async ({
+  reloadOnForceUpdate = false,
+  ...checkForUpdateConfig
+}: RunUpdateProcessConfig): Promise<RunUpdateProcessResponse> => {
+  const updateInfo = await checkForUpdate(checkForUpdateConfig);
+  if (!updateInfo) {
+    return {
+      status: "UP_TO_DATE",
+    };
+  }
+
+  const isUpdated = await updateBundle(updateInfo.id, updateInfo.fileUrl);
+  if (isUpdated && updateInfo.forceUpdate && reloadOnForceUpdate) {
+    reload();
+  }
+
+  if (!isUpdated) {
+    throw new Error("New update was found but failed to download the bundle.");
+  }
+  return {
+    status: updateInfo.status,
+    isForceUpdate: updateInfo.forceUpdate,
+    id: updateInfo.id,
+  };
+};

package/src/wrap.tsx

@@ -1,129 +1,122 @@
-import type { Bundle, BundleArg, UpdateInfo } from "@hot-updater/core";
-import { getUpdateInfo } from "@hot-updater/js";
 import type React from "react";
-import { useEffect, useState } from "react";
-import { Platform } from "react-native";
-import { ensureUpdateInfo } from "./ensureUpdateInfo";
+import { useEffect, useLayoutEffect, useState } from "react";
+import { type CheckForUpdateConfig, checkForUpdate } from "./checkUpdate";
 import { HotUpdaterError } from "./error";
-import { getAppVersion, getBundleId, reload, updateBundle } from "./native";
+import { useEventCallback } from "./hooks/useEventCallback";
+import { reload, updateBundle } from "./native";
+import type { RunUpdateProcessResponse } from "./runUpdateProcess";
 import { type HotUpdaterState, useHotUpdaterStore } from "./store";
 
-export interface CheckUpdateConfig {
-  source: BundleArg;
-  requestHeaders?: Record<string, string>;
-}
-
-export interface HotUpdaterConfig extends CheckUpdateConfig {
+export interface HotUpdaterConfig extends CheckForUpdateConfig {
+  /**
+   * Component to show while downloading a new bundle update.
+   *
+   * When an update exists and the bundle is being downloaded, this component will block access
+   * to the entry point and show download progress.
+   *
+   * @see {@link https://gronxb.github.io/hot-updater/guide/hot-updater/wrap.html#fallback-component}
+   *
+   * ```tsx
+   * HotUpdater.wrap({
+   *   source: "<update-server-url>",
+   *   fallbackComponent: ({ progress = 0 }) => (
+   *     <View style={styles.container}>
+   *       <Text style={styles.text}>Updating... {progress}%</Text>
+   *     </View>
+   *   )
+   * })(App)
+   * ```
+   *
+   * If not defined, the bundle will download in the background without blocking the screen.
+   */
   fallbackComponent?: React.FC<Pick<HotUpdaterState, "progress">>;
   onError?: (error: HotUpdaterError) => void;
   onProgress?: (progress: number) => void;
-  onCheckUpdateCompleted?: ({
-    isBundleUpdated,
-  }: { isBundleUpdated: boolean }) => void;
-}
-
-export async function checkUpdate(config: CheckUpdateConfig) {
-  if (__DEV__) {
-    console.warn(
-      "[HotUpdater] __DEV__ is true, HotUpdater is only supported in production",
-    );
-    return null;
-  }
-
-  if (!["ios", "android"].includes(Platform.OS)) {
-    throw new HotUpdaterError(
-      "HotUpdater is only supported on iOS and Android",
-    );
-  }
-
-  const currentAppVersion = await getAppVersion();
-  const platform = Platform.OS as "ios" | "android";
-  const currentBundleId = await getBundleId();
-
-  if (!currentAppVersion) {
-    throw new HotUpdaterError("Failed to get app version");
-  }
-
-  const ensuredUpdateInfo = await ensureUpdateInfo(
-    config.source,
-    {
-      appVersion: currentAppVersion,
-      bundleId: currentBundleId,
-      platform,
-    },
-    config.requestHeaders,
-  );
-
-  let updateInfo: UpdateInfo | null = null;
-  if (Array.isArray(ensuredUpdateInfo)) {
-    const bundles: Bundle[] = ensuredUpdateInfo;
-
-    updateInfo = await getUpdateInfo(bundles, {
-      appVersion: currentAppVersion,
-      bundleId: currentBundleId,
-      platform,
-    });
-  } else {
-    updateInfo = ensuredUpdateInfo;
-  }
-
-  return updateInfo;
-}
-
-async function installUpdate(updateInfo: UpdateInfo) {
-  const isSuccess = await updateBundle(updateInfo.id, updateInfo.fileUrl || "");
-
-  if (isSuccess && updateInfo.forceUpdate) {
-    reload();
-    return true;
-  }
-
-  return isSuccess;
+  /**
+   * When a force update exists, the app will automatically reload.
+   * If `false`, When a force update exists, the app will not reload. `isForceUpdate` will be returned as `true` in `onUpdateProcessCompleted`.
+   * If `true`, When a force update exists, the app will automatically reload.
+   * @default true
+   */
+  reloadOnForceUpdate?: boolean;
+  /**
+   * Callback function that is called when the update process is completed.
+   *
+   * @see {@link https://gronxb.github.io/hot-updater/guide/hot-updater/wrap.html#onupdateprocesscompleted}
+   */
+  onUpdateProcessCompleted?: (response: RunUpdateProcessResponse) => void;
 }
 
 export function wrap<P>(
   config: HotUpdaterConfig,
 ): (WrappedComponent: React.ComponentType) => React.ComponentType<P> {
+  const { reloadOnForceUpdate = true, ...restConfig } = config;
   return (WrappedComponent) => {
     const HotUpdaterHOC: React.FC<P> = () => {
       const { progress } = useHotUpdaterStore();
-      const [isCheckUpdateCompleted, setIsCheckUpdateCompleted] =
-        useState(false);
+      const [status, setStatus] = useState<
+        "IDLE" | "CHECK_FOR_UPDATE" | "UPDATING" | "UPDATE_PROCESS_COMPLETED"
+      >("IDLE");
+
+      const initHotUpdater = useEventCallback(async () => {
+        try {
+          setStatus("CHECK_FOR_UPDATE");
+          const updateInfo = await checkForUpdate({
+            source: restConfig.source,
+            requestHeaders: restConfig.requestHeaders,
+          });
+          if (!updateInfo) {
+            restConfig.onUpdateProcessCompleted?.({
+              status: "UP_TO_DATE",
+            });
+            setStatus("UPDATE_PROCESS_COMPLETED");
+            return;
+          }
 
-      useEffect(() => {
-        config.onProgress?.(progress);
-      }, [progress]);
+          setStatus("UPDATING");
 
-      useEffect(() => {
-        const initHotUpdater = async () => {
-          try {
-            const updateInfo = await checkUpdate(config);
-            if (!updateInfo) {
-              config.onCheckUpdateCompleted?.({ isBundleUpdated: false });
-              setIsCheckUpdateCompleted(true);
-              return;
-            }
+          const isSuccess = await updateBundle(
+            updateInfo.id,
+            updateInfo.fileUrl,
+          );
+          if (!isSuccess) {
+            throw new Error(
+              "New update was found but failed to download the bundle.",
+            );
+          }
+
+          if (updateInfo.forceUpdate && reloadOnForceUpdate) {
+            reload();
+          }
 
-            const isSuccess = await installUpdate(updateInfo);
-            config.onCheckUpdateCompleted?.({ isBundleUpdated: isSuccess });
-            setIsCheckUpdateCompleted(true);
-          } catch (error) {
-            if (error instanceof HotUpdaterError) {
-              config.onError?.(error);
-            }
-            setIsCheckUpdateCompleted(true);
-            throw error;
+          restConfig.onUpdateProcessCompleted?.({
+            id: updateInfo.id,
+            status: updateInfo.status,
+            isForceUpdate: updateInfo.forceUpdate,
+          });
+          setStatus("UPDATE_PROCESS_COMPLETED");
+        } catch (error) {
+          if (error instanceof HotUpdaterError) {
+            restConfig.onError?.(error);
           }
-        };
+          setStatus("UPDATE_PROCESS_COMPLETED");
+          throw error;
+        }
+      });
+
+      useEffect(() => {
+        restConfig.onProgress?.(progress);
+      }, [progress]);
 
+      useLayoutEffect(() => {
         initHotUpdater();
-      }, [config.source, config.requestHeaders]);
+      }, []);
 
       if (
-        config.fallbackComponent &&
-        (!isCheckUpdateCompleted || (progress > 0 && progress < 1))
+        restConfig.fallbackComponent &&
+        status !== "UPDATE_PROCESS_COMPLETED"
       ) {
-        const Fallback = config.fallbackComponent;
+        const Fallback = restConfig.fallbackComponent;
         return <Fallback progress={progress} />;
       }