vite build

.github/workflows/build.yaml

@@ -105,6 +105,11 @@ jobs:
           scoop bucket add extras
           scoop install nsis
 
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: Sign exe files
         uses: GermanBluefox/code-sign-action@v7
         with:
@@ -114,6 +119,11 @@ jobs:
           folder: 'target\x86_64-pc-windows-msvc\release'
           recursive: false
 
+      - name: Build UI browser file
+        run: |
+          npm run build
+        working-directory: ./ui/html
+
       - name: Build UI setup file
         run: |
           rustup default nightly

ui/html/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ui/html/editor/codemirror.css

@@ -1,344 +0,0 @@
-/* BASICS */
-
-.CodeMirror {
-  /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
-  height: 300px;
-  color: black;
-  direction: ltr;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  padding: 4px 0; /* Vertical padding around content */
-}
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  padding: 0 4px; /* Horizontal padding of content */
-}
-
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
-  white-space: nowrap;
-}
-.CodeMirror-linenumbers {}
-.CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
-  min-width: 20px;
-  text-align: right;
-  color: #999;
-  white-space: nowrap;
-}
-
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
-
-/* CURSOR */
-
-.CodeMirror-cursor {
-  border-left: 1px solid black;
-  border-right: none;
-  width: 0;
-}
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-.cm-fat-cursor .CodeMirror-cursor {
-  width: auto;
-  border: 0 !important;
-  background: #7e7;
-}
-.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
-}
-.cm-fat-cursor .CodeMirror-line::selection,
-.cm-fat-cursor .CodeMirror-line > span::selection, 
-.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
-.cm-fat-cursor .CodeMirror-line::-moz-selection,
-.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
-.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
-.cm-fat-cursor { caret-color: transparent; }
-@-moz-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-@-webkit-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-@keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-
-/* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror-overwrite .CodeMirror-cursor {}
-
-.cm-tab { display: inline-block; text-decoration: inherit; }
-
-.CodeMirror-rulers {
-  position: absolute;
-  left: 0; right: 0; top: -50px; bottom: 0;
-  overflow: hidden;
-}
-.CodeMirror-ruler {
-  border-left: 1px solid #ccc;
-  top: 0; bottom: 0;
-  position: absolute;
-}
-
-/* DEFAULT THEME */
-
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
-
-.CodeMirror-composing { border-bottom: 2px solid; }
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror {
-  position: relative;
-  overflow: hidden;
-  background: white;
-}
-
-.CodeMirror-scroll {
-  overflow: scroll !important; /* Things will break if this is overridden */
-  /* 50px is the magic margin used to hide the element's real scrollbars */
-  /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -50px; margin-right: -50px;
-  padding-bottom: 50px;
-  height: 100%;
-  outline: none; /* Prevent dragging from highlighting the element */
-  position: relative;
-  z-index: 0;
-}
-.CodeMirror-sizer {
-  position: relative;
-  border-right: 50px solid transparent;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actual scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  position: absolute;
-  z-index: 6;
-  display: none;
-  outline: none;
-}
-.CodeMirror-vscrollbar {
-  right: 0; top: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-.CodeMirror-hscrollbar {
-  bottom: 0; left: 0;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-.CodeMirror-scrollbar-filler {
-  right: 0; bottom: 0;
-}
-.CodeMirror-gutter-filler {
-  left: 0; bottom: 0;
-}
-
-.CodeMirror-gutters {
-  position: absolute; left: 0; top: 0;
-  min-height: 100%;
-  z-index: 3;
-}
-.CodeMirror-gutter {
-  white-space: normal;
-  height: 100%;
-  display: inline-block;
-  vertical-align: top;
-  margin-bottom: -50px;
-}
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  background: none !important;
-  border: none !important;
-}
-.CodeMirror-gutter-background {
-  position: absolute;
-  top: 0; bottom: 0;
-  z-index: 4;
-}
-.CodeMirror-gutter-elt {
-  position: absolute;
-  cursor: default;
-  z-index: 4;
-}
-.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
-.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
-
-.CodeMirror-lines {
-  cursor: text;
-  min-height: 1px; /* prevents collapsing before first draw */
-}
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
-  border-width: 0;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
-  z-index: 2;
-  position: relative;
-  overflow: visible;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: contextual;
-  font-variant-ligatures: contextual;
-}
-.CodeMirror-wrap pre.CodeMirror-line,
-.CodeMirror-wrap pre.CodeMirror-line-like {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: normal;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  padding: 0.1px; /* Force widget margins to stay inside of the container */
-}
-
-.CodeMirror-widget {}
-
-.CodeMirror-rtl pre { direction: rtl; }
-
-.CodeMirror-code {
-  outline: none;
-}
-
-/* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.CodeMirror-cursor {
-  position: absolute;
-  pointer-events: none;
-}
-.CodeMirror-measure pre { position: static; }
-
-div.CodeMirror-cursors {
-  visibility: hidden;
-  position: relative;
-  z-index: 3;
-}
-div.CodeMirror-dragcursors {
-  visibility: visible;
-}
-
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
-}
-
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-.CodeMirror-crosshair { cursor: crosshair; }
-.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
-
-.cm-searching {
-  background-color: #ffa;
-  background-color: rgba(255, 255, 0, .4);
-}
-
-/* Used to force a border model for a node */
-.cm-force-border { padding-right: .1px; }
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack:after { content: ''; }
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }

