From f8a13400b7cbf8f548a2eaafeb9bf7b74446117f Mon Sep 17 00:00:00 2001 From: Xu Quan Date: Sun, 29 Dec 2024 22:47:43 +0800 Subject: [PATCH] refactor: separate components and rename plugin --- README.md | 95 +--------------------------------------------- manifest.json | 9 ++--- package-lock.json | 2 +- package.json | 4 +- src/Modal.tsx | 17 +++++++++ src/SettingTab.tsx | 30 +++++++++++++++ src/main.ts | 66 +++++--------------------------- src/settings.ts | 7 ++++ tsconfig.json | 38 ++++++++----------- 9 files changed, 87 insertions(+), 181 deletions(-) create mode 100644 src/Modal.tsx create mode 100644 src/SettingTab.tsx diff --git a/README.md b/README.md index c773152..93135b9 100644 --- a/README.md +++ b/README.md @@ -1,94 +1 @@ -# Obsidian Sample Plugin - -This is a sample plugin for Obsidian (https://obsidian.md). - -This project uses TypeScript to provide type checking and documentation. -The repo depends on the latest plugin API (obsidian.d.ts) in TypeScript Definition format, which contains TSDoc comments describing what it does. - -This sample plugin demonstrates some of the basic functionality the plugin API can do. -- Adds a ribbon icon, which shows a Notice when clicked. -- Adds a command "Open Sample Modal" which opens a Modal. -- Adds a plugin setting tab to the settings page. -- Registers a global click event and output 'click' to the console. -- Registers a global interval which logs 'setInterval' to the console. - -## First time developing plugins? - -Quick starting guide for new plugin devs: - -- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with. -- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it). -- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder. -- Install NodeJS, then run `npm i` in the command line under your repo folder. -- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`. -- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`. -- Reload Obsidian to load the new version of your plugin. -- Enable plugin in settings window. -- For updates to the Obsidian API run `npm update` in the command line under your repo folder. - -## Releasing new releases - -- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release. -- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible. -- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases -- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release. -- Publish the release. - -> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`. -> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json` - -## Adding your plugin to the community plugin list - -- Check the [plugin guidelines](https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines). -- Publish an initial version. -- Make sure you have a `README.md` file in the root of your repo. -- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin. - -## How to use - -- Clone this repo. -- Make sure your NodeJS is at least v16 (`node --version`). -- `npm i` or `yarn` to install dependencies. -- `npm run dev` to start compilation in watch mode. - -## Manually installing the plugin - -- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`. - -## Improve code quality with eslint (optional) -- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code. -- To use eslint with this project, make sure to install eslint from terminal: - - `npm install -g eslint` -- To use eslint to analyze this project use this command: - - `eslint main.ts` - - eslint will then create a report with suggestions for code improvement by file and line number. -- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder: - - `eslint .\src\` - -## Funding URL - -You can include funding URLs where people who use your plugin can financially support it. - -The simple way is to set the `fundingUrl` field to your link in your `manifest.json` file: - -```json -{ - "fundingUrl": "https://buymeacoffee.com" -} -``` - -If you have multiple URLs, you can also do: - -```json -{ - "fundingUrl": { - "Buy Me a Coffee": "https://buymeacoffee.com", - "GitHub Sponsor": "https://github.com/sponsors", - "Patreon": "https://www.patreon.com/" - } -} -``` - -## API Documentation - -See https://github.com/obsidianmd/obsidian-api +# Apple Style Notes Plugin diff --git a/manifest.json b/manifest.json index dfa940e..1391441 100644 --- a/manifest.json +++ b/manifest.json @@ -1,11 +1,10 @@ { - "id": "sample-plugin", - "name": "Sample Plugin", + "id": "apple-style-notes-plugin", + "name": "Apple Style Notes Plugin", "version": "1.0.0", "minAppVersion": "0.15.0", "description": "Demonstrates some of the capabilities of the Obsidian API.", - "author": "Obsidian", - "authorUrl": "https://obsidian.md", - "fundingUrl": "https://obsidian.md/pricing", + "author": "Xu Quan", + "authorUrl": "https://xuquan.site/", "isDesktopOnly": false } diff --git a/package-lock.json b/package-lock.json index 6ef1870..6280584 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,7 @@ "requires": true, "packages": { "": { - "name": "obsidian-sample-plugin", + "name": "apple-style-notes-plugin", "version": "1.0.0", "license": "MIT", "devDependencies": { diff --git a/package.json b/package.json index 6a00766..0cf1604 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "obsidian-sample-plugin", + "name": "apple-style-notes-plugin", "version": "1.0.0", - "description": "This is a sample plugin for Obsidian (https://obsidian.md)", + "description": "This is an Obsidian plugin", "main": "main.js", "scripts": { "dev": "node esbuild.config.mjs", diff --git a/src/Modal.tsx b/src/Modal.tsx new file mode 100644 index 0000000..1eaee12 --- /dev/null +++ b/src/Modal.tsx @@ -0,0 +1,17 @@ +import { App, Modal } from "obsidian"; + +export class PluginModal extends Modal { + constructor(app: App) { + super(app); + } + + onOpen() { + const { contentEl } = this; + contentEl.setText("Woah!"); + } + + onClose() { + const { contentEl } = this; + contentEl.empty(); + } +} diff --git a/src/SettingTab.tsx b/src/SettingTab.tsx new file mode 100644 index 0000000..a8de99a --- /dev/null +++ b/src/SettingTab.tsx @@ -0,0 +1,30 @@ +import { App, PluginSettingTab, Setting } from "obsidian"; +import AppleStyleNotesPlugin from "./main"; + +export class SettingTab extends PluginSettingTab { + plugin: AppleStyleNotesPlugin; + + constructor(app: App, plugin: AppleStyleNotesPlugin) { + super(app, plugin); + this.plugin = plugin; + } + + display(): void { + const { containerEl } = this; + + containerEl.empty(); + + new Setting(containerEl) + .setName("Setting #1") + .setDesc("It's a secret") + .addText((text) => + text + .setPlaceholder("Enter your secret") + .setValue(this.plugin.settings.mySetting) + .onChange(async (value) => { + this.plugin.settings.mySetting = value; + await this.plugin.saveSettings(); + }) + ); + } +} diff --git a/src/main.ts b/src/main.ts index fab5df7..97a4823 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,17 +1,11 @@ -import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian'; +import { Editor, MarkdownView, Notice, Plugin } from "obsidian"; -// Remember to rename these classes and interfaces! +import { PluginModal } from "./Modal"; +import { SettingTab } from "./SettingTab"; +import { AppleStyleNotesPluginSettings, DEFAULT_SETTINGS } from "./settings"; -interface MyPluginSettings { - mySetting: string; -} - -const DEFAULT_SETTINGS: MyPluginSettings = { - mySetting: 'default' -} - -export default class MyPlugin extends Plugin { - settings: MyPluginSettings; +export default class AppleStyleNotesPlugin extends Plugin { + settings: AppleStyleNotesPluginSettings; async onload() { console.log("sample plugin onload"); @@ -35,7 +29,7 @@ export default class MyPlugin extends Plugin { id: 'open-sample-modal-simple', name: 'Open sample modal (simple)', callback: () => { - new SampleModal(this.app).open(); + new PluginModal(this.app).open(); } }); // This adds an editor command that can perform some operation on the current editor instance @@ -58,7 +52,7 @@ export default class MyPlugin extends Plugin { // 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(); + new PluginModal(this.app).open(); } // This command will only show up in Command Palette when the check function returns true @@ -68,7 +62,7 @@ export default class MyPlugin extends Plugin { }); // This adds a settings tab so the user can configure various aspects of the plugin - this.addSettingTab(new SampleSettingTab(this.app, this)); + this.addSettingTab(new SettingTab(this.app, this)); // 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. @@ -92,45 +86,3 @@ export default class MyPlugin extends Plugin { await this.saveData(this.settings); } } - -class SampleModal extends Modal { - constructor(app: App) { - super(app); - } - - onOpen() { - const {contentEl} = this; - contentEl.setText('Woah!'); - } - - onClose() { - const {contentEl} = this; - contentEl.empty(); - } -} - -class SampleSettingTab extends PluginSettingTab { - plugin: MyPlugin; - - constructor(app: App, plugin: MyPlugin) { - super(app, plugin); - this.plugin = plugin; - } - - display(): void { - const {containerEl} = this; - - containerEl.empty(); - - new Setting(containerEl) - .setName('Setting #1') - .setDesc('It\'s a secret') - .addText(text => text - .setPlaceholder('Enter your secret') - .setValue(this.plugin.settings.mySetting) - .onChange(async (value) => { - this.plugin.settings.mySetting = value; - await this.plugin.saveSettings(); - })); - } -} diff --git a/src/settings.ts b/src/settings.ts index e69de29..2c463b5 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -0,0 +1,7 @@ +export interface AppleStyleNotesPluginSettings { + mySetting: string; +} + +export const DEFAULT_SETTINGS: AppleStyleNotesPluginSettings = { + mySetting: "default", +}; diff --git a/tsconfig.json b/tsconfig.json index c44b729..1d53216 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,24 +1,18 @@ { - "compilerOptions": { - "baseUrl": ".", - "inlineSourceMap": true, - "inlineSources": true, - "module": "ESNext", - "target": "ES6", - "allowJs": true, - "noImplicitAny": true, - "moduleResolution": "node", - "importHelpers": true, - "isolatedModules": true, - "strictNullChecks": true, - "lib": [ - "DOM", - "ES5", - "ES6", - "ES7" - ] - }, - "include": [ - "**/*.ts" - ] + "compilerOptions": { + "baseUrl": ".", + "inlineSourceMap": true, + "inlineSources": true, + "module": "ESNext", + "target": "ES6", + "allowJs": true, + "noImplicitAny": true, + "moduleResolution": "node", + "importHelpers": true, + "isolatedModules": true, + "strictNullChecks": true, + "lib": ["DOM", "ES5", "ES6", "ES7"], + "jsx": "react-jsx" + }, + "include": ["**/*.ts"] }