As someone who was the direct target audience for this plugin (i.e. some programming sans TypeScript/JavaScript experience and someone who just needed additional functionality not found in existing plugins) and who has had to look through the source code of other poorly (or un) documented plugins to figure out what I needed, I think it would be immensely helpful to encourage plugin developers to use TSDoc by implementing the boilerplate code right here in the official template plugin.

Expected behaviour

The code compiles and runs

What Actually happened

The code didn't run and I got this error

> [email protected] build
> tsc -noEmit -skipLibCheck && node esbuild.config.mjs production

file:///home/fffluoride/Desktop/TEST/.obsidian/plugins/obsidian-sample-plugin/esbuild.config.mjs:14
const context = await esbuild.context({
                ^^^^^

SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)
    at async link (internal/modules/esm/module_job.js:42:21)

Steps to reproduce

1. Installed node, and npm from my package manager
2. Clone the repository and run the commands in the obsidian docs - https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin#Step+1+Download+the+sample+plugin
3. Build the plugin - https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin#Step+2+Build+the+plugin
4. It didn't work :(

I was reading the code, when I saw the banner of that file, where can I find the source code of the config?

The request module isn't imported/used in the sample plugin and is referenced here.

An example request could look like:

import { request } from 'obsidian';
await request({
  url: '/some-endpoint',
  method: 'POST',
  contentType: 'application/json',
  body: JSON.stringify({
	  mySetting: this.settings.mySetting,
  })
})

In order to be able to guard custom obsidian plugins with unit tests, it'd be great if the sample plugin would already contain an initial Jest Unit Test and the package.json configured to execute it.

I'm building a new plugin that needs to access the filesystem and spawn child processes. But npm run dev throws an error when I import and use either of these modules.

How to replicate:

1. clone this repo
2. add import { spawn } from 'child_process'; to main.ts (note, that this alone does not cause the issue)
3. add spawn("something") to onload()
4. npm run dev

The error I get is main.ts:2:29: error: Could not resolve "child_process" (use "platform: 'node'" when building for node)

Is this related to #11 and the switch to ESBuild instead of Rollup? <-- I don't understand any of this, but I do notice that all the other plugins that use child_process and fs refer to rollup in package.json instead of esbuild.

hi there, i tried a million ways but nodeJS does not seem to complete the installation for some reason. any idea what it could be?
i follow clearly your steps.
thanks sebastian

Cannot find package 'esbuild' imported from C:\pictoys\DATA\obsidian\testvault.obsidian\plugins\obsidian-sample-plugin\esbuild.config.mjs

Following the instructions in the README, if we run
yarn version [major | minor | patch

Yarn will do a number of things, including create a git tag with the next version, but that tag will be of the form V# (e.g., v1.0.0)

But README also states to not include prefix 'v' in the tag version.

Instead I propose that the commands instructions should be

# make sure to rebuild main.js
yarn build 
# make sure to update minAppVersion (min Obsidian version) in manifest.json to whatever is required
# bumps package.json, versions.json, manifest.json (note that yarn has an internal version scrip that runs before the version script in package.json)
yarn version --new-version [major | minor | patch] --no-git-tag-version
git tag <version_num, no V!>
git push origin <version_num>
# use gh cli, or go to github to create a release
gh release create <version_num> manifest.json main.js <any other files> --title "Version <version_num>" --notes "<Version Note>"

The package-lock.json is not included to git repo by intention.
What is the reason? If you want stable build, you usually want to check in such lock-files to VCS.

Today I faced the problem with my Imgur plugin based on this template. My build has stuck. That's exactly because package-lock.json is not committed. The package.json is not enough, because it does not pin exact version of dependencies. With the ^-notation (example: "typescript": "^4.2.4") it allows actual minor and patch versions to be higher on npm install if newer version of the dependency is available on npm registry (see npm docs).

The build of this plugin's template is currently broken too. It will stuck forever in the very end after:

...
main.ts → ....
created . in 1.4s
# stuck here

Other plugins generated from this template and not having lock-file in git are affected too, i.e.:

• sliding-panes-obsidian
• obsidian-mind-map
• obsidian-day-planner
• and any others without lock-file committed

I do not know the root cause of the problem. But from my experiments, the culprit of the stuck build with this Rollup setup is TypeScript 4.4.1+ which gets installed now on npm install without package-lock.json.

I think that the lock-file should not be ignored and must be committed to git.
Also another common mistake I see people make is: using npm install instead of npm ci on their automated builds. npm install leaves a possibility for lock-file to be updated on clean install if the situation on npm registry has changed. I think the right choice for CI should be the npm ci command with lock-file tracked by vcs to get stable reproducible builds.

The plugin checklist recommends that plugin developers "Consider organizing your code base using folders":

If your plugin uses more than one .ts file, consider organizing them into folders to make it easier to review and maintain.

It would be helpful if the sample plugin did this so that there was an example to follow.

wrong repo

This is probably a really dumb question, but I cannot find where it logs to.

Getting this error. It seems to crop up on some other repos, but I'm not sure what's causing it yet. Reporting and will investigate myself a little later today.

Steps to reproduce:

1. Fork repo using template
2. Clone repo into .obsidian/plugins directory
3. Run npm i
4. Run npm run dev

Expected
5. It compiles into a dev environment

Actual
5. It errors (copied below)

Thanks for the amazing product, looking forward to developing some plugins for it!

rollup v2.51.1
bundles main.ts → ...
[!] Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript)
\\jouly\home\Obsidian\home\.obsidian\plugins\node-red-obsidian\main.ts (3:0)
1: import { App, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
2:
3: interface NodeREDPluginSettings {
   ^
4:   nodeRedUrl: string;
5: }
Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript)
    at error (U:\Obsidian\home\.obsidian\plugins\node-red-obsidian\node_modules\rollup\dist\shared\rollup.js:7917:30)
    at Module.error (U:\Obsidian\home\.obsidian\plugins\node-red-obsidian\node_modules\rollup\dist\shared\rollup.js:9859:16)
    at Module.tryParse (U:\Obsidian\home\.obsidian\plugins\node-red-obsidian\node_modules\rollup\dist\shared\rollup.js:10258:25)
    at Module.setSource (U:\Obsidian\home\.obsidian\plugins\node-red-obsidian\node_modules\rollup\dist\shared\rollup.js:10161:24)
    at ModuleLoader.addModuleSource (U:\Obsidian\home\.obsidian\plugins\node-red-obsidian\node_modules\rollup\dist\shared\rollup.js:19466:20)
    at async ModuleLoader.fetchModule (U:\Obsidian\home\.obsidian\plugins\node-red-obsidian\node_modules\rollup\dist\shared\rollup.js:19522:9)
    at async Promise.all (index 0)


[2021-06-10 09:37:59] waiting for changes...

Specs

OS: iPadOS 17.1.2
Obsidian version: 1.4.16 (114)

What happened

I'd previously opened the same file in 2 different tabs: after vault reload, 1 tab returned back to its cursor position, the other to the start

What I did

I checked the json file to see what info had been saved, this was it:
UW PICO 5.09 File: cursor-positions.json {"Moo.md":{"scroll":4.435,"cursor":{"from":{"ch":17,"line":0},"to":{"ch":17,"line":0}}}}

Looks like it had only been saving the last tab I edited in's cursor position, not both of them

Suggestion

it would be awesome if multiple cursor positions could be attributed to each file: that way, when opening multiple tabs of the same file, the plugin could 'distribute' the different cursor positions to multiple tabs of same file as these are opened.

PS

Don't know if this feature in particular works on other platforms, especially the desktop OSes, but just wanted to point out it certainly doesn't on iPadOS with my configuration (specified in 'Specs' heading).

version-bump.mjs could be faster if async file operations and Promise.all() are used.

Right now it waits for manifest.json to be written before reading and writing versions.js. But the latter only needs manifest.json to be read.

However, I worry that this might make it harder for less experienced developers to use this template.

Any idea what I can do to fix this? Mine is a clean clone from my repository - I have no package-lock.json in this directory.

My package.json

{
  "name": "extract-highlights-plugin",
  "version": "0.0.1",
  "description": "his is a shortcut-based plugin extracts all ==highlights== in a note into your clipboard",
  "main": "ExtractHighlightsPlugin.js",
  "type": "module",
  "scripts": {
    "dev": "rollup --config rollup.config.js -w",
    "build": "rollup --config rollup.config.js",
    "test": "cross-env TS_NODE_COMPILER_OPTIONS='{ \"module\": \"commonjs\" }' mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**/*.ts",
    "test:watch": "cross-env TS_NODE_COMPILER_OPTIONS='{ \"module\": \"commonjs\" }' mocha -r ts-node/register -r ignore-styles -r jsdom-global/register --watch --watch-files src, test/**/*.ts"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^15.1.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "@types/chai": "^4.2.14",
    "@types/mocha": "^8.2.0",
    "@types/node": "^14.14.14",
    "chai": "^4.2.0",
    "cross-env": "^7.0.2",
    "ignore-styles": "^5.0.1",
    "jsdom": "^16.4.0",
    "jsdom-global": "^3.0.2",
    "mocha": "^8.2.1",
    "obsidian": "https://github.com/obsidianmd/obsidian-api/tarball/master",
    "rollup": "^2.35.1",
    "ts-node": "^9.1.1",
    "tslib": "^1.14.1",
    "typescript": "^4.1.3"
  },
  "dependencies": {
    "electron": "^10.2.0"
  }
}

What I get when running npm install

 extract-highlights-plugin git:(master) npm install
npm WARN tarball tarball data for obsidian@https://github.com/obsidianmd/obsidian-api/tarball/master (sha512-AqIFKumTQk1zHCoBHVajfAIV0RYX/mw1I9KODkimBguCvPSmvYLsossh/WT7aOD0e0wqObkgZ7y1Yv3s3ZMNEw==) seems to be corrupted. Trying again.

Expected Behaviour:

npx tsc works without error when using Typescript 5.1.6

Actual Behaviour:

The command fails with the following message

node_modules/@types/codemirror/index.d.ts:651:39 - error TS2304: Cannot find name 'DocumentAndElementEventHandlersEventMap'.

651         on<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@types/codemirror/index.d.ts:653:59 - error TS2304: Cannot find name 'DocumentAndElementEventHandlersEventMap'.

653             handler: (instance: CodeMirror.Editor, event: DocumentAndElementEventHandlersEventMap[K]) => void,
                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@types/codemirror/index.d.ts:655:40 - error TS2304: Cannot find name 'DocumentAndElementEventHandlersEventMap'.

655         off<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(
                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@types/codemirror/index.d.ts:657:59 - error TS2304: Cannot find name 'DocumentAndElementEventHandlersEventMap'.

657             handler: (instance: CodeMirror.Editor, event: DocumentAndElementEventHandlersEventMap[K]) => void,
                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 4 errors in the same file, starting at: node_modules/@types/codemirror/index.d.ts:651

The error seems to stem from Obsidian listing @types/codemirror 0.0.108 as a dependency, which is over two years old according to NPM.
https://www.npmjs.com/package/@types/codemirror/v/0.0.108?activeTab=readme

Steps to reproduce:

• clone the sample plugin
• change the version of typescript in the package.json to ^5.0.0
• run npm i
• run npx tsc to invoke the TypeScript transpiler
• the error occurs

I've been syncing the config directory for a long time now, but have run into an issue today.
I get this message:

plugin:remotely-save:216 remotely-save-1701649036181: abort sync, triggerSource=manual, error while syncing
eval @ plugin:remotely-save:216

plugin:remotely-save:216 AggregateError: 
    Error: .obsidian/themes/.DS_Store: Response failed with a 409 code
        at eval (plugin:remotely-save:211:314339)
    Error: .obsidian/plugins/.DS_Store: Response failed with a 409 code
        at eval (plugin:remotely-save:211:314339)
    Error: .obsidian/.DS_Store: Response failed with a 409 code
        at eval (plugin:remotely-save:211:314339)
    Error: too many errors, stop the remaining tasks
        at eval (plugin:remotely-save:211:314443)
        at Generator.next (<anonymous>)
        at a (plugin:remotely-save:177:280327)
    at eval (plugin:remotely-save:211:314499)
    at Generator.next (<anonymous>)

My setup

MacOS Sonoma 14.1.1 (Macbook Pro M1)
Obsidian 1.4.16 (Installer 1.4.14)
Remotely Save 0.3.25
Syncing to dropbox

What I've done to try and fix

• I've turned on hidden files and looked in .obsidian/ and .obsidian/themes and .obsidian/plugins. No .DS_Store files exist there.
• I've checked dropbox and found that none of those files exist there either.
• I did a bunch of tests were I delete files in remotely-save/vault-name on dropbox, uninstalled plugins, and resynced. Same issue.

Most revealing test

1. I then created a completely new vault.
2. I then installed Remotely Save through Obsidian.
3. I was able to sync the empty vault successfully to dropbox multiple times.
4. I then enabled Config Directory syncing.
5. I was able to sync the vault successfully multiple times.
6. I then added an empty folder inside the plugin directory to simulate another plugin existing.
7. I then was not able to sync - experiencing the error shown above
   (Note that the .DS_Store files reported were still in the same location - ie. not listed as inside the folder I created)

The provided file esbuild.config.mjs is compatible / works well with esbuild<=16.* but not with >=17.*.

Would it be possible to update it using the new API? Sorry I have been unable to fix the file and create a PR myself, for I'm a total noob!

When installing the sample plugin on iPhone I receive the error

"Plugin failure: obsidian-sample-plugin"
Object {2}
@capacitor://localhost/app.js:1:120182
a@capacitor://localhost/app.js:119073
promiseReactionJob@[native code]

I receive a similar error for my plugin Obsidian Image Caption which is why I wanted to try with the basic sample plugin.

I'm running an iPhone 7 with software version 15.1, and Obsidian version 1.0.5.

Thanks for putting this plugin together. It would be great to also have a "button" somewhere in the interface that would allow one do quickly toggle the vim mode on/off with a mouse (as opposed to just a keyboard shortcut).
thanks!

hi there,

Would you accept a PR that eliminates the body rule in styles.css? I wasn't aware it was in there, and I hosed a lot of people's themes when they installed my plugin :-)

Let me know and I'd be happy to PR it.

Hello team!

I am a huge nix user and manage my environments there. One thing that would be super neat is if this obsidian plugin could support reading the configuration details for the interpreter paths for languages from a json file. I dug around a little bit and haven't developed an extension for obsidian yet, but was wondering if this was something the maintainers would be open to discuss. More than happy to contribute this once I get a better understanding on extension development, but unsure if this is possible just yet :)

It seems the default esbuild configuration doesn't minify the production build.
The difference for my plugin in main.js was 4.02MB to 1.35MB.

waynevanson/data-entry-obsidian-plugin@4.5.0...4.5.1

Since GitHub renamed its default branch name to main, the default branch of this repository could also be main, since all newly created projects have the default name main but any project created from this template is still master - which can be confusing for people new to this.

The computer version is Win11, and the application version is v1.4.16

Hello! I'm brand new and haven't typed a lick of NPM or TypeScript proper, when I followed these instructions, npm run dev didn't appear to have the intended effects -- it took me to some sort of watch-type screen that hung for a few minutes without doing anything on Windows with:

npm 6.9.0

On intuition I punched in npm run build and received the promised main.js which worked when loaded into Obsidian.

This process differs from the process listed in README.md.

Very questionable choice to default to tabs in .editorconfig. Take a look all over Github; you almost never see tabs (no arrows when looking at source code on github.com).

Now, lots of Obsidian plugins have tabs which just serves to annoy everyone who wants to contribute PRs.

Sorry, this issue was done by mistake. You can delete it

I'm using npm 8.5.1 and node 12.22.9, directly run the command will get following error:

$ npm run dev
> [email protected] dev
> node esbuild.config.mjs

file:///mnt/f/obsidian/Phantom/.obsidian/plugins/obsidian-better-slides/esbuild.config.mjs:46
        await context.rebuild();
        ^^^^^

SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)
    at async link (internal/modules/esm/module_job.js:42:21)

