@tinasoft/miniapp-host-demo 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HUNGTV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,86 @@
-# Temporary Holding Version
+# @tinasoft/miniapp-host-demo
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Open mini apps inside your React Native app, super-app style.
+
+- **Web mini apps** in a WebView, with a token bridge that only answers the mini app's own origin, navigation locked to that origin, and the mini app's `console` / JS errors forwarded to the host.
+- **React Native mini apps** loaded at runtime with [Re.Pack](https://re-pack.dev) Module Federation, receiving the session as props, with render errors contained.
+
+Tokens are never put in URLs or pre-injected into pages, and are masked (`***`) in every log line.
+
+## Install
+
+```sh
+npm install @tinasoft/miniapp-host-demo react-native-webview react-native-safe-area-context
+cd ios && pod install
+```
+
+Wrap your app in `SafeAreaProvider` from `react-native-safe-area-context`.
+
+## Web mini app
+
+```tsx
+import { MiniAppWebView } from '@tinasoft/miniapp-host-demo';
+
+<MiniAppWebView
+  app={{
+    id: 'profile',
+    name: 'Profile',
+    url: 'https://profile.example.com/',
+    origin: 'https://profile.example.com',
+  }}
+  getSession={async appId => ({ token, expiresAt, user })}
+  onLog={(tag, level, ...args) => console[level](`[${tag}]`, ...args)}
+  onClose={() => setOpen(null)}
+/>
+```
+
+Inside the web page:
+
+```js
+const { token, user } = await window.host.getSession();
+console.log('hello host'); // shows up in the host as [mini:profile] hello host
+```
+
+## React Native mini app (Re.Pack)
+
+The host must be built with Re.Pack and declare the remote in `rspack.config.mjs`
+(`new Repack.plugins.ModuleFederationPluginV2({ remotes: { wallet: 'wallet@https://cdn.example.com/wallet/ios/mf-manifest.json' } })`).
+
+```tsx
+import { RnMiniAppHost } from '@tinasoft/miniapp-host-demo';
+
+const loadWallet = () => import('wallet/App'); // keep it outside the component
+
+<RnMiniAppHost
+  app={{ id: 'wallet', name: 'Wallet' }}
+  load={loadWallet}
+  getSession={getSession}
+  onClose={() => setOpen(null)}
+/>
+```
+
+The mini app exposes `./App`, a component that receives `MiniAppProps`:
+
+```tsx
+import type { MiniAppProps } from '@tinasoft/miniapp-host-demo';
+
+export default function App({ session, log }: MiniAppProps) {
+  log('log', 'opened by', session.user.id);
+  return null;
+}
+```
+
+## API
+
+| Export | What it is |
+| --- | --- |
+| `MiniAppWebView` | Screen that hosts a web mini app (`app`, `getSession`, `onLog?`, `onClose?`, `closeLabel?`) |
+| `RnMiniAppHost` | Screen that hosts a Re.Pack mini app (`app`, `load`, `getSession`, `onLog?`, `onClose?`, `closeLabel?`) |
+| `isAllowedUrl(app, url)` | Origin check used for messages and navigation |
+| `redact(value)` | `JSON.stringify` with every `token` field masked |
+| `consoleLog` | Default `onLog`: console with `[tag]` prefix and masking |
+| `BRIDGE_SCRIPT` | The script injected into web mini apps |
+
+## License
+
+MIT

package/lib/Header.d.ts

@@ -0,0 +1,5 @@
+export declare function Header({ title, onClose, closeLabel, }: {
+    title: string;
+    onClose?: () => void;
+    closeLabel: string;
+}): import("react").JSX.Element;

package/lib/Header.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = Header;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+function Header({ title, onClose, closeLabel, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: title }), onClose && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onClose, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: closeLabel, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.close, children: closeLabel }) }))] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        height: 48,
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#ccc',
+    },
+    title: { fontSize: 17, fontWeight: '600', color: '#111' },
+    close: { fontSize: 16, color: '#2563eb' },
+});

package/lib/MiniAppWebView.d.ts

