Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 02:02:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1546 from TriliumNext/webpack

Browse Source 
Move library loader to webpack
This commit is contained in:
Elian Doran 2025-03-29 02:38:34 +02:00 committed by GitHub
commit d84e8c347a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 86 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
package-lock.json generated
View File

@ -65,7 +65,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": "3.0.1",
@ -88,7 +87,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"
@ -173,6 +171,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",
@ -183,6 +182,7 @@
"rimraf": "6.0.1",
"sass": "1.86.0",
"sass-loader": "16.0.5",
"script-loader": "0.7.2",
"split.js": "1.6.5",
"supertest": "7.1.0",
"svg-pan-zoom": "3.6.2",
@ -193,6 +193,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",
@ -15232,6 +15233,7 @@
"version": "8.11.1",
"resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
"integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==",
"dev": true,
"license": "MIT"
},
"node_modules/markdown-it": {
@ -18034,6 +18036,12 @@
"node": ">=0.6"
}
},
"node_modules/raw-loader": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
"integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q==",
"dev": true
},
"node_modules/rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@ -19095,6 +19103,16 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/script-loader": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz",
"integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==",
"dev": true,
"license": "MIT",
"dependencies": {
"raw-loader": "~0.5.1"
}
},
"node_modules/semver": {
"version": "7.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@ -21492,6 +21510,7 @@
"version": "9.0.4",
"resolved": "https://registry.npmjs.org/vanilla-js-wheel-zoom/-/vanilla-js-wheel-zoom-9.0.4.tgz",
"integrity": "sha512-OjmS9ihEKBCRw2OQ7IiIdQGXdC5gTEEmtcAWZcPeNAJaYiS61KCd02Z72YMtIoXLGN5TZP+wliBMylLAsr6wow==",
"dev": true,
"license": "MIT"
},
"node_modules/vary": {

5
package.json
View File

@ -124,7 +124,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": "3.0.1",
@ -147,7 +146,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"
@ -229,6 +227,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",
@ -239,6 +238,7 @@
"rimraf": "6.0.1",
"sass": "1.86.0",
"sass-loader": "16.0.5",
"script-loader": "0.7.2",
"split.js": "1.6.5",
"supertest": "7.1.0",
"svg-pan-zoom": "3.6.2",
@ -249,6 +249,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",

22
src/public/app/services/content_renderer.ts
View File

@ -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,19 @@ 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
});
});
const initZoom = async () => {
const element = document.querySelector(`#${$img.attr("id")}`);
if (element) {
WheelZoom.create(`#${$img.attr("id")}`, {
maxScale: 50,
speed: 1.3,
zoomOnClick: false
});
} else {
requestAnimationFrame(initZoom);
}
};
initZoom();
}
imageContextMenuService.setupContextMenu($img);

22
src/public/app/services/library_loader.ts
View File

@ -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
};

7
src/public/app/types.d.ts vendored
View File

@ -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;

3
src/public/app/widgets/buttons/calendar.ts
View File

@ -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);
}

3
src/public/app/widgets/find_in_html.ts
View File

@ -1,7 +1,6 @@
// 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";
@ -23,7 +22,7 @@ export default class FindInHtml {
}
async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) {
await libraryLoader.requireLibrary(libraryLoader.MARKJS);
await import("script-loader!mark.js/dist/jquery.mark.min.js");
const $content = await this.parent?.noteContext?.getContentElement();

34
src/public/app/widgets/geo_map.ts
View File

@ -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
});
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);
const map = L.map(this.$container[0], {
worldCopyJump: true
});
}
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);
}
}

22
src/public/app/widgets/type_widgets/image.ts
View File

@ -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,19 @@ 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
});
});
const initZoom = async () => {
const element = document.querySelector(`#${this.$imageView.attr("id")}`);
if (element) {
WheelZoom.create(`#${this.$imageView.attr("id")}`, {
maxScale: 50,
speed: 1.3,
zoomOnClick: false
});
} else {
requestAnimationFrame(initZoom);
}
};
initZoom();
imageContextMenuService.setupContextMenu(this.$imageView);

15
src/public/app/widgets/view_widgets/list_or_grid_view.ts
View File

@ -2,7 +2,6 @@ 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";
@ -216,7 +215,7 @@ class ListOrGridView extends ViewMode {
const highlightedTokens = this.parentNote.highlightedTokens || [];
if (highlightedTokens.length > 0) {
await libraryLoader.requireLibrary(libraryLoader.MARKJS);
await import("script-loader!mark.js/dist/jquery.mark.min.js");
const regex = highlightedTokens.map((token) => utils.escapeRegExp(token)).join("|");
@ -269,12 +268,12 @@ class ListOrGridView extends ViewMode {
i === this.page
? $("<span>").text(i).css("text-decoration", "underline").css("font-weight", "bold")
: $('<a href="javascript:">')
.text(i)
.attr("title", `Page of ${startIndex} - ${endIndex}`)
.on("click", () => {
this.page = i;
this.renderList();
}),
.text(i)
.attr("title", `Page of ${startIndex} - ${endIndex}`)
.on("click", () => {
this.page = i;
this.renderList();
}),
" &nbsp; "
);
} else if (lastPrinted) {

6
src/routes/assets.ts
View File

@ -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 {

2
src/types.d.ts vendored
View File

@ -30,3 +30,5 @@ declare module "is-animated" {
function isAnimated(buffer: Buffer): boolean;
export default isAnimated;
}
declare module "script-loader!mark.js/dist/jquery.mark.min.js";

8
webpack.config.ts
View File

@ -66,7 +66,10 @@ const config: Configuration = {
loader: miniCssExtractPlugin.loader
},
{
loader: "css-loader"
loader: "css-loader",
options: {
esModule: true
}
},
{
loader: "postcss-loader",
@ -109,6 +112,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",