nexfep 0.5.1 → 0.5.3

package/README-CN.md

@@ -240,35 +240,18 @@ window.setSize(800, 600);
 window.openDevTools();
 ```
 
-### 自定义消息
-
-#### 发送消息
-
-在页面中通过 `window.postMessage` 发送消息：
-
-```javascript
-window.postMessage({ hello: "world" });
-```
-
-**参数说明**
+### 页面 API 的 Typescript 定义
 
-- `data` — 任意类型的可序列化数据，会被序列化为 JSON 字符串后发送
+在前端的 `tsconfig.json` 中添加以下内容即可在前端页面中使用 `nexfep` 定义的 API 类型：
 
-#### 监听消息
-
-在主进程中通过 `onCustomMessage` 回调接收消息：
-
-```typescript
-pool.onCustomMessage = (window, data) => {
-  console.log(`来自窗口 ${window.id} 的消息:`, data);
-};
+```json
+{
+  "compilerOptions": {
+    "types": ["nexfep/frontend"]
+  }
+}
 ```
 
-**回调参数**
-
-- `window` — 发送消息的窗口对象
-- `data` — 消息内容，为对象类型（JSON 序列化后会自动通过 `JSON.parse` 转换为对象）
-
 ### 自定义事件
 
 #### 触发事件