@@ -0,0 +1,17 @@
+import type { GetSession, OnLog } from './types';
+export type WebMiniApp = {
+    id: string;
+    name: string;
+    url: string;
+    /** Chỉ origin này được nhận session và được điều hướng tới, vd 'https://wallet.example.com'. */
+    origin: string;
+};
+export declare const isAllowedUrl: (app: Pick<WebMiniApp, "origin">, url: string) => boolean;
+export type MiniAppWebViewProps = {
+    app: WebMiniApp;
+    getSession: GetSession;
+    onLog?: OnLog;
+    onClose?: () => void;
+    closeLabel?: string;
+};
+export declare const MiniAppWebView: import("react").MemoExoticComponent<({ app, getSession, onLog, onClose, closeLabel, }: MiniAppWebViewProps) => import("react").JSX.Element>;

package/lib/MiniAppWebView.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiniAppWebView = exports.isAllowedUrl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const react_native_webview_1 = require("react-native-webview");
+const bridge_1 = require("./bridge");
+const Header_1 = require("./Header");
+const log_1 = require("./log");
+// Thêm '/' để 'https://a.com.evil.com' không lọt qua startsWith.
+const isAllowedUrl = (app, url) => url.startsWith(app.origin + '/');
+exports.isAllowedUrl = isAllowedUrl;
+// memo + props ổn định: WebView không bị render lại/tải lại khi host re-render.
+exports.MiniAppWebView = (0, react_1.memo)(function Screen({ app, getSession, onLog = log_1.consoleLog, onClose, closeLabel = 'Đóng', }) {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    // WebView<{}>: kiểu mặc định của react-native-webview 14 thành never với TS 6.
+    const ref = (0, react_1.useRef)(null);
+    const tag = `mini:${app.id}`;
+    const source = (0, react_1.useMemo)(() => ({ uri: app.url }), [app.url]);
+    const whitelist = (0, react_1.useMemo)(() => [app.origin], [app.origin]);
+    const onMessage = (0, react_1.useCallback)(async (e) => {
+        // Chỉ tin message từ đúng origin của mini app.
+        if (!(0, exports.isAllowedUrl)(app, e.nativeEvent.url)) {
+            onLog('host', 'warn', 'bỏ qua message từ origin lạ:', e.nativeEvent.url);
+            return;
+        }
+        let msg;
+        try {
+            msg = JSON.parse(e.nativeEvent.data);
+        }
+        catch {
+            return;
+        }
+        if (msg?.type === 'log' && Array.isArray(msg.items)) {
+            msg.items.forEach((i) => onLog(tag, i.level === 'warn' || i.level === 'error' ? i.level : 'log', String(i.msg)));
+        }
+        else if (msg?.type === 'getSession') {
+            try {
+                const session = await getSession(app.id);
+                onLog('host', 'log', `gửi session cho ${app.id}:`, session);
+                ref.current?.injectJavaScript(`window.host && window.host._deliver(${JSON.stringify(session)}); true;`);
+            }
+            catch (err) {
+                onLog('host', 'error', `không lấy được session cho ${app.id}:`, String(err));
+            }
+        }
+    }, [app, tag, getSession, onLog]);
+    // Chặn điều hướng ra ngoài origin; link lạ mở bằng trình duyệt hệ thống.
+    const onShouldStart = (0, react_1.useCallback)((req) => {
+        if ((0, exports.isAllowedUrl)(app, req.url)) {
+            return true;
+        }
+        onLog('host', 'warn', 'chặn điều hướng:', req.url);
+        if (/^https?:/.test(req.url)) {
+            react_native_1.Linking.openURL(req.url);
+        }
+        return false;
+    }, [app, onLog]);
+    // Dùng lâu, thiếu RAM thì OS kill tiến trình web (màn trắng) → tải lại.
+    const reload = (0, react_1.useCallback)(() => {
+        onLog('host', 'warn', `tiến trình web của ${app.id} bị kill, tải lại`);
+        ref.current?.reload();
+    }, [app.id, onLog]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { paddingTop: insets.top }], children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { title: app.name, onClose: onClose, closeLabel: closeLabel }), (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: ref, source: source, originWhitelist: whitelist, injectedJavaScriptBeforeContentLoaded: bridge_1.BRIDGE_SCRIPT, onMessage: onMessage, onShouldStartLoadWithRequest: onShouldStart, onContentProcessDidTerminate: reload, onRenderProcessGone: reload, onLoadStart: () => onLog('host', 'log', `mở ${app.id}: ${app.url}`), onError: e => onLog('host', 'error', 'WebView lỗi:', e.nativeEvent.description), webviewDebuggingEnabled: __DEV__ })] }));
+});
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1, backgroundColor: '#fff' },
+});

