Plugin: Modules - load JavaScript and TypeScript modules from your vault and npm packages

Share & showcase
1

The latest version is 2.4.0, released on 2023-09-30.

Modules v2.0.0

Modules allows you to load JavaScript and TypeScript files in your vault and npm packages, with major improvements over existing solutions. It can compliment or replace any other plugins using JavaScript like Dataview dv.view, CustomJS, Templater user scripts, etc.

To get you intrigued, here is an example that produces ---------Hello, world!----------:

  • module.js.md:
- Some optional *Markdown* here describing the following code block: A `hello world` function.
~~~JavaScript
// Enable "Enable external links" in plugin settings first.
const { pad } = await require.import("https://esm.sh/lodash-es");
export function helloWorld(dv) {
  const text = pad("Hello, world!", 32, "-");
  dv.paragraph(text);
}
~~~
  • example.md:
~~~dataviewjs
const { helloWorld } = await self.require.import("module.js.md");
helloWorld(dv);
~~~

The major improvements over existing solutions are:

  • No arbitrary export restrictions like exporting only one class or function per file.
  • Load scripts from the Internet. You can load a npm package using await require.import("https://esm.sh/(package name here)") or other CDNs. Most packages should work.
  • Load TypeScript.
  • Load Markdown files with JavaScript or TypeScript code blocks like in the example. Content outside code blocks are ignored.
  • Supports ./relative/paths.js, [whatever](Markdown%20links.js), and [[wikilinks.js]], which works exactly the same way Obsidian resolves them.
  • Modules can depend on other modules freely.

Please read the readme for usage.

Contributions are welcome, especially translation!

trailer
trailer1920Ă—1080 143 KB

4 Likes
2

I installed dataview to try your plugin. I did 2 files as you told. but I get the error
Evaluation Error: Error: ./module.js.md
at D (plugin:modules:30154:2473)
at Function.import (plugin:modules:30154:4796)
at async eval (eval at (plugin:dataview), :1:77)
at async DataviewJSRenderer.render (plugin:dataview:18436:13)
what I did wrong

3

The title shown in Obsidian should only be module.js for the module file.

4

ok the created must be named as module.js I called it module.js.md…
then I get a new error
Evaluation Error: Error: https://esm.sh/lodash-es
at D (plugin:modules:30154:2473)
at Function.import (plugin:modules:30154:4796)
at async blob:app://obsidian.md/c92af95e-47eb-4f25-a4e7-7d01d107b6ca:4:17

5

Then you need to enable “Enable external links” in plugin settings.

1 Like
6

it worked like this

import {pad} from "https://esm.sh/lodash-es";
export function helloWorld(dv) {
  const text = pad("Hello, world!", 32, "-");
  dv.paragraph(text);
}
1 Like
8

just to be clear

const { helloWorld } = await self.require.import("./module.js.md");
helloWorld(dv);

and

import {pad} from "https://esm.sh/lodash-es";
export function helloWorld(dv) {
  const text = pad("Hello, world!", 32, "-");
  dv.paragraph(text);
}

is working in edit and reading view mode, with or without “Enable external links”

edit: well correction again import(“module.js.md”) if not this not working in reading mode

1 Like
9

It looks like import ... from "https://example.com" and await import("https://example.com") can handle external links (if CORS allows). Obviously they cannot handle Obsidian files though.

1 Like
10

2.1.0

Minor Changes

  • 9a7c8b6: Add command “Clear cache”.
  • 58abf99: Make the public invalidate invalidate more things.

Patch Changes

  • fdbca01: Reduce memory usage by up to 75% for preloaded files.
  • 663d9eb: Fix canvas rendering nothing. Fixes GH#2.
11

2.2.0

Minor Changes

  • 3b251be: Add cwd detection for dv.view in Dataview.
  • ef032bf: Add cwd detection for Templater user scripts.
  • fdbee2f: Add cwd detection for canvases.
  • 2fd4dc4: Change the type and meaning of null and undefined for working directory. This allows overriding the working directory with no working directory in CommonOptions.
  • 5fbad90: Always change the cwd context in preview and editor.

Patch Changes

  • 92b9215: Fix context detection for Templater templates.
  • 004ed2e: Fix weird behaviors if the vault has more than 1000 files. Fixes GH#4.
12

2.3.0

No more console spamming and unchecked data.json growth!

Minor Changes

Patch Changes

  • b496460: Remove debug statements. Addresses GH#5. (+f9fc1874e2c0b0b6c486ae6a13e52bf09cef588d)
13

2.4.0

Minor Changes

  • 45f7560: Add startup modules.
  • 24dfc8d: Add Require#onInvalidate.

Patch Changes

  • de069e6: Provide app to avoid using the deprecated global app. For users, nothing needs to be changed.
  • dbef51c: Fix importing from external links not working with custom require name.