Move library loader to webpack

package.json

@@ -125,7 +125,6 @@
     "katex": "0.16.21",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.1.2",
-    "mark.js": "8.11.1",
     "marked": "15.0.7",
     "mermaid": "11.6.0",
     "mime-types": "2.1.35",
@@ -150,7 +149,6 @@
     "tmp": "0.2.3",
     "turndown": "7.2.0",
     "unescape": "1.0.1",
-    "vanilla-js-wheel-zoom": "9.0.4",
     "ws": "8.18.1",
     "xml2js": "0.6.2",
     "yauzl": "3.2.0"
@@ -230,6 +228,7 @@
     "jsdoc": "4.0.4",
     "knockout": "3.5.1",
     "lorem-ipsum": "2.0.8",
+    "mark.js": "8.11.1",
     "mind-elixir": "4.4.3",
     "mini-css-extract-plugin": "2.9.2",
     "nodemon": "3.1.9",
@@ -248,6 +247,7 @@
     "typedoc": "0.28.1",
     "typescript": "5.8.2",
     "typescript-eslint": "8.28.0",
+    "vanilla-js-wheel-zoom": "9.0.4",
     "vitest": "3.0.9",
     "webpack": "5.98.0",
     "webpack-cli": "6.0.1",

src/public/app/services/content_renderer.ts

@@ -15,7 +15,7 @@ import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
 import { normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js";
 import renderDoc from "./doc_renderer.js";
 import { t } from "i18next";
-import type { Mermaid } from "mermaid";
+import WheelZoom from 'vanilla-js-wheel-zoom';
 
 let idCounter = 1;
 
@@ -150,13 +150,16 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
     $renderedContent.append($img);
 
     if (options.imageHasZoom) {
-        libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
-            WZoom.create(`#${$img.attr("id")}`, {
-                maxScale: 50,
-                speed: 1.3,
-                zoomOnClick: false
-            });
-        });
+        setTimeout(() => {
+            const element = document.querySelector(`#${$img.attr("id")}`);
+            if (element) {
+                WheelZoom.create(`#${$img.attr("id")}`, {
+                    maxScale: 50,
+                    speed: 1.3,
+                    zoomOnClick: false
+                });
+            }
+        }, 0);
     }
 
     imageContextMenuService.setupContextMenu($img);

src/public/app/services/library_loader.ts

@@ -42,23 +42,11 @@ const CODE_MIRROR: Library = {
     css: ["node_modules/codemirror/lib/codemirror.css", "node_modules/codemirror/addon/lint/lint.css"]
 };
 
-const CALENDAR_WIDGET: Library = {
-    css: ["stylesheets/calendar.css"]
-};
-
 const KATEX: Library = {
     js: ["node_modules/katex/dist/katex.min.js", "node_modules/katex/dist/contrib/mhchem.min.js", "node_modules/katex/dist/contrib/auto-render.min.js"],
     css: ["node_modules/katex/dist/katex.min.css"]
 };
 
