win_webview2 1.0.13 → 1.1.5

package/README.md

@@ -1,52 +1,185 @@
-# Win Webview2  
+ 
+## win_webview2 
 
-## npm install
+A lightweight Node.js module to build Windows desktop UIs using Microsoft WebView2. A minimal and tiny alternative to Electron for developers who need a simple web-based interface without the heavy Chromium overhead 
+ 
 
-```npm i win_webview2```
 
+## Installation
+Install the package via npm:
 
-Win Webview2 is a GUI toolkit for building desktop applications with Node.js. It is similar to Electron but significantly smaller because Win Webview2 utilizes Microsoft WebView2, which is already installed on Windows 10 and later versions.  
 
-## Building the Application  
+```sh
+npm install win_webview2
+``` 
+
 
-Run the following command:  
+## Interactive Project Management
+The win_webview2 CLI is designed to be your single point of control for the entire development lifecycle.
+## 1. Scaffolding (First time)
+To download the boilerplate and set up your project, simply run:
 
 ```sh
 npx win_webview2
-```  
+```
 
-A menu will appear in the terminal with the following options:  
-- `init_webview2` – Creates a configuration file in JSON format.  
-- `deploy` – Builds the application from your Node.js project.  
+## 2. Develop, Watch, and Build
+After the initial setup, you don't need to remember complex commands. Just run the same command again:
 
-## Example Configuration File  
 
-```json
-{
-  "entry_point": "app.js",
-  "appname": "openweb",
-  "icon_path": "./icon.png",
-  "outdir": "./dist"
-}
+
+```sh
+npx win_webview2
 ```
 
-## Open Webview Frome Node
+What it does:
+It opens an interactive menu where you can manage your project. You can simply use your arrow keys (↑/↓) to select common tasks:
+
+* Watch Mode: Run and see changes in real-time.
+* Build: Compile your application for production.
+* Dev Tools: Open debugging utilities.
+
+ 
+ >Pro Tip: Just hit npx win_webview2, use the Up/Down arrows to pick your task,   
+ >and press Enter. It's that simple!
+ 
+## Features
+
+* Built-in Express Server: Easily serve your static HTML folders.
+* Native UI Management: Control window states (maximize, minimize, move, resize).
+* Native Dialogs: Access Windows Open File and Open Folder dialogs directly from the browser.
+* Low-level API: Direct access to the native Node.js addon.
+ 
 
