feat: vite

wll8 · Dec 13, 2023 · 94e6bb3 · 94e6bb3
1 parent 5464a69
commit 94e6bb3
Show file tree

Hide file tree

Showing 10 changed files with 2,079 additions and 23 deletions.
diff --git a/build.js b/build.js
@@ -1,4 +1,4 @@
-const cp = require(`child_process`)
+import cp from 'child_process'
 const [buildType = `production`] = process.argv.splice(2)
 cp.execSync(`npx shx rm -rf %temp%/sys-shim`, {stdio: `inherit`})
 cp.execSync(`npx shx rm -rf ./win-api/res/`, {stdio: `inherit`})

diff --git a/doc.md b/doc.md
@@ -373,7 +373,23 @@ tray.on(`_WM_RBUTTONUP`, async () => {
 
 ## 开发
 
-任何程序，不管是浏览器还是 nodejs 都可以通过 main.exe 提供的 websocket api 来调用系统功能。
+node v18.19.0
+
+``` bat
+rem 安装依赖
+yarn
+
+rem 生成库文件 sys.js
+yarn sys
+
+rem 获取 main.exe，可以通过编译或下载得到
+yarn main:build
+
+rem 调试 api
+yarn dev
+```
+
+另外，任何程序，不管是浏览器还是 nodejs 都可以通过 main.exe 提供的 websocket api 来调用系统功能。
 
 例如，可以在开发阶段，可以在 package.json 中指定 api 的连接方式：
 

diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:;base64,=" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,12 +1,35 @@
 {
+  "debug": true,
+  "socket": {
+    "port": 7788
+  },
+  "pageShow": true,
+  "page": "http://localhost:5173/",
+  "name": "sys-shim",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "build": "node build.js",
-    "build:dev": "node build.js development"
+    "dev": "run-p main:run vite:run",
+    "main:run": "win-api/dist/main.exe",
+    "main:build": "npx download-cli https://github.com/wll8/sys-shim/releases/download/example/main.exe -o win-api/dist",
+    "vite:run": "vite",
+    "vite": "vite",
+    "preview": "vite preview",
+    "sys": "node build.js",
+    "sys:dev": "node build.js development"
   },
   "dependencies": {
+    "npm-run-all": "^4.1.5",
     "proxy-deep": "^3.1.1",
-    "rpc-websockets": "^7.6.0",
+    "rpc-websockets": "^7.6.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "download-cli": "^1.1.1",
     "shx": "^0.3.4",
+    "vite": "^5.0.0",
+    "vue": "^3.3.8",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   }

diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,133 @@
+<script setup>
+import { ref, watch, toRaw } from "vue";
+const count = ref(0);
+const res = ref([``]);
+watch(res, async (newVal, oldVal) => {
+  newVal = toRaw(newVal)
+  if (typeof newVal === `object`) {
+    let [a, b] = newVal;
+    res.value = [`是否执行失败: ${a}`, `返回值: ${b}`].join(`\n`);
+  }
+});
+const list = ref([]);
+const ws = window.main.ws;
+list.value = [
+  {
+    name: `创建目录`,
+    async fn() {
+      const dir = "C:/my/";
+      res.value = await ws.call(`run`, [
+        `
+                  var arg = ...
+                  fsys.createDir(arg)
+                  `,
+        dir,
+      ]);
+      console.log(`res.value`, res.value);
+    },
+  },
+  {
+    name: `下载文件`,
+    async fn() {
+      const url =
+        "https://download.microsoft.com/download/7/4/A/74A33AB3-B6F3-435D-8E3E-0A9FD574347F/services-on-server-install-worksheet.xlsx";
+      res.value = await ws.call(`run`, [
+        `
+                  var arg = ...
+                  var remoteFile = inet.httpFile(arg ,"C:/my/")
+                  return remoteFile.download()
+                  `,
+        url,
+      ]);
+    },
+  },
+  {
+    name: `定位文件`,
+    async fn() {
+      const url = "C:/my/services-on-server-install-worksheet.xlsx";
+      res.value = await ws.call(`run`, [
+        `
+                  var arg = ...
+                  process.exploreSelect(arg);
+                  `,
+        url,
+      ]);
+    },
+  },
+  {
+    name: `上传文件`,
+    async fn() {
+      res.value = await ws.call(`run`, [
+        `
+                  var http = inet.http(); 
+                  http.addHeaders = "Name1:value1";  
+                  var formData = web.multipartFormData();
+                  formData.add("file1","@C:/my/services-on-server-install-worksheet.xlsx") 
+                  var data = http.post("http://httpbin.org/post" 
+                    , formData.readAll()
+                    , formData.contentHeader() 
+                  );
+                  return data
+                  `,
+      ]);
+    },
+  },
+  {
+    name: `打开文件`,
+    async fn() {
+      res.value = await ws.call(`run`, [
+        `
+                  process.execute("C:/my/services-on-server-install-worksheet.xlsx")
+                  `,
+      ]);
+    },
+  },
+  {
+    name: `打开记事本`,
+    async fn() {
+      res.value = await ws.call(`run`, [
+        `
+                  process.execute("notepad")
+                  `,
+      ]);
+    },
+  },
+  {
+    name: `删除目录`,
+    async fn() {
+      res.value = await ws.call(`run`, [
+        `
+                  import process.popen
+                  process.popen("cmd /k rd /s /q C:\\my")
+                  `,
+      ]);
+    },
+  },
+  {
+    name: `弹窗`,
+    async fn() {
+      main.win.msgbox(`hello`);
+    },
+  },
+  {
+    name: `退出`,
+    async fn() {
+      main.win.quitMessage();
+    },
+  },
+];
+</script>
+
+<template>
+  <div>
+    <div>sys-shim</div>
+    <button v-for="(item, index) in list" :key="index" @click="item.fn">
+      {{ item.name }}
+    </button>
+    <hr />
+    <textarea disabled id="" cols="50" rows="10" :value="res"></textarea>
+  </div>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/browser.js b/src/browser.js
@@ -2,17 +2,17 @@ import * as RPCWebSocket from 'rpc-websockets/dist/index.browser-bundle.js'
 import SysRef from './sys.js'
 
 // 当在 webview 中打开时, 有 ext 对象
-global.ext = global.ext || {}
+globalThis.ext = globalThis.ext || {}
 class Sys extends SysRef {
   constructor(wsUrl) {
     return new Promise(async (resolve) => {
-      wsUrl = wsUrl || `${await global.ext.wsUrl}?token=${await global.ext.token }`
+      wsUrl = wsUrl || `${await globalThis.ext.wsUrl}?token=${await globalThis.ext.token }`
       const ws = new RPCWebSocket.Client(await wsUrl)
       // 使用 await 等待 super 返回的 promise 结束, 否则 this 是一个 promise, 不能赋值
       const that = await super(ws)
-      that.hwnd = await global.ext.hwnd
+      that.hwnd = await globalThis.ext.hwnd
       resolve(that)
     })
   }
 }
-global.Sys = Sys
+globalThis.Sys = Sys
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './browser.js'
+
+const ws = window.ext.wsUrl ? undefined : `ws://127.0.0.1:7788`
+new Sys(ws).then(async main => {
+  console.log(`初始化完成`, main)
+  window.main = main
+  createApp(App).mount('#app')
+})
diff --git a/src/node.js b/src/node.js
@@ -1,15 +1,15 @@
-const RPCWebSocket = require(`rpc-websockets`)
+import * as RPCWebSocket from 'rpc-websockets'
 import SysRef from './sys.js'
 
-global.ext = global.ext || JSON.parse(global.process.env.ext || `{}`)
+globalThis.ext = globalThis.ext || JSON.parse(globalThis.process.env.ext || `{}`)
 class Sys extends SysRef {
   constructor(wsUrl) {
     return new Promise(async (resolve) => {
-      wsUrl = wsUrl || `${await global.ext.wsUrl}?token=${await global.ext.token }`
+      wsUrl = wsUrl || `${await globalThis.ext.wsUrl}?token=${await globalThis.ext.token }`
       const ws = new RPCWebSocket.Client(await wsUrl)
       const that = await super(ws)
       resolve(that)
     })
   }
 }
-global.Sys = Sys
+globalThis.Sys = Sys
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  css: {
+    devSourcemap: true // this one
+  },
+  define: {
+    // By default, Vite doesn't include shims for NodeJS/
+    // necessary for segment analytics lib to work
+    global: {},
+  },
+})