win_webview2 1.0.0

package/README.md

@@ -0,0 +1,27 @@
+# Win Webview2  
+
+
+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  
+
+Run the following command:  
+
+```sh
+npx ww2_builder
+```  
+
+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.  
+
+## Example Configuration File  
+
+```json
+{
+  "entry_point": "app.js",
+  "appname": "openweb",
+  "icon_path": "./icon.png",
+  "outdir": "./dist"
+}
+```

package/argtype.ts

@@ -0,0 +1,14 @@
+
+
+export type OpenWebArg = {
+    url: string
+    width: number 
+    height: number
+    kiosk: boolean 
+    maximize: boolean
+    title: string 
+}
+
+export type OpenDialogFileArg = {
+    filter : string
+}

package/index.js

@@ -0,0 +1,110 @@
+
+var ffi = require('ffi-napi');
+
+var arc = require('os').arch();
+const path = require("path")
+
+let libFilePath = "./bin/Win32/";
+if (arc == "x64") {
+    console.log("using x64")
+    libFilePath = "./bin/x64/";
+}
+
+libFilePath = path.join(__dirname, libFilePath);
+
+const mainDllPath = path.join(libFilePath, "win_webview2_lib.dll");
+const webviewDllPath = path.join(libFilePath, "WebView2Loader.dll");
+
+ffi.Library(webviewDllPath);
+
+
+
+ 
+module.exports = {
+
+    
+    /**
+     * @typedef SimpleFFIcallback
+     * 
+     * @param {(string : str)=>void} jscallback 
+     * @return {SimpleFFIcallback}
+     */
+    createFFIcallback : (jscallback)=>{
+        return ffi.Callback('void', ['string'], (g) => {
+            jscallback(g);
+        })
+    },
+
+
+    // void OpenWebview(
+    //     const char* url,
+    //     int width,
+    //     int height,
+    //     bool maximize,
+    //     bool kiosk,
+    //     const char* title,
+    //     const char* windowclassname,
+    //     const char* windowParentclassname,
+    //     CallbackType cb
+
+    // ) 
+
+    /**
+     * @typedef OpenWebviewProp
+     * @property {string} url
+     * @property {int} width
+     * @property {int} height
+     * @property {bool} maximize
+     * @property {bool} kiosk
+     * @property {string} title
+     * @property {string} windowclassname
+     * @property {string} windowParentclassname
+     * @property {SimpleFFIcallback} ffiCallback
+     * @property {(string : str)=>void} callback
+     * 
+     * @param {OpenWebviewProp} prop 
+     */
+    openWebview: (prop) => {
+        var libm = ffi.Library(mainDllPath, {
+            'OpenWebview': ['void',
+                [
+                    'string', //url 
+                    'int', //width 
+                    'int', // height
+                    'bool', // maximize
+                    'bool', // kiosk
+                    'string', // title.
+                    'string', // windowclassname
+                    'string', // windowParentclassname
+                    'pointer', // CallbackType
+                ]]
+        });
+
+        return new Promise((r,x)=>{
+            libm.OpenWebview.async(
+                prop.url,
+                prop.width,
+                prop.height,
+                prop.maximize,
+                prop.kiosk,
+                prop.title,
+                prop.windowclassname,
+                prop.windowParentclassname,
+    
+                prop.ffiCallback, 
+                (e, res) => {
+                    if(e){
+                        x(e);
+                    } else {
+                        r(res);
+                    }
+                }
+    
+            )
+        })
+
+        
+
+
+    }
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "win_webview2",
+  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nnttoo/win_webview2"
+  },
+  "description": "",
+  "main": "index.js",
+  "exports": "./winWebview2.mjs",
+  "bin": {
+    "ww2_builder": "./ww2_builder.mjs"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "rcedit": "^4.0.1",
+    "sharp": "^0.33.5",
+    "sharp-ico": "^0.1.5"
+  }
+}

package/winWebview2.mjs

