@vetc-miniapp/ui-react 0.0.2 → 0.0.4

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vetc-miniapp/ui-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "MiniApp Platform UI React",
-  "main": "src/index.js",
+  "main": "src/ui-react/index.js",
   "types": "src/ui-react/index.ts",
   "type": "module",
   "files": [
@@ -20,8 +20,10 @@
   "author": "Hieuth052@gmail.com",
   "license": "MIT",
   "devDependencies": {
+    "@babel/cli": "^7.28.6",
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
@@ -31,128 +33,23 @@
     "ts-loader": "^9.5.4",
     "typescript": "^5.9.3",
     "webpack": "^5.104.1",
-    "webpack-cli": "^6.0.1"
+    "webpack-cli": "^6.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "acorn": "^8.15.0",
     "acorn-import-phases": "^1.0.4",
-    "ajv": "^8.17.1",
-    "ajv-formats": "^2.1.1",
-    "ajv-keywords": "^5.1.0",
     "babel-plugin-polyfill-corejs2": "^0.4.15",
     "babel-plugin-polyfill-corejs3": "^0.14.0",
     "babel-plugin-polyfill-regenerator": "^0.6.6",
     "baseline-browser-mapping": "^2.9.19",
-    "browserslist": "^4.28.1",
-    "buffer-from": "^1.1.2",
-    "caniuse-lite": "^1.0.30001767",
-    "chrome-trace-event": "^1.0.4",
-    "clone-deep": "^4.0.1",
-    "colorette": "^2.0.20",
-    "commander": "^2.20.3",
-    "commondir": "^1.0.1",
-    "convert-source-map": "^2.0.0",
-    "core-js-compat": "^3.48.0",
-    "cross-spawn": "^7.0.6",
-    "debug": "^4.4.3",
-    "deepmerge": "^4.3.1",
-    "electron-to-chromium": "^1.5.283",
-    "enhanced-resolve": "^5.18.4",
-    "envinfo": "^7.21.0",
-    "es-module-lexer": "^2.0.0",
-    "escalade": "^3.2.0",
-    "eslint-scope": "^5.1.1",
-    "esrecurse": "^4.3.0",
-    "estraverse": "^4.3.0",
-    "estree-walker": "^2.0.2",
-    "esutils": "^2.0.3",
-    "events": "^3.3.0",
-    "fast-deep-equal": "^3.1.3",
-    "fast-uri": "^3.1.0",
-    "fastest-levenshtein": "^1.0.16",
-    "fdir": "^6.5.0",
-    "find-up": "^5.0.0",
-    "flat": "^5.0.2",
-    "fsevents": "^2.3.3",
-    "function-bind": "^1.1.2",
-    "gensync": "^1.0.0-beta.2",
-    "glob-to-regexp": "^0.4.1",
-    "graceful-fs": "^4.2.11",
-    "has-flag": "^4.0.0",
-    "hasown": "^2.0.2",
-    "import-local": "^3.2.0",
-    "interpret": "^3.1.1",
-    "is-core-module": "^2.16.1",
-    "is-module": "^1.0.0",
-    "is-plain-object": "^2.0.4",
-    "is-reference": "^1.2.1",
-    "isexe": "^2.0.0",
-    "isobject": "^3.0.1",
-    "jest-worker": "^27.5.1",
-    "js-tokens": "^4.0.0",
-    "jsesc": "^3.1.0",
-    "json-parse-even-better-errors": "^2.3.1",
-    "json-schema-traverse": "^1.0.0",
-    "json5": "^2.2.3",
-    "kind-of": "^6.0.3",
-    "loader-runner": "^4.3.1",
-    "locate-path": "^6.0.0",
-    "lodash.debounce": "^4.0.8",
-    "lru-cache": "^5.1.1",
-    "magic-string": "^0.30.21",
-    "merge-stream": "^2.0.0",
-    "mime-db": "^1.52.0",
-    "mime-types": "^2.1.35",
-    "ms": "^2.1.3",
-    "neo-async": "^2.6.2",
-    "node-releases": "^2.0.27",
-    "p-limit": "^3.1.0",
-    "p-locate": "^5.0.0",
-    "p-try": "^2.2.0",
-    "path-exists": "^4.0.0",
-    "path-key": "^3.1.1",
-    "path-parse": "^1.0.7",
-    "picocolors": "^1.1.1",
-    "picomatch": "^4.0.3",
-    "pkg-dir": "^4.2.0",
-    "randombytes": "^2.1.0",
-    "rechoir": "^0.8.0",
-    "regenerate": "^1.4.2",
-    "regenerate-unicode-properties": "^10.2.2",
-    "regexpu-core": "^6.4.0",
-    "regjsgen": "^0.8.0",
-    "regjsparser": "^0.13.0",
-    "require-from-string": "^2.0.2",
-    "resolve": "^1.22.11",
-    "resolve-cwd": "^3.0.0",
-    "resolve-from": "^5.0.0",
-    "safe-buffer": "^5.2.1",
-    "schema-utils": "^4.3.3",
-    "semver": "^6.3.1",
-    "serialize-javascript": "^6.0.2",
-    "shallow-clone": "^3.0.1",
-    "shebang-command": "^2.0.0",
-    "shebang-regex": "^3.0.0",
-    "smob": "^1.5.0",
-    "source-map": "^0.6.1",
-    "source-map-support": "^0.5.21",
-    "supports-color": "^8.1.1",
-    "supports-preserve-symlinks-flag": "^1.0.0",
-    "tapable": "^2.3.0",
-    "terser": "^5.46.0",
-    "terser-webpack-plugin": "^5.3.16",
-    "undici-types": "^7.16.0",
-    "unicode-canonical-property-names-ecmascript": "^2.0.1",
-    "unicode-match-property-ecmascript": "^2.0.0",
-    "unicode-match-property-value-ecmascript": "^2.2.1",
-    "unicode-property-aliases-ecmascript": "^2.2.0",
-    "update-browserslist-db": "^1.2.3",
     "watchpack": "^2.5.1",
     "webpack-merge": "^6.0.1",
-    "webpack-sources": "^3.3.3",
-    "which": "^2.0.2",
-    "wildcard": "^2.0.1",
-    "yallist": "^3.1.1",
-    "yocto-queue": "^0.1.0"
+    "webpack-sources": "^3.3.3"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   }
 }

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

