@vetc-miniapp/ui-react 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vetc-miniapp/ui-react",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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:()=>m,getCurrentPage:()=>S,initRouter:()=>M,setCurrentPath:()=>x,useAppPause:()=>a,useAppResume:()=>c,useDidHide:()=>p,useDidShow:()=>f,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"),console.warn(window.MiniApp),"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.pathname)===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.pathname)===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,y=function(){return v&&window.flutter_inappwebview?window.flutter_inappwebview:null},w=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=y()){e.n=1;break}return e.a(2,Promise.reject(new Error("MiniApp bridge not available")));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:throw e.p=3,i=e.v,console.error("Bridge error:",i),i;case 4:return e.a(2)}},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){w("navigate",{type:"native",route:e,params:arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},options:arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}})}}var m={locale:"vi",theme:"light",pages:[]},h=t(848);function b(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 A=new Map,j="/";function M(e){console.log(e),A=new Map(e.pages.map(function(e){return[e.path,e]})),console.log(A)}function S(){return A.get(j)}function x(e){j=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 b(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)?b(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),x(r);var o=S();console.warn(o),o||(x("/"),o=S()),c(o),w("registerAppConfig",{config:t})}},[t]),!a||!a.Component)return console.warn("MiniApp: Page not found for current route"),(0,h.jsx)(h.Fragment,{children:(0,h.jsx)("div",{})});var f=a.Component||(0,h.jsx)("div",{});return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(f,{}),o]})}return console.log("SDK React object:",u()),o})());
+!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 t=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(e,n,r){var o=null;if(void 0!==r&&(o=""+r),void 0!==n.key&&(o=""+n.key),"key"in n)for(var i in r={},n)"key"!==i&&(r[i]=n[i]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:o,ref:void 0!==n?n:null,props:r}}n.Fragment=r,n.jsx=o,n.jsxs=o},848(e,n,t){e.exports=t(698)}},t={};function r(e){var o=t[e];if(void 0!==o)return o.exports;var i=t[e]={exports:{}};return n[e](i,i.exports,r),i.exports}r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};r.r(o),r.d(o,{App:()=>O,appConfig:()=>h,getCurrentPage:()=>S,initRouter:()=>M,setCurrentPath:()=>x,useAppPause:()=>a,useAppResume:()=>c,useDidHide:()=>p,useDidShow:()=>f,useNavigate:()=>g});var i=r(155),u=r.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"),console.warn(window.MiniApp),"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 t=(0,i.useRef)(n);(0,i.useEffect)(function(){t.current=n},[n]),(0,i.useEffect)(function(){if(window.MiniApp){var n=function(n){var r;(null==n?void 0:n.route)===e&&(null===(r=t.current)||void 0===r||r.call(t,n))};return window.MiniApp.on("didShow",n),function(){window.MiniApp.off("didShow",n)}}},[e])}function p(e,n){var t=(0,i.useRef)(n);(0,i.useEffect)(function(){t.current=n},[n]),(0,i.useEffect)(function(){if(window.MiniApp){var n=function(n){var r;(null==n?void 0:n.route)===e&&(null===(r=t.current)||void 0===r||r.call(t,n))};return window.MiniApp.on("didHide",n),function(){window.MiniApp.off("didHide",n)}}},[e])}function l(){var e,n,t="function"==typeof Symbol?Symbol:{},r=t.iterator||"@@iterator",o=t.toStringTag||"@@toStringTag";function i(t,r,o,i){var c=r&&r.prototype instanceof a?r:a,f=Object.create(c.prototype);return s(f,"_invoke",function(t,r,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,t){return i=n,a=0,c=e,s.n=t,u}};function d(t,r){for(a=t,c=r,n=0;!l&&f&&!o&&n<p.length;n++){var o,i=p[n],d=s.p,v=i[2];t>3?(o=v===r)&&(c=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=t<2&&d<i[1])?(a=0,s.v=r,s.n=i[1]):d<v&&(o=t<3||i[0]>r||r>v)&&(i[4]=t,i[5]=r,s.n=v,a=0))}if(o||t>1)return u;throw l=!0,r}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:t.call(r,s))!==u)break}catch(n){i=e,a=1,c=n}finally{f=1}}return{value:n,done:l}}}(t,o,i),!0),f}var u={};function a(){}function c(){}function f(){}n=Object.getPrototypeOf;var p=[][r]?n(n([][r]())):(s(n={},r,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,r,function(){return this}),s(d,"toString",function(){return"[object Generator]"}),(l=function(){return{w:i,m:v}})()}function s(e,n,t,r){var o=Object.defineProperty;try{o({},"",{})}catch(e){o=0}s=function(e,n,t,r){function i(n,t){s(e,n,function(e){return this._invoke(n,t,e)})}n?o?o(e,n,{value:t,enumerable:!r,configurable:!r,writable:!r}):e[n]=t:(i("next",0),i("throw",1),i("return",2))},s(e,n,t,r)}function d(e,n,t,r,o,i,u){try{var a=e[i](u),c=a.value}catch(e){return void t(e)}a.done?n(c):Promise.resolve(c).then(r,o)}var v="undefined"!=typeof window,y=function(){return v&&window.flutter_inappwebview?window.flutter_inappwebview:null},w=function(){var e,n=(e=l().m(function e(n){var t,r,o,i,u=arguments;return l().w(function(e){for(;;)switch(e.p=e.n){case 0:if(t=u.length>1&&void 0!==u[1]?u[1]:{},r=y()){e.n=1;break}return e.a(2,Promise.reject(new Error("MiniApp bridge not available")));case 1:return e.p=1,e.n=2,r.callHandler("MiniAppBridge",{action:n,payload:t});case 2:return o=e.v,e.a(2,o);case 3:throw e.p=3,i=e.v,console.error("Bridge error:",i),i;case 4:return e.a(2)}},e,null,[[1,3]])}),function(){var n=this,t=arguments;return new Promise(function(r,o){var i=e.apply(n,t);function u(e){d(i,r,o,u,a,"next",e)}function a(e){d(i,r,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]:{},t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if("number"==typeof e)return w("navigate",{type:"native",action:"pop",delta:Math.abs(e)});w("navigate",{type:"native",action:"push",route:e,params:n,options:t})}}var h={locale:"vi",theme:"light",pages:[]},m=r(848);function b(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}var A=new Map,j="/";function M(e){console.log(e),A=new Map(e.pages.map(function(e){return[e.path,e]})),console.log(A)}function S(){return A.get(j)}function x(e){j=e}function O(e){var n,t,r=e.config,o=e.children,u=(n=(0,i.useState)(null),t=2,function(e){if(Array.isArray(e))return e}(n)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,u,a=[],c=!0,f=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(r=i.call(t)).done)&&(a.push(r.value),a.length!==n);c=!0);}catch(e){f=!0,o=e}finally{try{if(!c&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(f)throw o}}return a}}(n,t)||function(e,n){if(e){if("string"==typeof e)return b(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?b(e,n):void 0}}(n,t)||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!=r&&null!==(e=r.pages)&&void 0!==e&&e.length){M(r);var n=window.location.pathname||"/",t=n.replace("/miniapp","")||"/";console.log(n),x(t);var o=S();console.warn(o),o||(x("/"),o=S()),c(o),w("registerAppConfig",{config:r})}},[r]),!a||!a.Component)return console.warn("MiniApp: Page not found for current route"),(0,m.jsx)(m.Fragment,{children:(0,m.jsx)("div",{})});var f=a.Component||(0,m.jsx)("div",{});return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(f,{}),o]})}return console.log("SDK React object:",u()),o})());