package/lib/RnMiniAppHost.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType } from 'react';
+import type { GetSession, MiniAppProps, OnLog } from './types';
+export type RnMiniApp = {
+    id: string;
+    name: string;
+};
+export type RnMiniAppHostProps = {
+    app: RnMiniApp;
+    /**
+     * Tải module mini app, vd `() => import('wallet/App')` với remote khai báo
+     * trong rspack.config của host. Truyền hàm cố định (khai báo ngoài component).
+     */
+    load: () => Promise<{
+        default: ComponentType<MiniAppProps>;
+    }>;
+    getSession: GetSession;
+    onLog?: OnLog;
+    onClose?: () => void;
+    closeLabel?: string;
+};
+export declare function RnMiniAppHost({ app, load, getSession, onLog, onClose, closeLabel, }: RnMiniAppHostProps): import("react").JSX.Element;

package/lib/RnMiniAppHost.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RnMiniAppHost = RnMiniAppHost;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const Header_1 = require("./Header");
+const log_1 = require("./log");
+// Mini app chạy chung runtime với host: lỗi render của nó phải bị chặn ở đây,
+// nếu không sẽ làm sập cả app cha.
+class Boundary extends react_1.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {};
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error) {
+        this.props.onLog(this.props.tag, 'error', error.message);
+    }
+    render() {
+        return this.state.error ? ((0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.error, children: ["Kh\u00F4ng t\u1EA3i \u0111\u01B0\u1EE3c mini app: ", this.state.error.message] })) : (this.props.children);
+    }
+}
+function RnMiniAppHost({ app, load, getSession, onLog = log_1.consoleLog, onClose, closeLabel = 'Đóng', }) {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const tag = `mini:${app.id}`;
+    // Bundle chỉ được tải khi mini app được mở lần đầu.
+    const Remote = (0, react_1.useMemo)(() => (0, react_1.lazy)(load), [load]);
+    const [session, setSession] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let alive = true;
+        Promise.resolve(getSession(app.id)).then(s => {
+            if (!alive)
+                return;
+            onLog('host', 'log', `gửi session cho ${app.id}:`, s);
+            setSession(s);
+        }, err => onLog('host', 'error', `không lấy được session cho ${app.id}:`, String(err)));
+        return () => {
+            alive = false;
+        };
+    }, [app.id, getSession, onLog]);
+    const miniLog = (0, react_1.useCallback)((level, ...args) => onLog(tag, level, ...args), [tag, onLog]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, { paddingTop: insets.top }], children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { title: app.name, onClose: onClose, closeLabel: closeLabel }), (0, jsx_runtime_1.jsx)(Boundary, { tag: tag, onLog: onLog, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { style: styles.loading }), children: session ? ((0, jsx_runtime_1.jsx)(Remote, { session: session, log: miniLog })) : ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { style: styles.loading })) }) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1, backgroundColor: '#fff' },
+    loading: { marginTop: 40 },
+    error: { margin: 16, color: '#dc2626' },
+});

package/lib/bridge.d.ts

