Port client to Vite

.vscode/extensions.json

@@ -9,6 +9,7 @@
     "redhat.vscode-yaml",
     "tobermory.es6-string-html",
     "vitest.explorer",
-    "yzhang.markdown-all-in-one"
+    "yzhang.markdown-all-in-one",
+    "aaron-bond.better-comments"
   ]
 }

apps/client/package.json

@@ -22,9 +22,11 @@
     "@mind-elixir/node-menu": "1.0.5",
     "@popperjs/core": "2.11.8",
     "@triliumnext/ckeditor5": "workspace:*",
-    "@triliumnext/commons": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
+    "@triliumnext/commons": "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 +39,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.11",
     "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 +61,13 @@
     "@types/jquery": "3.5.32",
     "@types/leaflet": "1.9.17",
     "@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";
+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";
+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/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/math.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/setup.ts

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

apps/client/src/share.ts

@@ -1,4 +1,6 @@
 import "./stylesheets/bootstrap.scss";
+import "normalize.css";
+import "@triliumnext/ckeditor5/content.css";
 
 /**
  * Fetch note with given ID from backend

apps/client/src/types-assets.d.ts

@@ -3,9 +3,7 @@ declare module "*.png" {
     export default path;
 }
 
-declare module "*.json?external" {
+declare module "@triliumnext/ckeditor5/emoji_definitions/en.json?url" {
     var path: string;
     export default path;
 }
-
-declare module "script-loader!mark.js/dist/jquery.mark.min.js";

apps/client/src/types-lib.d.ts

@@ -24,3 +24,10 @@ declare module "draggabilly" {
 declare module "@mind-elixir/node-menu" {
     export default mindmap;
 }
+
+declare module "katex/contrib/auto-render" {
+    var renderMathInElement: (element: HTMLElement, options: {
+        trust: boolean;
+    }) => void;
+    export default renderMathInElement;
+}

apps/client/src/types.d.ts

@@ -22,7 +22,6 @@ interface CustomGlobals {
     getReferenceLinkTitle: (href: string) => Promise<string>;
     getReferenceLinkTitleSync: (href: string) => string;
     getActiveContextNote: () => FNote | null;
-    requireLibrary: typeof library_loader.requireLibrary;
     ESLINT: Library;
     appContext: AppContext;
     froca: Froca;
@@ -123,17 +122,6 @@ declare global {
     var require: RequireMethod;
     var __non_webpack_require__: RequireMethod | undefined;
 
-    // Libraries
-    var renderMathInElement: (element: HTMLElement, options: {
-        trust: boolean;
-    }) => void;
-
-    var katex: {
-        renderToString(text: string, opts: {
-            throwOnError: boolean
-        });
-    }
-
     /*
      * Panzoom
      */

apps/client/src/widgets/dialogs/revisions.ts

@@ -3,7 +3,6 @@ import utils from "../../services/utils.js";
 import server from "../../services/server.js";
 import toastService from "../../services/toast.js";
 import appContext from "../../components/app_context.js";
-import libraryLoader from "../../services/library_loader.js";
 import openService from "../../services/open.js";
 import protectedSessionHolder from "../../services/protected_session_holder.js";
 import BasicWidget from "../basic_widget.js";
@@ -12,6 +11,7 @@ import options from "../../services/options.js";
 import type FNote from "../../entities/fnote.js";
 import type { NoteType } from "../../entities/fnote.js";
 import { Dropdown, Modal } from "bootstrap";
+import { renderMathInElement } from "../../services/math.js";
 
 const TPL = /*html*/`
 <div class="revisions-dialog modal fade mx-auto" tabindex="-1" role="dialog">
@@ -315,8 +315,6 @@ export default class RevisionsDialog extends BasicWidget {
             this.$content.html(`<div class="ck-content">${fullRevision.content}</div>`);
 
             if (this.$content.find("span.math-tex").length > 0) {
-                await libraryLoader.requireLibrary(libraryLoader.KATEX);
-
                 renderMathInElement(this.$content[0], { trust: true });
             }
         } else if (revisionItem.type === "code") {

apps/client/src/widgets/find_in_html.ts

@@ -21,7 +21,7 @@ export default class FindInHtml {
     }
 
     async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) {
-        await import("script-loader!mark.js/dist/jquery.mark.min.js");
+        await import("mark.js");
 
         const $content = await this.parent?.noteContext?.getContentElement();
 
@@ -42,7 +42,7 @@ export default class FindInHtml {
                             const containerTop = scrollingContainer?.getBoundingClientRect().top ?? 0;
                             const closestIndex = this.$results.toArray().findIndex(el => el.getBoundingClientRect().top >= containerTop);
                             this.currentIndex = closestIndex >= 0 ? closestIndex : 0;
-                            
+
                             await this.jumpTo();
 
                             res({

apps/client/src/widgets/highlights_list.ts

@@ -11,8 +11,8 @@ import RightPanelWidget from "./right_panel_widget.js";
 import options from "../services/options.js";
 import OnClickButtonWidget from "./buttons/onclick_button.js";
 import appContext, { type EventData } from "../components/app_context.js";
-import libraryLoader from "../services/library_loader.js";
 import type FNote from "../entities/fnote.js";
+import katex from "../services/math.js";
 
 const TPL = /*html*/`<div class="highlights-list-widget">
     <style>
@@ -175,7 +175,6 @@ export default class HighlightsListWidget extends RightPanelWidget {
                 } catch (e) {
                     if (e instanceof ReferenceError && e.message.includes("katex is not defined")) {
                         // Load KaTeX if it is not already loaded
-                        await libraryLoader.requireLibrary(libraryLoader.KATEX);
                         try {
                             rendered = katex.renderToString(latexCode, {
                                 throwOnError: false

apps/client/src/widgets/note_tree.ts

@@ -27,6 +27,11 @@ import type { AttributeRow, BranchRow } from "../services/load_results.js";
 import type { SetNoteOpts } from "../components/note_context.js";
 import type { TouchBarItem } from "../components/touch_bar.js";
 import type { TreeCommandNames } from "../menus/tree_context_menu.js";
+import "jquery.fancytree";
+import "jquery.fancytree/dist/modules/jquery.fancytree.dnd5.js";
+import "jquery.fancytree/dist/modules/jquery.fancytree.clones.js";
+import "jquery.fancytree/dist/modules/jquery.fancytree.filter.js";
+import "../stylesheets/tree.css";
 
 const TPL = /*html*/`
 <div class="tree-wrapper">