@vetc-miniapp/ui-react 0.0.1

package/README.md

@@ -0,0 +1,25 @@
+# MiniApp JS SDK
+
+SDK giúp Mini App giao tiếp với Super App host thông qua JS Bridge.
+
+## Cài đặt
+
+```bash
+npm install @yourcompany/miniapp-sdk
+```
+## Sử dụng
+
+import MiniApp from "@vetc/miniapp-sdk";
+
+MiniApp.getScopedToken().then(console.log);
+
+MiniApp.pickImage({ source: "camera" }).then(console.log);
+
+MiniApp.on("TOKEN_REFRESH", data => {
+  console.log("Token updated:", data);
+});
+
+npm run build
+npm publish --access public
+
+

package/package.json

@@ -0,0 +1,158 @@
+{
+  "name": "@vetc-miniapp/ui-react",
+  "version": "0.0.1",
+  "description": "MiniApp Platform UI React",
+  "main": "src/index.js",
+  "types": "src/apis/index.d.ts",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "webpack"
+  },
+  "keywords": [
+    "miniapp",
+    "superapp",
+    "bridge",
+    "sdk"
+  ],
+  "author": "Hieuth052@gmail.com",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@types/node": "^25.2.0",
+    "babel-loader": "^10.0.0",
+    "rollup": "^4.57.1",
+    "ts-loader": "^9.5.4",
+    "typescript": "^5.9.3",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^6.0.1"
+  },
+  "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"
+  }
+}

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

@@ -0,0 +1 @@
+!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})());

package/src/ui-react/bridge.js

@@ -0,0 +1,16 @@
+const isBrowser = typeof window !== "undefined";
+
+const getBridge = () => {
+  if (!isBrowser || !window.flutter_inappwebview) {
+    return null;
+  }
+  return window.flutter_inappwebview;
+};
+
+export const callHost = (action, payload = {}) => {
+  const bridge = getBridge();
+  if (!bridge) {
+    return Promise.reject(new Error("MiniApp bridge not available"));
+  }
+  return bridge.callHandler("MiniAppBridge", { action, payload });
+};

package/src/ui-react/bridge.ts

@@ -0,0 +1,43 @@
+/* ================= Types ================= */
+
+export interface FlutterInAppWebViewBridge {
+  callHandler(
+    handlerName: string,
+    args?: unknown
+  ): Promise<unknown>;
+}
+
+declare global {
+  interface Window {
+    flutter_inappwebview?: FlutterInAppWebViewBridge;
+  }
+}
+
+/* ================= Runtime helpers ================= */
+
+export const isBrowser: boolean = typeof window !== "undefined";
+
+export const getBridge = (): FlutterInAppWebViewBridge | null => {
+  if (!isBrowser || !window.flutter_inappwebview) {
+    return null;
+  }
+  return window.flutter_inappwebview;
+};
+
+/* ================= Core bridge call ================= */
+
+export const callHost = <T = unknown>(
+  action: string,
+  payload: Record<string, unknown> = {}
+): Promise<T> => {
+  const bridge = getBridge();
+
+  if (!bridge) {
+    return Promise.reject(new Error("MiniApp bridge not available"));
+  }
+
+  return bridge.callHandler("MiniAppBridge", {
+    action,
+    payload,
+  }) as Promise<T>;
+};

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

@@ -0,0 +1,7 @@
+import { callHost } from '../bridge.js';
+
+export function useNavigate() {
+  return (route, params = {}, options = {}) => {
+    callHost("navigate", { type: "native", route, params, options });
+  };
+}

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

@@ -0,0 +1,32 @@
+import { callHost } from "../bridge";
+
+/* ================= Types ================= */
+
+export type NavigateMode = "push" | "replace";
+
+export interface NavigateOptions {
+  replace?: boolean;
+  popTo?: string;
+}
+
+export type NavigateParams = Record<string, unknown>;
+
+export type MiniAppRoute = string; // có thể đổi sang union type nếu muốn strict
+
+/* ================= Hook ================= */
+
+export function useNavigate() {
+  return (
+    route: MiniAppRoute,
+    params: NavigateParams = {},
+    options: NavigateOptions = {}
+  ): void => {
+    // Gửi sang native host
+    callHost("navigate", {
+      type: "native",
+      route,
+      params,
+      options,
+    }).catch(console.error);
+  };
+}

package/src/ui-react/index.js

@@ -0,0 +1 @@
+export * from './hooks/use-navigate.js';

package/src/ui-react/index.ts

@@ -0,0 +1 @@
+export * from './hooks/use-navigate';