@@ -0,0 +1 @@
+export declare const BRIDGE_SCRIPT = "\n(function () {\n  if (window.host) return;\n  var queue = [];\n  var waiting = [];\n  function send(m) { window.ReactNativeWebView.postMessage(JSON.stringify(m)); }\n  function fmt(a) {\n    if (typeof a === 'string') return a;\n    if (a instanceof Error) return a.stack || a.message;\n    try { return JSON.stringify(a); } catch (e) { return String(a); }\n  }\n  function push(level, args) {\n    if (queue.length >= 50) return; // ch\u1ED1ng spam l\u00E0m ngh\u1EBDn bridge\n    queue.push({ level: level, msg: [].map.call(args, fmt).join(' ').slice(0, 1000) });\n  }\n  ['log', 'warn', 'error'].forEach(function (level) {\n    var orig = console[level];\n    console[level] = function () { orig.apply(console, arguments); push(level, arguments); };\n  });\n  window.addEventListener('error', function (e) {\n    push('error', [e.message + ' (' + e.filename + ':' + e.lineno + ')']);\n  });\n  window.addEventListener('unhandledrejection', function (e) {\n    push('error', ['Unhandled rejection:', e.reason]);\n  });\n  setInterval(function () {\n    if (queue.length) { send({ type: 'log', items: queue }); queue = []; }\n  }, 300);\n  window.host = {\n    getSession: function () {\n      return new Promise(function (resolve) {\n        waiting.push(resolve);\n        if (waiting.length === 1) send({ type: 'getSession' });\n      });\n    },\n    _deliver: function (session) {\n      var w = waiting; waiting = [];\n      w.forEach(function (resolve) { resolve(session); });\n    },\n  };\n})();\ntrue;\n";

package/lib/bridge.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BRIDGE_SCRIPT = void 0;
+// Script chạy trong WebView trước khi trang load.
+// - Gom console.log/warn/error + lỗi JS, gửi về host theo lô mỗi 300ms.
+// - window.host.getSession(): Promise trả { token, expiresAt, user }.
+// Không chứa token: host chỉ trả session sau khi kiểm tra origin.
+exports.BRIDGE_SCRIPT = `
+(function () {
+  if (window.host) return;
+  var queue = [];
+  var waiting = [];
+  function send(m) { window.ReactNativeWebView.postMessage(JSON.stringify(m)); }
+  function fmt(a) {
+    if (typeof a === 'string') return a;
+    if (a instanceof Error) return a.stack || a.message;
+    try { return JSON.stringify(a); } catch (e) { return String(a); }
+  }
+  function push(level, args) {
+    if (queue.length >= 50) return; // chống spam làm nghẽn bridge
+    queue.push({ level: level, msg: [].map.call(args, fmt).join(' ').slice(0, 1000) });
+  }
+  ['log', 'warn', 'error'].forEach(function (level) {
+    var orig = console[level];
+    console[level] = function () { orig.apply(console, arguments); push(level, arguments); };
+  });
+  window.addEventListener('error', function (e) {
+    push('error', [e.message + ' (' + e.filename + ':' + e.lineno + ')']);
+  });
+  window.addEventListener('unhandledrejection', function (e) {
+    push('error', ['Unhandled rejection:', e.reason]);
+  });
+  setInterval(function () {
+    if (queue.length) { send({ type: 'log', items: queue }); queue = []; }
+  }, 300);
+  window.host = {
+    getSession: function () {
+      return new Promise(function (resolve) {
+        waiting.push(resolve);
+        if (waiting.length === 1) send({ type: 'getSession' });
+      });
+    },
+    _deliver: function (session) {
+      var w = waiting; waiting = [];
+      w.forEach(function (resolve) { resolve(session); });
+    },
+  };
+})();
+true;
+`;

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export { BRIDGE_SCRIPT } from './bridge';
+export { consoleLog, redact } from './log';
+export { isAllowedUrl, MiniAppWebView } from './MiniAppWebView';
+export type { MiniAppWebViewProps, WebMiniApp } from './MiniAppWebView';
+export { RnMiniAppHost } from './RnMiniAppHost';
+export type { RnMiniApp, RnMiniAppHostProps } from './RnMiniAppHost';
+export type { GetSession, LogLevel, MiniAppProps, OnLog, Session } from './types';

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RnMiniAppHost = exports.MiniAppWebView = exports.isAllowedUrl = exports.redact = exports.consoleLog = exports.BRIDGE_SCRIPT = void 0;
+var bridge_1 = require("./bridge");
+Object.defineProperty(exports, "BRIDGE_SCRIPT", { enumerable: true, get: function () { return bridge_1.BRIDGE_SCRIPT; } });
+var log_1 = require("./log");
+Object.defineProperty(exports, "consoleLog", { enumerable: true, get: function () { return log_1.consoleLog; } });
+Object.defineProperty(exports, "redact", { enumerable: true, get: function () { return log_1.redact; } });
+var MiniAppWebView_1 = require("./MiniAppWebView");
+Object.defineProperty(exports, "isAllowedUrl", { enumerable: true, get: function () { return MiniAppWebView_1.isAllowedUrl; } });
+Object.defineProperty(exports, "MiniAppWebView", { enumerable: true, get: function () { return MiniAppWebView_1.MiniAppWebView; } });
+var RnMiniAppHost_1 = require("./RnMiniAppHost");
+Object.defineProperty(exports, "RnMiniAppHost", { enumerable: true, get: function () { return RnMiniAppHost_1.RnMiniAppHost; } });

