<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><codeclass="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><codeclass="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><codeclass="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><codeclass="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><codeclass="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><codeclass="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><codeclass="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>
