feat: add types for the plugin API

apps/example-plugin/src/plugin.ts

@@ -1,13 +1,3 @@
-/* eslint-disable */
-
-export declare global {
-  declare namespace globalThis {
-    export const penpot = {
-      ui: {},
-    };
-  }
-}
-
 penpot.log('Hello from plugin');
 
 penpot.ui.open('Plugin name', 'http://localhost:4201', {
@@ -15,7 +5,7 @@ penpot.ui.open('Plugin name', 'http://localhost:4201', {
   height: 600,
 });
 
-penpot.ui.onMessage((message) => {
+penpot.ui.onMessage<{ content: string }>((message) => {
   if (message.content === 'ping') {
     penpot.log('ping received');
     penpot.ui.sendMessage({ type: 'pingpong', content: 'pong' });

apps/example-plugin/tsconfig.app.json

@@ -5,5 +5,5 @@
     "types": ["node"]
   },
   "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "../../libs/plugins-runtime/src/lib/index.d.ts"]
 }

apps/rpc-api/src/app/routes/root.ts

@@ -6,8 +6,6 @@ export default async function (fastify: FastifyInstance) {
   const apiUrl = process.env.API_URL;
 
   fastify.get('/get-profile', function () {
-    console.log('sdfdsf');
-
     return fetch(`${apiUrl}/get-profile`, {
       method: 'GET',
       headers: {

docs/create-api.md

@@ -12,3 +12,5 @@ Try to use `zod` to validate the input an output, for example:
     });
 }
 ```
+
+Update `/libs/plugins-runtime/src/lib/api/index.d.ts`.

docs/create-plugin.md

@@ -9,7 +9,7 @@ Create a manifes.json in /public
 }
 ```
 
-Add to the example vite.config.ts
+Add to the example `vite.config.ts`
 
 ```json
 build: {
@@ -25,6 +25,12 @@ build: {
 }
 ```
 
+Add to `tsconfig.app.json`
+
+```json
+  "include": ["src/**/*.ts", "../../libs/plugins-runtime/src/lib/index.d.ts"]
+```
+
 Run static server `npx nx run example-plugin:serve-static --port 4201`
 
 Go to penpot and load the plugin.

libs/plugins-runtime/src/lib/api/index.ts

@@ -62,7 +62,7 @@ export function createApi() {
     modal = null;
   };
 
-  const penpot = {
+  const penpot: Penpot = {
     ui: {
       open: (name: string, url: string, options: OpenUIOptions) => {
         modal = openUIApi(name, url, options);
@@ -78,12 +78,11 @@ export function createApi() {
 
         modal?.dispatchEvent(event);
       },
-      onMessage: z
-        .function()
-        .args(z.function())
-        .implement((callback) => {
-          uiMessagesCallbacks.push(callback);
-        }),
+      onMessage: <T>(callback: (message: T) => void) => {
+        z.function().parse(callback);
+
+        uiMessagesCallbacks.push(callback as Callback<unknown>);
+      },
     },
     log: console.log,
     setTimeout: z
@@ -123,7 +122,7 @@ export function createApi() {
     getSelection: () => {
       return selection;
     },
-  };
+  } as const;
 
   return penpot;
 }

libs/plugins-runtime/src/lib/index.d.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+interface EventsMap {
+  pagechange: { name: string };
+  filechange: any;
+  selectionchange: string;
+}
+
+interface Penpot {
+  ui: {
+    open: (
+      name: string,
+      url: string,
+      options: { width: number; height: number }
+    ) => void;
+    sendMessage: (message: unknown) => void;
+    onMessage: <T>(callback: (message: T) => void) => void;
+  };
+  log: (message: string) => void;
+  setTimeout: (callback: () => void, time: number) => void;
+  closePlugin: () => void;
+  on: <T extends keyof EventsMap>(
+    type: T,
+    callback: (event: EventsMap[T]) => void
+  ) => void;
+  off: (type: string, callback: () => void) => void;
+  getFileState: () => any;
+  getPageState: () => any;
+  getSelection: () => any;
+}
+
+declare namespace globalThis {
+  const penpot: Penpot;
+}