minip-bridge 1.0.0

package/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yosorable
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# minip-bridge

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "minip-bridge",
+  "version": "1.0.0",
+  "description": "minip webview bridge",
+  "main": "index.ts",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "scripts": {
+    "build": "tsup"
+  },
+  "keywords": [],
+  "author": "yosorable",
+  "license": "MIT",
+  "devDependencies": {
+    "eslint": "^9.19.0",
+    "prettier": "^3.4.2",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Yosorable/minip-bridge"
+  }
+}

package/src/api/app.ts

@@ -0,0 +1,29 @@
+import jsBridge from "../bridge";
+import { AppInfo, MResponse, MResponseWithData } from "../model";
+
+export function closeApp(): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "closeApp",
+  });
+}
+
+export function showAppDetail(): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "showAppDetail",
+  });
+}
+
+export function installApp(url: string): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "installApp",
+    data: {
+      url,
+    },
+  });
+}
+
+export function getInstalledAppList(): Promise<MResponseWithData<AppInfo[]>> {
+  return jsBridge.callNative({
+    api: "getInstalledAppList",
+  });
+}

package/src/api/device.ts

@@ -0,0 +1,34 @@
+import jsBridge from "../bridge";
+import { MResponse, MResponseWithData } from "../model";
+
+/**
+ *
+ * @param type medium as default
+ */
+export function vibrate(
+  type?: "light" | "medium" | "heavy",
+): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "vibrate",
+    data: {
+      type,
+    },
+  });
+}
+
+export function getClipboardData(): Promise<MResponseWithData<string>> {
+  return jsBridge.callNative({
+    api: "getClipboardData",
+  });
+}
+
+export function setClipboardData(
+  data: string,
+): Promise<MResponseWithData<string>> {
+  return jsBridge.callNative({
+    api: "setClipboardData",
+    data: {
+      data,
+    },
+  });
+}

package/src/api/index.ts

@@ -0,0 +1,5 @@
+export * from "./route";
+export * from "./app";
+export * from "./ui";
+export * from "./kvstorage";
+export * from "./device";

package/src/api/kvstorage.ts

@@ -0,0 +1,60 @@
+import jsBridge from "../bridge";
+import { MResponse, MResponseWithData } from "../model";
+
+// async methods
+
+export function getKVStorage(key: string): Promise<MResponseWithData<string>> {
+  return jsBridge.callNative({
+    api: "getKVStorage",
+    data: { key },
+  });
+}
+
+export function setKVStorage(key: string, value: string): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "setKVStorage",
+    data: { key, value },
+  });
+}
+
+export function deleteKVStorage(key: string): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "deleteKVStorage",
+    data: { key },
+  });
+}
+
+export function clearKVStorage(): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "clearKVStorage",
+  });
+}
+
+// sync methods
+
+export function getKVStorageSync(key: string): MResponseWithData<string> {
+  return jsBridge.callNativeSync({
+    api: "getKVStorageSync",
+    data: { key },
+  });
+}
+
+export function setKVStorageSync(key: string, value: string): MResponse {
+  return jsBridge.callNativeSync({
+    api: "setKVStorageSync",
+    data: { key, value },
+  });
+}
+
+export function deleteKVStorageSync(key: string): MResponse {
+  return jsBridge.callNativeSync({
+    api: "deleteKVStorageSync",
+    data: { key },
+  });
+}
+
+export function clearKVStorageSync(): MResponse {
+  return jsBridge.callNativeSync({
+    api: "clearKVStorageSync",
+  });
+}

package/src/api/route.ts

@@ -0,0 +1,38 @@
+import jsBridge from "../bridge";
+import { MResponse } from "../model";
+
+export function navigateTo(data: {
+  page: string;
+  title?: string;
+}): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "navigateTo",
+    data: data,
+  });
+}
+
+export function navigateBack(delta: number = 1): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "navigateBack",
+    data: {
+      delta,
+    },
+  });
+}
+
+export function redirectTo(data: {
+  page: string;
+  title?: string;
+}): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "redirectTo",
+    data: data,
+  });
+}
+
+export function openWebsite(url: string): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "openWebsite",
+    data: { url },
+  });
+}

package/src/api/ui.ts

@@ -0,0 +1,102 @@
+import jsBridge from "../bridge";
+import {
+  AlertConfig,
+  MResponse,
+  MResponseWithData,
+  ShowHUDRequest,
+} from "../model";
+
+// navigation bar
+
+export function setNavigationBarTitle(title: string): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "setNavigationBarTitle",
+    data: {
+      title,
+    },
+  });
+}
+
+export function setNavigationBarColor(config: {
+  foregroundColor: string;
+  backgroundColor: string;
+}): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "setNavigationBarColor",
+    data: config,
+  });
+}
+
+// pulldown refresh
+
+export function enablePullDownRefresh(): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "enablePullDownRefresh",
+  });
+}
+
+export function disablePullDownRefresh(): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "disablePullDownRefresh",
+  });
+}
+
+export function onPullDownRefresh(callback: (e: Event) => any) {
+  window.addEventListener("pulldownrefresh", callback);
+}
+
+export function startPullDownRefresh(): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "startPullDownRefresh",
+  });
+}
+
+export function stopPullDownRefresh(): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "stopPullDownRefresh",
+  });
+}
+
+// HUD
+
+export function showHUD(req: ShowHUDRequest): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "showHUD",
+    data: req,
+  });
+}
+
+export function hideHUD(): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "hideHUD",
+  });
+}
+
+// alert
+export function showAlert(
+  config: AlertConfig,
+): Promise<MResponseWithData<string>> {
+  return jsBridge.callNative({
+    api: "showAlert",
+    data: config,
+  });
+}
+
+// media
+export function previewImage(url: string): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "previewImage",
+    data: {
+      url,
+    },
+  });
+}
+
+export function previewVideo(url: string): Promise<MResponse> {
+  return jsBridge.callNative({
+    api: "previewVideo",
+    data: {
+      url,
+    },
+  });
+}