-const WHEEL_ZOOM: Library = {
-    js: ["node_modules/vanilla-js-wheel-zoom/dist/wheel-zoom.min.js"]
-};
-
-const MARKJS: Library = {
-    js: ["node_modules/mark.js/dist/jquery.mark.es6.min.js"]
-};
-
 const HIGHLIGHT_JS: Library = {
     js: () => {
         const mimeTypes = mimeTypesService.getMimeTypes();
@@ -85,10 +73,6 @@ const HIGHLIGHT_JS: Library = {
     }
 };
 
-const LEAFLET: Library = {
-    css: ["node_modules/leaflet/dist/leaflet.css"]
-};
-
 async function requireLibrary(library: Library) {
     if (library.css) {
         library.css.map((cssUrl) => requireCss(cssUrl));
@@ -174,10 +158,6 @@ export default {
     loadHighlightingTheme,
     CKEDITOR,
     CODE_MIRROR,
-    CALENDAR_WIDGET,
     KATEX,
-    WHEEL_ZOOM,
-    MARKJS,
-    HIGHLIGHT_JS,
-    LEAFLET
+    HIGHLIGHT_JS
 };

src/public/app/types.d.ts

@@ -132,13 +132,6 @@ declare global {
     var renderMathInElement: (element: HTMLElement, options: {
         trust: boolean;
     }) => void;
-    var WZoom = {
-        create(selector: string, opts: {
-            maxScale: number;
-            speed: number;
-            zoomOnClick: boolean
-        })
-    };
     interface CKCodeBlockLanguage {
         language: string;
         label: string;

src/public/app/widgets/buttons/calendar.ts

@@ -1,5 +1,4 @@
 import { t } from "../../services/i18n.js";
-import libraryLoader from "../../services/library_loader.js";
 import utils from "../../services/utils.js";
 import dateNoteService from "../../services/date_notes.js";
 import server from "../../services/server.js";
@@ -9,6 +8,7 @@ import toastService from "../../services/toast.js";
 import options from "../../services/options.js";
 import { Dropdown } from "bootstrap";
 import type { EventData } from "../../components/app_context.js";
+import "../../../stylesheets/calendar.css";
 
 const MONTHS = [
     t("calendar.january"),
@@ -188,7 +188,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
     }
 
     async dropdownShown() {
-        await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
         this.init(appContext.tabManager.getActiveContextNote()?.getOwnedLabelValue("dateNote") ?? null);
     }
 

src/public/app/widgets/find_in_html.ts

@@ -1,11 +1,12 @@
 // ck-find-result and ck-find-result_selected are the styles ck-editor
 // uses for highlighting matches, use the same one on CodeMirror
 // for consistency
-import libraryLoader from "../services/library_loader.js";
 import utils from "../services/utils.js";
 import appContext from "../components/app_context.js";
 import type FindWidget from "./find.js";
 import type { FindResult } from "./find.js";
+import 'mark.js';
+import 'mark.js/dist/jquery.mark.es6.min.js';
 
 const FIND_RESULT_SELECTED_CSS_CLASSNAME = "ck-find-result_selected";
 const FIND_RESULT_CSS_CLASSNAME = "ck-find-result";
@@ -23,8 +24,6 @@ export default class FindInHtml {
     }
 
     async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) {
-        await libraryLoader.requireLibrary(libraryLoader.MARKJS);
-
         const $content = await this.parent?.noteContext?.getContentElement();
 
         const wholeWordChar = wholeWord ? "\\b" : "";

src/public/app/widgets/geo_map.ts

@@ -1,5 +1,6 @@
 import type { Map } from "leaflet";
-import library_loader from "../services/library_loader.js";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 
 const TPL = `\
@@ -21,7 +22,7 @@ const TPL = `\
     <div class="geo-map-container"></div>
 </div>`;
 
-export type Leaflet = typeof import("leaflet");
+export type Leaflet = typeof L;
 export type InitCallback = (L: Leaflet) => void;
 
 export default class GeoMapWidget extends NoteContextAwareWidget {
@@ -40,23 +41,18 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
 
         this.$container = this.$widget.find(".geo-map-container");
 
-        library_loader.requireLibrary(library_loader.LEAFLET).then(async () => {
-            const L = (await import("leaflet")).default;
-
-            const map = L.map(this.$container[0], {
-                worldCopyJump: true
-            });
+        const map = L.map(this.$container[0], {
+            worldCopyJump: true
+        });
 
-            this.map = map;
-            if (this.initCallback) {
-                this.initCallback(L);
-            }
+        this.map = map;
+        if (this.initCallback) {
+            this.initCallback(L);
+        }
 
-            L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-                detectRetina: true
-            }).addTo(map);
-        });
+        L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            detectRetina: true
+        }).addTo(map);
     }
-
 }

src/public/app/widgets/type_widgets/image.ts

@@ -1,10 +1,10 @@
 import utils from "../../services/utils.js";
 import TypeWidget from "./type_widget.js";
-import libraryLoader from "../../services/library_loader.js";
 import imageContextMenuService from "../../menus/image_context_menu.js";
 import imageService from "../../services/image.js";
 import type FNote from "../../entities/fnote.js";
 import type { EventData } from "../../components/app_context.js";
+import WheelZoom from 'vanilla-js-wheel-zoom';
 
 const TPL = `
 <div class="note-detail-image note-detail-printable">
@@ -54,13 +54,16 @@ class ImageTypeWidget extends TypeWidget {
         this.$imageWrapper = this.$widget.find(".note-detail-image-wrapper");
         this.$imageView = this.$widget.find(".note-detail-image-view").attr("id", `image-view-${utils.randomString(10)}`);
 
-        libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
-            WZoom.create(`#${this.$imageView.attr("id")}`, {
-                maxScale: 50,
-                speed: 1.3,
-                zoomOnClick: false
-            });
-        });
+        setTimeout(() => {
+            const element = document.querySelector(`#${this.$imageView.attr("id")}`);
+            if (element) {
+                WheelZoom.create(`#${this.$imageView.attr("id")}`, {
+                    maxScale: 50,
+                    speed: 1.3,
+                    zoomOnClick: false
+                });
+            }
+        }, 0);
 
         imageContextMenuService.setupContextMenu(this.$imageView);
 

src/public/app/widgets/view_widgets/list_or_grid_view.ts

@@ -2,11 +2,12 @@ import linkService from "../../services/link.js";
 import contentRenderer from "../../services/content_renderer.js";
 import froca from "../../services/froca.js";
 import attributeRenderer from "../../services/attribute_renderer.js";
-import libraryLoader from "../../services/library_loader.js";
 import treeService from "../../services/tree.js";
 import utils from "../../services/utils.js";
 import type FNote from "../../entities/fnote.js";
 import ViewMode, { type ViewModeArgs } from "./view_mode.js";
+import 'mark.js';
+import 'mark.js/dist/jquery.mark.es6.min.js';
 
 const TPL = `
 <div class="note-list">
@@ -216,8 +217,6 @@ class ListOrGridView extends ViewMode {
 
         const highlightedTokens = this.parentNote.highlightedTokens || [];
         if (highlightedTokens.length > 0) {
-            await libraryLoader.requireLibrary(libraryLoader.MARKJS);
-
             const regex = highlightedTokens.map((token) => utils.escapeRegExp(token)).join("|");
 
             this.highlightRegex = new RegExp(regex, "gi");

src/routes/assets.ts

@@ -73,10 +73,6 @@ async function register(app: express.Application) {
 
     app.use(`/${assetPath}/node_modules/eslint/bin/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/eslint/bin/")));
 
-    app.use(`/${assetPath}/node_modules/vanilla-js-wheel-zoom/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/vanilla-js-wheel-zoom/dist/")));
-
-    app.use(`/${assetPath}/node_modules/mark.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/mark.js/dist/")));
-
     // Deprecated, https://www.npmjs.com/package/autocomplete.js?activeTab=readme
     app.use(`/${assetPath}/node_modules/autocomplete.js/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/autocomplete.js/dist/")));
 
@@ -91,8 +87,6 @@ async function register(app: express.Application) {
     app.use(`/${assetPath}/node_modules/codemirror/keymap/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/codemirror/keymap/")));
 
     app.use(`/${assetPath}/node_modules/@highlightjs/cdn-assets/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/@highlightjs/cdn-assets/")));
-
-    app.use(`/${assetPath}/node_modules/leaflet/dist/`, persistentCacheStatic(path.join(srcRoot, "..", "node_modules/leaflet/dist/")));
 }
 
 export default {

webpack.config.ts

@@ -56,7 +56,10 @@ const config: Configuration = {
                         loader: miniCssExtractPlugin.loader
                     },
                     {
-                        loader: "css-loader"
+                        loader: "css-loader",
+                        options: {
+                            esModule: true
+                        }
                     },
                     {
                         loader: "postcss-loader",
@@ -99,6 +102,9 @@ const config: Configuration = {
             ".js": [".js", ".ts"],
             ".cjs": [".cjs", ".cts"],
             ".mjs": [".mjs", ".mts"]
+        },
+        alias: {
+            stylesheets: path.resolve(rootDir, "src/public/stylesheets")
         }
     },
     devtool: "nosources-source-map",