refactor(client): different method for loading jquery

apps/client/src/desktop.ts

@@ -1,116 +1,7 @@
-import appContext from "./components/app_context.js";
+import $ from "jquery";
-import utils from "./services/utils.js";
+(window as any).$ = $;
-import noteTooltipService from "./services/note_tooltip.js";
+(window as any).jQuery = $;
-import bundleService from "./services/bundle.js";
-import toastService from "./services/toast.js";
-import noteAutocompleteService from "./services/note_autocomplete.js";
-import electronContextMenu from "./menus/electron_context_menu.js";
-import glob from "./services/glob.js";
-import { t } from "./services/i18n.js";
-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();
+$("body").show();
 
-bundleService.getWidgetBundlesByParent().then(async (widgetBundles) => {
+await import("./desktop_main.js");
-    // A dynamic import is required for layouts since they initialize components which require translations.
-    const DesktopLayout = (await import("./layouts/desktop_layout.js")).default;
-
-    appContext.setLayout(new DesktopLayout(widgetBundles));
-    appContext.start().catch((e) => {
-        toastService.showPersistent({
-            title: t("toast.critical-error.title"),
-            icon: "alert",
-            message: t("toast.critical-error.message", { message: e.message })
-        });
-        console.error("Critical error occured", e);
-    });
-});
-
-glob.setupGlobs();
-
-if (utils.isElectron()) {
-    initOnElectron();
-}
-
-noteTooltipService.setupGlobalTooltip();
-
-noteAutocompleteService.init();
-
-if (utils.isElectron()) {
-    electronContextMenu.setupContextMenu();
-}
-
-function initOnElectron() {
-    const electron: typeof Electron = utils.dynamicRequire("electron");
-    electron.ipcRenderer.on("globalShortcut", async (event, actionName) => appContext.triggerCommand(actionName));
-    electron.ipcRenderer.on("openInSameTab", async (event, noteId) => appContext.tabManager.openInSameTab(noteId));
-    const electronRemote: typeof ElectronRemote = utils.dynamicRequire("@electron/remote");
-    const currentWindow = electronRemote.getCurrentWindow();
-    const style = window.getComputedStyle(document.body);
-
-    initDarkOrLightMode(style);
-    initTransparencyEffects(style, currentWindow);
-
-    if (options.get("nativeTitleBarVisible") !== "true") {
-        initTitleBarButtons(style, currentWindow);
-    }
-}
-
-function initTitleBarButtons(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
-    if (window.glob.platform === "win32") {
-        const applyWindowsOverlay = () => {
-            const color = style.getPropertyValue("--native-titlebar-background");
-            const symbolColor = style.getPropertyValue("--native-titlebar-foreground");
-            if (color && symbolColor) {
-                currentWindow.setTitleBarOverlay({ color, symbolColor });
-            }
-        };
-
-        applyWindowsOverlay();
-
-        // Register for changes to the native title bar colors.
-        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyWindowsOverlay);
-    }
-
-    if (window.glob.platform === "darwin") {
-        const xOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-x-offset"), 10);
-        const yOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-y-offset"), 10);
-        currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset });
-    }
-}
-
-function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
-    if (window.glob.platform === "win32") {
-        const material = style.getPropertyValue("--background-material");
-        // TriliumNextTODO: find a nicer way to make TypeScript happy – unfortunately TS did not like Array.includes here
-        const bgMaterialOptions = ["auto", "none", "mica", "acrylic", "tabbed"] as const;
-        const foundBgMaterialOption = bgMaterialOptions.find((bgMaterialOption) => material === bgMaterialOption);
-        if (foundBgMaterialOption) {
-            currentWindow.setBackgroundMaterial(foundBgMaterialOption);
-        }
-    }
-}
-
-/**
- * Informs Electron that we prefer a dark or light theme. Apart from changing prefers-color-scheme at CSS level which is a side effect,
- * this fixes color issues with background effects or native title bars.
- *
- * @param style the root CSS element to read variables from.
- */
-function initDarkOrLightMode(style: CSSStyleDeclaration) {
-    let themeSource: typeof nativeTheme.themeSource = "system";
-
-    const themeStyle = style.getPropertyValue("--theme-style");
-    if (style.getPropertyValue("--theme-style-auto") !== "true" && (themeStyle === "light" || themeStyle === "dark")) {
-        themeSource = themeStyle;
-    }
-
-    const { nativeTheme } = utils.dynamicRequire("@electron/remote") as typeof ElectronRemote;
-    nativeTheme.themeSource = themeSource;
-}

