Hey there,

I just figured out how to get svelte to work with esbuild, but lack the time to properly modify docs. Here's the tl;dr, though.

npm install --save-dev svelte svelte-preprocess @tsconfig/svelte esbuild-svelte

will install the bits

tsconfig.json changes remain mostly the same.

I did add a line

    "sourceMap": false,

which overrides the setting from svelte, to enable the inline source map. Still testing this specifically.

Lastly are changes for esbuild specifically. The plugin template has an esbuild.config.mjs, which I modified.

Like the guide that ships with the package, https://www.npmjs.com/package/esbuild-svelte, first you need

import esbuildSvelte from "esbuild-svelte";
import sveltePreprocess from "svelte-preprocess";

followed by:

	plugins: [
		esbuildSvelte({
			preprocess: sveltePreprocess(),
		}),
	]

for reference, this code was already included in my package.json:

	"scripts": {
		"dev": "node esbuild.config.mjs",
		"build": "node esbuild.config.mjs production"
	},

After that, everything just worked, and I was more surprised that it did at all than how easy it was :). Hope this info is useful to you, even if it accompanies no other documentation. Happy to fill in more details, if you reply here, though please note I don't always check email/messaging frequently, so it might be a day or 4 before I reply.

I’m not sure how much you want to focus on general good development practices…

But when I see the “Print file path” example in Context Menus I have the urge to refactor to remove the duplicated code… For lots of reasons, including foreseeing the inevitable future bug-fix or new feature where the two accidentally become inconsistent.

The current code is good from an explanatory perspective, though… So I wonder whether it’s worth a second example that shows doing the same thing, but having the common code moved to something like a local helper function - named so that it either creates the one menu item - or to add all the menu items, as the plugin grows.

Hi, thank you for some awesome docs pages!

I’m an experienced developer with a background in depending on automatic tests to speed up development…

So as I start to learn JS, to start to write plugins, I’m naturally looking for guidance on writing automated tests as I go…

And I wondered whether you would be interested in seeing any techniques and tools documented here…

https://marcus.se.net/obsidian-plugin-docs/editor/extensions/decorations#view-plugins

👉 shows both live preview mode, please add document about how to show 👉 only when the cursor not editing the content of what decorations want to change.

I think it is a common usage like # some heading shows in obsidian；

Live Preview delivers a cleaner writing experience by only displaying Markdown syntax around the cursor

Hi, this part of the doc state that desktop uses CM v5 while mobile uses v6

https://marcus.se.net/obsidian-plugin-docs/editor

Another page states that everything is v6
https://marcus.se.net/obsidian-plugin-docs/editor/extensions

Is the notice outdated? can be removed?

In https://marcus.se.net/obsidian-plugin-docs/guides/react - might it be worth a sentence saying why one might to use React?

I'm trying to make it work, but whenever I run npm run dev, my .env gets ignored. I have dotenv 16.0.3 installed, and I've used dotenv.config(), but it all leads to the same problem.

When I console.log(dotenv.config()), I get an error in the console, like:

Error: ENOENT: no such file or directory, open '/.env'

My .env file is in the root, and I've placed it in my main.ts (in the root) and other files within different directories. Same result throughout.

in commit #23, #26, #28, you say that

Ideally we merge this upstreams in the obsidian-api repository, or we find a better place to document this.

That was what I thought initially, but seeing that there is only one accepted commit in there, and thinking that the declaration file is not a good place to have detailed, well formatted-documentation anyway, I guess we should have it here.

If it will be overwritten, should we have some kind of markup so that it won't be?

(First, let me apologise for posting Issues rather than PRs - I’m on an iPad reading your wonderful docs, and am not in a place where I can learn the file format to contribute text and the required style - but I wanted to capture fleeting-but-hopefully-useful thoughts as I had them)

Background

As I understand it, .ts files get compiled to .js files…

Ah yes, you mention this in “Create your first plugin” - using npm run dev

Several things are not totally clear to me, or occur to me…:

• whether that command needs to be run every time the .ts is edited, or whether it is automatic
• Whether all novices will understand the need to edit the .ts not the .js (especially as the linked video at the top of that page shows someone manually downloading and edited the .js file.)
• I note that the hot-reload plugin monitors the .js not the .ts

Thoughts

I wonder whether it’s worth this page - https://marcus.se.net/obsidian-plugin-docs/getting-started/development-workflow - having some explanation that it’s the .ts you edit, and what you need to do to make sure the .js is uptodate every time you test your change… It seems fairly core to the development workflow understanding…

(I appreciate there may be a later page explaining the release process, and how the .js is created…)

https://marcus.se.net/obsidian-plugin-docs/editor/markdown-post-processing says
"If you want to change how a Markdown document is rendered in ##Preview mode##, you can add your own Markdown post processor." but I think it should say "Reading" / "Read mode".

Thanks for the project, very helpful.

There is a 404 for this link https://marcus.se.net/obsidian-plugin-docs/getting-started/plugin-anatomy, which is linked at the bottom of https://marcus.se.net/obsidian-plugin-docs/getting-started/create-your-first-plugin ("Once you're ready, learn more about the anatomy of a plugin.")

