refactor(plugin-types): remove prefix and change some names

libs/plugins-runtime/src/index.ts

@@ -7,7 +7,7 @@ import {
   ɵloadPluginByUrl,
 } from './lib/load-plugin.js';
 
-import type { PenpotContext } from '@penpot/plugin-types';
+import type { Context } from '@penpot/plugin-types';
 
 console.log('%c[PLUGINS] Loading plugin system', 'color: #008d7c');
 
@@ -22,7 +22,7 @@ repairIntrinsics({
 const globalThisAny$ = globalThis as any;
 
 globalThisAny$.initPluginsRuntime = (
-  contextBuilder: (id: string) => PenpotContext
+  contextBuilder: (id: string) => Context
 ) => {
   try {
     console.log('%c[PLUGINS] Initialize runtime', 'color: #008d7c');

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

@@ -1,27 +1,27 @@
 import type {
   Penpot,
   EventsMap,
-  PenpotPage,
+  Page,
-  PenpotShape,
+  Shape,
-  PenpotRectangle,
+  Rectangle,
-  PenpotFrame,
+  Board,
-  PenpotGroup,
+  Group,
-  PenpotViewport,
+  Viewport,
-  PenpotText,
+  Text,
-  PenpotFile,
+  File,
-  PenpotTheme,
+  Theme,
-  PenpotLibraryContext,
+  LibraryContext,
-  PenpotEllipse,
+  Ellipse,
-  PenpotPath,
+  Path,
-  PenpotBoolType,
+  BooleanType,
-  PenpotBool,
+  Boolean,
-  PenpotUser,
+  User,
-  PenpotActiveUser,
+  ActiveUser,
-  PenpotFontsContext,
+  FontsContext,
-  PenpotSvgRaw,
+  SvgRaw,
-  PenpotColor,
+  Color,
-  PenpotColorShapeInfo,
+  ColorShapeInfo,
-  PenpotHistoryContext,
+  HistoryContext,
 } from '@penpot/plugin-types';
 
 import { Permissions } from '../models/manifest.model.js';
@@ -71,36 +71,36 @@ export function createApi(
 
     utils: {
       geometry: {
-        center(shapes: PenpotShape[]) {
+        center(shapes: Shape[]) {
           return (window as any).app.plugins.public_utils.centerShapes(shapes);
         },
       },
       types: {
-        isFrame(shape: PenpotShape): shape is PenpotFrame {
+        isBoard(shape: Shape): shape is Board {
-          return shape.type === 'frame';
+          return shape.type === 'board';
         },
-        isGroup(shape: PenpotShape): shape is PenpotGroup {
+        isGroup(shape: Shape): shape is Group {
           return shape.type === 'group';
         },
-        isMask(shape: PenpotShape): shape is PenpotGroup {
+        isMask(shape: Shape): shape is Group {
           return shape.type === 'group' && shape.isMask();
         },
-        isBool(shape: PenpotShape): shape is PenpotBool {
+        isBool(shape: Shape): shape is Boolean {
-          return shape.type === 'bool';
+          return shape.type === 'boolean';
         },
-        isRectangle(shape: PenpotShape): shape is PenpotRectangle {
+        isRectangle(shape: Shape): shape is Rectangle {
-          return shape.type === 'rect';
+          return shape.type === 'rectangle';
         },
-        isPath(shape: PenpotShape): shape is PenpotPath {
+        isPath(shape: Shape): shape is Path {
           return shape.type === 'path';
         },
-        isText(shape: PenpotShape): shape is PenpotText {
+        isText(shape: Shape): shape is Text {
           return shape.type === 'text';
         },
-        isEllipse(shape: PenpotShape): shape is PenpotEllipse {
+        isEllipse(shape: Shape): shape is Ellipse {
-          return shape.type === 'circle';
+          return shape.type === 'ellipse';
         },
-        isSVG(shape: PenpotShape): shape is PenpotSvgRaw {
+        isSVG(shape: Shape): shape is SvgRaw {
           return shape.type === 'svg-raw';
         },
       },
@@ -133,60 +133,60 @@ export function createApi(
 
     // Penpot State API
 
-    get root(): PenpotShape {
+    get root(): Shape {
       checkPermission('content:read');
       return plugin.context.root;
     },
 
-    get currentPage(): PenpotPage {
+    get currentPage(): Page {
       checkPermission('content:read');
       return plugin.context.currentPage;
     },
 
-    get selection(): PenpotShape[] {
+    get selection(): Shape[] {
       checkPermission('content:read');
       return plugin.context.selection;
     },
 
-    set selection(value: PenpotShape[]) {
+    set selection(value: Shape[]) {
       checkPermission('content:read');
       plugin.context.selection = value;
     },
 
-    get viewport(): PenpotViewport {
+    get viewport(): Viewport {
       return plugin.context.viewport;
     },
 
-    get history(): PenpotHistoryContext {
+    get history(): HistoryContext {
       return plugin.context.history;
     },
 
-    get library(): PenpotLibraryContext {
+    get library(): LibraryContext {
       checkPermission('library:read');
       return plugin.context.library;
     },
 
-    get fonts(): PenpotFontsContext {
+    get fonts(): FontsContext {
       checkPermission('content:read');
       return plugin.context.fonts;
     },
 
-    get currentUser(): PenpotUser {
+    get currentUser(): User {
       checkPermission('user:read');
       return plugin.context.currentUser;
     },
 
-    get activeUsers(): PenpotActiveUser[] {
+    get activeUsers(): ActiveUser[] {
       checkPermission('user:read');
       return plugin.context.activeUsers;
     },
 
-    getFile(): PenpotFile | null {
+    getFile(): File | null {
       checkPermission('content:read');
       return plugin.context.getFile();
     },
 
-    getPage(): PenpotPage | null {
+    getPage(): Page | null {
       checkPermission('content:read');
       return plugin.context.getPage();
     },
@@ -196,75 +196,66 @@ export function createApi(
       return plugin.context.getSelected();
     },
 
-    getSelectedShapes(): PenpotShape[] {
+    getSelectedShapes(): Shape[] {
       checkPermission('content:read');
       return plugin.context.getSelectedShapes();
     },
 
-    shapesColors(
+    shapesColors(shapes: Shape[]): (Color & ColorShapeInfo)[] {
-      shapes: PenpotShape[]
-    ): (PenpotColor & PenpotColorShapeInfo)[] {
       checkPermission('content:read');
       return plugin.context.shapesColors(shapes);
     },
 
-    replaceColor(
+    replaceColor(shapes: Shape[], oldColor: Color, newColor: Color) {
-      shapes: PenpotShape[],
-      oldColor: PenpotColor,
-      newColor: PenpotColor
-    ) {
       checkPermission('content:write');
       return plugin.context.replaceColor(shapes, oldColor, newColor);
     },
 
-    getTheme(): PenpotTheme {
+    getTheme(): Theme {
       return plugin.context.getTheme();
     },
 
-    createFrame(): PenpotFrame {
+    createBoard(): Board {
       checkPermission('content:write');
-      return plugin.context.createFrame();
+      return plugin.context.createBoard();
     },
 
-    createRectangle(): PenpotRectangle {
+    createRectangle(): Rectangle {
       checkPermission('content:write');
       return plugin.context.createRectangle();
     },
 
-    createEllipse(): PenpotEllipse {
+    createEllipse(): Ellipse {
       checkPermission('content:write');
       return plugin.context.createEllipse();
     },
 
-    createText(text: string): PenpotText | null {
+    createText(text: string): Text | null {
       checkPermission('content:write');
       return plugin.context.createText(text);
     },
 
-    createPath(): PenpotPath {
+    createPath(): Path {
       checkPermission('content:write');
       return plugin.context.createPath();
     },
 
-    createBoolean(
+    createBoolean(boolType: BooleanType, shapes: Shape[]): Boolean | null {
-      boolType: PenpotBoolType,
-      shapes: PenpotShape[]
-    ): PenpotBool | null {
       checkPermission('content:write');
       return plugin.context.createBoolean(boolType, shapes);
     },
 
-    createShapeFromSvg(svgString: string): PenpotGroup | null {
+    createShapeFromSvg(svgString: string): Group | null {
       checkPermission('content:write');
       return plugin.context.createShapeFromSvg(svgString);
     },
 
-    group(shapes: PenpotShape[]): PenpotGroup | null {
+    group(shapes: Shape[]): Group | null {
       checkPermission('content:write');
       return plugin.context.group(shapes);
     },
 
-    ungroup(group: PenpotGroup, ...other: PenpotGroup[]): void {
+    ungroup(group: Group, ...other: Group[]): void {
       checkPermission('content:write');
       plugin.context.ungroup(group, ...other);
     },
@@ -280,7 +271,7 @@ export function createApi(
     },
 
     generateMarkup(
-      shapes: PenpotShape[],
+      shapes: Shape[],
       options?: { type?: 'html' | 'svg' }
     ): string {
       checkPermission('content:read');
@@ -288,7 +279,7 @@ export function createApi(
     },
 
     generateStyle(
-      shapes: PenpotShape[],
+      shapes: Shape[],
       options?: {
         type?: 'css';
         withPrelude?: boolean;
@@ -304,12 +295,12 @@ export function createApi(
       plugin.context.openViewer();
     },
 
-    createPage(): PenpotPage {
+    createPage(): Page {
       checkPermission('content:write');
       return plugin.context.createPage();
     },
 
-    openPage(page: PenpotPage): void {
+    openPage(page: Page): void {
       checkPermission('content:read');
       plugin.context.openPage(page);
     },

libs/plugins-runtime/src/lib/api/plugin-api.spec.ts

@@ -1,6 +1,6 @@
 import { expect, describe, vi } from 'vitest';
 import { createApi } from './index.js';
-import type { PenpotFile } from '@penpot/plugin-types';
+import type { File } from '@penpot/plugin-types';
 
 const mockUrl = 'http://fake.fake/';
 
@@ -107,7 +107,7 @@ describe('Plugin api', () => {
         name: 'test',
         id: '123',
         revn: 0,
-      } as PenpotFile;
+    } as File;
 
       pluginManager.context.getFile.mockImplementation(() => exampleFile);
 

libs/plugins-runtime/src/lib/create-modal.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { createModal } from './create-modal.js';
-import type { PenpotTheme } from '@penpot/plugin-types';
+import type { Theme } from '@penpot/plugin-types';
 import type { OpenUIOptions } from './models/open-ui-options.model';
 import type { PluginModalElement } from './modal/plugin-modal';
 
@@ -27,7 +27,7 @@ describe('createModal', () => {
   });
 
   it('should create and configure a modal element', () => {
-    const theme: PenpotTheme = 'light';
+    const theme: Theme = 'light';
     const options: OpenUIOptions = { width: 400, height: 600 };
 
     const modal = createModal(
@@ -61,7 +61,7 @@ describe('createModal', () => {
   });
 
   it('should apply default dimensions if options are not provided', () => {
-    const theme: PenpotTheme = 'light';
+    const theme: Theme = 'light';
 
     const modal = createModal('Test Modal', 'https://example.com', theme);
 
@@ -70,7 +70,7 @@ describe('createModal', () => {
   });
 
   it('should limit modal dimensions to the window size', () => {
-    const theme: PenpotTheme = 'light';
+    const theme: Theme = 'light';
     const options: OpenUIOptions = { width: 2000, height: 2000 };
 
     window.innerWidth = 1000;
@@ -97,7 +97,7 @@ describe('createModal', () => {
   });
 
   it('should apply minimum dimensions to the modal', () => {
-    const theme: PenpotTheme = 'light';
+    const theme: Theme = 'light';
     const options: OpenUIOptions = { width: 100, height: 100 };
 
     const modal = createModal(

libs/plugins-runtime/src/lib/create-modal.ts

@@ -1,11 +1,11 @@
 import type { OpenUIOptions } from './models/open-ui-options.model.js';
-import type { PenpotTheme } from '@penpot/plugin-types';
+import type { Theme } from '@penpot/plugin-types';
 import type { PluginModalElement } from './modal/plugin-modal.js';
 
 export function createModal(
   name: string,
   url: string,
-  theme: PenpotTheme,
+  theme: Theme,
   options?: OpenUIOptions
 ) {
   const modal = document.createElement('plugin-modal') as PluginModalElement;

libs/plugins-runtime/src/lib/load-plugin.spec.ts

@@ -8,7 +8,7 @@ import {
 } from './load-plugin';
 import { loadManifest } from './parse-manifest';
 import { createPlugin } from './create-plugin';
-import type { PenpotContext } from '@penpot/plugin-types';
+import type { Context } from '@penpot/plugin-types';
 import type { Manifest } from './models/manifest.model.js';
 
 vi.mock('./parse-manifest', () => ({
@@ -20,7 +20,7 @@ vi.mock('./create-plugin', () => ({
 }));
 
 describe('plugin-loader', () => {
-  let mockContext: PenpotContext;
+  let mockContext: Context;
   let manifest: Manifest;
   let mockPluginApi: Awaited<ReturnType<typeof createPlugin>>;
   let mockClose: ReturnType<typeof vi.fn>;
@@ -51,7 +51,7 @@ describe('plugin-loader', () => {
     mockContext = {
       addListener: vi.fn(),
       removeListener: vi.fn(),
-    } as unknown as PenpotContext;
+    } as unknown as Context;
 
     vi.mocked(createPlugin).mockResolvedValue(mockPluginApi);
     setContextBuilder(() => mockContext);

libs/plugins-runtime/src/lib/load-plugin.ts

@@ -1,4 +1,4 @@
-import type { PenpotContext } from '@penpot/plugin-types';
+import type { Context } from '@penpot/plugin-types';
 
 import { loadManifest } from './parse-manifest.js';
 import { Manifest } from './models/manifest.model.js';
@@ -6,7 +6,7 @@ import { createPlugin } from './create-plugin.js';
 
 let plugins: Awaited<ReturnType<typeof createPlugin>>[] = [];
 
-export type ContextBuilder = (id: string) => PenpotContext;
+export type ContextBuilder = (id: string) => Context;
 
 let contextBuilder: ContextBuilder | null = null;
 

libs/plugins-runtime/src/lib/modal/plugin-modal.ts

@@ -1,7 +1,7 @@
 const closeSvg = `
 <svg width="16"  height="16"xmlns="http://www.w3.org/2000/svg" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997" class="fills"/><g class="strokes"><path d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>`;
 
-import type { PenpotTheme } from '@penpot/plugin-types';
+import type { Theme } from '@penpot/plugin-types';
 import { dragHandler } from '../drag-handler.js';
 import modalCss from './plugin.modal.css?inline';
 
@@ -14,7 +14,7 @@ export class PluginModalElement extends HTMLElement {
   #wrapper: HTMLElement | null = null;
   #dragEvents: ReturnType<typeof dragHandler> | null = null;
 
-  setTheme(theme: PenpotTheme) {
+  setTheme(theme: Theme) {
     if (this.#wrapper) {
       this.#wrapper.setAttribute('data-theme', theme);
     }