ui/html/editor/toml.js

@@ -1,88 +0,0 @@
-// CodeMirror, copyright (c) by Marijn Haverbeke and others
-// Distributed under an MIT license: https://codemirror.net/5/LICENSE
-
-(function(mod) {
-  if (typeof exports == "object" && typeof module == "object") // CommonJS
-    mod(require("../../lib/codemirror"));
-  else if (typeof define == "function" && define.amd) // AMD
-    define(["../../lib/codemirror"], mod);
-  else // Plain browser env
-    mod(CodeMirror);
-})(function(CodeMirror) {
-"use strict";
-
-CodeMirror.defineMode("toml", function () {
-  return {
-    startState: function () {
-      return {
-        inString: false,
-        stringType: "",
-        lhs: true,
-        inArray: 0
-      };
-    },
-    token: function (stream, state) {
-      //check for state changes
-      if (!state.inString && ((stream.peek() == '"') || (stream.peek() == "'"))) {
-        state.stringType = stream.peek();
-        stream.next(); // Skip quote
-        state.inString = true; // Update state
-      }
-      if (stream.sol() && state.inArray === 0) {
-        state.lhs = true;
-      }
-      //return state
-      if (state.inString) {
-        while (state.inString && !stream.eol()) {
-          if (stream.peek() === state.stringType) {
-            stream.next(); // Skip quote
-            state.inString = false; // Clear flag
-          } else if (stream.peek() === '\\') {
-            stream.next();
-            stream.next();
-          } else {
-            stream.match(/^.[^\\\"\']*/);
-          }
-        }
-        return state.lhs ? "property string" : "string"; // Token style
-      } else if (state.inArray && stream.peek() === ']') {
-        stream.next();
-        state.inArray--;
-        return 'bracket';
-      } else if (state.lhs && stream.peek() === '[' && stream.skipTo(']')) {
-        stream.next();//skip closing ]
-        // array of objects has an extra open & close []
-        if (stream.peek() === ']') stream.next();
-        return "atom";
-      } else if (stream.peek() === "#") {
-        stream.skipToEnd();
-        return "comment";
-      } else if (stream.eatSpace()) {
-        return null;
-      } else if (state.lhs && stream.eatWhile(function (c) { return c != '=' && c != ' '; })) {
-        return "property";
-      } else if (state.lhs && stream.peek() === "=") {
-        stream.next();
-        state.lhs = false;
-        return null;
-      } else if (!state.lhs && stream.match(/^\d\d\d\d[\d\-\:\.T]*Z/)) {
-        return 'atom'; //date
-      } else if (!state.lhs && (stream.match('true') || stream.match('false'))) {
-        return 'atom';
-      } else if (!state.lhs && stream.peek() === '[') {
-        state.inArray++;
-        stream.next();
-        return 'bracket';
-      } else if (!state.lhs && stream.match(/^\-?\d+(?:\.\d+)?/)) {
-        return 'number';
-      } else if (!stream.eatSpace()) {
-        stream.next();
-      }
-      return null;
-    }
-  };
-});
-
-CodeMirror.defineMIME('text/x-toml', 'toml');
-
-});

ui/html/index.html

@@ -1,18 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>RustDesk Server</title>
 <link rel="icon" href="data:;base64,=">
 <script>addEventListener('contextmenu', e => e.preventDefault());</script>
-<link rel="stylesheet" href="editor/codemirror.css">
-<link rel="stylesheet" href="style.css" />
-<script src="editor/codemirror.js"></script>
-<script src="editor/toml.js"></script>
 <script type="module" src="/main.js" defer></script>
 </head>
-<body>
+<body style="visibility: hidden">
 <textarea></textarea>
 <form>
 <label><input type="checkbox"> <p>Turn on auto scroll</p></label>

ui/html/main.js

@@ -1,3 +1,8 @@
+import 'codemirror/lib/codemirror.css';
+import './style.css';
+import 'codemirror/mode/toml/toml.js';
+import CodeMirror from 'codemirror';
+
 const { event, fs, path, tauri } = window.__TAURI__;
 
 class View {
@@ -125,9 +130,9 @@ RUST_LOG=info
         input.checked = this.is_auto_scroll;
         if (this.is_edit_mode) {
             label[0].style.display = 'none';
-            label[1].style.display = 'inline';
+            label[1].style.display = 'block';
         } else {
-            label[0].style.display = 'inline';
+            label[0].style.display = 'block';
             label[1].style.display = 'none';
         }
         return form;

ui/html/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "rustdesk_server",
+  "private": true,
+  "version": "0.1.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^4.1.0"
+  },
+  "dependencies": {
+    "codemirror": "v5"
+  }
+}

ui/html/style.css

@@ -1,4 +1,5 @@
 body {
+    visibility: visible !important;
     margin: 0;
     background: #fff;
 }

ui/html/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    server: {
+        port: '5177',
+        strictPort: true
+    }
+});