@@ -0,0 +1,100 @@
+// @ts-check
+let isOncloseSetted = false;
+const prefixWebview = "WINWEBVIEW_";
+const prefixWebviewResult = "WIN_WEBVIEW2_RESULT";
+
+/** @type {string | null} */
+let resultDataFromWebview2 = "";
+let resultInUse = false;
+
+
+/**
+ * 
+ * @param {number} n 
+ */
+function sleep(n){
+   return new Promise((r,x)=>{
+      setTimeout(r,n);
+   })
+}
+
+
+/**
+ * 
+ * @param {object } arg 
+ */
+async function waitingResult(arg){
+   if(resultInUse ) return "";
+   resultInUse = true; 
+   
+   resultDataFromWebview2 = null; 
+   
+   var objstr = JSON.stringify(arg);
+   console.log(`${prefixWebview}JSON` + objstr);
+
+   while(resultDataFromWebview2 == null){
+      await sleep(200);
+   }
+
+   resultInUse = false;
+   return resultDataFromWebview2;
+
+}
+
+
+/**
+ * 
+ * @param {string} data 
+ */
+function setToResult(data){
+   if(!data.startsWith(prefixWebviewResult)) return false;
+   let result = data.substring(prefixWebviewResult.length);
+   resultDataFromWebview2 = result; 
+   return true;
+}
+
+function setOnClosed() {
+   process.stdin.on("data", (dataIn) => {
+      let data = dataIn.toString();
+      if(setToResult(data)) return;
+
+      console.log(data);
+      if (data == `${prefixWebview}MAINPAGEISCLOSED`) {
+         console.log("server diclose");
+         process.exit();
+      }
+   })
+}
+
+
+/**
+* 
+* @param {import("./argtype").OpenWebArg } arg 
+*/
+export function openWeb(arg) {
+   if(!isOncloseSetted){
+      isOncloseSetted = true;
+      setOnClosed();
+   }
+
+   arg["fun"] = "OpenWeb";
+   var objstr = JSON.stringify(arg);
+   console.log(`${prefixWebview}JSON` + objstr);
+}
+
+/**
+ * 
+ * @param {import("./argtype").OpenDialogFileArg} arg 
+ * @returns {Promise<string>}
+ */
+export  function openDialogFile(arg){
+   arg["fun"] = "OpenDialogFIle";
+   return waitingResult(arg); 
+}
+
+export async function openDialogFolder(){
+   let obj = {
+      fun : "OpenDialogFolder"
+   };
+   return waitingResult(obj);  
+}

package/win_lib/Win32/index.conf

@@ -0,0 +1 @@
+node ../../../../example/express_dev/index.mjs

package/win_lib/x64/index.conf

@@ -0,0 +1 @@
+node ../../../../example/express_dev/index.mjs

package/ww2_builder.mjs

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+// @ts-check
+
+import prompts from "prompts";
+import fs from 'fs'
+import sharp from "sharp"
+import path from "path";
+import { logPrint } from "./ww2_builder_log.mjs";
+import { WW2Deploy } from "./ww2_builder_deploy.mjs";
+
+
+/** @typedef {import("./ww2_builder_type").ConfigWW2} ConfigWW2 */
+
+/**
+ * 
+ * @param {string} msg 
+ * @param {string[]} list 
+ * @returns {Promise<string>}
+ */
+async function askWhitList(msg, list) {
+    let p = await prompts([
+        {
+            type: 'select', // Tipe pertanyaan list (menu dropdown)
+            name: 'hasilnya',
+            message: msg,
+            choices: list.map((val) => {
+                let r = {
+                    title: val,
+                    value: val
+                }
+                return r
+            }), // Opsi
+        },
+    ]);
+    return p.hasilnya;
+}
+
+
+
+
+ 
+
+ 
+
+async function run() {
+    let p = await askWhitList("menu", [
+        "init_webview2",
+        "deploy",
+        "back",
+        "exit"
+    ]);
+
+    if (p == "init_webview2") {
+
+        await WW2Deploy.initWW2();
+
+    } else if (p == "deploy") {
+        await WW2Deploy.startDeploy(); 
+    }
+
+
+
+    if (p == "exit") {
+        return;
+    }
+
+    run();
+}
+
+
+run();

package/ww2_builder_deploy.mjs

