@vetc-miniapp/ui-react 0.0.21 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vetc-miniapp/ui-react",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "MiniApp Platform UI React",
   "main": "src/ui-react/index.js",
   "types": "src/ui-react/index.ts",

package/src/dist/ui-react/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports["vetc-miniapp/ui-react"]=n(require("react")):e["vetc-miniapp/ui-react"]=n(e.react)}(this,e=>(()=>{"use strict";var n={155(n){n.exports=e},698(e,n){var r=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(e,n,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==n.key&&(o=""+n.key),"key"in n)for(var i in t={},n)"key"!==i&&(t[i]=n[i]);else t=n;return n=t.ref,{$$typeof:r,type:e,key:o,ref:void 0!==n?n:null,props:t}}n.Fragment=t,n.jsx=o,n.jsxs=o},848(e,n,r){e.exports=r(698)}},r={};function t(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return n[e](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};t.r(o),t.d(o,{App:()=>O,appConfig:()=>h,getCurrentPage:()=>x,initRouter:()=>M,setCurrentPath:()=>E,useAppPause:()=>a,useAppResume:()=>c,useDidHide:()=>p,useDidShow:()=>f,useListenerScanQr:()=>m,useNavigate:()=>g});var i=t(155),u=t.n(i);function a(e){var n=(0,i.useRef)(e);(0,i.useEffect)(function(){n.current=e},[e]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var e=function(){try{n.current&&n.current()}catch(e){console.error("[useAppPause error]",e)}};return window.MiniApp.on("appPause",e),function(){window.MiniApp.off("appPause",e)}}},[])}function c(e){var n=(0,i.useRef)(e);(0,i.useEffect)(function(){n.current=e},[e]),(0,i.useEffect)(function(){if(console.warn("MiniApp: useAppResume"),"undefined"!=typeof window&&window.MiniApp){var e=function(){try{n.current&&n.current()}catch(e){console.error("[useAppResume error]",e)}};return window.MiniApp.on("appResume",e),function(){window.MiniApp.off("appResume",e)}}},[])}function f(e,n){var r=(0,i.useRef)(n);(0,i.useEffect)(function(){r.current=n},[n]),(0,i.useEffect)(function(){if(window.MiniApp){var n=function(n){var t;(null==n?void 0:n.route)===e&&(null===(t=r.current)||void 0===t||t.call(r,n))};return window.MiniApp.on("didShow",n),function(){window.MiniApp.off("didShow",n)}}},[e])}function p(e,n){var r=(0,i.useRef)(n);(0,i.useEffect)(function(){r.current=n},[n]),(0,i.useEffect)(function(){if(window.MiniApp){var n=function(n){var t;(null==n?void 0:n.route)===e&&(null===(t=r.current)||void 0===t||t.call(r,n))};return window.MiniApp.on("didHide",n),function(){window.MiniApp.off("didHide",n)}}},[e])}function l(){var e,n,r="function"==typeof Symbol?Symbol:{},t=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,t,o,i){var c=t&&t.prototype instanceof a?t:a,f=Object.create(c.prototype);return s(f,"_invoke",function(r,t,o){var i,a,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(n,r){return i=n,a=0,c=e,s.n=r,u}};function d(r,t){for(a=r,c=t,n=0;!l&&f&&!o&&n<p.length;n++){var o,i=p[n],d=s.p,v=i[2];r>3?(o=v===t)&&(c=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,s.v=t,s.n=i[1]):d<v&&(o=r<3||i[0]>t||t>v)&&(i[4]=r,i[5]=t,s.n=v,a=0))}if(o||r>1)return u;throw l=!0,t}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,v),a=p,c=v;(n=a<2?e:c)||!l;){i||(a?a<3?(a>1&&(s.n=-1),d(a,c)):s.n=c:s.v=c);try{if(f=2,i){if(a||(o="next"),n=i[o]){if(!(n=n.call(i,c)))throw TypeError("iterator result is not an object");if(!n.done)return n;c=n.value,a<2&&(a=0)}else 1===a&&(n=i.return)&&n.call(i),a<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=e}else if((n=(l=s.n<0)?c:r.call(t,s))!==u)break}catch(n){i=e,a=1,c=n}finally{f=1}}return{value:n,done:l}}}(r,o,i),!0),f}var u={};function a(){}function c(){}function f(){}n=Object.getPrototypeOf;var p=[][t]?n(n([][t]())):(s(n={},t,function(){return this}),n),d=f.prototype=a.prototype=Object.create(p);function v(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,f):(e.__proto__=f,s(e,o,"GeneratorFunction")),e.prototype=Object.create(d),e}return c.prototype=f,s(d,"constructor",f),s(f,"constructor",c),c.displayName="GeneratorFunction",s(f,o,"GeneratorFunction"),s(d),s(d,o,"Generator"),s(d,t,function(){return this}),s(d,"toString",function(){return"[object Generator]"}),(l=function(){return{w:i,m:v}})()}function s(e,n,r,t){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}s=function(e,n,r,t){function i(n,r){s(e,n,function(e){return this._invoke(n,r,e)})}n?o?o(e,n,{value:r,enumerable:!t,configurable:!t,writable:!t}):e[n]=r:(i("next",0),i("throw",1),i("return",2))},s(e,n,r,t)}function d(e,n,r,t,o,i,u){try{var a=e[i](u),c=a.value}catch(e){return void r(e)}a.done?n(c):Promise.resolve(c).then(t,o)}var v="undefined"!=typeof window,w=function(){return v&&window.flutter_inappwebview&&window.flutter_inappwebview.callHandler&&"function"==typeof window.flutter_inappwebview.callHandler?window.flutter_inappwebview:null},y=function(){var e,n=(e=l().m(function e(n){var r,t,o,i,u=arguments;return l().w(function(e){for(;;)switch(e.p=e.n){case 0:if(r=u.length>1&&void 0!==u[1]?u[1]:{},t=w()){e.n=1;break}return e.a(2,{ok:!1,error:"BRIDGE_CALL_FAILED"});case 1:return e.p=1,e.n=2,t.callHandler("MiniAppBridge",{action:n,payload:r});case 2:return o=e.v,e.a(2,o);case 3:return e.p=3,i=e.v,console.error("Bridge error:",i),e.a(2,{ok:!1,error:"BRIDGE_CALL_FAILED"})}},e,null,[[1,3]])}),function(){var n=this,r=arguments;return new Promise(function(t,o){var i=e.apply(n,r);function u(e){d(i,t,o,u,a,"next",e)}function a(e){d(i,t,o,u,a,"throw",e)}u(void 0)})});return function(e){return n.apply(this,arguments)}}();function g(){return function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if("number"==typeof e)return y("navigate",{type:"native",action:"pop",delta:Math.abs(e)});y("navigate",{type:"native",action:"push",route:e,params:n,options:r})}}var h={locale:"vi",theme:"light",pages:[]};function m(e){var n=(0,i.useRef)(e);(0,i.useEffect)(function(){n.current=e},[e]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var e=function(e){try{var r;null===(r=n.current)||void 0===r||r.call(n,e)}catch(e){console.error("[useListenerScanQr error]",e)}};return window.MiniApp.on("onScanQRResult",e),function(){window.MiniApp.off("onScanQRResult",e)}}},[])}var b=t(848);function A(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=Array(n);r<n;r++)t[r]=e[r];return t}var j=new Map,S="/";function M(e){console.log(e),j=new Map(e.pages.map(function(e){return[e.path,e]})),console.log(j)}function x(){return j.get(S)}function E(e){S=e}function O(e){var n,r,t=e.config,o=e.children,u=(n=(0,i.useState)(null),r=2,function(e){if(Array.isArray(e))return e}(n)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,o,i,u,a=[],c=!0,f=!1;try{if(i=(r=r.call(e)).next,0===n){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=i.call(r)).done)&&(a.push(t.value),a.length!==n);c=!0);}catch(e){f=!0,o=e}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(f)throw o}}return a}}(n,r)||function(e,n){if(e){if("string"==typeof e)return A(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?A(e,n):void 0}}(n,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=u[0],c=u[1];if((0,i.useEffect)(function(){var e;if(null!=t&&null!==(e=t.pages)&&void 0!==e&&e.length){M(t);var n=window.location.pathname||"/",r=n.replace("/miniapp","")||"/";console.log(n),E(r);var o=x();console.warn(o),o||(E("/"),o=x()),c(o),y("registerAppConfig",{config:t})}},[t]),!a||!a.Component)return console.warn("MiniApp: Page not found for current route"),(0,b.jsx)(b.Fragment,{children:(0,b.jsx)("div",{})});var f=a.Component||(0,b.jsx)("div",{});return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(f,{}),o]})}return console.log("SDK React object:",u()),o})());
+!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["vetc-miniapp/ui-react"]=e(require("react")):n["vetc-miniapp/ui-react"]=e(n.react)}(this,n=>(()=>{"use strict";var e={155(e){e.exports=n},698(n,e){var r=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(n,e,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==e.key&&(o=""+e.key),"key"in e)for(var i in t={},e)"key"!==i&&(t[i]=e[i]);else t=e;return e=t.ref,{$$typeof:r,type:n,key:o,ref:void 0!==e?e:null,props:t}}e.Fragment=t,e.jsx=o,e.jsxs=o},848(n,e,r){n.exports=r(698)}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var i=r[n]={exports:{}};return e[n](i,i.exports,t),i.exports}t.d=(n,e)=>{for(var r in e)t.o(e,r)&&!t.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:e[r]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),t.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})};var o={};t.r(o),t.d(o,{App:()=>x,appConfig:()=>m,useAppPause:()=>u,useAppResume:()=>a,useDidHide:()=>f,useDidShow:()=>c,useListenerScanQr:()=>h,useNavigate:()=>y});var i=t(155);function u(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var n=function(){try{e.current&&e.current()}catch(n){console.error("[useAppPause error]",n)}};return window.MiniApp.on("appPause",n),function(){window.MiniApp.off("appPause",n)}}},[])}function a(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if(console.warn("MiniApp: useAppResume"),"undefined"!=typeof window&&window.MiniApp){var n=function(){try{e.current&&e.current()}catch(n){console.error("[useAppResume error]",n)}};return window.MiniApp.on("appResume",n),function(){window.MiniApp.off("appResume",n)}}},[])}function c(n,e){var r=(0,i.useRef)(e);(0,i.useEffect)(function(){r.current=e},[e]),(0,i.useEffect)(function(){if(window.MiniApp){var e=function(e){var t;(null==e?void 0:e.route)===n&&(null===(t=r.current)||void 0===t||t.call(r,e))};return window.MiniApp.on("didShow",e),function(){window.MiniApp.off("didShow",e)}}},[n])}function f(n,e){var r=(0,i.useRef)(e);(0,i.useEffect)(function(){r.current=e},[e]),(0,i.useEffect)(function(){if(window.MiniApp){var e=function(e){var t;(null==e?void 0:e.route)===n&&(null===(t=r.current)||void 0===t||t.call(r,e))};return window.MiniApp.on("didHide",e),function(){window.MiniApp.off("didHide",e)}}},[n])}function p(){var n,e,r="function"==typeof Symbol?Symbol:{},t=r.iterator||"@@iterator",o=r.toStringTag||"@@toStringTag";function i(r,t,o,i){var c=t&&t.prototype instanceof a?t:a,f=Object.create(c.prototype);return l(f,"_invoke",function(r,t,o){var i,a,c,f=0,p=o||[],l=!1,s={p:0,n:0,v:n,a:d,f:d.bind(n,4),d:function(e,r){return i=e,a=0,c=n,s.n=r,u}};function d(r,t){for(a=r,c=t,e=0;!l&&f&&!o&&e<p.length;e++){var o,i=p[e],d=s.p,v=i[2];r>3?(o=v===t)&&(c=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=n):i[0]<=d&&((o=r<2&&d<i[1])?(a=0,s.v=t,s.n=i[1]):d<v&&(o=r<3||i[0]>t||t>v)&&(i[4]=r,i[5]=t,s.n=v,a=0))}if(o||r>1)return u;throw l=!0,t}return function(o,p,v){if(f>1)throw TypeError("Generator is already running");for(l&&1===p&&d(p,v),a=p,c=v;(e=a<2?n:c)||!l;){i||(a?a<3?(a>1&&(s.n=-1),d(a,c)):s.n=c:s.v=c);try{if(f=2,i){if(a||(o="next"),e=i[o]){if(!(e=e.call(i,c)))throw TypeError("iterator result is not an object");if(!e.done)return e;c=e.value,a<2&&(a=0)}else 1===a&&(e=i.return)&&e.call(i),a<2&&(c=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=n}else if((e=(l=s.n<0)?c:r.call(t,s))!==u)break}catch(e){i=n,a=1,c=e}finally{f=1}}return{value:e,done:l}}}(r,o,i),!0),f}var u={};function a(){}function c(){}function f(){}e=Object.getPrototypeOf;var s=[][t]?e(e([][t]())):(l(e={},t,function(){return this}),e),d=f.prototype=a.prototype=Object.create(s);function v(n){return Object.setPrototypeOf?Object.setPrototypeOf(n,f):(n.__proto__=f,l(n,o,"GeneratorFunction")),n.prototype=Object.create(d),n}return c.prototype=f,l(d,"constructor",f),l(f,"constructor",c),c.displayName="GeneratorFunction",l(f,o,"GeneratorFunction"),l(d),l(d,o,"Generator"),l(d,t,function(){return this}),l(d,"toString",function(){return"[object Generator]"}),(p=function(){return{w:i,m:v}})()}function l(n,e,r,t){var o=Object.defineProperty;try{o({},"",{})}catch(n){o=0}l=function(n,e,r,t){function i(e,r){l(n,e,function(n){return this._invoke(e,r,n)})}e?o?o(n,e,{value:r,enumerable:!t,configurable:!t,writable:!t}):n[e]=r:(i("next",0),i("throw",1),i("return",2))},l(n,e,r,t)}function s(n,e,r,t,o,i,u){try{var a=n[i](u),c=a.value}catch(n){return void r(n)}a.done?e(c):Promise.resolve(c).then(t,o)}var d="undefined"!=typeof window,v=function(){return d&&window.flutter_inappwebview&&window.flutter_inappwebview.callHandler&&"function"==typeof window.flutter_inappwebview.callHandler?window.flutter_inappwebview:null},w=function(){var n,e=(n=p().m(function n(e){var r,t,o,i,u=arguments;return p().w(function(n){for(;;)switch(n.p=n.n){case 0:if(r=u.length>1&&void 0!==u[1]?u[1]:{},t=v()){n.n=1;break}return n.a(2,{ok:!1,error:"BRIDGE_CALL_FAILED"});case 1:return n.p=1,n.n=2,t.callHandler("MiniAppBridge",{action:e,payload:r});case 2:return o=n.v,n.a(2,o);case 3:return n.p=3,i=n.v,console.error("Bridge error:",i),n.a(2,{ok:!1,error:"BRIDGE_CALL_FAILED"})}},n,null,[[1,3]])}),function(){var e=this,r=arguments;return new Promise(function(t,o){var i=n.apply(e,r);function u(n){s(i,t,o,u,a,"next",n)}function a(n){s(i,t,o,u,a,"throw",n)}u(void 0)})});return function(n){return e.apply(this,arguments)}}();function y(){return function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if("number"==typeof n)return w("navigate",{type:"native",action:"pop",delta:Math.abs(n)});w("navigate",{type:"native",action:"push",route:n,params:e,options:r})}}var m={locale:"vi",theme:"light",pages:[]};function h(n){var e=(0,i.useRef)(n);(0,i.useEffect)(function(){e.current=n},[n]),(0,i.useEffect)(function(){if("undefined"!=typeof window&&window.MiniApp){var n=function(n){try{var r;null===(r=e.current)||void 0===r||r.call(e,n)}catch(n){console.error("[useListenerScanQr error]",n)}};return window.MiniApp.on("onScanQRResult",n),function(){window.MiniApp.off("onScanQRResult",n)}}},[])}var b=t(848);function g(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=Array(e);r<e;r++)t[r]=n[r];return t}var A=new Map,j="/";function M(){return A.get(j)}function S(n){j=n}function x(n){var e,r,t=n.config,o=n.children,u=(e=(0,i.useState)(null),r=2,function(n){if(Array.isArray(n))return n}(e)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=r){var t,o,i,u,a=[],c=!0,f=!1;try{if(i=(r=r.call(n)).next,0===e){if(Object(r)!==r)return;c=!1}else for(;!(c=(t=i.call(r)).done)&&(a.push(t.value),a.length!==e);c=!0);}catch(n){f=!0,o=n}finally{try{if(!c&&null!=r.return&&(u=r.return(),Object(u)!==u))return}finally{if(f)throw o}}return a}}(e,r)||function(n,e){if(n){if("string"==typeof n)return g(n,e);var r={}.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?g(n,e):void 0}}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),a=u[0],c=u[1],f=(0,i.useRef)(!1);(0,i.useEffect)(function(){var n;if(null!=t&&null!==(n=t.pages)&&void 0!==n&&n.length&&!f.current){f.current=!0,function(n){A=new Map(n.pages.map(function(n){return[n.path,n]}))}(t),S((window.location.pathname||"/").replace("/miniapp","")||"/");var e=M();e||(S("/"),e=M()),c(e||null),w("registerAppConfig",{config:t})}},[t]);var p=(0,i.useMemo)(function(){return a&&a.Component?a.Component:null},[a]);return p?(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(p,{}),o]}):(console.warn("MiniApp: Page not found"),(0,b.jsx)("div",{}))}return o})());