package/lib/log.d.ts

@@ -0,0 +1,5 @@
+import type { OnLog } from './types';
+/** JSON.stringify nhưng che mọi trường `token`, kể cả lồng sâu. */
+export declare const redact: (value: unknown) => string;
+/** Log mặc định: in ra console với prefix [tag], token bị che. */
+export declare const consoleLog: OnLog;

package/lib/log.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.consoleLog = exports.redact = void 0;
+/** JSON.stringify nhưng che mọi trường `token`, kể cả lồng sâu. */
+const redact = (value) => JSON.stringify(value, (key, v) => (key === 'token' ? '***' : v));
+exports.redact = redact;
+/** Log mặc định: in ra console với prefix [tag], token bị che. */
+const consoleLog = (tag, level, ...args) => console[level](`[${tag}]`, ...args.map(a => (typeof a === 'string' ? a : (0, exports.redact)(a))));
+exports.consoleLog = consoleLog;

package/lib/types.d.ts

@@ -0,0 +1,18 @@
+export type LogLevel = 'log' | 'warn' | 'error';
+/** Dữ liệu host cấp cho mini app. `user` tuỳ app, tối thiểu có `id`. */
+export type Session = {
+    token: string;
+    expiresAt: number;
+    user: {
+        id: string;
+    } & Record<string, unknown>;
+};
+/** Host tự quyết lấy session thế nào (token giả, hoặc gọi backend đổi token). */
+export type GetSession = (miniAppId: string) => Session | Promise<Session>;
+/** Nơi host nhận log của chính nó (`tag = 'host'`) và của mini app (`tag = 'mini:<id>'`). */
+export type OnLog = (tag: string, level: LogLevel, ...args: unknown[]) => void;
+/** Props mà mini app React Native nhận từ host. */
+export type MiniAppProps = {
+    session: Session;
+    log: (level: LogLevel, ...args: unknown[]) => void;
+};

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@tinasoft/miniapp-host-demo",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Host mini apps inside a React Native app: WebView mini apps with a secure token bridge and log forwarding, and React Native mini apps loaded with Re.Pack / Module Federation.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepack": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "mini-app",
+    "super-app",
+    "webview",
+    "module-federation",
+    "repack"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.74",
+    "react-native-safe-area-context": ">=4",
+    "react-native-webview": ">=13"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "react": "19.2.3",
+    "react-native": "0.87.1",
+    "react-native-safe-area-context": "^5.5.2",
+    "react-native-webview": "^14.0.1",
+    "typescript": "^6.0.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hungto228/miniapp-host-demo.git"
+  },
+  "homepage": "https://github.com/hungto228/miniapp-host-demo#readme",
+  "bugs": {
+    "url": "https://github.com/hungto228/miniapp-host-demo/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Header.tsx

@@ -0,0 +1,40 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+export function Header({
+  title,
+  onClose,
+  closeLabel,
+}: {
+  title: string;
+  onClose?: () => void;
+  closeLabel: string;
+}) {
+  return (
+    <View style={styles.header}>
+      <Text style={styles.title}>{title}</Text>
+      {onClose && (
+        <Pressable
+          onPress={onClose}
+          hitSlop={12}
+          accessibilityRole="button"
+          accessibilityLabel={closeLabel}>
+          <Text style={styles.close}>{closeLabel}</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    height: 48,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#ccc',
+  },
+  title: { fontSize: 17, fontWeight: '600', color: '#111' },
+  close: { fontSize: 16, color: '#2563eb' },
+});

package/src/MiniAppWebView.tsx

@@ -0,0 +1,126 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { Linking, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { BRIDGE_SCRIPT } from './bridge';
+import { Header } from './Header';
+import { consoleLog } from './log';
+import type { GetSession, OnLog } from './types';
+
+export type WebMiniApp = {
+  id: string;
+  name: string;
+  url: string;
+  /** Chỉ origin này được nhận session và được điều hướng tới, vd 'https://wallet.example.com'. */
+  origin: string;
+};
+
+// Thêm '/' để 'https://a.com.evil.com' không lọt qua startsWith.
+export const isAllowedUrl = (app: Pick<WebMiniApp, 'origin'>, url: string) =>
+  url.startsWith(app.origin + '/');
+
+export type MiniAppWebViewProps = {
+  app: WebMiniApp;
+  getSession: GetSession;
+  onLog?: OnLog;
+  onClose?: () => void;
+  closeLabel?: string;
+};
+
+// memo + props ổn định: WebView không bị render lại/tải lại khi host re-render.
+export const MiniAppWebView = memo(function Screen({
+  app,
+  getSession,
+  onLog = consoleLog,
+  onClose,
+  closeLabel = 'Đóng',
+}: MiniAppWebViewProps) {
+  const insets = useSafeAreaInsets();
+  // WebView<{}>: kiểu mặc định của react-native-webview 14 thành never với TS 6.
+  const ref = useRef<WebView<{}>>(null);
+  const tag = `mini:${app.id}`;
+  const source = useMemo(() => ({ uri: app.url }), [app.url]);
+  const whitelist = useMemo(() => [app.origin], [app.origin]);
+
+  const onMessage = useCallback(
+    async (e: WebViewMessageEvent) => {
+      // Chỉ tin message từ đúng origin của mini app.
+      if (!isAllowedUrl(app, e.nativeEvent.url)) {
+        onLog('host', 'warn', 'bỏ qua message từ origin lạ:', e.nativeEvent.url);
+        return;
+      }
+      let msg: any;
+      try {
+        msg = JSON.parse(e.nativeEvent.data);
+      } catch {
+        return;
+      }
+      if (msg?.type === 'log' && Array.isArray(msg.items)) {
+        msg.items.forEach((i: any) =>
+          onLog(
+            tag,
+            i.level === 'warn' || i.level === 'error' ? i.level : 'log',
+            String(i.msg),
+          ),
+        );
+      } else if (msg?.type === 'getSession') {
+        try {
+          const session = await getSession(app.id);
+          onLog('host', 'log', `gửi session cho ${app.id}:`, session);
+          ref.current?.injectJavaScript(
+            `window.host && window.host._deliver(${JSON.stringify(session)}); true;`,
+          );
+        } catch (err) {
+          onLog('host', 'error', `không lấy được session cho ${app.id}:`, String(err));
+        }
+      }
+    },
+    [app, tag, getSession, onLog],
+  );
+
+  // Chặn điều hướng ra ngoài origin; link lạ mở bằng trình duyệt hệ thống.
+  const onShouldStart = useCallback(
+    (req: { url: string }) => {
+      if (isAllowedUrl(app, req.url)) {
+        return true;
+      }
+      onLog('host', 'warn', 'chặn điều hướng:', req.url);
+      if (/^https?:/.test(req.url)) {
+        Linking.openURL(req.url);
+      }
+      return false;
+    },
+    [app, onLog],
+  );
+
+  // Dùng lâu, thiếu RAM thì OS kill tiến trình web (màn trắng) → tải lại.
+  const reload = useCallback(() => {
+    onLog('host', 'warn', `tiến trình web của ${app.id} bị kill, tải lại`);
+    ref.current?.reload();
+  }, [app.id, onLog]);
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      <Header title={app.name} onClose={onClose} closeLabel={closeLabel} />
+      <WebView<{}>
+        ref={ref}
+        source={source}
+        originWhitelist={whitelist}
+        injectedJavaScriptBeforeContentLoaded={BRIDGE_SCRIPT}
+        onMessage={onMessage}
+        onShouldStartLoadWithRequest={onShouldStart}
+        onContentProcessDidTerminate={reload}
+        onRenderProcessGone={reload}
+        onLoadStart={() => onLog('host', 'log', `mở ${app.id}: ${app.url}`)}
+        onError={e =>
+          onLog('host', 'error', 'WebView lỗi:', e.nativeEvent.description)
+        }
+        webviewDebuggingEnabled={__DEV__}
+      />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff' },
+});

package/src/RnMiniAppHost.tsx

@@ -0,0 +1,111 @@
+import {
+  Component,
+  ComponentType,
+  lazy,
+  ReactNode,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Header } from './Header';
+import { consoleLog } from './log';
+import type { GetSession, LogLevel, MiniAppProps, OnLog, Session } from './types';
+
+export type RnMiniApp = { id: string; name: string };
+
+export type RnMiniAppHostProps = {
+  app: RnMiniApp;
+  /**
+   * Tải module mini app, vd `() => import('wallet/App')` với remote khai báo
+   * trong rspack.config của host. Truyền hàm cố định (khai báo ngoài component).
+   */
+  load: () => Promise<{ default: ComponentType<MiniAppProps> }>;
+  getSession: GetSession;
+  onLog?: OnLog;
+  onClose?: () => void;
+  closeLabel?: string;
+};
+
+// Mini app chạy chung runtime với host: lỗi render của nó phải bị chặn ở đây,
+// nếu không sẽ làm sập cả app cha.
+class Boundary extends Component<
+  { tag: string; onLog: OnLog; children: ReactNode },
+  { error?: Error }
+> {
+  state: { error?: Error } = {};
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  componentDidCatch(error: Error) {
+    this.props.onLog(this.props.tag, 'error', error.message);
+  }
+  render() {
+    return this.state.error ? (
+      <Text style={styles.error}>
+        Không tải được mini app: {this.state.error.message}
+      </Text>
+    ) : (
+      this.props.children
+    );
+  }
+}
+
+export function RnMiniAppHost({
+  app,
+  load,
+  getSession,
+  onLog = consoleLog,
+  onClose,
+  closeLabel = 'Đóng',
+}: RnMiniAppHostProps) {
+  const insets = useSafeAreaInsets();
+  const tag = `mini:${app.id}`;
+  // Bundle chỉ được tải khi mini app được mở lần đầu.
+  const Remote = useMemo(() => lazy(load), [load]);
+  const [session, setSession] = useState<Session | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    Promise.resolve(getSession(app.id)).then(
+      s => {
+        if (!alive) return;
+        onLog('host', 'log', `gửi session cho ${app.id}:`, s);
+        setSession(s);
+      },
+      err => onLog('host', 'error', `không lấy được session cho ${app.id}:`, String(err)),
+    );
+    return () => {
+      alive = false;
+    };
+  }, [app.id, getSession, onLog]);
+
+  const miniLog = useCallback(
+    (level: LogLevel, ...args: unknown[]) => onLog(tag, level, ...args),
+    [tag, onLog],
+  );
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      <Header title={app.name} onClose={onClose} closeLabel={closeLabel} />
+      <Boundary tag={tag} onLog={onLog}>
+        <Suspense fallback={<ActivityIndicator style={styles.loading} />}>
+          {session ? (
+            <Remote session={session} log={miniLog} />
+          ) : (
+            <ActivityIndicator style={styles.loading} />
+          )}
+        </Suspense>
+      </Boundary>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff' },
+  loading: { marginTop: 40 },
+  error: { margin: 16, color: '#dc2626' },
+});

