Skip to content
This repository was archived by the owner on Jun 24, 2025. It is now read-only.

Commit d84e8c3

Browse files
eliandoraneliandoran
authored
Merge pull request #1546 from TriliumNext/webpack
Move library loader to webpack
2 parents c7c8af2 + ce66397 commit d84e8c3

File tree

13 files changed

+85
-85
lines changed

13 files changed

+85
-85
lines changed

‎package-lock.json

Lines changed: 21 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@
124124
"katex": "0.16.21",
125125
"leaflet": "1.9.4",
126126
"leaflet-gpx": "2.1.2",
127-
"mark.js": "8.11.1",
128127
"marked": "15.0.7",
129128
"mermaid": "11.6.0",
130129
"mime-types": "3.0.1",
@@ -147,7 +146,6 @@
147146
"tmp": "0.2.3",
148147
"turndown": "7.2.0",
149148
"unescape": "1.0.1",
150-
"vanilla-js-wheel-zoom": "9.0.4",
151149
"ws": "8.18.1",
152150
"xml2js": "0.6.2",
153151
"yauzl": "3.2.0"
@@ -229,6 +227,7 @@
229227
"jsdoc": "4.0.4",
230228
"knockout": "3.5.1",
231229
"lorem-ipsum": "2.0.8",
230+
"mark.js": "8.11.1",
232231
"mind-elixir": "4.4.3",
233232
"mini-css-extract-plugin": "2.9.2",
234233
"nodemon": "3.1.9",
@@ -239,6 +238,7 @@
239238
"rimraf": "6.0.1",
240239
"sass": "1.86.0",
241240
"sass-loader": "16.0.5",
241+
"script-loader": "0.7.2",
242242
"split.js": "1.6.5",
243243
"supertest": "7.1.0",
244244
"svg-pan-zoom": "3.6.2",
@@ -249,6 +249,7 @@
249249
"typedoc": "0.28.1",
250250
"typescript": "5.8.2",
251251
"typescript-eslint": "8.28.0",
252+
"vanilla-js-wheel-zoom": "9.0.4",
252253
"vitest": "3.0.9",
253254
"webpack": "5.98.0",
254255
"webpack-cli": "6.0.1",

‎src/public/app/services/content_renderer.ts

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
1515
import { normalizeMimeTypeForCKEditor } from "./mime_type_definitions.js";
1616
import renderDoc from "./doc_renderer.js";
1717
import { t } from "i18next";
18-
import type { Mermaid } from "mermaid";
18+
import WheelZoom from 'vanilla-js-wheel-zoom';
1919

2020
let idCounter = 1;
2121

@@ -150,13 +150,19 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
150150
$renderedContent.append($img);
151151

152152
if (options.imageHasZoom) {
153-
libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
154-
WZoom.create(`#${$img.attr("id")}`, {
155-
maxScale: 50,
156-
speed: 1.3,
157-
zoomOnClick: false
158-
});
159-
});
153+
const initZoom = async () => {
154+
const element = document.querySelector(`#${$img.attr("id")}`);
155+
if (element) {
156+
WheelZoom.create(`#${$img.attr("id")}`, {
157+
maxScale: 50,
158+
speed: 1.3,
159+
zoomOnClick: false
160+
});
161+
} else {
162+
requestAnimationFrame(initZoom);
163+
}
164+
};
165+
initZoom();
160166
}
161167

162168
imageContextMenuService.setupContextMenu($img);

‎src/public/app/services/library_loader.ts

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -42,23 +42,11 @@ const CODE_MIRROR: Library = {
4242
css: ["node_modules/codemirror/lib/codemirror.css", "node_modules/codemirror/addon/lint/lint.css"]
4343
};
4444

45-
const CALENDAR_WIDGET: Library = {
46-
css: ["stylesheets/calendar.css"]
47-
};
48-
4945
const KATEX: Library = {
5046
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"],
5147
css: ["node_modules/katex/dist/katex.min.css"]
5248
};
5349

