diff --git a/apps/example-plugin/src/plugin.ts b/apps/example-plugin/src/plugin.ts index b1d8b4b..495fd62 100644 --- a/apps/example-plugin/src/plugin.ts +++ b/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' }); diff --git a/apps/example-plugin/tsconfig.app.json b/apps/example-plugin/tsconfig.app.json index 3253fc8..14d797a 100644 --- a/apps/example-plugin/tsconfig.app.json +++ b/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"] } diff --git a/apps/rpc-api/src/app/routes/root.ts b/apps/rpc-api/src/app/routes/root.ts index 98af412..aa15da3 100644 --- a/apps/rpc-api/src/app/routes/root.ts +++ b/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: { diff --git a/docs/create-api.md b/docs/create-api.md index e11848c..8ca7028 100644 --- a/docs/create-api.md +++ b/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`. diff --git a/docs/create-plugin.md b/docs/create-plugin.md index a8f5e7d..b6f52fb 100644 --- a/docs/create-plugin.md +++ b/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. diff --git a/libs/plugins-runtime/src/lib/api/index.ts b/libs/plugins-runtime/src/lib/api/index.ts index 07240a8..79159c0 100644 --- a/libs/plugins-runtime/src/lib/api/index.ts +++ b/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: (callback: (message: T) => void) => { + z.function().parse(callback); + + uiMessagesCallbacks.push(callback as Callback); + }, }, log: console.log, setTimeout: z @@ -123,7 +122,7 @@ export function createApi() { getSelection: () => { return selection; }, - }; + } as const; return penpot; } diff --git a/libs/plugins-runtime/src/lib/index.d.ts b/libs/plugins-runtime/src/lib/index.d.ts new file mode 100644 index 0000000..f9dafcc --- /dev/null +++ b/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: (callback: (message: T) => void) => void; + }; + log: (message: string) => void; + setTimeout: (callback: () => void, time: number) => void; + closePlugin: () => void; + on: ( + 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; +}