@@ -0,0 +1,171 @@
+// @ts-check
+
+/** @typedef {import("./ww2_builder_type").ConfigWW2} ConfigWW2 */
+
+
+import fs from 'fs'
+import sharp from "sharp"
+import path from "path";
+import { logPrint } from "./ww2_builder_log.mjs";
+import { fileURLToPath } from 'url';
+import rcedit from "rcedit";
+import  sharpsToIco  from "sharp-ico"
+
+
+const jsonConfigFilePath = "./win_webview2.json";
+
+export class WW2Deploy {
+
+    /** @type {ConfigWW2 | null} */
+
+    configObjec = null;
+
+    /** @type {"x64" | "Win32" } */
+    platform = "Win32";
+
+    /** @type {string | null} */
+    outputExeFile = null;
+
+
+
+    async makeDistFolder() {
+
+        if (this.configObjec == null) return;
+        let config = this.configObjec;
+
+        let folderDist = config.outdir;
+
+        if (!fs.existsSync(folderDist)) {
+            await fs.promises.mkdir(folderDist);
+        }
+
+        let libFolder = path.join(folderDist,"lib");
+        if (!fs.existsSync(libFolder)) {
+            await fs.promises.mkdir(libFolder);
+        }
+    }
+
+    async buildIcon() {
+        if (this.configObjec == null) return;
+
+        let config = this.configObjec;
+
+        let iconPath = config.icon_path;
+        if (!fs.existsSync(iconPath)) {
+
+            logPrint("icon notfound");
+            return;
+
+        }
+
+        let outputIcon = path.join(config.outdir, "icon.ico");
+
+        const sizes = [16, 32, 48, 256]; // Ukuran standar untuk rcedit
+        const images = await Promise.all(sizes.map(size =>
+            sharp(iconPath)
+                .resize(size, size)
+                .toFormat('png') 
+        ));
+
+
+        await sharpsToIco.sharpsToIco(images, outputIcon); 
+
+        console.log('✅ Berhasil membuat icon.ico yang valid untuk rcedit!');
+
+         
+    }
+
+    async copyExe() {
+        let currentDirMjs = fileURLToPath(import.meta.url);
+        let currentDir = path.dirname(currentDirMjs);
+
+        if (this.configObjec == null) return;
+        let config = this.configObjec;
+
+        logPrint("COpy webview2 exe file");
+        logPrint(currentDir);
+
+        let inputFileExe = path.join(currentDir, "win_lib", this.platform, "CmdWebview2.exe");
+       
+        let outFileExe = path.join(config.outdir, config.appname + ".exe"); 
+        this.outputExeFile = inputFileExe; 
+        await fs.promises.copyFile(inputFileExe, outFileExe);
+
+        let inputFileDll = path.join(currentDir, "win_lib", this.platform, "WebView2Loader.dll");
+        let outFileDll = path.join(config.outdir,  "WebView2Loader.dll"); 
+        await fs.promises.copyFile(inputFileDll, outFileDll);
+
+        logPrint("copy file success");
+    }
+
+    async editIcon() {
+        if (this.outputExeFile == null) return;
+        if (this.configObjec == null) return;
+
+        let object = this.configObjec;
+
+
+        let iconPath = path.join(object.outdir, "icon.ico");
+        iconPath = path.resolve(iconPath);
+
+        await rcedit(this.outputExeFile, {
+            icon: iconPath,
+        });
+    }
+
+    async readConfig() {
+        let str = await fs.promises.readFile(jsonConfigFilePath);
+        let jsonObj = JSON.parse(str.toString());
+
+        this.configObjec = jsonObj;
+    }
+
+    async copyNodeExe(){
+        if(this.configObjec == null) return;
+        let obj = this.configObjec;
+
+        let inputNodeExe = process.execPath;
+        let outNodeExe = path.join(obj.outdir,"lib","node.exe");
+        await fs.promises.copyFile(inputNodeExe, outNodeExe);
+    }
+
+    async createIndexConf(){
+        if(this.configObjec == null) return;
+        let obj = this.configObjec;
+
+        let oututFileConf = path.join(obj.outdir,"index.conf");
+
+        let configCtn = `./lib/node.exe ./${obj.entry_point}`
+        await fs.promises.writeFile(oututFileConf,configCtn);
+    }
+    
+    static async initWW2() {
+        /** @type {ConfigWW2} */
+
+        let objConfig = {
+            entry_point: "app.js",
+            appname: "openweb",
+            icon_path: "./icon.png",
+            outdir: "./dist"
+        }
+
+        let objstr = JSON.stringify(objConfig, null, 2);
+        await fs.promises.writeFile(jsonConfigFilePath, objstr);
+    }
+
+
+
+    static async startDeploy() {
+        logPrint("Start Deploy win_webview2");
+        let c = new WW2Deploy();
+
+        await c.readConfig();
+        await c.makeDistFolder();
+        await c.buildIcon();
+        await c.copyExe();
+        await c.editIcon();
+        await c.copyNodeExe();
+        await c.createIndexConf();
+
+    }
+}

package/ww2_builder_log.mjs

@@ -0,0 +1,3 @@
+export function logPrint(msg) {
+    console.log(new Date().toLocaleString() + ": ", msg);
+}

package/ww2_builder_type.ts

@@ -0,0 +1,7 @@
+
+export type ConfigWW2={
+    appname : string,
+    icon_path : string,
+    entry_point : string,
+    outdir : string,
+}