@@ -405,6 +388,34 @@ window.addEventListener("custom-message", (event) => {
 console.log("当前窗口 ID:", window.id);
 ```
 
+### 自定义消息
+
+#### 发送消息
+
+在页面中通过 `window.tell` 并指定 `to` 为 `0` 表示向主进程发送消息：
+
+```javascript
+window.tell(0, "custom-message", { hello: "world" });
+```
+
+#### 监听消息
+
+在主进程中通过 `onCustomMessage` 回调接收消息：
+
+```typescript
+pool.onCustomMessage = (window, message, data) => {
+  console.log(`[${message}]来自窗口 ${window.id} 的消息:`, data);
+};
+```
+
+**回调参数**
+
+- `window` — 发送消息的窗口对象
+- `message` — 事件名称
+- `data` — 消息内容，为对象类型（JSON 序列化后会自动通过 `JSON.parse` 转换为对象）
+
+我们更推荐使用 `window.invoke` 使页面与主进程通信，而非 `window.tell`。
+
 ### 窗口控制函数
 
 页面中可直接调用以下注入函数进行窗口控制：

package/README.md

@@ -238,35 +238,18 @@ window.setSize(800, 600);
 window.openDevTools();
 ```
 
-### Custom Messages
-
-#### Send Messages
-
-Send messages via `window.postMessage` in the page:
-
-```javascript
-window.postMessage({ hello: "world" });
-```
-
-**Parameters**
+### TypeScript Definitions for Frontend API
 
-- `data` — Any serializable data, will be serialized to JSON string before sending
+Add the following content to your frontend's `tsconfig.json` to use the frontend API definitions:
 
-#### Listen for Messages
-
-Receive messages via `onCustomMessage` callback in the main process:
-
-```typescript
-pool.onCustomMessage = (window, data) => {
-  console.log(`Message from window ${window.id}:`, data);
-};
+```json
+{
+  "compilerOptions": {
+    "types": ["nexfep/frontend"]
+  }
+}
 ```
 
-**Callback Parameters**
-
-- `window` — The window object that sent the message
-- `data` — Message content, an object type (automatically converted from JSON string via `JSON.parse`)
-
 ### Custom Events
 
 #### Invoke Events
@@ -403,6 +386,34 @@ Each window's ID can be accessed via `window.id`:
 console.log("This window ID:", window.id);
 ```
 
+### Custom Messages
+
+#### Send Messages
+
+In the page, use `window.tell` with `to` 0 to send a message to the main process.
+
+```javascript
+window.tell(0, "custom-message", { hello: "world" });
+```
+
+#### Listen for Messages
+
+Receive messages via `onCustomMessage` callback in the main process:
+
+```typescript
+pool.onCustomMessage = (window, message, data) => {
+  console.log(`[${message}] from window ${window.id}:`, data);
+};
+```
+
+**Callback Parameters**
+
+- `window` — The window object that sent the message
+- `message` — Event name
+- `data` — Message content, an object type (automatically converted from JSON string via `JSON.parse`)
+
+We recommend using `window.invoke` to communicate between pages and the main process, instead of `window.tell`.
+
 ### Window Control Functions
 
 The following injected functions can be directly called in the page for window control:

package/frontend/index.d.ts

@@ -0,0 +1,21 @@
+export {}
+
+declare global {
+  interface Window {
+    tell: (to: number, message: string, data?: any) => void
+    broadcast: (message: string, data?: any) => void
+    invoke: (event: string, data?: any) => Promise<any>
+    close: () => void
+    minimize: () => void
+    unminimize: () => void
+    maximize: () => void
+    unmaximize: () => void
+    setTitle: (title: string) => void
+    openDevTools: () => void
+    closeDevTools: () => void
+    setGlobal: (name: string, value: any) => void
+    getGlobal: (name: string) => Promise<any>
+    id: number
+    isNexfepLoadDone: boolean
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexfep",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "A desktop application framework based on @webviewjs/webview",
   "keywords": [
     "@webviewjs/webview",
@@ -20,6 +20,12 @@
   "bin": {
     "nexfep": "cli/index.mjs"
   },
+  "typesVersions": {
+    "*": {
+      ".": ["./index.d.ts"],
+      "frontend": ["./frontend/index.d.ts"]
+    }
+  },
   "files": [
     "index.js",
     "index.d.ts",
@@ -40,7 +46,8 @@
     "src/Logger.js",
     "src/Logger.d.ts",
     "src/SingleInstance.js",
-    "src/SingleInstance.d.ts"
+    "src/SingleInstance.d.ts",
+    "frontend/index.d.ts"
   ],
   "type": "module",
   "main": "./index.js",
@@ -59,7 +66,6 @@
     "@types/node": "^22.0.0",
     "oxfmt": "^0.60.0",
     "oxlint": "^1.75.0",
-    "tsx": "^4.0.0",
     "typescript": "^5.0.0"
   },
   "engines": {

package/src/WindowManager.d.ts

@@ -35,7 +35,7 @@ declare class Window {
     loadHTML(html: string): Promise<void>;
 }
 declare class WindowPool {
-    onCustomMessage: (window: Window, data: string) => void;
+    onCustomMessage: (window: Window, message: string, data: any) => void;
     app: Application;
     logger: Logger;
     private windows;

package/src/WindowManager.js

@@ -127,8 +127,8 @@ class WindowPool {
             }
             process.env.WEBVIEW2_USER_DATA_FOLDER = userDataDir;
         }
-        this.onCustomMessage = (window, data) => {
-            console.log("Get Custom Message:", data, "from window", window.id);
+        this.onCustomMessage = (window, message, data) => {
+            console.log("Get Custom Message:", message, data, "from window", window.id);
         };
         this.handlers = new Map();
         this.app = app;
@@ -221,11 +221,6 @@ class WindowPool {
             window.ipc.postMessage(JSON.stringify(MessageBody));
         };
 
-        window.postMessage = (data) => {
-            const MessageBody = { type: 'CustomMessage', data: data }
-            window.ipc.postMessage(JSON.stringify(MessageBody));
-        };
-
         window.eventCount = 0;
 
         window.invoke = async (event, data = null) => {
@@ -367,9 +362,6 @@ class WindowPool {
                     else if (dataObj.type == "NexfepCloseDevTools") {
                         webview.closeDevtools();
                     }
-                    else if (dataObj.type == "CustomMessage") {
-                        this.onCustomMessage(windowObj, dataObj.data);
-                    }
                     else if (dataObj.type == "NexfepInvoke") {
                         const handlers = this.handlers.get(dataObj.event) || [];
                         handlers.forEach(async (handler) => {
@@ -405,6 +397,9 @@ class WindowPool {
                         });
                     }
                     else if (dataObj.type == "NexfepTell") {
+                        if (dataObj.to == 0) {
+                            this.onCustomMessage(windowObj, dataObj.message, dataObj.data);
+                        }
                         this.windows.forEach(async (w) => {
                             if (w.id == dataObj.to) {
                                 w.webview.evaluateScript(`