Skip to content

Commit

Permalink
Update sample plugin to use ESBuild.
Browse files Browse the repository at this point in the history
  • Loading branch information
lishid committed Oct 19, 2021
1 parent 5f95bce commit 3afc9d7
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 72 deletions.
9 changes: 9 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -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
59 changes: 41 additions & 18 deletions main.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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-simple',
name: 'Open sample modal (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: 'open-sample-modal',
name: 'Open Sample Modal',
// callback: () => {
// console.log('Simple Callback');
// },
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;
if (leaf) {
// Conditions to check
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) => {

This comment has been minimized.

Copy link
@tim-hub

tim-hub Nov 2, 2021

What is the reason to remove this sample here? :)

I was thinking to build a plugin on the editor, any document recommendation? @lishid

This comment has been minimized.

Copy link
@lishid

lishid Nov 2, 2021

Author Collaborator

The CodeMirror hook only works for CodeMirror 5, which currently only works on desktop. We'll also be rolling out a new source/live preview mode that makes use of CodeMirror 6 which is API incompatible with CM5. That's why we try to phase out any use of CodeMirror 5 directly.

The Editor interface should provide most of the useful functionality for interacting with the editor, which is a shim that we use to bridge the API gap between CM5 and CM6.

This comment has been minimized.

Copy link
@tim-hub

tim-hub Nov 2, 2021

Thanks @lishid for the answering

This comment has been minimized.

Copy link
@tim-hub

tim-hub Nov 2, 2021

      this.registerCodeMirror((cm: CodeMirror.Editor) => {
        cm.on("change", ()=>{console.log('on change cm')});
      });

hi @lishid , I was trying to do something like the code snippet above to hook the changes on editor, I found it does not work on that way. I am not very familiar with obsidian API, do you mind sharing some tips about how to do it throught Editor? :)

This comment has been minimized.

Copy link
@lishid

lishid Nov 4, 2021

Author Collaborator

I'd recommend heading over to our discord server's #plugin-dev channel to discuss your use-case with other experienced developers. 👍

(Also, I would discourage the use of the "change" event for performance reasons unless there is no other way to achieve your functionality. See if there's any suggestions from other devs on discord)

console.log('codemirror', cm);
});

// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
// 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() {
Expand Down
4 changes: 2 additions & 2 deletions manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
39 changes: 18 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
{
"name": "obsidian-sample-plugin",
"version": "0.12.0",
"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
"main": "main.js",
"scripts": {
"dev": "rollup --config rollup.config.js -w",
"build": "rollup --config rollup.config.js --environment BUILD:production"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"@rollup/plugin-commonjs": "^18.0.0",
"@rollup/plugin-node-resolve": "^11.2.1",
"@rollup/plugin-typescript": "^8.2.1",
"@types/node": "^14.14.37",
"obsidian": "^0.12.0",
"rollup": "^2.32.1",
"tslib": "^2.2.0",
"typescript": "^4.2.4"
}
"name": "obsidian-sample-plugin",
"version": "0.12.0",
"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
"main": "main.js",
"scripts": {
"dev": "esbuild main.ts --bundle --external:obsidian --outdir=. --target=es2016 --format=cjs --sourcemap=inline --watch",
"build": "esbuild main.ts --bundle --external:obsidian --outdir=. --target=es2016 --format=cjs"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"@types/node": "^16.11.1",
"esbuild": "0.13.8",
"obsidian": "^0.12.17",
"tslib": "2.3.1",
"typescript": "4.4.4"
}
}
30 changes: 0 additions & 30 deletions rollup.config.js

This file was deleted.

2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"inlineSourceMap": true,
"inlineSources": true,
"module": "ESNext",
"target": "es6",
"target": "ES6",
"allowJs": true,
"noImplicitAny": true,
"moduleResolution": "node",
Expand Down

0 comments on commit 3afc9d7

Please sign in to comment.