Update sample plugin to use ESBuild.

.editorconfig

@@ -0,0 +1,9 @@
+# top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+indent_style = tab
+indent_size = 4
+tab_width = 4

main.ts

@@ -1,4 +1,4 @@
-import { App, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
 
 interface MyPluginSettings {
 	mySetting: string;
@@ -12,49 +12,72 @@ export default class MyPlugin extends Plugin {
 	settings: MyPluginSettings;
 
 	async onload() {
-		console.log('loading plugin');
-
 		await this.loadSettings();
 
-		this.addRibbonIcon('dice', 'Sample Plugin', () => {
+		// This creates an icon in the left ribbon.
+		let ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
+			// Called when the user clicks the icon.
 			new Notice('This is a notice!');
 		});
+		// Perform additional things with the ribbon
+		ribbonIconEl.addClass('my-plugin-ribbon-class');
 
-		this.addStatusBarItem().setText('Status Bar Text');
+		// This adds a status bar item to the bottom of the app. Does not work on mobile apps.
+		let statusBarItemEl = this.addStatusBarItem();
+		statusBarItemEl.setText('Status Bar Text');
 
+		// This adds a simple command that can be triggered anywhere
 		this.addCommand({
-			id: 'open-sample-modal',
+			id: 'open-sample-modal-simple',
-			name: 'Open Sample Modal',
+			name: 'Open sample modal (simple)',
-			// callback: () => {
+			callback: () => {
-			// 	console.log('Simple Callback');
+				new SampleModal(this.app).open();
-			// },
+			}
+		});
+		// This adds an editor command that can perform some operation on the current editor instance
+		this.addCommand({
+			id: 'sample-editor-command',
+			name: 'Sample editor command',
+			editorCallback: (editor: Editor, view: MarkdownView) => {
+				console.log(editor.getSelection());
+				editor.replaceSelection('Sample Editor Command');
+			}
+		});
+		// This adds a complex command that can check whether the current state of the app allows execution of the command
+		this.addCommand({
+			id: 'open-sample-modal-complex',
+			name: 'Open sample modal (complex)',
 			checkCallback: (checking: boolean) => {
-				let leaf = this.app.workspace.activeLeaf;
+				// Conditions to check
-				if (leaf) {
+				let markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
+				if (markdownView) {
+					// If checking is true, we're simply "checking" if the command can be run.
+					// If checking is false, then we want to actually perform the operation.
 					if (!checking) {
 						new SampleModal(this.app).open();
 					}
+
+					// This command will only show up in Command Palette when the check function returns true
 					return true;
 				}
-				return false;
 			}
 		});
 
+		// This adds a settings tab so the user can configure various aspects of the plugin
 		this.addSettingTab(new SampleSettingTab(this.app, this));
 
-		this.registerCodeMirror((cm: CodeMirror.Editor) => {
+		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
-			console.log('codemirror', cm);
+		// Using this function will automatically remove the event listener when this plugin is disabled.
-		});
-
 		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
 			console.log('click', evt);
 		});
 
+		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
 		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
 	}
 
 	onunload() {
-		console.log('unloading plugin');
+
 	}
 
 	async loadSettings() {

manifest.json

@@ -2,9 +2,9 @@
 	"id": "obsidian-sample-plugin",
 	"name": "Sample Plugin",
 	"version": "1.0.1",
-	"minAppVersion": "0.9.12",
+	"minAppVersion": "0.12.0",
 	"description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.",
 	"author": "Obsidian",
-	"authorUrl": "https://obsidian.md/about",
+	"authorUrl": "https://obsidian.md",
 	"isDesktopOnly": false
 }

package.json

@@ -4,20 +4,17 @@
     "description": "This is a sample plugin for Obsidian (https://obsidian.md)",
     "main": "main.js",
     "scripts": {
-    "dev": "rollup --config rollup.config.js -w",
+        "dev": "esbuild main.ts --bundle --external:obsidian --outdir=.  --target=es2016 --format=cjs --sourcemap=inline --watch",
-    "build": "rollup --config rollup.config.js --environment BUILD:production"
+        "build": "esbuild main.ts --bundle --external:obsidian --outdir=.  --target=es2016 --format=cjs"
     },
     "keywords": [],
     "author": "",
     "license": "MIT",
     "devDependencies": {
-    "@rollup/plugin-commonjs": "^18.0.0",
+        "@types/node": "^16.11.1",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+        "esbuild": "0.13.8",
-    "@rollup/plugin-typescript": "^8.2.1",
+        "obsidian": "^0.12.17",
-    "@types/node": "^14.14.37",
+        "tslib": "2.3.1",
-    "obsidian": "^0.12.0",
+        "typescript": "4.4.4"
-    "rollup": "^2.32.1",
-    "tslib": "^2.2.0",
-    "typescript": "^4.2.4"
     }
 }

rollup.config.js

@@ -1,30 +0,0 @@
-import typescript from '@rollup/plugin-typescript';
-import {nodeResolve} from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-
-const isProd = (process.env.BUILD === 'production');
-
-const banner = 
-`/*
-THIS IS A GENERATED/BUNDLED FILE BY ROLLUP
-if you want to view the source visit the plugins github repository
-*/
-`;
-
-export default {
-  input: 'main.ts',
-  output: {
-    dir: '.',
-    sourcemap: 'inline',
-    sourcemapExcludeSources: isProd,
-    format: 'cjs',
-    exports: 'default',
-    banner,
-  },
-  external: ['obsidian'],
-  plugins: [
-    typescript(),
-    nodeResolve({browser: true}),
-    commonjs(),
-  ]
-};

tsconfig.json

@@ -4,7 +4,7 @@
     "inlineSourceMap": true,
     "inlineSources": true,
     "module": "ESNext",
-    "target": "es6",
+    "target": "ES6",
     "allowJs": true,
     "noImplicitAny": true,
     "moduleResolution": "node",