apps/client/src/desktop_main.ts

@@ -0,0 +1,116 @@
+import appContext from "./components/app_context.js";
+import utils from "./services/utils.js";
+import noteTooltipService from "./services/note_tooltip.js";
+import bundleService from "./services/bundle.js";
+import toastService from "./services/toast.js";
+import noteAutocompleteService from "./services/note_autocomplete.js";
+import electronContextMenu from "./menus/electron_context_menu.js";
+import glob from "./services/glob.js";
+import { t } from "./services/i18n.js";
+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();
+
+bundleService.getWidgetBundlesByParent().then(async (widgetBundles) => {
+    // A dynamic import is required for layouts since they initialize components which require translations.
+    const DesktopLayout = (await import("./layouts/desktop_layout.js")).default;
+
+    appContext.setLayout(new DesktopLayout(widgetBundles));
+    appContext.start().catch((e) => {
+        toastService.showPersistent({
+            title: t("toast.critical-error.title"),
+            icon: "alert",
+            message: t("toast.critical-error.message", { message: e.message })
+        });
+        console.error("Critical error occured", e);
+    });
+});
+
+glob.setupGlobs();
+
+if (utils.isElectron()) {
+    initOnElectron();
+}
+
+noteTooltipService.setupGlobalTooltip();
+
+noteAutocompleteService.init();
+
+if (utils.isElectron()) {
+    electronContextMenu.setupContextMenu();
+}
+
+function initOnElectron() {
+    const electron: typeof Electron = utils.dynamicRequire("electron");
+    electron.ipcRenderer.on("globalShortcut", async (event, actionName) => appContext.triggerCommand(actionName));
+    electron.ipcRenderer.on("openInSameTab", async (event, noteId) => appContext.tabManager.openInSameTab(noteId));
+    const electronRemote: typeof ElectronRemote = utils.dynamicRequire("@electron/remote");
+    const currentWindow = electronRemote.getCurrentWindow();
+    const style = window.getComputedStyle(document.body);
+
+    initDarkOrLightMode(style);
+    initTransparencyEffects(style, currentWindow);
+
+    if (options.get("nativeTitleBarVisible") !== "true") {
+        initTitleBarButtons(style, currentWindow);
+    }
+}
+
+function initTitleBarButtons(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
+    if (window.glob.platform === "win32") {
+        const applyWindowsOverlay = () => {
+            const color = style.getPropertyValue("--native-titlebar-background");
+            const symbolColor = style.getPropertyValue("--native-titlebar-foreground");
+            if (color && symbolColor) {
+                currentWindow.setTitleBarOverlay({ color, symbolColor });
+            }
+        };
+
+        applyWindowsOverlay();
+
+        // Register for changes to the native title bar colors.
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyWindowsOverlay);
+    }
+
+    if (window.glob.platform === "darwin") {
+        const xOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-x-offset"), 10);
+        const yOffset = parseInt(style.getPropertyValue("--native-titlebar-darwin-y-offset"), 10);
+        currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset });
+    }
+}
+
+function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
+    if (window.glob.platform === "win32") {
+        const material = style.getPropertyValue("--background-material");
+        // TriliumNextTODO: find a nicer way to make TypeScript happy – unfortunately TS did not like Array.includes here
+        const bgMaterialOptions = ["auto", "none", "mica", "acrylic", "tabbed"] as const;
+        const foundBgMaterialOption = bgMaterialOptions.find((bgMaterialOption) => material === bgMaterialOption);
+        if (foundBgMaterialOption) {
+            currentWindow.setBackgroundMaterial(foundBgMaterialOption);
+        }
+    }
+}
+
+/**
+ * Informs Electron that we prefer a dark or light theme. Apart from changing prefers-color-scheme at CSS level which is a side effect,
+ * this fixes color issues with background effects or native title bars.
+ *
+ * @param style the root CSS element to read variables from.
+ */
+function initDarkOrLightMode(style: CSSStyleDeclaration) {
+    let themeSource: typeof nativeTheme.themeSource = "system";
+
+    const themeStyle = style.getPropertyValue("--theme-style");
+    if (style.getPropertyValue("--theme-style-auto") !== "true" && (themeStyle === "light" || themeStyle === "dark")) {
+        themeSource = themeStyle;
+    }
+
+    const { nativeTheme } = utils.dynamicRequire("@electron/remote") as typeof ElectronRemote;
+    nativeTheme.themeSource = themeSource;
+}

