@hot-updater/react-native 0.2.0 → 0.3.1

package/README.md

@@ -1,96 +1,3 @@
-# hot-updater (WIP)
-React Native OTA solution for internal infrastructure
+# Hot Updater
 
-## IOS Usage
-* as-is
-```objective-c
-// filename: ios/MyApp/AppDelegate.mm
-// ...
-#import <HotUpdater/HotUpdater.h>
-
-// ...
-
-- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-{
-    #if DEBUG
-      return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
-    #else
-      return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-    #endif
-}
-
-// ...
-```
-
-* to-be
-```objective-c
-// filename: ios/MyApp/AppDelegate.mm
-// ...
-
-- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-{
-    return [HotUpdater bundleURL];
-}
-
-// ...
-```
-
-## Android Usage
-```kotlin
-package com.hotupdaterexample
-
-import android.app.Application
-import com.facebook.react.PackageList
-import com.facebook.react.ReactApplication
-import com.facebook.react.ReactHost
-import com.facebook.react.ReactNativeHost
-import com.facebook.react.ReactPackage
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.soloader.SoLoader
-import com.hotupdater.HotUpdater
-
-class MainApplication : Application(), ReactApplication {
-
-  override val reactNativeHost: ReactNativeHost =
-      object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> =
-            PackageList(this).packages.apply {
-              // Packages that cannot be autolinked yet can be added manually here, for example:
-              // add(MyReactNativePackage())
-            }
-
-        override fun getJSMainModuleName(): String = "index"
-
-        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-
-        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-
-        override fun getJSBundleFile(): String? {
-          // This field
-          return HotUpdater.getJSBundleFile() ?: super.getJSBundleFile()
-        }
-      }
-
-  override val reactHost: ReactHost
-    get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-    SoLoader.init(this, false)
-    // This field
-    HotUpdater.init(applicationContext, reactNativeHost)
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      // If you opted-in for the New Architecture, we load the native entry point for this app.
-      load()
-    }
-  }
-}
-```
-
-## Android Debug
-```sh
-> adb logcat -s HotUpdater
-```
+A self-hostable OTA (Over-The-Air) update solution for React Native.

package/dist/ensureUpdateInfo.d.ts

@@ -0,0 +1,2 @@
+import type { Bundle, BundleArg, GetBundlesArgs, UpdateInfo } from "@hot-updater/core";
+export declare const ensureUpdateInfo: (source: BundleArg, { appVersion, bundleId, platform }: GetBundlesArgs, requestHeaders?: Record<string, string>) => Promise<Bundle[] | UpdateInfo>;

package/dist/index.d.ts

@@ -1,17 +1,14 @@
-export type * from "./init";
+import { wrap } from "./wrap";
+export type * from "./wrap";
 export type * from "./native";
 export * from "./store";
 export declare const HotUpdater: {
-    init: (config: import("./init").HotUpdaterInitConfig) => Promise<void>;
+    wrap: typeof wrap;
     reload: () => void;
     getAppVersion: () => Promise<string | null>;
     getBundleId: () => string;
     addListener: <T extends keyof import("./native").HotUpdaterEvent>(eventName: T, listener: (event: import("./native").HotUpdaterEvent[T]) => void) => void;
-    ensureBundles: (bundle: 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>;
+    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>;
     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>;
-    /**
-     * In production environment, this value will be replaced with a uuidv7.
-     */
-    HOT_UPDATER_BUNDLE_ID: string;
 };

package/dist/index.js

@@ -1582,6 +1582,12 @@ var __webpack_modules__ = {
         }, V = {
             transition: null
         };
+        exports1.useEffect = function(a, b) {
+            return U.current.useEffect(a, b);
+        };
+        exports1.useState = function(a) {
+            return U.current.useState(a);
+        };
         exports1.useSyncExternalStore = function(a, b, e) {
             return U.current.useSyncExternalStore(a, b, e);
         };
@@ -3078,11 +3084,11 @@ const getUpdateInfo = async (bundles, { platform, bundleId, appVersion })=>{
     };
     return null;
 };