package/src/bridge/index.ts

@@ -0,0 +1,71 @@
+import { MResponseStatusCode } from "../model";
+import { MRequest } from "../model/request";
+
+interface Callable {
+  postMessage: (data: string) => Promise<string>;
+}
+
+declare global {
+  interface Window {
+    webkit?: {
+      messageHandlers?: {
+        MinipNativeInteraction?: Callable;
+      };
+    };
+  }
+}
+
+let jsBridge: {
+  callNative: <T>(req?: MRequest<T>) => Promise<any>;
+  callNativeSync: <T>(req?: MRequest<T>) => any;
+};
+
+// iOS
+if (
+  window.webkit &&
+  window.webkit.messageHandlers &&
+  window.webkit.messageHandlers.MinipNativeInteraction
+) {
+  const _callNative = window.webkit.messageHandlers.MinipNativeInteraction;
+  jsBridge = {
+    callNative(req) {
+      return _callNative
+        .postMessage(JSON.stringify(req))
+        .then((res) => JSON.parse(res))
+        .then((res) => {
+          if (res.code === MResponseStatusCode.SUCCESS) {
+            return res;
+          } else {
+            throw new Error(res.msg ?? "Unknown error, res: ");
+          }
+        });
+    },
+    callNativeSync(req) {
+      const res = prompt(JSON.stringify(req));
+      if (res) {
+        return JSON.parse(res);
+      }
+      return {
+        code: MResponseStatusCode.FAILED,
+        msg: "Unknown error",
+      };
+    },
+  };
+} else {
+  // error
+  jsBridge = {
+    callNative() {
+      return new Promise((_, reject) => {
+        reject("Cannot find JavaScript Bridge!!!");
+      });
+    },
+    callNativeSync() {
+      return {
+        code: MResponseStatusCode.FAILED,
+        msg: "Cannot find JavaScript Bridge!!!",
+      };
+    },
+  };
+}
+
+export default jsBridge;

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./api";
+export * from "./model";
+export * from "./bridge";

package/src/model/appinfo.ts

@@ -0,0 +1,50 @@
+export interface AppInfo {
+  name: string;
+  appId: string;
+  author?: string;
+  website?: string;
+  icon?: string;
+  version?: string; // v{x.x.x}, like v0.0.1
+  description?: string;
+  homepage: string;
+  title?: string; // homepage title
+  pages?: PageConfig[]; // unused
+  tabs?: TabConfig[];
+  navigationBarStatus?: string; // display (default), hidden
+  colorScheme?: string; // dark, light (default auto)
+
+  // can be overridden in PageConfig
+  backgroundColor?: string; // hex string
+  navigationBarColor?: string;
+  tintColor?: string; // hex string
+
+  // web server
+  webServerEnabled?: boolean;
+  // orientation
+  landscape?: boolean;
+
+  // file list
+  files?: File[];
+}
+
+interface PageConfig {
+  path: string;
+  title?: string;
+  scrollable?: boolean;
+
+  // override
+  backgroundColor?: string;
+  navigationBarColor?: string;
+}
+
+interface TabConfig {
+  path: string;
+  title: string;
+  systemImage: string;
+}
+
+interface File {
+  name: string;
+  path: string;
+  hash: string;
+}

package/src/model/index.ts

@@ -0,0 +1,3 @@
+export * from "./request";
+export * from "./response";
+export * from "./appinfo";

package/src/model/request/index.ts

@@ -0,0 +1,14 @@
+export interface MRequestBase {
+  /**
+   * Api name.
+   */
+  api: string;
+}
+
+export interface MRequestWithData<T> extends MRequestBase {
+  data?: T;
+}
+
+export type MRequest<T> = MRequestBase | MRequestWithData<T>;
+
+export * from "./ui";

package/src/model/request/ui.ts

@@ -0,0 +1,26 @@
+export type HUDType = "success" | "error" | "progress" | "label";
+export interface ShowHUDRequest {
+  type?: HUDType;
+  title?: string;
+  subTitle?: string;
+  /**
+   * ms
+   */
+  delay?: number;
+}
+
+/**
+ * @param title use key if not set
+ * @param key callback arg
+ */
+export interface AlertAction {
+  title?: string;
+  style?: "cancel" | "destructive";
+  key: string;
+}
+export interface AlertConfig {
+  title?: string;
+  message?: string;
+  preferredStyle?: "alert" | "actionSheet";
+  actions: AlertAction[];
+}

package/src/model/response/index.ts

@@ -0,0 +1,20 @@
+export enum MResponseStatusCode {
+  SUCCESS = 0,
+  FAILED = 7,
+}
+
+export interface MResponse {
+  /**
+   * Integer, 0 for succeeded, other for failed.
+   * Auto reject in promise when failed.
+   */
+  code: MResponseStatusCode;
+  /**
+   * Error msg or other info.
+   */
+  msg?: string;
+}
+
+export interface MResponseWithData<T> extends MResponse {
+  data: T;
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+});