Getting Started

This guide will walk you through creating your first Vandrite plugin.

Prerequisites

Before you begin, make sure you have:

Node.js (v22 or higher)
npm or yarn
Basic TypeScript/JavaScript knowledge

Installation

Install the plugin API package:

npm install @vandrite/plugin-api

Creating Your First Plugin

Step 1: Create Plugin Files

Create a new folder for your plugin with the following structure:

my-plugin/
├── manifest.json
├── main.ts
├── package.json
└── tsconfig.json

Step 2: Configure package.json

package.json

{
  "name": "my-vandrite-plugin",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "@vandrite/plugin-api": "^1.0.0",
    "typescript": "^5.0.0"
  }
}

Step 3: Configure TypeScript

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "lib": ["ES2020", "DOM"],
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["*.ts"]
}

Step 4: Create the Manifest

manifest.json

{
  "id": "my-plugin",
  "name": "My First Plugin",
  "version": "1.0.0",
  "description": "A sample Vandrite plugin",
  "author": "Your Name",
  "minAppVersion": "0.1.0"
}

Learn more about manifest configuration in the Plugin Manifest guide.

Step 5: Write Your Plugin

main.ts

import { Plugin, PluginManifest } from "@vandrite/plugin-api";

export default class MyPlugin extends Plugin {
  async onload() {
    console.log("My plugin loaded!");

    // Add a command to the command palette
    this.addCommand({
      id: "my-plugin:greet",
      name: "Say Hello",
      callback: () => {
        this.app.events.trigger("notice", "Hello from My Plugin!");
      },
    });

    // Listen to events
    const ref = this.app.events.on("file-open", (file) => {
      console.log("File opened:", file.path);
    });
    this.registerEvent(ref);
  }

  onunload() {
    console.log("My plugin unloaded!");
  }
}