54-
const WHEEL_ZOOM: Library = {
55-
js: ["node_modules/vanilla-js-wheel-zoom/dist/wheel-zoom.min.js"]
56-
};
57-
58-
const MARKJS: Library = {
59-
js: ["node_modules/mark.js/dist/jquery.mark.es6.min.js"]
60-
};
61-
6250
const HIGHLIGHT_JS: Library = {
6351
js: () => {
6452
const mimeTypes = mimeTypesService.getMimeTypes();
@@ -85,10 +73,6 @@ const HIGHLIGHT_JS: Library = {
8573
}
8674
};
8775

88-
const LEAFLET: Library = {
89-
css: ["node_modules/leaflet/dist/leaflet.css"]
90-
};
91-
9276
async function requireLibrary(library: Library) {
9377
if (library.css) {
9478
library.css.map((cssUrl) => requireCss(cssUrl));
@@ -174,10 +158,6 @@ export default {
174158
loadHighlightingTheme,
175159
CKEDITOR,
176160
CODE_MIRROR,
177-
CALENDAR_WIDGET,
178161
KATEX,
179-
WHEEL_ZOOM,
180-
MARKJS,
181-
HIGHLIGHT_JS,
182-
LEAFLET
162+
HIGHLIGHT_JS
183163
};

‎src/public/app/types.d.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -132,13 +132,6 @@ declare global {
132132
var renderMathInElement: (element: HTMLElement, options: {
133133
trust: boolean;
134134
}) => void;
135-
var WZoom = {
136-
create(selector: string, opts: {
137-
maxScale: number;
138-
speed: number;
139-
zoomOnClick: boolean
140-
})
141-
};
142135
interface CKCodeBlockLanguage {
143136
language: string;
144137
label: string;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { t } from "../../services/i18n.js";
2-
import libraryLoader from "../../services/library_loader.js";
32
import utils from "../../services/utils.js";
43
import dateNoteService from "../../services/date_notes.js";
54
import server from "../../services/server.js";
@@ -9,6 +8,7 @@ import toastService from "../../services/toast.js";
98
import options from "../../services/options.js";
109
import { Dropdown } from "bootstrap";
1110
import type { EventData } from "../../components/app_context.js";
11+
import "../../../stylesheets/calendar.css";
1212

1313
const MONTHS = [
1414
t("calendar.january"),
@@ -188,7 +188,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
188188
}
189189

190190
async dropdownShown() {
191-
await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
192191
this.init(appContext.tabManager.getActiveContextNote()?.getOwnedLabelValue("dateNote") ?? null);
193192
}
194193

‎src/public/app/widgets/find_in_html.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// ck-find-result and ck-find-result_selected are the styles ck-editor
22
// uses for highlighting matches, use the same one on CodeMirror
33
// for consistency
4-
import libraryLoader from "../services/library_loader.js";
54
import utils from "../services/utils.js";
65
import appContext from "../components/app_context.js";
76
import type FindWidget from "./find.js";
@@ -23,7 +22,7 @@ export default class FindInHtml {
2322
}
2423

2524
async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) {
26-
await libraryLoader.requireLibrary(libraryLoader.MARKJS);
25+
await import("script-loader!mark.js/dist/jquery.mark.min.js");
2726

2827
const $content = await this.parent?.noteContext?.getContentElement();
2928

‎src/public/app/widgets/geo_map.ts

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Map } from "leaflet";
2-
import library_loader from "../services/library_loader.js";
2+
import L from "leaflet";
3+
import "leaflet/dist/leaflet.css";
34
import NoteContextAwareWidget from "./note_context_aware_widget.js";
45

56
const TPL = `\
@@ -21,7 +22,7 @@ const TPL = `\
2122
<div class="geo-map-container"></div>
2223
</div>`;
2324

24-
export type Leaflet = typeof import("leaflet");
25+
export type Leaflet = typeof L;
2526
export type InitCallback = (L: Leaflet) => void;
2627

2728
export default class GeoMapWidget extends NoteContextAwareWidget {
@@ -40,23 +41,18 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
4041

4142
this.$container = this.$widget.find(".geo-map-container");
4243

43-
library_loader.requireLibrary(library_loader.LEAFLET).then(async () => {
44-
const L = (await import("leaflet")).default;
45-
46-
const map = L.map(this.$container[0], {
47-
worldCopyJump: true
48-
});
44+
const map = L.map(this.$container[0], {
45+
worldCopyJump: true
46+
});
4947

50-
this.map = map;
51-
if (this.initCallback) {
52-
this.initCallback(L);
53-
}
48+
this.map = map;
49+
if (this.initCallback) {
50+
this.initCallback(L);
51+
}
5452

55-
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
56-
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
57-
detectRetina: true
58-
}).addTo(map);
59-
});
53+
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
54+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
55+
detectRetina: true
56+
}).addTo(map);
6057
}
61-
6258
}

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import utils from "../../services/utils.js";
22
import TypeWidget from "./type_widget.js";
3-
import libraryLoader from "../../services/library_loader.js";
43
import imageContextMenuService from "../../menus/image_context_menu.js";
54
import imageService from "../../services/image.js";
65
import type FNote from "../../entities/fnote.js";
76
import type { EventData } from "../../components/app_context.js";
7+
import WheelZoom from 'vanilla-js-wheel-zoom';
88

99
const TPL = `
1010
<div class="note-detail-image note-detail-printable">
@@ -54,13 +54,19 @@ class ImageTypeWidget extends TypeWidget {
5454
this.$imageWrapper = this.$widget.find(".note-detail-image-wrapper");
5555
this.$imageView = this.$widget.find(".note-detail-image-view").attr("id", `image-view-${utils.randomString(10)}`);
5656

57-
libraryLoader.requireLibrary(libraryLoader.WHEEL_ZOOM).then(() => {
58-
WZoom.create(`#${this.$imageView.attr("id")}`, {
59-
maxScale: 50,
60-
speed: 1.3,
61-
zoomOnClick: false
62-
});
63-
});
57+
const initZoom = async () => {
58+
const element = document.querySelector(`#${this.$imageView.attr("id")}`);
59+
if (element) {
60+
WheelZoom.create(`#${this.$imageView.attr("id")}`, {
61+
maxScale: 50,
62+
speed: 1.3,
63+
zoomOnClick: false
64+
});
65+
} else {
66+
requestAnimationFrame(initZoom);
67+
}
68+
};
69+
initZoom();
6470

6571
imageContextMenuService.setupContextMenu(this.$imageView);
6672

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import linkService from "../../services/link.js";
22
import contentRenderer from "../../services/content_renderer.js";
33
import froca from "../../services/froca.js";
44
import attributeRenderer from "../../services/attribute_renderer.js";
5-
import libraryLoader from "../../services/library_loader.js";
65
import treeService from "../../services/tree.js";
76
import utils from "../../services/utils.js";
87
import type FNote from "../../entities/fnote.js";
@@ -216,7 +215,7 @@ class ListOrGridView extends ViewMode {
216215

217216
const highlightedTokens = this.parentNote.highlightedTokens || [];
218217
if (highlightedTokens.length > 0) {
219-
await libraryLoader.requireLibrary(libraryLoader.MARKJS);
218+
await import("script-loader!mark.js/dist/jquery.mark.min.js");
220219

221220
const regex = highlightedTokens.map((token) => utils.escapeRegExp(token)).join("|");
222221

@@ -269,12 +268,12 @@ class ListOrGridView extends ViewMode {
269268
i === this.page
270269
? $("<span>").text(i).css("text-decoration", "underline").css("font-weight", "bold")
271270
: $('<a href="javascript:">')
272-
.text(i)
273-
.attr("title", `Page of ${startIndex} - ${endIndex}`)
274-
.on("click", () => {
275-
this.page = i;
276-
this.renderList();
277-
}),
271+
.text(i)
272+
.attr("title", `Page of ${startIndex} - ${endIndex}`)
273+
.on("click", () => {
274+
this.page = i;
275+
this.renderList();
276+
}),
278277
" &nbsp; "
279278
);
280279
} else if (lastPrinted) {

0 commit comments

Comments
 (0)