@@ -1 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vetc-miniapp/ui-react"]=t():e["vetc-miniapp/ui-react"]=t()}(this,()=>(()=>{"use strict";var e={d:(t,o)=>{for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{useNavigate:()=>i});const o="undefined"!=typeof window,n=(e,t={})=>{const n=o&&window.flutter_inappwebview?window.flutter_inappwebview:null;return n?n.callHandler("MiniAppBridge",{action:e,payload:t}):Promise.reject(new Error("MiniApp bridge not available"))};function i(){return(e,t={},o={})=>{n("navigate",{type:"native",route:e,params:t,options:o})}}return t})());
+/*! For license information please see index.js.LICENSE.txt */
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports["vetc-miniapp/ui-react"]=r(require("react")):e["vetc-miniapp/ui-react"]=r(e.react)}(this,e=>(()=>{"use strict";var r={155(r){r.exports=e},698(e,r){var t=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function o(e,r,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==r.key&&(o=""+r.key),"key"in r)for(var i in n={},r)"key"!==i&&(n[i]=r[i]);else n=r;return r=n.ref,{$$typeof:t,type:e,key:o,ref:void 0!==r?r:null,props:n}}r.Fragment=n,r.jsx=o,r.jsxs=o},848(e,r,t){e.exports=t(698)}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,n),i.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};n.r(o),n.d(o,{App:()=>m,appConfig:()=>u,getCurrentPage:()=>y,initRouter:()=>v,setCurrentPath:()=>g,useNavigate:()=>l});var i="undefined"!=typeof window,a=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=i&&window.flutter_inappwebview?window.flutter_inappwebview:null;return t?t.callHandler("MiniAppBridge",{action:e,payload:r}):Promise.reject(new Error("MiniApp bridge not available"))};function l(){return function(e){a("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 u={locale:"vi",theme:"light",pages:[]},c=n(155),f=n(848);function p(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}var s=new Map,d="/";function v(e){console.log(e),s=new Map(e.pages.map(function(e){return[e.path,e]})),console.log(s)}function y(){return s.get(d)}function g(e){d=e}function m(e){var r,t,n=e.config,o=e.children,i=(r=(0,c.useState)(null),t=2,function(e){if(Array.isArray(e))return e}(r)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,o,i,a,l=[],u=!0,c=!1;try{if(i=(t=t.call(e)).next,0===r){if(Object(t)!==t)return;u=!1}else for(;!(u=(n=i.call(t)).done)&&(l.push(n.value),l.length!==r);u=!0);}catch(e){c=!0,o=e}finally{try{if(!u&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(c)throw o}}return l}}(r,t)||function(e,r){if(e){if("string"==typeof e)return p(e,r);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)?p(e,r):void 0}}(r,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.")}()),l=i[0],u=i[1];(0,c.useEffect)(function(){var e;if(console.warn("SDK useEffect fired"),null!=n&&null!==(e=n.pages)&&void 0!==e&&e.length){v(n),console.warn(n),g((window.location.path||"/").replace("/miniapp","")||"/");var r=y();console.warn(r),r||(g("/"),r=y()),u(r),a("registerAppConfig",{config:n})}},[n]),console.warn("SDK fired"),l&&l.Component||console.warn("MiniApp: Page not found for current route");var s=l.Component||(0,f.jsx)("div",{});return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(s,{}),o]})}return o})());

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

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/src/ui-react/components/app.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { IAppConfig } from '../types/app';
+
+export type IAppProps = ComponentPropsWithRef<'div'> & {
+    config: IAppConfig;
+};
+export declare const App: ({ className, config, localesConfig, ...props }: IAppProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,75 @@
+// "use client";
+
+import React, { useEffect, useState } from "react";
+import { callHost } from "../bridge";
+let routeMap = new Map()
+let currentPath = "/"
+
+export function initRouter(config) {
+  console.log(config);
+  routeMap = new Map(config.pages.map(p => [p.path, p]))
+  console.log(routeMap);
+}
+
+export function getCurrentPage() {
+  return routeMap.get(currentPath)
+}
+
+export function setCurrentPath(path) {
+  currentPath = path
+}
+
+/**
+ * MiniApp Runtime Root
+ */
+export function App({ config, children }) {
+  const [page, setPage] = useState(null);
+
+  useEffect(() => {
+    console.warn("SDK useEffect fired");
+
+    if (!config?.pages?.length) return;
+
+    // 1. Init router từ config
+    initRouter(config);
+    console.warn(config);
+
+    // 2. Lấy pathname từ URL WebView
+    const rawPath = window.location.path || "/";
+    const path = rawPath.replace("/miniapp", "") || "/";
+
+    setCurrentPath(path);
+
+    // 3. Lấy page tương ứng
+    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
+    callHost("registerAppConfig", { config });
+  }, [config]);
+
+  console.warn("SDK fired");
+
+  // Tránh crash nếu chưa có page
+  if (!page || !page.Component) {
+    console.warn("MiniApp: Page not found for current route");
+//     return null;
+  }
+
+  const Component = page.Component || <div />;
+
+  return (
+    <>
+      <Component />
+      {children}
+    </>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+let routeMap = new Map()
+let currentPath = "/"
+
+export function initRouter(config) {
+  routeMap = new Map(config.pages.map(p => [p.pathname, p]))
+}
+
+export function getCurrentPage() {
+  return routeMap.get(currentPath)
+}
+
+export function setCurrentPath(path) {
+  currentPath = path
+}
+
+export function App({ config }) {
+  const [page, setPage] = useState(null)
+
+  useEffect(() => {
+    initRouter(config)
+
+    const rawPath = window.location.pathname || "/"
+    const path = rawPath.replace("/miniapp", "") || "/"
+
+    setCurrentPath(path)
+
+    let current = getCurrentPage()
+    if (!current) {
+      setCurrentPath("/")
+      current = getCurrentPage()
+    }
+
+    setPage(current)
+
+    callHost("registerAppConfig", { config })
+  }, [config])
+
+  if (!page) return <div />
+  const Component = page.Component
+  return <Component />
+}

package/src/ui-react/components/app1.js

@@ -0,0 +1,101 @@
+//'use client';
+
+/**
+ * @typedef {import('../types/app').IAppConfig} IAppConfig
+ */
+
+/**
+ * @typedef {Object} IAppProps
+ * @property {IAppConfig} config
+ * @property {string=} className
+ */
+
+/**
+ * Root MiniApp wrapper
+ * @param {IAppProps & React.HTMLAttributes<HTMLDivElement>} props
+ */
+//import React from "react";
+'use client';
+
+import { useEffect } from "react";
+import {callHost} from '../bridge.js';
+////import MiniApp from "miniapp-sdk";
+
+/**
+* Root MiniApp wrapper
+*/
+export function App({ className, config, localesConfig, ...props }) {
+
+ useEffect(() => {
+   // 🚀 Gửi config sang Host khi MiniApp mount
+   if (config) {
+     console.log(config);
+     callHost("registerAppConfig", { config }).catch(console.error);
+   }
+//
+//    // 🎯 Ví dụ lắng nghe event từ Host
+//    const handleStateUpdate = (data) => {
+//      console.log("App state updated from host:", data);
+//    };
+//
+//    MiniApp.on?.("APP_STATE_UPDATE", handleStateUpdate);
+//
+//    return () => {
+//      MiniApp.off?.("APP_STATE_UPDATE", handleStateUpdate);
+//    };
+ }, [config]);
+
+ return props.children;
+}
+
+//'use client'
+//
+//import React, { createContext, useContext, useMemo, useState, useEffect } from "react"
+//import {callHost} from '../bridge.js';
+//
+//const RouterCtx = createContext(null)
+//
+//export function MiniRouterProvider({ config, initialPath, children }) {
+//  const [path, setPath] = useState(initialPath || "/")
+//
+//  const routeMap = useMemo(
+//    () => new Map(config.pages.map(p => [p.pathname, p])),
+//    [config.pages]
+//  )
+//
+//  const value = useMemo(() => ({ path, setPath, routeMap }), [path, routeMap])
+//
+//  return <RouterCtx.Provider value={value}>{children}</RouterCtx.Provider>
+//}
+//
+//export function useMiniRouter() {
+//  const ctx = useContext(RouterCtx)
+//  if (!ctx) throw new Error("useMiniRouter must be used inside MiniRouterProvider")
+//  return ctx
+//}
+//
+//function Renderer({ config }) {
+//  const { path, routeMap } = useMiniRouter()
+//  const page = routeMap.get(path)
+//
+//  useEffect(() => {
+//    if (!page) return
+//    callHost("registerAppConfig", {
+//      config
+//    })
+//  }, [path, page])
+//
+//  if (!page) return <div>Page not found</div>
+//  const Component = page.Component
+//  return <Component />
+//}
+//
+//export function App({ config, initialPath, ...props }) {
+//  return (
+//    <MiniRouterProvider config={config} initialPath={initialPath}>
+//      <Renderer config={config}>{props.children}</Renderer>
+//    </MiniRouterProvider>
+//  )
+//}
+
+

package/src/ui-react/hooks/use-app-state.js

@@ -0,0 +1,35 @@
+/**
+ * @typedef {"light" | "dark"} ThemeMode
+ */
+
+/**
+ * @typedef {Object} IAppState
+ * @property {string=} locale
+ * @property {ThemeMode=} theme
+ */
+
+/**
+ * @typedef {Object} IPageConfig
+ * @property {string} key                - Key định danh page dùng cho navigation
+ * @property {string=} title             - Tên hiển thị (header native)
+ * @property {string} url                - URL nội bộ miniapp (nếu cần render state)
+ * @property {boolean=} canGoBack        - Có cho phép back không
+ * @property {boolean=} isRoot           - Có phải root page không
+ * @property {Object<string, any>=} defaultParams - Params mặc định khi mở page
+ */
+
+/**
+ * @typedef {Object} IAppConfig
+ * @property {IPageConfig[]} pages
+ * @property {string=} locale
+ * @property {ThemeMode=} theme
+ */
+
+/** @type {IAppConfig} */
+export const appConfig = {
+  locale: "vi",
+  theme: "light",
+
+  pages: [
+  ]
+};

package/src/ui-react/hooks/use-app-state.ts

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+import { IAppState, IAppConfig } from '../types/app';
+
+export declare const useAppState: () => {
+    config: IAppConfig;
+    appState: IAppState;
+    setAppState: Dispatch<SetStateAction<IAppState>>;
+};

package/src/ui-react/index.js

@@ -1 +1,3 @@
 export * from './hooks/use-navigate.js';
+export * from './hooks/use-app-state.js';
+export * from './components/app.jsx';

package/src/ui-react/index.ts

@@ -1 +1,4 @@
 export * from './hooks/use-navigate';
+export * from './hooks/use-app-state';
+// export * from './components/app';
+

package/src/ui-react/types/app.js

@@ -0,0 +1,30 @@
+/**
+ * @typedef {"light" | "dark"} ThemeMode
+ */
+
+/**
+ * Trạng thái cấp App do Host cung cấp
+ * @typedef {Object} IAppState
+ * @property {string=} locale
+ * @property {ThemeMode=} theme
+ */
+
+/**
+ * Cấu hình 1 page trong MiniApp
+ * @typedef {Object} IPageConfig
+ * @property {string} key                    - Key định danh page dùng cho navigation
+ * @property {string=} title                 - Tên hiển thị (header native)
+ * @property {string} url                    - URL nội bộ của page (phục vụ render state)
+ * @property {boolean=} canGoBack            - Có cho phép back không
+ * @property {boolean=} isRoot               - Có phải root page không
+ * @property {Object<string, any>=} defaultParams - Params mặc định khi mở page
+ */
+
+/**
+ * Cấu hình tổng của MiniApp
+ * @typedef {IAppState & {
+ *   pages: IPageConfig[]
+ * }} IAppConfig
+ */
+
+export {}; // để file được coi là module

package/src/ui-react/types/app.ts

@@ -0,0 +1,32 @@
+
+export type IAppConfig = {
+  pages: IPageConfig[];
+//   darkMode?: IDarkModeConfig;
+} & IAppState;
+
+
+export type IAppState = {
+  locale?: string;
+  theme?: "light" | "dark";
+};
+
+export type IPageConfig = {
+  /** Key định danh page dùng cho navigation */
+  key: string;
+
+  /** Tên hiển thị (optional, dùng cho header native) */
+  title?: string;
+
+  page: React.ComponentType<any>
+
+  url: string;
+
+  /** Có cho phép back không */
+  canGoBack?: boolean;
+
+  /** Có phải root page không */
+  isRoot?: boolean;
+
+  /** Params mặc định khi mở page */
+  defaultParams?: Record<string, unknown>;
+};