Create Acode Plugin

Overview

Acode opens up a world of possibilities with its extensibility through plugins. In this guide, you'll learn how to create plugins using JavaScript, with the added option of TypeScript. Whether you're customizing your coding experience or adding entirely new features, creating plugins for Acode is a straightforward and rewarding process.

Plugin Structure

Acode plugins follow a specific structure within a zip file. The necessary components include:

1. plugin.json:

   • Contains crucial information about the plugin, such as its name, version, author, and more.

2. main.js:

   • The heart of the plugin, this file contains the actual plugin code.

3. readme.md:

   • Contains the description or about plugin

4. changelogs.md:

   • contains changelogs of your plugin updates.

Plugin Templates

To make your journey smoother, we provide comprehensive plugin templates, which are preconfigured and catering to various use cases:

1. JavaScript Template official : Javascript based template for plugin development and comes preconfigured

2. TypeScript Template official : Typescript template for plugin development and comes with type checking and all typescript feature

Getting Started

1. Clone the Plugin Template:

   • Choose the template that suits your needs and clone it.

2. Customize plugin.json:

   • Open the plugin.json file and update it with your plugin's information.

3. Install the dependency:

   • Install the required dependency by your package manager but first navigate to the plugin template folder by cd acode-template
   npm

   $ npm install

   pnpm

   $ pnpm install

   yarn

   $ yarn install

   bun

   $ bun install

4. Develop Locally:

   • Use given commands to initiate a development server that watches for changes.
   • The development server automatically creates a plugin zip file, ready for installation.
   npm

   $ npm run dev

   pnpm

   $ pnpm dev

   yarn

   $ yarn dev

   bun

   $ bun run dev

   • Or you can build every time manually on changes using(this will build production build):
   npm

   $ npm run build

   pnpm

   $ pnpm build

   yarn

   $ yarn build

   bun

   $ bun run build

5. Install the Plugin:

   • Use the REMOTE option in Acode's plugin manager.
   • This option is available on both sidebar extension tab or on Plugin page from settings.
   • Provide the plugin URL (e.g., http://\<ip\>:3000/dist.zip) when prompted.
   • Or if you are building manually then you can use the Local option in Acode's plugin manager and select the plugin zip

INFO

Development server will only build the zip on file changes

TIP

For local development, start a dev server using npm run dev. In Acode, use the Remote option, either from the sidebar or the plugin page. Enter the server URL, hit Install, and the plugin will be installed.

It's more convenient to manage this from the sidebar. When you install a local plugin(either using url or selecting the zip), Acode will add a reload icon in the Extensions tab of the sidebar. This is useful because the server automatically builds the plugin ZIP when changes are made. Simply press the reload button to apply the latest changes instantly.

This makes plugin development a much smoother experience—previously, it was quite frustrating, but this feature was recently added to improve the workflow.

Building and Publishing

To share your plugin with the Acode community, follow these steps:

1. Bundle for production:

   • Use build command to create a production build. which will be lower in size
   npm

   $ npm run build

   pnpm

   $ pnpm build

   yarn

   $ yarn build

   bun

   $ bun run build

2. Publish:

   • Publish your release build on Acode's official website, making your plugin accessible to the broader community.

   • Tutorial for publishing a plugin : Youtube

Tutorial

• Checkout a small tutorial of 👉 How to create Acode Plugins?

• Tutorial for creating plugin using acode-cli: Here

Customization

Certainly! You have the flexibility to either utilize your own template or start your plugin from scratch. Additionally, you're free to employ alternative bundlers and tools. We'll delve deeper into these customization possibilities in subsequent sections.

Happy coding, and may your plugins bring new dimensions to your Acode experience! 🚀✨