package/src/bridge.ts

@@ -0,0 +1,47 @@
+// Script chạy trong WebView trước khi trang load.
+// - Gom console.log/warn/error + lỗi JS, gửi về host theo lô mỗi 300ms.
+// - window.host.getSession(): Promise trả { token, expiresAt, user }.
+// Không chứa token: host chỉ trả session sau khi kiểm tra origin.
+export const BRIDGE_SCRIPT = `
+(function () {
+  if (window.host) return;
+  var queue = [];
+  var waiting = [];
+  function send(m) { window.ReactNativeWebView.postMessage(JSON.stringify(m)); }
+  function fmt(a) {
+    if (typeof a === 'string') return a;
+    if (a instanceof Error) return a.stack || a.message;
+    try { return JSON.stringify(a); } catch (e) { return String(a); }
+  }
+  function push(level, args) {
+    if (queue.length >= 50) return; // chống spam làm nghẽn bridge
+    queue.push({ level: level, msg: [].map.call(args, fmt).join(' ').slice(0, 1000) });
+  }
+  ['log', 'warn', 'error'].forEach(function (level) {
+    var orig = console[level];
+    console[level] = function () { orig.apply(console, arguments); push(level, arguments); };
+  });
+  window.addEventListener('error', function (e) {
+    push('error', [e.message + ' (' + e.filename + ':' + e.lineno + ')']);
+  });
+  window.addEventListener('unhandledrejection', function (e) {
+    push('error', ['Unhandled rejection:', e.reason]);
+  });
+  setInterval(function () {
+    if (queue.length) { send({ type: 'log', items: queue }); queue = []; }
+  }, 300);
+  window.host = {
+    getSession: function () {
+      return new Promise(function (resolve) {
+        waiting.push(resolve);
+        if (waiting.length === 1) send({ type: 'getSession' });
+      });
+    },
+    _deliver: function (session) {
+      var w = waiting; waiting = [];
+      w.forEach(function (resolve) { resolve(session); });
+    },
+  };
+})();
+true;
+`;