This is my first time developing a plugin, I wonder if there is something wrong with my environment.

The Obsidian forum has this guide for plugin developers on the CM 6 / codemirror v6.0 upgrade in the obsidian API. What changes need to be made to this sample plugin to follow the guide? For example, I think the list in the esbuild config needs updating, but are other changes necessary? Thanks in advance for any and all answers or links to further reading!

Although it should not affect any real-life usages, maybe it's better to create a 1.0.1 release here?

Hi. I wanted to use Promise.allSettled in my plugin, but Typescript said:

Property 'allSettled' does not exist on type 'PromiseConstructor'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2020' or later.ts(2550)

Are there any obstacles preventing Obsidian plugins to switch to es2020 from es2015? I think Electron apps like Obsidian use modern Chromium under the hood which should support es2020. Simple test in Obsidian dev console shows me that Obsidian knows about this method:

quite honestly this issue might not be that justified since i have not tried everything at my disposal, but i have not encountered any similar issues with the sample pluging only with other third party plugins where fixes like version incompatibily didn't seem to help so i figured this is the quickes way to resolve this issue.

When i followed the tutorial, the sample plugin appearad, i tried to turn it on and i got a "failed to load plugin error" then when i tried to import the file manually i got the following error:

any and all advice is wellcome.
Thank you..

