@vetc-miniapp/ui-react 0.0.23 → 0.0.25

package/src/ui-react/bridge.ts

@@ -1,48 +0,0 @@
-/* ================= 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 || !window.flutter_inappwebview.callHandler || typeof window.flutter_inappwebview.callHandler != "function") {
-    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 {
-      ok: false,
-      error: "BRIDGE_CALL_FAILED"
-    };
-//     return Promise.reject(new Error("MiniApp bridge not available"));
-  }
-
-  return bridge.callHandler("MiniAppBridge", {
-    action,
-    payload,
-  }) as Promise<T>;
-};

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

@@ -1,7 +0,0 @@
-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

@@ -1,80 +0,0 @@
-"use client";
-
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { callHost } from "../bridge";
-
-/* ================= ROUTER CORE ================= */
-
-let routeMap = new Map();
-let currentPath = "/";
-
-function initRouter(config) {
-  routeMap = new Map(config.pages.map((p) => [p.path, p]));
-}
-
-function getCurrentPage() {
-  return routeMap.get(currentPath);
-}
-
-function setCurrentPath(path) {
-  currentPath = path;
-}
-
-/* ================= APP ================= */
-
-export function App({ config, children }) {
-  const [page, setPage] = useState(null);
-  const initializedRef = useRef(false);
-
-  /* ================= INIT ONCE ================= */
-
-  useEffect(() => {
-    if (!config?.pages?.length) return;
-    if (initializedRef.current) return;
-
-    initializedRef.current = true;
-
-    // 1. Init router
-    initRouter(config);
-
-    // 2. Lấy path từ URL
-    const rawPath = window.location.pathname || "/";
-    const path = rawPath.replace("/miniapp", "") || "/";
-
-    setCurrentPath(path);
-
-    // 3. Resolve page
-    let current = getCurrentPage();
-
-    if (!current) {
-      setCurrentPath("/");
-      current = getCurrentPage();
-    }
-
-    setPage(current || null);
-
-    // 4. Send config to native (chỉ 1 lần)
-    callHost("registerAppConfig", { config });
-  }, [config]);
-
-  /* ================= MEMO COMPONENT ================= */
-
-  const CurrentComponent = useMemo(() => {
-    if (!page || !page.Component) return null;
-    return page.Component;
-  }, [page]);
-
-  /* ================= RENDER ================= */
-
-  if (!CurrentComponent) {
-    console.warn("MiniApp: Page not found");
-    return <div />;
-  }
-
-  return (
-    <>
-      <CurrentComponent />
-      {children}
-    </>
-  );
-}

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

@@ -1,42 +0,0 @@
-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

@@ -1,101 +0,0 @@
-//'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-pause.js

@@ -1,35 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useAppPause
- *
- * Trigger khi Native App đi vào background.
- */
-export function useAppPause(callback) {
-  const savedCallback = useRef(callback);
-
-  // Luôn giữ callback mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = () => {
-      try {
-        if (savedCallback.current) {
-          savedCallback.current();
-        }
-      } catch (err) {
-        console.error("[useAppPause error]", err);
-      }
-    };
-
-    window.MiniApp.on("appPause", handler);
-
-    return () => {
-      window.MiniApp.off("appPause", handler);
-    };
-  }, []);
-}

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

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useAppPause
- *
- * Trigger khi Native App đi vào background.
- */
-export function useAppPause(callback: () => void) {
-  const savedCallback = useRef(callback);
-
-  // giữ callback luôn mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = () => {
-      try {
-        savedCallback.current?.();
-      } catch (err) {
-        console.error("[useAppPause error]", err);
-      }
-    };
-
-    window.MiniApp.on("appPause", handler);
-
-    return () => {
-      window.MiniApp.off("appPause", handler);
-    };
-  }, []);
-}

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

@@ -1,37 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useAppResume
- *
- * Trigger khi Native App quay lại foreground.
- */
-export function useAppResume(callback) {
-  const savedCallback = useRef(callback);
-
-  // Cập nhật callback mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    console.warn("MiniApp: useAppResume");
-
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = () => {
-      try {
-        if (savedCallback.current) {
-          savedCallback.current();
-        }
-      } catch (err) {
-        console.error("[useAppResume error]", err);
-      }
-    };
-
-    window.MiniApp.on("appResume", handler);
-
-    return () => {
-      window.MiniApp.off("appResume", handler);
-    };
-  }, []);
-}

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