It takes me some time to discover that :

• file-menu is for right click file in explorer AND click on the view action button.
• editor-menu is a right click on a file.

https://marcus.se.net/obsidian-plugin-docs/reference/typescript/classes/Workspace#on-5

From ravimashru/obsidian-show-file-path#9 (comment)

It turns out that the mobile app (which includes the iPad version) does not support adding custom status bar items (see https://discord.com/channels/686053708261228577/707816848615407697/832321286092882012).

I think this might be worth mentioning in https://marcus.se.net/obsidian-plugin-docs/guides/status-bar

If I download and install node, nvm, and npm, all in packages for Windows, as recommended, it it still impossible to compile the sample plugin. The error message is

PS E:\2019\.obsidian\plugins\my-sentences> npm run dev

> [email protected] dev E:\2019\.obsidian\plugins\my-sentences
> esbuild main.ts --bundle --external:obsidian --outdir=.  --target=es2016 --format=cjs --sourcemap=inline --watch

/mnt/e/2019/.obsidian/plugins/my-sentences/node_modules/.bin/esbuild: 12: /mnt/e/2019/.obsidian/plugins/my-sentences/node_modules/.bin/esbuild: node: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file bash
npm ERR! errno ENOENT
npm ERR! [email protected] dev: `esbuild main.ts --bundle --external:obsidian --outdir=.  --target=es2016 --format=cjs --sourcemap=inline --watch`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

which suggests that it requires some sort of posix environment to run at all. Is there any way to get this working under native windows powershell?

Add guide on how to access logs on iOS and Android.

https://marcus.se.net/obsidian-plugin-docs/testing/mobile-devices

I think it might be useful if every auto-generated page could also include a direct link to the respective section of the Obsidian API? Makes it a bit easier to look some things up there.

Hey @marcusolsson!
Thank you for this great tutorial! Excellent job!
Below is a small suggestion to reduce slightly cognitive load.

would be easier to understand the logic behind this example if on line 58 we just return value; and remove line 55:

  checkCallback: (checking: boolean) => {
    const value = getRequiredValue();
    if (value) {
      if (!checking) {
        doCommand(value);
      }
    }
    return value;
  }

It literally just says this.

_EVENTS: { fullscreenchange?: EventListenerInfo[]; fullscreenerror?: EventListenerInfo[]; pointerlockchange?: EventListenerInfo[]; pointerlockerror?: EventListenerInfo[]; ... 91 more ...; paste?: EventListenerInfo[]; }

What are the 91 more? How do I find those?

I specifically need the methods part:

on: <K extends "input" | "progress" | "select" | "fullscreenchange" | "fullscreenerror" | "abort" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | ... 84 more ... | "visibilitychange">(this: Document, type: K, selector: string, listener: (this: Document, ev: DocumentEventMap[...

Additionally, DocumentEventMap is completely undocumented.

Hi, @marcusolsson

Thanks for creating this awesome document. Now I enjoy obsidian plugin development a lot!

During development, I find it is tedious to start a new plugin because some duplication work

• create directory with plugin name
• use plugin name to update the plugin class in main.ts
• fill plugin in manifest.json and package.json

Therefore, I create a cookiecutter template for obsidian plugin development.
By simply running cookiecutter https://github.com/anselmwang/cookiecutter-obsidian-plugin, the cookiecutter tool will ask developers some questions (author, project name, etc.) and generate a project with everything ready. According to my investigation, this is the only cookiecutter template for obsidian till now.

May I know if the template is worth to be mentioned in the document? No matter what the answer is, I am happy to hear your feedback.

If the answer is yes, I am thinking add it to the "Introduction" -> "Unofficial resources by community members:" part or update the Step 1 and Step2 of the "Create your first plugin".

Below is a snapshot of how the template works. Most of the time I can rely on the default value.

c:\GitRoot>cookiecutter https://github.com/anselmwang/cookiecutter-obsidian-plugin
full_name [Yu Wang]:
email [[email protected]]:
author_url [https://github.com/anselmwang]:
project_name_snake [test_template]: key_sequence_shortcut
project_name_kebab [key-sequence-shortcut]:
project_name [Key Sequence Shortcut]:
project_name_pascal [KeySequenceShortcut]:
project_short_description [Refreshingly simple static site generator.]:  Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.
version [1.0.1]:
Select open_source_license:
1 - MIT license
2 - BSD license
3 - ISC license
4 - Apache Software License 2.0
5 - GNU General Public License v3
6 - Not open source
Choose from 1, 2, 3, 4, 5, 6 [1]:

Hi, I would like to intercept when enter is pressed in the text input field in the example modal:

https://marcus.se.net/obsidian-plugin-docs/user-interface/modals#accept-user-input

then I can allow the modal to be closed also when enter is pressed, and the user do not have to press the "Submit" button.

How can this be done? Should it be added to the plugin documentation?

For example, in the Custom Views section, have a heading at the bottom which links to sections in the code of plugins which have "good" custom views