I'd like to extend the HyperMD / markdown parser, by matching patterns and adding css classnames if certain lines match a regex.

Is there an example that does this?

I can see how to style existing css classnames, but not how to add new classnames to the generated editor markup.

Thanks!

我使用了cmEditor: CodeMirror.Editor;来进行文件的修改。当文件更改时， 我会更新文件中的一个字段，突然它就出现了这个情况。当前编辑的文档内容都没有了

Hello, your plugin is amazing! I love it. I wanted to create a few features that will extend the functionality of it such as: being able to drag and drop, a "zoom in" feature if you have tasks schedule for a time, and a increasing the size of the default displayed timeline/events. I'm thinking the best way for me to do it is to pull your plugin and add to it. I just wanted to ask your permission to use heavily use your plugin. I'll be sure to give credit to you and your plugin in anything I end up publishing.

(I'm quite a way away from understanding enough to develop a plugin that's worth publishing though.)

Speaking from personal experience, and a very skimpy coding background, getting started with Obsidian plugins is very hard.

There are very few guides and examples to find, and the documentation is sparse. Looking through the code of existing plugins on GitHub is a good option, but it's hard to know which have the functionality you're looking to replicate, and many are so expansive that isolating one feature can be daunting for a newcomer.

I would like to suggest expanding this sample plugin with more examples/features/functionality.

Some suggestions could be:

• how to create a leaf for a plugin in the right sidebar
• how to perform a search of a given word/words in a document
• how to output HTML for leaf content layouts
• some examples of how scoping works

I realise that my low skill level means that I need more help than most, but I'm sure that others would find it useful to have this plugin fleshed out a bit as well. Hopefully, someone with more skill than I will be able to look into some of these suggestions 😃

Thanks for an awesome piece of software!

Cheers.

hi, i clone the repo and install all dependencies
and give me this error when i run npm run dev:

> [email protected] dev
> node esbuild.config.mjs

file:///home/alex/Objectives/LifeVault/.obsidian/plugins/Life_app_Obsidina_pluging/esbuild.config.mjs:14
const context = await esbuild.context({
                ^^^^^

SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18)
    at async link (internal/modules/esm/module_job.js:42:21)

I don't understand, it seems like an error in the esbuild library, although I really have no idea, I'm quite an amateur

this sample plugin doesn't have a license. When being strict, I'm not allowed to use this code in my plugin, as you have the copyright and don't allow me to use it.
Please add a license to this repository.