package/src/index.ts

@@ -0,0 +1,7 @@
+export { BRIDGE_SCRIPT } from './bridge';
+export { consoleLog, redact } from './log';
+export { isAllowedUrl, MiniAppWebView } from './MiniAppWebView';
+export type { MiniAppWebViewProps, WebMiniApp } from './MiniAppWebView';
+export { RnMiniAppHost } from './RnMiniAppHost';
+export type { RnMiniApp, RnMiniAppHostProps } from './RnMiniAppHost';
+export type { GetSession, LogLevel, MiniAppProps, OnLog, Session } from './types';

package/src/log.ts

@@ -0,0 +1,12 @@
+import type { OnLog } from './types';
+
+/** JSON.stringify nhưng che mọi trường `token`, kể cả lồng sâu. */
+export const redact = (value: unknown) =>
+  JSON.stringify(value, (key, v) => (key === 'token' ? '***' : v));
+
+/** Log mặc định: in ra console với prefix [tag], token bị che. */
+export const consoleLog: OnLog = (tag, level, ...args) =>
+  console[level](
+    `[${tag}]`,
+    ...args.map(a => (typeof a === 'string' ? a : redact(a))),
+  );

package/src/types.ts

@@ -0,0 +1,20 @@
+export type LogLevel = 'log' | 'warn' | 'error';
+
+/** Dữ liệu host cấp cho mini app. `user` tuỳ app, tối thiểu có `id`. */
+export type Session = {
+  token: string;
+  expiresAt: number;
+  user: { id: string } & Record<string, unknown>;
+};
+
+/** Host tự quyết lấy session thế nào (token giả, hoặc gọi backend đổi token). */
+export type GetSession = (miniAppId: string) => Session | Promise<Session>;
+
+/** Nơi host nhận log của chính nó (`tag = 'host'`) và của mini app (`tag = 'mini:<id>'`). */
+export type OnLog = (tag: string, level: LogLevel, ...args: unknown[]) => void;
+
+/** Props mà mini app React Native nhận từ host. */
+export type MiniAppProps = {
+  session: Session;
+  log: (level: LogLevel, ...args: unknown[]) => void;
+};