Merge pull request #1956 from TriliumNext/client_vite

Port client to Vite

Author: eliandoran

apps/client/package.json

@@ -22,9 +22,12 @@
     "@mind-elixir/node-menu": "1.0.5",
     "@popperjs/core": "2.11.8",
     "@triliumnext/ckeditor5": "workspace:*",
-    "@triliumnext/commons": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
+    "@triliumnext/commons": "workspace:*",
+    "@triliumnext/highlightjs": "workspace:*",
+    "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.6",
+    "boxicons": "2.1.4",
     "dayjs": "1.11.13",
     "dayjs-plugin-utc": "0.1.2",
     "debounce": "2.2.0",
@@ -37,13 +40,15 @@
     "jquery-hotkeys": "0.2.2",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
+    "katex": "0.16.22",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
     "marked": "15.0.12",
     "mermaid": "11.6.0",
     "mind-elixir": "4.5.2",
+    "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
@@ -57,11 +62,13 @@
     "@types/jquery": "3.5.32",
     "@types/leaflet": "1.9.18",
     "@types/leaflet-gpx": "1.3.7",
+    "@types/mark.js": "8.11.12",
     "@types/react": "19.1.4",
     "@types/react-dom": "19.1.5",
     "copy-webpack-plugin": "13.0.0",
     "happy-dom": "17.4.7",
-    "script-loader": "0.7.2"
+    "script-loader": "0.7.2",
+    "vite-plugin-static-copy": "3.0.0"
   },
   "nx": {
     "name": "client"

apps/client/src/desktop.ts

@@ -11,6 +11,9 @@ import options from "./services/options.js";
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
 import "./stylesheets/bootstrap.scss";
+import "boxicons/css/boxicons.min.css";
+import "jquery-hotkeys";
+import "autocomplete.js/index_jquery.js";
 
 await appContext.earlyInit();
 

apps/client/src/mobile.ts

@@ -2,6 +2,8 @@ import appContext from "./components/app_context.js";
 import noteAutocompleteService from "./services/note_autocomplete.js";
 import glob from "./services/glob.js";
 import "./stylesheets/bootstrap.scss";
+import "boxicons/css/boxicons.min.css";
+import "autocomplete.js/index_jquery.js";
 
 glob.setupGlobs();
 

apps/client/src/runtime.ts

@@ -0,0 +1,5 @@
+import $ from "jquery";
+(window as any).$ = $;
+(window as any).jQuery = $;
+
+$("body").show();

apps/client/src/services/content_renderer.ts

@@ -1,7 +1,6 @@
 import renderService from "./render.js";
 import protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.js";
-import libraryLoader from "./library_loader.js";
 import openService from "./open.js";
 import froca from "./froca.js";
 import utils from "./utils.js";
@@ -15,6 +14,7 @@ import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
 import renderDoc from "./doc_renderer.js";
 import { t } from "../services/i18n.js";
 import WheelZoom from 'vanilla-js-wheel-zoom';
+import { renderMathInElement } from "./math.js";
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 
 let idCounter = 1;
@@ -94,8 +94,6 @@ async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HT
         $renderedContent.append($('<div class="ck-content">').html(blob.content));
 
         if ($renderedContent.find("span.math-tex").length > 0) {
-            await libraryLoader.requireLibrary(libraryLoader.KATEX);
-
             renderMathInElement($renderedContent[0], { trust: true });
         }
 

apps/client/src/services/doc_renderer.ts

@@ -48,5 +48,6 @@ function getUrl(docNameValue: string, language: string) {
     // Cannot have spaces in the URL due to how JQuery.load works.
     docNameValue = docNameValue.replaceAll(" ", "%20");
 
-    return `${window.glob.appPath}/doc_notes/${language}/${docNameValue}.html`;
+    const basePath = window.glob.isDev ? new URL(window.glob.assetPath).pathname : window.glob.assetPath;
+    return `${basePath}/doc_notes/${language}/${docNameValue}.html`;
 }

apps/client/src/services/glob.ts

@@ -1,7 +1,6 @@
 import utils from "./utils.js";
 import appContext from "../components/app_context.js";
 import server from "./server.js";
-import libraryLoader from "./library_loader.js";
 import ws from "./ws.js";
 import froca from "./froca.js";
 import linkService from "./link.js";
@@ -17,7 +16,6 @@ function setupGlobs() {
 
     // required for ESLint plugin and CKEditor
     window.glob.getActiveContextNote = () => appContext.tabManager.getActiveContextNote();
-    window.glob.requireLibrary = libraryLoader.requireLibrary;
     window.glob.appContext = appContext; // for debugging
     window.glob.froca = froca;
     window.glob.treeCache = froca; // compatibility for CKEditor builds for a while
@@ -64,7 +62,7 @@ function setupGlobs() {
     });
 
     for (const appCssNoteId of glob.appCssNoteIds || []) {
-        libraryLoader.requireCss(`api/notes/download/${appCssNoteId}`, false);
+        requireCss(`api/notes/download/${appCssNoteId}`, false);
     }
 
     utils.initHelpButtons($(window));
@@ -76,6 +74,18 @@ function setupGlobs() {
     });
 }
 
+async function requireCss(url: string, prependAssetPath = true) {
+    const cssLinks = Array.from(document.querySelectorAll("link")).map((el) => el.href);
+
+    if (!cssLinks.some((l) => l.endsWith(url))) {
+        if (prependAssetPath) {
+            url = `${window.glob.assetPath}/${url}`;
+        }
+
+        $("head").append($('<link rel="stylesheet" type="text/css" />').attr("href", url));
+    }
+}
+
 export default {
     setupGlobs
 };

apps/client/src/services/library_loader.ts

@@ -0,0 +1,5 @@
+import katex from "katex";
+import "katex/contrib/mhchem";
+import "katex/dist/katex.min.css";
+export { default as renderMathInElement } from "katex/contrib/auto-render";
+export default katex;

apps/client/src/services/math.ts

@@ -1,3 +1,5 @@
+import "jquery";
+import "jquery-hotkeys";
 import utils from "./services/utils.js";
 import ko from "knockout";
 import "./stylesheets/bootstrap.scss";