apps/client/src/setup.ts

@@ -1,7 +1,8 @@
+import "jquery";
+import "jquery-hotkeys";
 import utils from "./services/utils.js";
 import ko from "knockout";
 import "./stylesheets/bootstrap.scss";
-import "jquery-hotkeys";
 
 // TriliumNextTODO: properly make use of below types
 // type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";

apps/server/package.json

@@ -39,7 +39,6 @@
     "@types/ws": "8.18.1",
     "@types/xml2js": "0.4.14",
     "express-http-proxy": "2.1.1",
-    "jquery": "3.7.1",    
     "@anthropic-ai/sdk": "0.51.0",
     "@braintree/sanitize-url": "7.1.1",
     "@triliumnext/commons": "workspace:*",

apps/server/src/assets/views/desktop.ejs

@@ -34,9 +34,6 @@
 <!-- Required for correct loading of scripts in Electron -->
 <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
-<script src="<%= assetPath %>/node_modules/jquery/dist/jquery.min.js"></script>
-
-
 <!-- Include Fancytree library and skip -->
 <link href="<%= assetPath %>/stylesheets/tree.css" rel="stylesheet">
 
@@ -59,10 +56,6 @@
 <link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
 <link href="<%= assetPath %>/stylesheets/print.css" rel="stylesheet" media="print">
 
-<script>
-    $("body").show();
-</script>
-
 <script src="<%= appPath %>/desktop.js" crossorigin type="module"></script>
 
 <link rel="stylesheet" type="text/css" href="<%= assetPath %>/node_modules/boxicons/css/boxicons.min.css">

apps/server/src/assets/views/mobile.ejs

@@ -111,8 +111,6 @@
 
 <%- include("./partials/windowGlobal.ejs", locals) %>
 
-<script src="<%= assetPath %>/node_modules/jquery/dist/jquery.min.js"></script>
-
 <link href="<%= assetPath %>/stylesheets/tree.css" rel="stylesheet">
 
 <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>

apps/server/src/assets/views/setup.ejs

@@ -168,8 +168,6 @@
 <!-- Required for correct loading of scripts in Electron -->
 <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
-<script src="<%= assetPath %>/node_modules/jquery/dist/jquery.min.js"></script>
-
 <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
 <script src="<%= appPath %>/setup.js" crossorigin type="module"></script>
 <link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet" />

apps/server/src/routes/assets.ts

@@ -44,10 +44,6 @@ async function register(app: express.Application) {
     app.use(`/assets/vX/stylesheets`, express.static(path.join(srcRoot, "public/stylesheets")));
     app.use(`/${assetPath}/libraries`, persistentCacheStatic(path.join(srcRoot, "public/libraries")));
     app.use(`/assets/vX/libraries`, express.static(path.join(srcRoot, "..", "libraries")));
-
-    const nodeModulesDir = isDev ? path.join(srcRoot, "..", "node_modules") : path.join(resourceDir, "node_modules");
-
-    app.use(`/${assetPath}/node_modules/jquery/dist/`, persistentCacheStatic(path.join(nodeModulesDir, "jquery/dist/")));
 }
 
 export default {

apps/server/webpack.config.cjs

@@ -13,8 +13,6 @@ function buildFilesToCopy() {
   });
 
   const nodePaths = [
-    "jquery/dist",
-
     // Required as they are native dependencies and cannot be well bundled.
     "better-sqlite3",
     "bindings",