ui/src/adapter/view/desktop.rs

@@ -99,7 +99,7 @@ pub async fn run(sender: Sender<Event>, receiver: Receiver<Event>) {
             setup_sender.send(Event::ViewInit).unwrap_or_default();
             app.listen_global("__action__", move |msg| {
                 match msg.payload().unwrap_or_default() {
-                    r#""__init__""# => setup_sender.send(Event::BroswerInit).unwrap_or_default(),
+                    r#""__init__""# => setup_sender.send(Event::BrowserInit).unwrap_or_default(),
                     r#""restart""# => setup_sender
                         .send(Event::BrowserAction("restart".to_owned()))
                         .unwrap_or_default(),

ui/src/usecase/presenter.rs

@@ -17,7 +17,7 @@ pub async fn create(sender: Sender<Event>, receiver: Receiver<Event>) {
             for _ in 1..buffer {
                 match receiver.recv_timeout(Duration::from_nanos(1)) {
                     Ok(event) => match event {
-                        Event::BroswerInit => {
+                        Event::BrowserInit => {
                             send(Event::BrowserUpdate(("file".to_owned(), file.to_owned())));
                         }
                         Event::BrowserAction(action) => match action.as_str() {

ui/src/usecase/view.rs

@@ -9,7 +9,7 @@ pub async fn create(sender: Sender<Event>, receiver: Receiver<Event>) {
 #[derive(Debug, Clone, PartialEq)]
 pub enum Event {
     BrowserAction(String),
-    BroswerInit,
+    BrowserInit,
     BrowserUpdate((String, String)),
     BrowserRender(String),
     FileChange(String),

ui/tauri.conf.json

@@ -1,14 +1,14 @@
 {
   "build": {
-    "beforeDevCommand": "",
-    "beforeBuildCommand": "",
-    "devPath": "html",
-    "distDir": "html",
+    "beforeBuildCommand": "npm run build",
+    "beforeDevCommand": "npm run dev",
+    "devPath": "http://127.0.0.1:5177/",
+    "distDir": "html/dist",
     "withGlobalTauri": true
   },
   "package": {
     "productName": "rustdesk_server",
-    "version": "0.1.1"
+    "version": "0.1.2"
   },
   "tauri": {
     "allowlist": {