-const ensureBundles = async (bundle, { appVersion, bundleId, platform }, requestHeaders)=>{
+const ensureUpdateInfo = async (source, { appVersion, bundleId, platform }, requestHeaders)=>{
     try {
         let bundles = null;
-        if ("string" == typeof bundle) {
-            if (bundle.startsWith("http")) return await fetch(bundle, {
+        if ("string" == typeof source) {
+            if (source.startsWith("http")) return await fetch(source, {
                 headers: {
                     "x-app-platform": platform,
                     "x-app-version": appVersion,
@@ -3090,19 +3096,16 @@ const ensureBundles = async (bundle, { appVersion, bundleId, platform }, request
                     ...requestHeaders
                 }
             }).then((res)=>res.json());
-        } else bundles = "function" == typeof bundle ? await bundle() : bundle;
+        } else bundles = "function" == typeof source ? await source() : source;
         return bundles ?? [];
     } catch  {
         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: core_namespaceObject.NIL_UUID
+};
 const LINKING_ERROR = `The package '@hot-updater/react-native' doesn't seem to be linked. Make sure: \n\n` + external_react_native_.Platform.select({
     ios: "- You have run 'pod install'\n",
     default: ""
@@ -3118,59 +3121,12 @@ const addListener = (eventName, listener)=>{
     const eventEmitter = new external_react_native_.NativeEventEmitter(HotUpdaterNative);
     eventEmitter?.addListener(eventName, listener);
 };
-const getBundleId = ()=>HotUpdater.HOT_UPDATER_BUNDLE_ID ?? core_namespaceObject.NIL_UUID;
 const updateBundle = (bundleId, zipUrl)=>HotUpdaterNative.updateBundle(bundleId, zipUrl);
 const getAppVersion = ()=>HotUpdaterNative.getAppVersion();
 const reload = ()=>{
     HotUpdaterNative.reload();
 };
-const init = async (config)=>{
-    if (__DEV__) {
-        console.warn("[HotUpdater] __DEV__ is true, HotUpdater is only supported in production");
-        return;
-    }
-    if (![
-        "ios",
-        "android"
-    ].includes(external_react_native_.Platform.OS)) {
-        const error = new HotUpdaterError("HotUpdater is only supported on iOS and Android");
-        config?.onError?.(error);
-        throw error;
-    }
-    const currentAppVersion = await getAppVersion();
-    const platform = external_react_native_.Platform.OS;
-    const currentBundleId = await getBundleId();
-    if (!currentAppVersion) {
-        const error = new HotUpdaterError("Failed to get app version");
-        config?.onError?.(error);
-        throw error;
-    }
-    const bundles = await ensureBundles(config.source, {
-        appVersion: currentAppVersion,
-        bundleId: currentBundleId,
-        platform
-    }, config.requestHeaders);
-    let updateInfo = null;
-    updateInfo = Array.isArray(bundles) ? await getUpdateInfo(bundles, {
-        appVersion: currentAppVersion,
-        bundleId: currentBundleId,
-        platform
-    }) : bundles;
-    if (!updateInfo) {
-        config?.onSuccess?.("UP_TO_DATE");
-        return;
-    }
-    try {
-        const isSuccess = await updateBundle(updateInfo.id, updateInfo.fileUrl || "");
-        if (isSuccess && updateInfo.forceUpdate) {
-            reload();
-            config?.onSuccess?.("INSTALLING_UPDATE");
-        }
-    } catch (error) {
-        if (error instanceof HotUpdaterError) config?.onError?.(error);
-        throw error;
-    }
-};
+const getBundleId = ()=>HotUpdater.HOT_UPDATER_BUNDLE_ID;
 var react = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
 const createHotUpdaterStore = ()=>{
     let state = {
@@ -3200,21 +3156,105 @@ const createHotUpdaterStore = ()=>{
 };
 const hotUpdaterStore = createHotUpdaterStore();
 const useHotUpdaterStore = ()=>(0, react.useSyncExternalStore)(hotUpdaterStore.subscribe, hotUpdaterStore.getState, hotUpdaterStore.getState);
+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 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 wrap(config) {
+    return (WrappedComponent)=>{
+        const HotUpdaterHOC = (props)=>{
+            const [updateStatus, setUpdateStatus] = (0, react.useState)(null);
+            const [updateError, setUpdateError] = (0, react.useState)(null);
+            const { progress } = useHotUpdaterStore();
+            (0, react.useEffect)(()=>{
+                const initHotUpdater = async ()=>{
+                    try {
+                        const updateInfo = await checkUpdate(config);
+                        if (!updateInfo) {
+                            setUpdateStatus("UP_TO_DATE");
+                            return;
+                        }
+                        setUpdateStatus("UPDATING");
+                        const isSuccess = await installUpdate(updateInfo);
+                        if (isSuccess) setUpdateStatus("INSTALLING_UPDATE");
+                    } catch (error) {
+                        if (error instanceof HotUpdaterError) setUpdateError(error);
+                        throw error;
+                    }
+                };
+                initHotUpdater();
+            }, [
+                config.source,
+                config.requestHeaders
+            ]);
+            if ("UPDATING" === updateStatus && config.fallbackComponent) {
+                const Fallback = config.fallbackComponent;
+                return /*#__PURE__*/ React.createElement(Fallback, {
+                    progress: progress
+                });
+            }
+            return /*#__PURE__*/ React.createElement(WrappedComponent, {
+                ...props,
+                updateStatus: updateStatus,
+                updateError: updateError
+            });
+        };
+        return HotUpdaterHOC;
+    };
+}
 addListener("onProgress", ({ progress })=>{
     hotUpdaterStore.setState({
         progress
     });
 });
 const src_HotUpdater = {
-    init: init,
+    wrap: wrap,
     reload: reload,
     getAppVersion: getAppVersion,
     getBundleId: getBundleId,
     addListener: addListener,
-    ensureBundles: ensureBundles,
+    ensureUpdateInfo: ensureUpdateInfo,
     updateBundle: updateBundle,
-    getUpdateInfo: getUpdateInfo,
-    HOT_UPDATER_BUNDLE_ID: core_namespaceObject.NIL_UUID
+    getUpdateInfo: getUpdateInfo
 };
 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

@@ -1583,6 +1583,12 @@ var __webpack_modules__ = {
         }, V = {
             transition: null
         };
+        exports.useEffect = function(a, b) {
+            return U.current.useEffect(a, b);
+        };
+        exports.useState = function(a) {
+            return U.current.useState(a);
+        };
         exports.useSyncExternalStore = function(a, b, e) {
             return U.current.useSyncExternalStore(a, b, e);
         };
@@ -3046,11 +3052,11 @@ const getUpdateInfo = async (bundles, { platform, bundleId, appVersion })=>{
     };
     return null;
 };
-const ensureBundles = async (bundle, { appVersion, bundleId, platform }, requestHeaders)=>{
+const ensureUpdateInfo = async (source, { appVersion, bundleId, platform }, requestHeaders)=>{
     try {
         let bundles = null;
-        if ("string" == typeof bundle) {
-            if (bundle.startsWith("http")) return await fetch(bundle, {
+        if ("string" == typeof source) {
+            if (source.startsWith("http")) return await fetch(source, {
                 headers: {
                     "x-app-platform": platform,
                     "x-app-version": appVersion,
@@ -3058,19 +3064,16 @@ const ensureBundles = async (bundle, { appVersion, bundleId, platform }, request
                     ...requestHeaders
                 }
             }).then((res)=>res.json());
-        } else bundles = "function" == typeof bundle ? await bundle() : bundle;
+        } else bundles = "function" == typeof source ? await source() : source;
         return bundles ?? [];
     } catch  {
         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
+};
 const LINKING_ERROR = `The package '@hot-updater/react-native' doesn't seem to be linked. Make sure: \n\n` + external_react_native_.Platform.select({
     ios: "- You have run 'pod install'\n",
     default: ""
@@ -3086,59 +3089,12 @@ const addListener = (eventName, listener)=>{
     const eventEmitter = new external_react_native_.NativeEventEmitter(HotUpdaterNative);
     eventEmitter?.addListener(eventName, listener);
 };
-const getBundleId = ()=>HotUpdater.HOT_UPDATER_BUNDLE_ID ?? __WEBPACK_EXTERNAL_MODULE__hot_updater_core__.NIL_UUID;
 const updateBundle = (bundleId, zipUrl)=>HotUpdaterNative.updateBundle(bundleId, zipUrl);
 const getAppVersion = ()=>HotUpdaterNative.getAppVersion();
 const reload = ()=>{
     HotUpdaterNative.reload();
 };
-const init = async (config)=>{
-    if (__DEV__) {
-        console.warn("[HotUpdater] __DEV__ is true, HotUpdater is only supported in production");
-        return;
-    }
-    if (![
-        "ios",
-        "android"
-    ].includes(external_react_native_.Platform.OS)) {
-        const error = new HotUpdaterError("HotUpdater is only supported on iOS and Android");
-        config?.onError?.(error);
-        throw error;
-    }
-    const currentAppVersion = await getAppVersion();
-    const platform = external_react_native_.Platform.OS;
-    const currentBundleId = await getBundleId();
-    if (!currentAppVersion) {
-        const error = new HotUpdaterError("Failed to get app version");
-        config?.onError?.(error);
-        throw error;
-    }
-    const bundles = await ensureBundles(config.source, {
-        appVersion: currentAppVersion,
-        bundleId: currentBundleId,
-        platform
-    }, config.requestHeaders);
-    let updateInfo = null;
-    updateInfo = Array.isArray(bundles) ? await getUpdateInfo(bundles, {
-        appVersion: currentAppVersion,
-        bundleId: currentBundleId,
-        platform
-    }) : bundles;
-    if (!updateInfo) {
-        config?.onSuccess?.("UP_TO_DATE");
-        return;
-    }
-    try {
-        const isSuccess = await updateBundle(updateInfo.id, updateInfo.fileUrl || "");
-        if (isSuccess && updateInfo.forceUpdate) {
-            reload();
-            config?.onSuccess?.("INSTALLING_UPDATE");
-        }
-    } catch (error) {
-        if (error instanceof HotUpdaterError) config?.onError?.(error);
-        throw error;
-    }
-};
+const getBundleId = ()=>HotUpdater.HOT_UPDATER_BUNDLE_ID;
 var react = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js");
 const createHotUpdaterStore = ()=>{
     let state = {
@@ -3168,20 +3124,104 @@ const createHotUpdaterStore = ()=>{
 };
 const hotUpdaterStore = createHotUpdaterStore();
 const useHotUpdaterStore = ()=>(0, react.useSyncExternalStore)(hotUpdaterStore.subscribe, hotUpdaterStore.getState, hotUpdaterStore.getState);
+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 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 wrap(config) {
+    return (WrappedComponent)=>{
+        const HotUpdaterHOC = (props)=>{
+            const [updateStatus, setUpdateStatus] = (0, react.useState)(null);
+            const [updateError, setUpdateError] = (0, react.useState)(null);
+            const { progress } = useHotUpdaterStore();
+            (0, react.useEffect)(()=>{
+                const initHotUpdater = async ()=>{
+                    try {
+                        const updateInfo = await checkUpdate(config);
+                        if (!updateInfo) {
+                            setUpdateStatus("UP_TO_DATE");
+                            return;
+                        }
+                        setUpdateStatus("UPDATING");
+                        const isSuccess = await installUpdate(updateInfo);
+                        if (isSuccess) setUpdateStatus("INSTALLING_UPDATE");
+                    } catch (error) {
+                        if (error instanceof HotUpdaterError) setUpdateError(error);
+                        throw error;
+                    }
+                };
+                initHotUpdater();
+            }, [
+                config.source,
+                config.requestHeaders
+            ]);
+            if ("UPDATING" === updateStatus && config.fallbackComponent) {
+                const Fallback = config.fallbackComponent;
+                return /*#__PURE__*/ React.createElement(Fallback, {
+                    progress: progress
+                });
+            }
+            return /*#__PURE__*/ React.createElement(WrappedComponent, {
+                ...props,
+                updateStatus: updateStatus,
+                updateError: updateError
+            });
+        };
+        return HotUpdaterHOC;
+    };
+}
 addListener("onProgress", ({ progress })=>{
     hotUpdaterStore.setState({
         progress
     });
 });
 const src_HotUpdater = {
-    init: init,
+    wrap: wrap,
     reload: reload,
     getAppVersion: getAppVersion,
     getBundleId: getBundleId,
     addListener: addListener,
-    ensureBundles: ensureBundles,
+    ensureUpdateInfo: ensureUpdateInfo,
     updateBundle: updateBundle,
-    getUpdateInfo: getUpdateInfo,
-    HOT_UPDATER_BUNDLE_ID: __WEBPACK_EXTERNAL_MODULE__hot_updater_core__.NIL_UUID
+    getUpdateInfo: getUpdateInfo
 };
 export { src_HotUpdater as HotUpdater, hotUpdaterStore, useHotUpdaterStore };

package/dist/native.d.ts

@@ -4,13 +4,6 @@ export type HotUpdaterEvent = {
     };
 };
 export declare const addListener: <T extends keyof HotUpdaterEvent>(eventName: T, listener: (event: HotUpdaterEvent[T]) => void) => void;
-/**
- * Fetches the current bundle version id.
- *
- * @async
- * @returns {Promise<string>} Resolves with the current version id or null if not available.
- */
-export declare const getBundleId: () => string;
 /**
  * Downloads files from given URLs.
  *
@@ -27,3 +20,10 @@ export declare const getAppVersion: () => Promise<string | null>;
  * Reloads the app.
  */
 export declare const reload: () => void;
+/**
+ * Fetches the current bundle version id.
+ *
+ * @async
+ * @returns {Promise<string>} Resolves with the current version id or null if not available.
+ */
+export declare const getBundleId: () => string;

package/dist/wrap.d.ts

@@ -0,0 +1,20 @@
+import type { BundleArg, UpdateInfo } from "@hot-updater/core";
+import type React from "react";
+import { HotUpdaterError } from "./error";
+export type HotUpdaterStatus = "INSTALLING_UPDATE" | "UP_TO_DATE" | "UPDATING";
+export interface CheckUpdateConfig {
+    source: BundleArg;
+    requestHeaders?: Record<string, string>;
+}
+export interface HotUpdaterConfig extends CheckUpdateConfig {
+    fallbackComponent?: React.FC<HotUpdaterFallbackProps>;
+}
+export interface HotUpdaterFallbackProps {
+    progress: number;
+}
+export interface WithHotUpdaterProps {
+    updateStatus: HotUpdaterStatus | null;
+    updateError: HotUpdaterError | null;
+}
+export declare function checkUpdate(config: CheckUpdateConfig): Promise<UpdateInfo | null>;
+export declare function wrap<P>(config: HotUpdaterConfig): (WrappedComponent: React.ComponentType<P & WithHotUpdaterProps>) => React.ComponentType<P>;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hot-updater/react-native",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "React Native OTA solution for self-hosted",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "source": "src/index.ts",
   "react-native": "src/index.ts",
   "types": "dist/index.d.ts",
@@ -73,10 +73,10 @@
     "react": "18.3.1",
     "react-native": "0.76.2",
     "react-native-builder-bob": "^0.33.1",
-    "@hot-updater/js": "0.2.0"
+    "@hot-updater/js": "0.3.1"
   },
   "dependencies": {
-    "@hot-updater/core": "0.2.0"
+    "@hot-updater/core": "0.3.1"
   },
   "scripts": {
     "build": "rslib build",

package/src/{ensureBundles.ts → ensureUpdateInfo.ts}

@@ -5,16 +5,16 @@ import type {
   UpdateInfo,
 } from "@hot-updater/core";
 
-export const ensureBundles = async (
-  bundle: BundleArg,
+export const ensureUpdateInfo = async (
+  source: BundleArg,
   { appVersion, bundleId, platform }: GetBundlesArgs,
   requestHeaders?: Record<string, string>,
 ): Promise<Bundle[] | UpdateInfo> => {
   try {
     let bundles: Bundle[] | null = null;
-    if (typeof bundle === "string") {
-      if (bundle.startsWith("http")) {
-        return await fetch(bundle, {
+    if (typeof source === "string") {
+      if (source.startsWith("http")) {
+        return await fetch(source, {
           headers: {
             "x-app-platform": platform,
             "x-app-version": appVersion,
@@ -23,10 +23,10 @@ export const ensureBundles = async (
           },
         }).then((res) => res.json());
       }
-    } else if (typeof bundle === "function") {
-      bundles = await bundle();
+    } else if (typeof source === "function") {
+      bundles = await source();
     } else {
-      bundles = bundle;
+      bundles = source;
     }
 
     return bundles ?? [];

package/src/index.ts

@@ -1,7 +1,5 @@
-import { NIL_UUID } from "@hot-updater/core";
 import { getUpdateInfo } from "@hot-updater/js";
-import { ensureBundles } from "./ensureBundles";
-import { init } from "./init";
+import { ensureUpdateInfo } from "./ensureUpdateInfo";
 import {
   addListener,
   getAppVersion,
@@ -10,8 +8,9 @@ import {
   updateBundle,
 } from "./native";
 import { hotUpdaterStore } from "./store";
+import { wrap } from "./wrap";
 
-export type * from "./init";
+export type * from "./wrap";
 export type * from "./native";
 
 export * from "./store";
@@ -21,17 +20,14 @@ addListener("onProgress", ({ progress }) => {
 });
 
 export const HotUpdater = {
-  init,
+  wrap,
+
   reload,
   getAppVersion,
   getBundleId,
   addListener,
 
-  ensureBundles,
+  ensureUpdateInfo,
   updateBundle,
   getUpdateInfo,
-  /**
-   * In production environment, this value will be replaced with a uuidv7.
-   */
-  HOT_UPDATER_BUNDLE_ID: NIL_UUID,
 };

package/src/native.ts

@@ -1,6 +1,10 @@
 import { NIL_UUID } from "@hot-updater/core";
 import { NativeEventEmitter, NativeModules, Platform } from "react-native";
 
+const HotUpdater = {
+  HOT_UPDATER_BUNDLE_ID: NIL_UUID,
+};
+
 const LINKING_ERROR =
   // biome-ignore lint/style/useTemplate: <explanation>
   `The package '@hot-updater/react-native' doesn't seem to be linked. Make sure: \n\n` +
@@ -41,16 +45,6 @@ export const addListener = <T extends keyof HotUpdaterEvent>(
   eventEmitter?.addListener(eventName, listener);
 };
 
-/**
- * Fetches the current bundle version id.
- *
- * @async
- * @returns {Promise<string>} Resolves with the current version id or null if not available.
- */
-export const getBundleId = (): string => {
-  return HotUpdater.HOT_UPDATER_BUNDLE_ID ?? NIL_UUID;
-};
-
 /**
  * Downloads files from given URLs.
  *
@@ -78,3 +72,13 @@ export const getAppVersion = (): Promise<string | null> => {
 export const reload = () => {
   HotUpdaterNative.reload();
 };
+
+/**
+ * Fetches the current bundle version id.
+ *
+ * @async
+ * @returns {Promise<string>} Resolves with the current version id or null if not available.
+ */
+export const getBundleId = (): string => {
+  return HotUpdater.HOT_UPDATER_BUNDLE_ID;
+};

package/src/wrap.tsx

@@ -0,0 +1,148 @@
+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 { HotUpdaterError } from "./error";
+import { getAppVersion, getBundleId, reload, updateBundle } from "./native";
+import { useHotUpdaterStore } from "./store";
+
+export type HotUpdaterStatus = "INSTALLING_UPDATE" | "UP_TO_DATE" | "UPDATING";
+
+export interface CheckUpdateConfig {
+  source: BundleArg;
+  requestHeaders?: Record<string, string>;
+}
+
+export interface HotUpdaterConfig extends CheckUpdateConfig {
+  fallbackComponent?: React.FC<HotUpdaterFallbackProps>;
+}
+
+export interface HotUpdaterFallbackProps {
+  progress: number;
+}
+
+export interface WithHotUpdaterProps {
+  updateStatus: HotUpdaterStatus | null;
+  updateError: HotUpdaterError | null;
+}
+
+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;
+}
+
+export function wrap<P>(
+  config: HotUpdaterConfig,
+): (
+  WrappedComponent: React.ComponentType<P & WithHotUpdaterProps>,
+) => React.ComponentType<P> {
+  return (WrappedComponent) => {
+    const HotUpdaterHOC: React.FC<P> = (props) => {
+      const [updateStatus, setUpdateStatus] = useState<HotUpdaterStatus | null>(
+        null,
+      );
+      const [updateError, setUpdateError] = useState<HotUpdaterError | null>(
+        null,
+      );
+
+      const { progress } = useHotUpdaterStore();
+
+      useEffect(() => {
+        const initHotUpdater = async () => {
+          try {
+            const updateInfo = await checkUpdate(config);
+
+            if (!updateInfo) {
+              setUpdateStatus("UP_TO_DATE");
+              return;
+            }
+
+            setUpdateStatus("UPDATING");
+            const isSuccess = await installUpdate(updateInfo);
+            if (isSuccess) {
+              setUpdateStatus("INSTALLING_UPDATE");
+            }
+          } catch (error) {
+            if (error instanceof HotUpdaterError) {
+              setUpdateError(error);
+            }
+            throw error;
+          }
+        };
+
+        initHotUpdater();
+      }, [config.source, config.requestHeaders]);
+
+      if (updateStatus === "UPDATING" && config.fallbackComponent) {
+        const Fallback = config.fallbackComponent;
+        return <Fallback progress={progress} />;
+      }
+
+      return (
+        <WrappedComponent
+          {...props}
+          updateStatus={updateStatus}
+          updateError={updateError}
+        />
+      );
+    };
+
+    return HotUpdaterHOC;
+  };
+}

package/dist/ensureBundles.d.ts

@@ -1,2 +0,0 @@
-import type { Bundle, BundleArg, GetBundlesArgs, UpdateInfo } from "@hot-updater/core";
-export declare const ensureBundles: (bundle: BundleArg, { appVersion, bundleId, platform }: GetBundlesArgs, requestHeaders?: Record<string, string>) => Promise<Bundle[] | UpdateInfo>;

package/dist/init.d.ts

@@ -1,10 +0,0 @@
-import type { BundleArg } from "@hot-updater/core";
-import { HotUpdaterError } from "./error";
-export type HotUpdaterStatus = "INSTALLING_UPDATE" | "UP_TO_DATE";
-export interface HotUpdaterInitConfig {
-    source: BundleArg;
-    requestHeaders?: Record<string, string>;
-    onSuccess?: (status: HotUpdaterStatus) => void;
-    onError?: (error: HotUpdaterError) => void;
-}
-export declare const init: (config: HotUpdaterInitConfig) => Promise<void>;

package/src/init.tsx

@@ -1,88 +0,0 @@
-import type { BundleArg, UpdateInfo } from "@hot-updater/core";
-import { getUpdateInfo } from "@hot-updater/js";
-import { Platform } from "react-native";
-import { ensureBundles } from "./ensureBundles";
-import { HotUpdaterError } from "./error";
-import { getAppVersion, getBundleId, reload, updateBundle } from "./native";
-
-export type HotUpdaterStatus = "INSTALLING_UPDATE" | "UP_TO_DATE";
-
-export interface HotUpdaterInitConfig {
-  source: BundleArg;
-  requestHeaders?: Record<string, string>;
-  onSuccess?: (status: HotUpdaterStatus) => void;
-  onError?: (error: HotUpdaterError) => void;
-}
-
-export const init = async (config: HotUpdaterInitConfig) => {
-  if (__DEV__) {
-    console.warn(
-      "[HotUpdater] __DEV__ is true, HotUpdater is only supported in production",
-    );
-    return;
-  }
-
-  if (!["ios", "android"].includes(Platform.OS)) {
-    const error = new HotUpdaterError(
-      "HotUpdater is only supported on iOS and Android",
-    );
-
-    config?.onError?.(error);
-    throw error;
-  }
-
-  const currentAppVersion = await getAppVersion();
-  const platform = Platform.OS as "ios" | "android";
-  const currentBundleId = await getBundleId();
-
-  if (!currentAppVersion) {
-    const error = new HotUpdaterError("Failed to get app version");
-    config?.onError?.(error);
-    throw error;
-  }
-
-  const bundles = await ensureBundles(
-    config.source,
-    {
-      appVersion: currentAppVersion,
-      bundleId: currentBundleId,
-      platform,
-    },
-    config.requestHeaders,
-  );
-
-  let updateInfo: UpdateInfo | null = null;
-  if (Array.isArray(bundles)) {
-    // Direct comparison
-    updateInfo = await getUpdateInfo(bundles, {
-      appVersion: currentAppVersion,
-      bundleId: currentBundleId,
-      platform,
-    });
-  } else {
-    // Already verified from server
-    updateInfo = bundles;
-  }
-
-  if (!updateInfo) {
-    config?.onSuccess?.("UP_TO_DATE");
-    return;
-  }
-
-  try {
-    const isSuccess = await updateBundle(
-      updateInfo.id,
-      updateInfo.fileUrl || "",
-    );
-    if (isSuccess && updateInfo.forceUpdate) {
-      reload();
-
-      config?.onSuccess?.("INSTALLING_UPDATE");
-    }
-  } catch (error) {
-    if (error instanceof HotUpdaterError) {
-      config?.onError?.(error);
-    }
-    throw error;
-  }
-};