This Obsidian (https://obsidian.md) plugin makes it easy to write reusable JavaScript code using requirejs.
For example, I could set the script folder to _files/scripts
, and then I could copy lodash to _files/scripts/lodash.js
.
From a dataview dataviewjs
block, I could use it like so:
const requirejs = window.requirejs;
const lodash = await new Promise((resolve, reject) => requirejs(['lodash'], resolve, reject));
lodash.get(...) // now I can use lodash
If I want to develop some of my own utility functions, I can do something like so:
// in _files/scripts/utils.js
define(['exports'], function(exports) {
// cheesy examples, but you get the idea
exports.multiply = (x,y) => x*y;
exports.add = (x,y) => x+y;
exports.sub = (x,y) => x-y;
});
const requirejs = window.requirejs;
const myUtils = await new Promise((resolve, reject) => requirejs(['utils'], resolve, reject));
console.log(myUtils.add(myUtils.multiply(3, 4), 12));
Modules can have dependencies on each other. I can define another module like so:
// in _files/scripts/more-utils.js
define(['exports', 'utils'], function(exports, utils) {
exports.foobar = (x,y,z) => utils.add(x, utils.multiply(y, z));
});
For more details on this module syntax (Asynchronous Module Definition, specifically) see the RequireJS docs: https://requirejs.org/docs/api.html
This project was inspired by https://github.com/SamLewis0602/obsidian-custom-js.
- Code clean up
- Auto-complete suggestions when choosing script folder option
- Promise alternative to
requirejs
Would be nice to write something like this:
let _ = await requirejs.promise('lodash');
instead of
let _ = await new Promise((resolve, reject) => requirejs(['lodash'], resolve, reject));
- Clone this repo.
npm i
oryarn
to install dependenciesnpm run dev
to start compilation in watch mode.
- Copy over
main.js
,styles.css
,manifest.json
to your vaultVaultFolder/.obsidian/plugins/your-plugin-id/
.