package/src/ui-react/components/app.jsx

@@ -1,76 +1,80 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { callHost } from "../bridge";
-let routeMap = new Map()
-let currentPath = "/"
-console.log("SDK React object:", React);
-
-export function initRouter(config) {
-  console.log(config);
-  routeMap = new Map(config.pages.map(p => [p.path, p]))
-  console.log(routeMap);
+
+/* ================= ROUTER CORE ================= */
+
+let routeMap = new Map();
+let currentPath = "/";
+
+function initRouter(config) {
+  routeMap = new Map(config.pages.map((p) => [p.path, p]));
 }
 
-export function getCurrentPage() {
-  return routeMap.get(currentPath)
+function getCurrentPage() {
+  return routeMap.get(currentPath);
 }
 
-export function setCurrentPath(path) {
-  currentPath = path
+function setCurrentPath(path) {
+  currentPath = path;
 }
 
-/**
- * MiniApp Runtime Root
- */
+/* ================= APP ================= */
+
 export function App({ config, children }) {
   const [page, setPage] = useState(null);
+  const initializedRef = useRef(false);
 
-  useEffect(() => {
+  /* ================= INIT ONCE ================= */
 
+  useEffect(() => {
     if (!config?.pages?.length) return;
+    if (initializedRef.current) return;
 
-    // 1. Init router từ config
+    initializedRef.current = true;
+
+    // 1. Init router
     initRouter(config);
 
-    // 2. Lấy pathname từ URL WebView
+    // 2. Lấy path từ URL
     const rawPath = window.location.pathname || "/";
     const path = rawPath.replace("/miniapp", "") || "/";
-    console.log(rawPath);
 
     setCurrentPath(path);
 
-    // 3. Lấy page tương ứng
+    // 3. Resolve page
     let current = getCurrentPage();
-    console.warn(current);
 
-    // 4. Fallback về root nếu không match
     if (!current) {
       setCurrentPath("/");
       current = getCurrentPage();
     }
 
-    setPage(current);
-    // 5. Gửi config sang Flutter để dựng native header
+    setPage(current || null);
+
+    // 4. Send config to native (chỉ 1 lần)
     callHost("registerAppConfig", { config });
   }, [config]);
 
+  /* ================= MEMO COMPONENT ================= */
 
-  if (!page || !page.Component) {
-    console.warn("MiniApp: Page not found for current route");
-    return (
-      <>
-        <div></div>
-      </>
-    );
-  }
+  const CurrentComponent = useMemo(() => {
+    if (!page || !page.Component) return null;
+    return page.Component;
+  }, [page]);
 
-  const Component = page.Component || <div />;
+  /* ================= RENDER ================= */
+
+  if (!CurrentComponent) {
+    console.warn("MiniApp: Page not found");
+    return <div />;
+  }
 
   return (
     <>
-      <Component />
+      <CurrentComponent />
       {children}
     </>
   );
-}
+}