package/src/ui-react/hooks/use-did-hide.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-export function useDidHide(pathname, callback) {
+export function useDidHide(route, callback) {
   const saved = useRef(callback);
 
   useEffect(() => {
@@ -11,7 +11,7 @@ export function useDidHide(pathname, callback) {
     if (!window.MiniApp) return;
 
     const handler = (data) => {
-      if (data?.pathname === pathname) {
+      if (data?.route === route) {
         saved.current?.(data);
       }
     };
@@ -21,5 +21,5 @@ export function useDidHide(pathname, callback) {
     return () => {
       window.MiniApp.off("didHide", handler);
     };
-  }, [pathname]);
+  }, [route]);
 }

package/src/ui-react/hooks/use-did-hide.ts

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from "react";
 
 type DidHidePayload = {
-  pathname?: string;
+  route?: string;
   [key: string]: any;
 };
 
 export function useDidHide(
-  pathname: string,
+  route: string,
   callback: (data?: DidHidePayload) => void
 ): void {
   const saved = useRef(callback);
@@ -20,7 +20,7 @@ export function useDidHide(
     if (typeof window === "undefined" || !window.MiniApp) return;
 
     const handler = (data?: DidHidePayload) => {
-      if (data?.pathname === pathname) {
+      if (data?.route === route) {
         saved.current?.(data);
       }
     };
@@ -30,5 +30,5 @@ export function useDidHide(
     return () => {
       window.MiniApp.off("didHide", handler);
     };
-  }, [pathname]);
+  }, [route]);
 }

package/src/ui-react/hooks/use-did-show.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-export function useDidShow(pathname, callback) {
+export function useDidShow(route, callback) {
   const saved = useRef(callback);
 
   useEffect(() => {
@@ -11,7 +11,7 @@ export function useDidShow(pathname, callback) {
     if (!window.MiniApp) return;
 
     const handler = (data) => {
-      if (data?.pathname === pathname) {
+      if (data?.route === route) {
         saved.current?.(data);
       }
     };
@@ -21,5 +21,5 @@ export function useDidShow(pathname, callback) {
     return () => {
       window.MiniApp.off("didShow", handler);
     };
-  }, [pathname]);
+  }, [route]);
 }

package/src/ui-react/hooks/use-did-show.ts

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from "react";
 
 type DidShowPayload = {
-  pathname?: string;
+  route?: string;
   [key: string]: any;
 };
 
 export function useDidShow(
-  pathname: string,
+  route: string,
   callback: (data?: DidShowPayload) => void
 ): void {
   const saved = useRef(callback);
@@ -20,7 +20,7 @@ export function useDidShow(
     if (typeof window === "undefined" || !window.MiniApp) return;
 
     const handler = (data?: DidShowPayload) => {
-      if (data?.pathname === pathname) {
+      if (data?.route === route) {
         saved.current?.(data);
       }
     };
@@ -30,5 +30,5 @@ export function useDidShow(
     return () => {
       window.MiniApp.off("didShow", handler);
     };
-  }, [pathname]);
+  }, [route]);
 }

package/src/ui-react/hooks/use-navigate.js

@@ -2,6 +2,14 @@ import { callHost } from '../bridge.js';
 
 export function useNavigate() {
   return (route, params = {}, options = {}) => {
-    callHost("navigate", { type: "native", route, params, options });
+  // POP navigation
+    if (typeof route === "number") {
+      return callHost("navigate", {
+        type: "native",
+        action: "pop",
+        delta: Math.abs(route)
+      });
+    }
+    callHost("navigate", { type: "native", action: "push", route, params, options });
   };
 }

package/src/ui-react/hooks/use-navigate.ts

@@ -11,7 +11,7 @@ export interface NavigateOptions {
 
 export type NavigateParams = Record<string, unknown>;
 
-export type MiniAppRoute = string; // có thể đổi sang union type nếu muốn strict
+export type MiniAppRoute = string | number; // có thể đổi sang union type nếu muốn strict
 
 /* ================= Hook ================= */
 
@@ -21,9 +21,18 @@ export function useNavigate() {
     params: NavigateParams = {},
     options: NavigateOptions = {}
   ): void => {
+    // POP navigation
+    if (typeof route === "number") {
+      return callHost("navigate", {
+        type: "native",
+        action: "pop",
+        delta: Math.abs(route),
+      });
+    }
     // Gửi sang native host
     callHost("navigate", {
       type: "native",
+      action: "push",
       route,
       params,
       options,