-```js
-import { openDialogFile, openDialogFolder, openWeb } from 'win_webview2';
 
-function openWebview(address) {
-  openWeb({
-        height : 400,
+## Basic Usage (Server-side)
+
+Use ww2_CreateServer to host your HTML files and initialize the WebView2 window.
+
+```ts
+
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { closeSplash, ww2_CreateServer } from "win_webview2/node"
+// Determine your HTML folder path
+
+let htmlFolder = (() => {
+    let result = path.join(__dirname, "html");
+    if (!existsSync(result)) {
+        result = path.join(process.cwd(), "assets/lib/html")
+    }
+    return result;
+})();
+// Create the server and UI
+
+ww2_CreateServer({
+    port: 0, // 0 for auto-assign
+    uiConfig: {
         width: 800,
-        kiosk : false,
-        maximize : false,
-        title : "auto",
-        url : address, 
-        isDebugMode : false
- }) 
+        height: 400,
+        title: "Ww2 UI",
+        wclassname: "myuiclass",
+        isDebug: true,
+        isKiosk: false,
+        isMaximize: false,
+    },
+    onExpressCreate: (app) => {
+        // You can add custom express middlewares here
+    },
+    htmlfolder: htmlFolder
+});
+// Close splash screen if active
+closeSplash();
+
+```
+
+
+
+------------------------------
+## Browser Integration (Client-side)
+Once the server is running, you can interact with the native Windows layer using callWw2.
+
+```ts
+
+import { callWw2 } from "win_webview2/browser"
+// Open File Dialog 
+const openFile = async () => {
+    let r = await callWw2({
+        openFileDialog: {
+            filter: "All Files (*.*)|*.*",
+            ownerClassName: "myuiclass",
+        }
+    });
+    console.log("Selected file:", r.result);
+};
+// Window Controls (Close, Move, Resize, Max/Min) 
+const closeWindow = async () => {
+    
+    await callWw2({
+        controlWindow: {
+            controlcmd: "close",
+            wndClassName: "myuiclass"
+        }
+    });
+};
+
+const resizeWindow = async () => {
+    await callWw2({
+        controlWindow: {
+            controlcmd: "resize",
+            wndClassName: "myuiclass",
+            width: 800,
+            height: 700
+        }
+    });
+};
+
+```
+
+------------------------------
+
+## Low-Level API
+If you need direct access to the native module (.node addon), you can use getModule.
+
+```ts
+
+import { getModule } from "win_webview2/node";
+async function runLowLevel() {
+    const ww2 = await getModule();
+    
+    // Manual window control
+    ww2.controlWindow({
+        wndClassName: "myuiclass",
+        controlcmd: "maximize"
+    });
 }
 
 ```
 
-look at github examples folder for detail
+
+
+## Module Interfaces
+
+```ts
+
+export interface WW2ControlWindowsArg {
+    wndClassName: string;
+    controlcmd: "close" | "move" | "maximize" | "minimize" | "resize" | "check";
+    left?: number;
+    top?: number;
+    height?: number;
+    width?: number;
+}
+interface Ww2Module {
+    openWeb: (arg: Ww2WebConfig) => void;
+    openFileDialog: (arg: WW2FileDialogArg) => void;
+    openFolderDialog: (arg: WW2FileDialogArg) => void;
+    controlWindow: (arg: WW2ControlWindowsArg) => void;
+}
+
+```
+
+------------------------------
+## License
+MIT
+

package/buildtools/copyDll.ts

@@ -0,0 +1,71 @@
+import { exec } from "node:child_process";
+import { copyFile, mkdir } from "node:fs/promises";
+import path from "node:path";
+
+function debugDir(dirPath: string) {
+    exec("cd " + dirPath + "&& dir", (s, o) => {
+        console.log(o);
+    })
+}
+
+(async () => {
+
+    let result = "\n";
+
+    let rootPath = path.join(__dirname, "../../");
+    let copyFromRoot = async (src: string, target: string) => {
+        result += "\n" + target;
+        await copyFile(path.join(rootPath, src), path.join(rootPath, target));
+    }
+
+    try {
+
+        await mkdir(path.join(rootPath, "win_webview2/win_lib/Win32"));
+        await mkdir(path.join(rootPath, "win_webview2/win_lib/x64"));
+    } catch (error) {
+
+    }
+
+    await copyFromRoot(
+        "exeOpener/build/x64/exeOpenner.exe",
+        "win_webview2/win_lib/x64/exeOpenner.exe"
+    );
+    await copyFromRoot(
+        "exeOpener/build/x64/splash.png",
+        "win_webview2/win_lib/x64/splash.png"
+    );
+
+    await copyFromRoot(
+        "exeOpener/build/x86/exeOpenner.exe",
+        "win_webview2/win_lib/Win32/exeOpenner.exe"
+    );
+    await copyFromRoot(
+        "exeOpener/build/x86/splash.png",
+        "win_webview2/win_lib/Win32/splash.png"
+    );
+
+    console.log("copy webview2 32");
+    await copyFromRoot(
+        "nodeAddOn/build/ia32/Release/ww2_addon.node",
+        "win_webview2/win_lib/Win32/ww2_addon.node"
+    );
+    await copyFromRoot(
+        "nodeAddOn/build/ia32/Release/WebView2Loader.dll",
+        "win_webview2/win_lib/Win32/WebView2Loader.dll"
+    );
+
+    console.log("copy webview2 64");
+    await copyFromRoot(
+        "nodeAddOn/build/x64/Release/ww2_addon.node",
+        "win_webview2/win_lib/x64/ww2_addon.node"
+    );
+    await copyFromRoot(
+        "nodeAddOn/build/x64/Release/WebView2Loader.dll",
+        "win_webview2/win_lib/x64/WebView2Loader.dll"
+    );
+
+
+
+    console.log("copy done :" + result);
+
+})();

package/{tsconfig.json → buildtools/tsconfig.json}

@@ -1,13 +1,13 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "CommonJS",
-    "declaration": true,
-    "rootDir": "./tsSrc",
-    "outDir": "./tsDist",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true
-  },
-  "include": ["tsSrc"]
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "declaration": true,
+    "rootDir": "./",
+    "outDir": "./tsDist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"]
 }

package/dist/browser/ww2_browser.d.ts

@@ -0,0 +1,32 @@
+interface WW2FileDialogArg {
+    filter: string;
+    ownerClassName: string;
+}
+interface WW2ControlWindowsArg {
+    wndClassName: string;
+    controlcmd: "close" | "move" | "maximize" | "minimize" | "resize" | "check";
+    left?: number;
+    top?: number;
+    height?: number;
+    width?: number;
+}
+export type PostData = {
+    openWeb?: {
+        wclassname: string;
+        url: string;
+        title: string;
+        width: number;
+        height: number;
+        isKiosk: boolean;
+        isMaximize: boolean;
+        isDebug: boolean;
+    };
+    openFileDialog?: WW2FileDialogArg;
+    openFolderDialog?: WW2FileDialogArg;
+    controlWindow?: WW2ControlWindowsArg;
+};
+export declare function callWw2(arg: PostData): Promise<{
+    err: string;
+    result: string;
+}>;
+export {};

package/dist/browser/ww2_browser.js

@@ -0,0 +1,11 @@
+export async function callWw2(arg) {
+    let response = await fetch("/ww2_post", {
+        method: "POST",
+        body: JSON.stringify(arg),
+        headers: {
+            "Content-Type": "application/json"
+        },
+    });
+    let result = await response.json();
+    return result;
+}

package/{tsDist/srcBuilder → dist/node/builder}/build_copyDir.d.ts

@@ -1 +1 @@
-export declare function copyDir(source: string, destination: string): Promise<void>;
+export declare function copyDir(source: string, destination: string): Promise<void>;

package/{tsDist/srcBuilder → dist/node/builder}/build_copyDir.js

@@ -1,24 +1,24 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.copyDir = copyDir;
-const fs_1 = require("fs");
-const path_1 = __importDefault(require("path"));
-async function copyDir(source, destination) {
-    // pastikan folder tujuan ada
-    await fs_1.promises.mkdir(destination, { recursive: true });
-    const entries = await fs_1.promises.readdir(source, { withFileTypes: true });
-    for (const entry of entries) {
-        let srcPath = path_1.default.join(source, entry.name);
-        let destPath = path_1.default.join(destination, entry.name);
-        if (entry.isDirectory()) {
-            // rekursif ke subfolder
-            await copyDir(srcPath, destPath);
-        }
-        else {
-            await fs_1.promises.copyFile(srcPath, destPath);
-        }
-    }
-}
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyDir = copyDir;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+async function copyDir(source, destination) {
+    // pastikan folder tujuan ada
+    await fs_1.promises.mkdir(destination, { recursive: true });
+    const entries = await fs_1.promises.readdir(source, { withFileTypes: true });
+    for (const entry of entries) {
+        let srcPath = path_1.default.join(source, entry.name);
+        let destPath = path_1.default.join(destination, entry.name);
+        if (entry.isDirectory()) {
+            // rekursif ke subfolder
+            await copyDir(srcPath, destPath);
+        }
+        else {
+            await fs_1.promises.copyFile(srcPath, destPath);
+        }
+    }
+}

package/dist/node/builder/builder_deploy.d.ts

@@ -0,0 +1,2 @@
+export declare namespace WW2Builder {
+}

package/{tsDist/srcBuilder/builder_tp.js → dist/node/builder/builder_deploy.js}

@@ -1,2 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/node/builder/builder_init.d.ts

@@ -0,0 +1,9 @@
+interface ChoiseItem {
+    fun: () => any;
+    description: string;
+}
+export type WW2Choise = {
+    [key: string]: ChoiseItem;
+};
+export declare function ww2Init(): Promise<void>;
+export {};

package/dist/node/builder/builder_init.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ww2Init = ww2Init;
+const dirnameTool_1 = require("../tsExport/dirnameTool");
+const child_process_1 = require("child_process");
+const prompts_1 = __importDefault(require("prompts"));
+function runCommand(command) {
+    try {
+        const currentShell = process.platform === 'win32' ? 'cmd.exe' : '/bin/sh';
+        (0, child_process_1.execSync)(command, { stdio: 'inherit', shell: currentShell, killSignal: "SIGINT" });
+    }
+    catch (error) {
+        console.error(`Command Error: ${command}`);
+        process.exit();
+    }
+}
+const jsonConfigFilePath = "./win_webview2.json";
+let mdirname = (0, dirnameTool_1.getWw2Dirname)();
+let ww2Choise = {
+    "ww2_typescript": {
+        description: "init win_webview2",
+        fun: async () => {
+            runCommand('npx degit nnttoo/win_webview2/example/ww2_typescript#master ww2_typescript');
+        }
+    }
+};
+async function ww2Init() {
+    const response = await (0, prompts_1.default)({
+        type: 'select',
+        name: 'menu',
+        message: 'Pick one  example',
+        instructions: '(Use arrow keys to navigate, press enter to select)',
+        choices: (() => {
+            let result = [];
+            for (let item in ww2Choise) {
+                let val = ww2Choise[item];
+                result.push({
+                    title: item,
+                    value: val.fun,
+                    description: val.description,
+                });
+            }
+            return result;
+        })(),
+    });
+    if (response && response.menu) {
+        await response.menu();
+    }
+}

package/dist/node/builder/builder_promps.d.ts

@@ -0,0 +1,9 @@
+interface ChoiseItem {
+    fun: () => any;
+    description: string;
+}
+export type WW2Choise = {
+    [key: string]: ChoiseItem;
+};
+export declare function buildForServer(): Promise<void>;
+export {};

package/dist/node/builder/builder_promps.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildForServer = buildForServer;
+const prompts_1 = __importDefault(require("prompts"));
+const builder_init_1 = require("./builder_init");
+const userExec_1 = require("./userExec");
+let ww2Choise = {
+    "init_win_webview2": {
+        description: "init win_webview2",
+        fun: async () => {
+            await (0, builder_init_1.ww2Init)();
+        }
+    }
+};
+async function buildForServer() {
+    let userChoise = await (0, userExec_1.readUserScripts)();
+    if (userChoise != null) {
+        ww2Choise = {
+            ...ww2Choise,
+            ...userChoise
+        };
+    }
+    const response = await (0, prompts_1.default)({
+        type: 'select',
+        name: 'menu',
+        message: 'Pick one',
+        instructions: '(Use arrow keys to navigate, press enter to select)',
+        choices: (() => {
+            let result = [];
+            for (let item in ww2Choise) {
+                let val = ww2Choise[item];
+                result.push({
+                    title: item,
+                    value: val.fun,
+                    description: val.description,
+                });
+            }
+            return result;
+        })(),
+    });
+    if (response && response.menu) {
+        await response.menu();
+    }
+}
+console.log("ww2 version : v6 \n\n");
+const args = process.argv.slice(2);
+if (args.length > 0) {
+    let argument = args[0];
+    if (argument.startsWith("--")) {
+        argument = argument.substring(2);
+    }
+    console.log(argument);
+    if (ww2Choise[argument]) {
+        ww2Choise[argument].fun();
+    }
+}
+else {
+    buildForServer();
+}
+process.on('SIGINT', () => {
+    console.log('\n[Sinyal SIGINT Terdeteksi]');
+    console.log('User menekan Ctrl+C. Membersihkan data...');
+    // Anda harus memanggil exit secara manual jika menggunakan listener ini
+    process.exit(0);
+});

package/dist/node/builder/dirnameTool.d.ts

@@ -0,0 +1,4 @@
+export declare function getDirname(): {
+    _dirname: string;
+    _filename: string;
+};

package/dist/node/builder/dirnameTool.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDirname = getDirname;
+const node_url_1 = require("node:url");
+const node_path_1 = require("node:path");
+function getDirname() {
+    // Trik deteksi lingkungan
+    const _filename = typeof __filename !== 'undefined'
+        ? __filename
+        // @ts-ignore:
+        : (0, node_url_1.fileURLToPath)(eval('import.meta.url'));
+    const _dirname = typeof __dirname !== 'undefined'
+        ? __dirname
+        : (0, node_path_1.dirname)(_filename);
+    return { _dirname, _filename };
+}

package/dist/node/builder/tools.d.ts

@@ -0,0 +1,4 @@
+export declare function getDirname(): {
+    _dirname: string;
+    _filename: string;
+};

package/dist/node/builder/tools.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDirname = getDirname;
+const node_url_1 = require("node:url");
+const node_path_1 = require("node:path");
+function getDirname() {
+    // Trik deteksi lingkungan
+    const _filename = typeof __filename !== 'undefined'
+        ? __filename
+        : (0, node_url_1.fileURLToPath)(import.meta.url);
+    const _dirname = typeof __dirname !== 'undefined'
+        ? __dirname
+        : (0, node_path_1.dirname)(_filename);
+    return { _dirname, _filename };
+}

package/dist/node/builder/userExec.d.ts

@@ -0,0 +1,2 @@
+import { WW2Choise } from "./builder_promps";
+export declare function readUserScripts(): Promise<WW2Choise | undefined>;

package/dist/node/builder/userExec.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readUserScripts = readUserScripts;
+const node_path_1 = __importDefault(require("node:path"));
+const dirnameTool_1 = require("../tsExport/dirnameTool");
+const promises_1 = require("node:fs/promises");
+const comment_json_1 = require("comment-json");
+const node_child_process_1 = require("node:child_process");
+function runNpm(command) {
+    try {
+        const currentShell = process.platform === 'win32' ? 'cmd.exe' : '/bin/sh';
+        let cmd = `npm run ${command}`;
+        console.log(cmd);
+        (0, node_child_process_1.execSync)(cmd, { stdio: 'inherit', shell: currentShell, killSignal: "SIGINT" });
+    }
+    catch (error) {
+        console.error(`Command Error: ${command}`);
+        process.exit();
+    }
+}
+async function readUserScripts() {
+    let dirUser = (0, dirnameTool_1.findUserProjectRoot)();
+    if (dirUser == null)
+        return;
+    let pkgJson = node_path_1.default.join(dirUser, "package.json");
+    let pkgTxt = await (0, promises_1.readFile)(pkgJson, "utf-8");
+    let obj = (0, comment_json_1.parse)(pkgTxt);
+    if (obj.scripts == null)
+        return;
+    let ww2Choise = {};
+    let name = obj.name ? obj.name : "";
+    for (let kscript in obj.scripts) {
+        let cmd = obj.scripts[kscript];
+        ww2Choise["--" + kscript] = {
+            description: name + " : " + cmd,
+            fun: () => {
+                runNpm(kscript);
+            }
+        };
+    }
+    return ww2Choise;
+}

package/{tsDist/srcBuilder/builder_tp.d.ts → dist/node/tsExport/config.d.ts}

@@ -1,7 +1,7 @@
-export type ConfigWW2 = {
-    appname: string;
-    icon_path: string;
-    entry_point: string;
-    outdir: string;
-    platform: 'Win32' | 'x64';
-};
+export type ConfigWW2 = {
+    appname: string;
+    icon_path: string;
+    entry_point: string;
+    outdir: string;
+    platform: 'Win32' | 'x64';
+};