chore: update README

readme.md

@@ -207,87 +207,18 @@ Create a folder in `plugins/YOUR-PLUGIN-NAME`:
 ```typescript
 import style from './style.css?inline'; // import style as inline
 
-import { createPluginBuilder } from '../utils/builder';
+import { createPlugin } from '@/utils';
 
-const builder = createPluginBuilder('plugin-id', {
+export default createPlugin({
   name: 'Plugin Label',
   restartNeeded: true, // if value is true, ytmusic show restart dialog
   config: {
     enabled: false,
   }, // your custom config
-  styles: [style], // your custom style
-});
-
-export default builder;
-
-// below code must be included in `index.ts` for type checking
-declare global {
-  interface PluginBuilderList {
-    [builder.id]: typeof builder;
-  }
-}
-```
-
-- `main.ts` (optional): executed in the main process
-```typescript
-import builder from './index';
-
-export default builder.createMain((context) => {
-  return {
-    onLoad(win: BrowserWindow) {
-      win.maximize();
-
-      context.handle('some-event', () => {
-        return 'hello';
-      });
-    },
-    onConfigChange(newConfig) { /* ... */ },
-    onUnload(win) { /* ... */ },
-  };
-});
-```
-
-- `renderer.ts` (optional): executed in the renderer process
-```typescript
-import builder from './index';
-
-import type { YoutubePlayer } from '../../types/youtube-player';
-
-export default builder.createRenderer((context) => {
-  return {
-    async onLoad() {
-      console.log(await context.invoke('some-event'));
-    },
-    onPlayerApiReady(api: YoutubePlayer) {
-      context.setConfig({ myConfig: api.getVolume() });
-    },
-    onConfigChange(newConfig) { /* ... */ },
-    onUnload() { /* ... */ },
-  };
-});
-```
-
-- `preload.ts` (optional): executed in the renderer process before `renderer.ts`
-```typescript
-import builder from './index';
-
-export default builder.createPreload(({ getConfig }) => ({
-  async onLoad() {
+  stylesheets: [style], // your custom style,
+  menu: async ({ getConfig, setConfig }) => {
+    // All *Config methods are wrapped Promise<T>
     const config = await getConfig();
-
-    // some logic...
-  },
-  async onConfigChange(newConfig) {}
-}));
-```
-
-- `menu.ts` (optional): executed in the main process for registering menu
-```typescript
-import builder from './index';
-
-export default builder.createMenu(async ({ getConfig, setConfig }) => {
-  const config = await getConfig();
-
     return [
       {
         label: 'menu',
@@ -298,9 +229,43 @@ export default builder.createMenu(async ({ getConfig, setConfig }) => {
           click() {
             setConfig({ value });
           },
-      }))
+        })),
+      },
+    ];
+  },
+  backend: {
+    start({ window, ipc }) {
+      window.maximize();
+
+      // you can communicate with renderer plugin
+      ipc.handle('some-event', () => {
+        return 'hello';
+      });
+    },
+    // it fired when config changed
+    onConfigChange(newConfig) { /* ... */ },
+    // you can also clean up plugin
+    stop(context) { /* ... */ },
+  },
+  renderer: {
+    async start(context) {
+      console.log(await context.ipc.invoke('some-event'));
+    },
+    // Only renderer available hook
+    onPlayerApiReady(api: YoutubePlayer, context: RendererContext) {
+      // set plugin config easily
+      context.setConfig({ myConfig: api.getVolume() });
+    },
+    onConfigChange(newConfig) { /* ... */ },
+    stop(_context) { /* ... */ },
+  },
+  preload: {
+    async start({ getConfig }) {
+      const config = await getConfig();
+    },
+    onConfigChange(newConfig) {},
+    stop(_context) {},
   },
-  ] satisfies Electron.MenuItemConstructorOptions[];
 });
 ```
 
@@ -312,31 +277,34 @@ export default builder.createMenu(async ({ getConfig, setConfig }) => {
 // index.ts
 import style from './style.css?inline'; // import style as inline
 
-import { createPluginBuilder } from '../utils/builder';
+import { createPlugin } from '@/utils';
 
-const builder = createPluginBuilder('plugin-id', {
+const builder = createPlugin({
   name: 'Plugin Label',
   restartNeeded: true, // if value is true, ytmusic show restart dialog
   config: {
     enabled: false,
   }, // your custom config
-  styles: [style], // your custom style
+  stylesheets: [style], // your custom style
+  renderer() {} // define renderer hook
 });
 ```
 
 - If you want to change the HTML:
 
 ```typescript
-// renderer.ts
-import builder from './index';
+import { createPlugin } from '@/utils';
 
-export default builder.createRenderer((context) => {
-  return {
-    async onLoad() {
+const builder = createPlugin({
+  name: 'Plugin Label',
+  restartNeeded: true, // if value is true, ytmusic show restart dialog
+  config: {
+    enabled: false,
+  }, // your custom config
+  renderer() {
     // Remove the login button
     document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
-    },
-  };
+  } // define renderer hook
 });
 ```