nexfep 0.0.3 → 0.1.0

package/README-CN.md

@@ -1,6 +1,6 @@
 # Nexfep
 
-语言: [English](https://github.com/zhuxiaojt/Nexfep/blob/master/README.md) | 简体中文(当前)
+语言: [English](https://github.com/zhuxiaojt/Nexfep/blob/main/README.md) | 简体中文(当前)
 
 基于 @webviewjs/webview 的桌面应用框架
 
@@ -112,6 +112,49 @@ pool.onCustomMessage = (window, data) => {
 - `window` — 发送消息的窗口对象
 - `data` — 消息内容，为对象类型（JSON 序列化后会自动通过 `JSON.parse` 转换为对象）
 
+#### 触发自定义事件
+
+在页面中通过 `window.invoke` 触发事件：
+
+```javascript
+window.invoke('hello', 'world');
+```
+
+**参数说明**
+
+- `event` — 事件名称
+- `data` — 任意类型的可序列化数据，会被序列化为 JSON 字符串后发送
+
+#### 监听事件
+
+在主进程中通过 `pool.handle` 监听事件：
+
+```typescript
+pool.handle('hello', (data) => {
+  console.log('收到事件 hello:', data);
+});
+```
+
+**参数说明**
+
+- `event` — 事件名称，需要和触发事件时的事件名称一致
+- `callback` — 事件处理函数，需要接收事件数据作为 `data` 参数。返回任意类型的可序列化数据，会被序列化为 JSON 字符串后发送至前端作为 `window.invoke` 的返回值（也可以不返回任何值）
+
+#### 取消监听事件
+
+在主进程中通过 `pool.unhandle` 取消监听事件：
+
+```typescript
+pool.unhandle('hello', (data) => {
+  console.log('收到事件 hello:', data);
+});
+```
+
+**参数说明**
+
+- `event` — 事件名称，需要和触发事件时的事件名称一致
+- `callback` — 事件处理函数，需要和监听事件时的回调函数一致
+
 #### 窗口控制函数
 
 页面中可直接调用以下注入函数进行窗口控制：
@@ -203,6 +246,8 @@ if (window.isNexfepLoadDone) {
 | ------------------------------------- | ----------------------------------------------------------- | ---------------- | -------------------------- |
 | `constructor(userDataFolder?)`        | `userDataFolder`: string（可选）                                | WindowPool       | 创建窗口池，可选指定 WebView2 用户数据目录 |
 | `createWindow(isShow?, isDecorated?)` | `isShow`: boolean（默认 true）, `isDecorated`: boolean（默认 true） | Promise\<Window> | 创建并获取一个窗口                  |
+| `handle(event, callback)`             | `event`: string, `callback`: (data: string) => void | 无                | 监听指定事件，当收到事件时触发回调函数 |
+| `unhandle(event, callback)`                     | `event`: string, `callback`: (data: string) => void | 无                | 取消监听指定事件回调中的指定函数 |
 | `closeWindow(window)`                 | `window`: Window                                            | Promise\<void>   | 关闭指定窗口并回收至池中               |
 | `closePool()`                         | 无                                                           | Promise\<void>   | 关闭窗口池，退出应用                 |
 | `mainloop()`                          | 无                                                           | void             | 启动应用主循环，阻塞直到应用退出           |
@@ -237,4 +282,4 @@ pnpm run compile
 
 ## 许可证
 
-MIT License
+MIT License

package/README.md

@@ -1,6 +1,6 @@
 # Nexfep
 
-Language: English(now) | [简体中文](https://github.com/zhuxiaojt/Nexfep/blob/master/README-CN.md)
+Language: English(now) | [简体中文](https://github.com/zhuxiaojt/Nexfep/blob/main/README-CN.md)
 
 A desktop application framework based on @webviewjs/webview
 
@@ -112,6 +112,49 @@ pool.onCustomMessage = (window, data) => {
 - `window` — The window object that sent the message
 - `data` — Message content, an object type (automatically converted from JSON string via `JSON.parse`)
 
+#### Invoke Custom Events
+
+Invoke events via `window.invoke` in the page:
+
+```javascript
+window.invoke('hello', 'world');
+```
+
+**Parameters**
+
+- `event` — Event name
+- `data` — Any serializable data, will be serialized to JSON string before sending
+
+#### Listen for Events
+
+Listen for events via `pool.handle` in the main process:
+
+```typescript
+pool.handle('hello', (data) => {
+  console.log('Received event hello:', data);
+});
+```
+
+**Parameters**
+
+- `event` — Event name, must match the event name when invoking
+- `callback` — Event handler function, receives event data as `data` parameter. Can return any serializable data, which will be serialized to JSON string and sent back to the frontend as the return value of `window.invoke` (can also return nothing)
+
+#### Remove Event Listener
+
+Remove event listener via `pool.unhandle` in the main process:
+
+```typescript
+pool.unhandle('hello', (data) => {
+  console.log('Received event hello:', data);
+});
+```
+
+**Parameters**
+
+- `event` — Event name, must match the event name when listening
+- `callback` — Event handler function, must match the callback function when listening
+
 #### Window Control Functions
 
 The following injected functions can be directly called in the page for window control:
@@ -203,6 +246,8 @@ if (window.isNexfepLoadDone) {
 | ------------------------------------- | -------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------ |
 | `constructor(userDataFolder?)`        | `userDataFolder`: string (optional)                                        | WindowPool       | Creates a window pool, optionally specifying the WebView2 user data directory |
 | `createWindow(isShow?, isDecorated?)` | `isShow`: boolean (default true), `isDecorated`: boolean (default true)    | Promise\<Window> | Creates and returns a window                                             |
+| `handle(event, callback)`            | `event`: string, `callback`: (data: string) => void                       | None             | Listens for the specified event, triggers callback when event is received   |
+| `unhandle(event, callback)`           | `event`: string, `callback`: (data: string) => void                       | None             | Removes the specified callback from the event listener                     |
 | `closeWindow(window)`                 | `window`: Window                                                           | Promise\<void>   | Closes the specified window and returns it to the pool                   |
 | `closePool()`                         | None                                                                       | Promise\<void>   | Closes the window pool and exits the application                         |
 | `mainloop()`                          | None                                                                       | void             | Starts the application main loop, blocking until the application exits   |
@@ -237,4 +282,4 @@ pnpm run compile
 
 ## License
 
-MIT License
+MIT License

package/index.d.ts

@@ -27,6 +27,8 @@ declare class WindowPool {
     onCustomMessage: (window: Window, data: string) => void;
     private app;
     private windows;
+    private handlers;
+    private injectCount;
     private windowCount;
     private freeWindowCount;
     constructor(WindowsWebview2UserDataFolder?: string);
@@ -36,6 +38,8 @@ declare class WindowPool {
     createWindow(isShow?: boolean, isDecorated?: boolean): Promise<Window>;
     closeWindow(window: Window): Promise<void>;
     closePool(): Promise<void>;
+    handle(event: string, callback: (data: any) => any): Promise<void>;
+    unhandle(event: string, callback: (data: any) => any): Promise<void>;
     mainloop(): void;
 }
-export { WindowPool, Window };
+export { WindowPool, Window };

package/index.js

@@ -73,6 +73,8 @@ class WindowPool {
     onCustomMessage;
     app;
     windows;
+    handlers;
+    injectCount;
     windowCount;
     freeWindowCount;
     constructor(WindowsWebview2UserDataFolder = path.join(process.env.LOCALAPPDATA || os.homedir(), 'NexfepDevelopment.webview2-data')) {
@@ -88,7 +90,9 @@ class WindowPool {
         this.onCustomMessage = (window, data) => {
             console.log('Get Custom Message:', data, "from window", window.id);
         };
+        this.handlers = new Map();
         this.app = new Application();
+        this.injectCount = 0;
         this.windows = [];
         this.windowCount = 0;
         this.freeWindowCount = 0;
@@ -182,6 +186,23 @@ class WindowPool {
             const MessageBody = { type: 'CustomMessage', data: data }
             window.ipc.postMessage(JSON.stringify(MessageBody));
         };
+
+        window.eventCount = 0;
+
+        window.invoke = async (event, data) => {
+            const MessageBody = { type: 'NexfepInvoke', eventId: [${this.injectCount}, ++window.eventCount], event: event, data: data }
+            window.ipc.postMessage(JSON.stringify(MessageBody));
+            return new Promise((resolve, reject) => {
+                window.addEventListener("nexfep-invoke-result-"+${this.injectCount}+"-"+window.eventCount, (event) => {
+                    window.removeEventListener("nexfep-invoke-result-"+${this.injectCount}+"-"+window.eventCount, event);
+                    if(event.detail){
+                        resolve(event.detail);
+                    }else{
+                        resolve();
+                    }
+                });
+            });
+        }
         
         // 注入 CSS 样式
         const style = document.createElement('style');
@@ -247,6 +268,22 @@ class WindowPool {
             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) => {
+                    const result = await handler(dataObj.data);
+                    if (result) {
+                        webview.evaluateScript(`
+                            window.dispatchEvent(new Event('nexfep-invoke-result-${dataObj.eventId[0]}-${dataObj.eventId[1]}', { detail: ${JSON.stringify(result)} }));
+                        `);
+                    }
+                    else {
+                        webview.evaluateScript(`
+                            window.dispatchEvent(new Event('nexfep-invoke-result-${dataObj.eventId[0]}-${dataObj.eventId[1]}', { detail: undefined }));
+                        `);
+                    }
+                });
+            }
         });
         return windowObj;
     }
@@ -282,9 +319,14 @@ class WindowPool {
     async closePool() {
         this.app.exit();
     }
+    async handle(event, callback) {
+        this.handlers.set(event, [...this.handlers.get(event) || [], callback]);
+    }
+    async unhandle(event, callback) {
+        this.handlers.set(event, (this.handlers.get(event) || []).filter(c => c !== callback));
+    }
     mainloop() {
         this.app.run();
     }
 }
 export { WindowPool, Window };
-//# sourceMappingURL=index.js.map

package/package.json

@@ -1,7 +1,20 @@
 {
   "name": "nexfep",
   "description": "A desktop application framework based on @webviewjs/webview",
-  "version": "0.0.3",
+  "repository": "https://github.com/zhuxiaojt/Nexfep",
+  "homepage": "https://github.com/zhuxiaojt/Nexfep#readme",
+  "bugs": {
+    "url": "https://github.com/zhuxiaojt/Nexfep/issues"
+  },
+  "keywords": [
+    "desktop",
+    "application",
+    "framework",
+    "@webviewjs/webview",
+    "webview",
+    "typescript"
+  ],
+  "version": "0.1.0",
   "type": "module",
   "packageManager": "pnpm@9.15.9",
   "main": "./index.js",