@@ -1,32 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useAppResume
- *
- * Trigger khi Native App quay lại foreground.
- */
-export function useAppResume(callback: () => void) {
-  const savedCallback = useRef(callback);
-
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = () => {
-      try {
-        savedCallback.current?.();
-      } catch (err) {
-        console.error("[useAppResume error]", err);
-      }
-    };
-
-    window.MiniApp.on("appResume", handler);
-
-    return () => {
-      window.MiniApp.off("appResume", handler);
-    };
-  }, []);
-}

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

@@ -1,35 +0,0 @@
-/**
- * @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-did-hide.js

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

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

@@ -1,34 +0,0 @@
-import { useEffect, useRef } from "react";
-
-type DidHidePayload = {
-  route?: string;
-  [key: string]: any;
-};
-
-export function useDidHide(
-  route: string,
-  callback: (data?: DidHidePayload) => void
-): void {
-  const saved = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data?: DidHidePayload) => {
-      if (data?.route === route) {
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("didHide", handler);
-
-    return () => {
-      window.MiniApp.off("didHide", handler);
-    };
-  }, [route]);
-}

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

@@ -1,26 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export function useDidShow(route, callback) {
-  const saved = useRef(callback);
-
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (!window.MiniApp) return;
-
-    const handler = (data) => {
-      if (data?.route === route) {
-        console.log("didShow", data)
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("didShow", handler);
-
-    return () => {
-      window.MiniApp.off("didShow", handler);
-    };
-  }, [route]);
-}

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

@@ -1,34 +0,0 @@
-import { useEffect, useRef } from "react";
-
-type DidShowPayload = {
-  route?: string;
-  [key: string]: any;
-};
-
-export function useDidShow(
-  route: string,
-  callback: (data?: DidShowPayload) => void
-): void {
-  const saved = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    saved.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data?: DidShowPayload) => {
-      if (data?.route === route) {
-        saved.current?.(data);
-      }
-    };
-
-    window.MiniApp.on("didShow", handler);
-
-    return () => {
-      window.MiniApp.off("didShow", handler);
-    };
-  }, [route]);
-}

package/src/ui-react/hooks/use-listener-scan-qr.js

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * useListenerScanQr
- *
- * Lắng nghe kết quả scan QR từ Native
- */
-export function useListenerScanQr(callback) {
-  const savedCallback = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data) => {
-      try {
-        savedCallback.current?.(data);
-      } catch (err) {
-        console.error("[useListenerScanQr error]", err);
-      }
-    };
-
-    window.MiniApp.on("onScanQRResult", handler);
-
-    return () => {
-      window.MiniApp.off("onScanQRResult", handler);
-    };
-  }, []);
-}

package/src/ui-react/hooks/use-listener-scan-qr.ts

@@ -1,52 +0,0 @@
-import { useEffect, useRef } from "react";
-
-type ScanQrResult = {
-  raw: string;
-  type?: string;
-  [key: string]: any;
-};
-
-type MiniAppBridge = {
-  on: (event: string, callback: (data: any) => void) => void;
-  off: (event: string, callback: (data: any) => void) => void;
-};
-
-declare global {
-  interface Window {
-    MiniApp?: MiniAppBridge;
-  }
-}
-
-/**
- * useListenerScanQr
- *
- * Lắng nghe kết quả scan QR từ Native
- */
-export function useListenerScanQr(
-  callback: (data: ScanQrResult) => void
-): void {
-  const savedCallback = useRef(callback);
-
-  // luôn giữ callback mới nhất
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.MiniApp) return;
-
-    const handler = (data: ScanQrResult) => {
-      try {
-        savedCallback.current?.(data);
-      } catch (err) {
-        console.error("[useListenerScanQr error]", err);
-      }
-    };
-
-    window.MiniApp.on("scanQrResult", handler);
-
-    return () => {
-      window.MiniApp.off("scanQrResult", handler);
-    };
-  }, []);
-}

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

@@ -1,15 +0,0 @@
-import { callHost } from '../bridge.js';
-
-export function useNavigate() {
-  return (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 });
-  };
-}