mirror of
https://github.com/zadam/trilium.git
synced 2025-11-04 05:28:59 +01:00
882 lines
12 KiB
HTML
882 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="shortcut icon" href="./favicon.ico">
|
|
|
|
<script src="./assets/v0.63.6/app-dist/share.js"></script>
|
|
|
|
<link href="./assets/v0.63.6/libraries/normalize.min.css" rel="stylesheet">
|
|
<link href="./assets/v0.63.6/stylesheets/share.css" rel="stylesheet">
|
|
|
|
|
|
<link href="./assets/v0.63.6/libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
|
|
<title>Adding a new client library</title>
|
|
</head>
|
|
<body data-note-id="QXCi6Y1SYulw" data-ancestor-note-id="4yYHqKbLovVX">
|
|
<div id="layout">
|
|
<div id="main">
|
|
|
|
<nav id="parentLink">
|
|
parent: <a href="VS22Hq5PBFNf.html"
|
|
class="type-text">Dependency Management</a>
|
|
</nav>
|
|
|
|
|
|
<h1 id="title">Adding a new client library</h1>
|
|
|
|
|
|
|
|
|
|
<div id="content" class="type-text ck-content">
|
|
<p>In the past some libraries have been copy-pasted (and adapted if needed) to the repository. However, new libraries must be obtained exclusively through npm.</p><p>The first step is to install the desired library. As an example we are going to install <code>i18next</code>:</p><pre><code class="language-text-plain">npm i i18next</code></pre><h3>Step 1. Understanding the structure of the import</h3><p>After installing the dependency, it's important to know how it's structured. You can do this by looking at the directory structure of the newly imported dependency:</p><pre><code class="language-text-plain">$ tree node_modules/i18next
|
|
node_modules/i18next
|
|
├── dist
|
|
│ ├── cjs
|
|
│ │ └── i18next.js
|
|
│ ├── esm
|
|
│ │ ├── i18next.bundled.js
|
|
│ │ ├── i18next.js
|
|
│ │ └── package.json
|
|
│ └── umd
|
|
│ ├── i18next.js
|
|
│ └── i18next.min.js
|
|
├── i18next.js
|
|
├── i18next.min.js
|
|
├── index.d.mts
|
|
├── index.d.ts
|
|
├── index.js
|
|
├── index.v4.d.ts
|
|
├── LICENSE
|
|
├── package.json
|
|
├── README.md
|
|
└── typescript
|
|
├── helpers.d.ts
|
|
├── options.d.ts
|
|
├── t.d.ts
|
|
└── t.v4.d.ts</code></pre><p>Generally you should be looking for a <code>.min.js</code> file. Note that the <code>esm</code> and <code>cjs</code> variants generally don't work, we are looking for the classic, no module dependency.</p><h3>Step 2. Exposing the library from the server</h3><p>The library must be delivered by the server and this is done via <code>src/routes/assets.ts</code>. In the <code>register</code> function, add a new entry near the bottom of the function:</p><pre><code class="language-application-javascript-env-frontend">app.use(`/${assetPath}/node_modules/i18next/`, persistentCacheStatic(path.join(srcRoot, "..", 'node_modules/i18next/')));</code></pre><h3>Step 3. Adding it to the library loader</h3><p>The library loader is a client module which is in charge of downloading the library from the server and importing it. The loader is located in <code>src/public/app/services/library_loader.js</code>.</p><p>To add a new library, start by creating a constant for it, with the value pointing to the minified JS identified at the first step:</p><pre><code class="language-application-javascript-env-frontend">const I18NEXT = {
|
|
js: [
|
|
"node_modules/i18next/i18next.min.js"
|
|
]
|
|
};</code></pre><p>Then add it to the <code>export default</code> section:</p><pre><code class="language-text-x-diff"> export default {
|
|
requireCss,
|
|
requireLibrary,
|
|
CKEDITOR,
|
|
CODE_MIRROR,
|
|
ESLINT,
|
|
RELATION_MAP,
|
|
PRINT_THIS,
|
|
CALENDAR_WIDGET,
|
|
KATEX,
|
|
WHEEL_ZOOM,
|
|
FORCE_GRAPH,
|
|
MERMAID,
|
|
EXCALIDRAW,
|
|
- MARKJS
|
|
+ MARKJS,
|
|
+ I18NEXT
|
|
}</code></pre><h3>Step 4. Using the library</h3><p>To import the library, simply use the following mechanism:</p><pre><code class="language-text-x-diff">import library_loader from "./library_loader.js";
|
|
|
|
await library_loader.requireLibrary(library_loader.I18NEXT);</code></pre><p>Make sure to replace <code>I18NEXT</code> with the library that was created at the previous steps.</p><p>Note that because we are not using a module management mechanism such as ES Modules or Common.js modules, the <code>requireLibrary</code> method does not actually return anything. </p><p>To benefit from the library, it must export on its own an object in <code>window</code>.</p><p>In the case of <code>i18next</code>, it sets <code>window.i18next</code> and that can be used directly:</p><pre><code class="language-text-x-diff">i18next.init({});</code></pre><h3>Step 5. Adding Electron support</h3><p>For Electron, the <code>node_modules</code> are copied as a separate step by <code>bin/copy-dist.ts</code>.</p><p>Scroll all the way down to the <code>nodeModulesFolder</code> and append an entry for the newly added libraries.</p>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button id="toggleMenuButton"></button>
|
|
|
|
<nav id="menu">
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="4yYHqKbLovVX.html">Developer's Guide</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="VS22Hq5PBFNf.html">Dependency Management</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<strong>Adding a new client library</strong>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="C09Dou56ffMe.html">Having a simpler packaging system</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="ZlxZh8NH5frM.html">Building and deployment</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="PHqgH8FCfcod.html">Documentation</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="btM6L9JtG301.html">Running a development build</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="UTB518X6X9Uh.html">Build deliveries locally</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="biDJ9KgbWLgt.html">Releasing a version</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="rU1hxvgqlA9x.html">CI</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="BhE2WFknKKHG.html">Main</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="xtBYDVZPb0gr.html">Project maintenance</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="s5gsYTbPQr6c.html">Updating dependencies</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="X4N03xLYEWnN.html">bettersqlite binaries</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="GMta9hBHsXHQ.html">Node.js, Electron and `better-sqlite3`</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="jvdjFBOCCrOa.html">Testing compatibility</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="WKn3hLGmKmiH.html">CKEditor</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="MUGBo4n67kBI.html">Environment setup</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="icQBu8R1ij57.html">Building & updating</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="zpR91YHYs6lL.html">Differences from upstream</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="B8hxg4e66cVL.html">Development and architecture</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="hkrBX8KE1HQl.html">Internationalisation / Translations</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="Z9N9OKBXXLFW.html">Guidelines</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="KRC2O84LekPz.html">i18n-ally</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="XxqZW6JjkW2g.html">Live reload</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="3jc1nUXyteo0.html">Themes</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="U5RtMeGPeZ29.html">Synchronisation</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="d3dnvVOhur16.html">Content hashing</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="mPGbEmYGitWe.html">Build information</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="zCDxk5VFdsqg.html">Database</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="wCxCJB3hhojs.html">attachments</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="wxCwZ1P2SGCx.html">attributes</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="6x42mhlfLo0o.html">blobs</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="Vy1PbjSkUast.html">branches</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="inGKXCChkVYX.html">entity_changes</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="y2ido6E6tZ0V.html">etapi_tokens</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="kAfgZERKtVhU.html">notes</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="FSZoX3cJlJE7.html">options</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="bzQfhyzDo3Xz.html">recent_notes</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="QYMncZf5Bu3D.html">revisions</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="KbwD5mDpD4CV.html">Protected entities</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="IuxV242YGaN5.html">Deleted notes</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="FJ4VR6G2M6VD.html">Special notes</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="1l1f6WZbaBEZ.html">Branch prefixes</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="QSkfVssHIngA.html">Revisions</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="cemIoFLfEGPO.html">Backlinks</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="VbDoDdiHEemi.html">Note types</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="UDBwK5Fhr2CT.html">Safe mode</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="3eTu21fjtZkj.html">Scripting</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="1pOWnHdGAuWR.html">Widgets</a>
|
|
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="8jWguCtuKsAt.html">Right pane widget</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
<a class="type-text" href="4FXLAtcPhZFo.html">CSS</a>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|