✨ Make plugins devserver to be able run inside devenv

.github/workflows/tests.yml

@@ -87,7 +87,11 @@ jobs:
 
       - name: Build runtime
         working-directory: ./plugins
-        run: pnpm run build
+        run: pnpm run build:runtime
+
+      - name: Build doc
+        working-directory: ./plugins
+        run: pnpm run build:doc
 
       - name: Build plugins
         working-directory: ./plugins

docker/devenv/docker-compose.yaml

@@ -51,6 +51,11 @@ services:
       - 4401:4401
       - 4402:4402
 
+      # Plugins
+      - 4200:4200
+      - 4201:4201
+      - 4202:4202
+
     environment:
       - EXTERNAL_UID=${CURRENT_USER_ID}
       # SMTP setup

plugins/README.md

@@ -2,19 +2,25 @@
 
 ## What can you find here?
 
-We've been working in an MVP to allow users to develop their own plugins and use the existing ones.
+We've been working in an MVP to allow users to develop their own plugins and use
+the existing ones.
 
 There are 2 important folders to keep an eye on: `apps` and `libs`.
 
 In the `libs` folder you'll find:
 
-- plugins-runtime: here you'll find the code that initializes the plugin and sets a few listeners to know when the penpot page/file/selection changes.
+- plugins-runtime: here you'll find the code that initializes the plugin and
-  It has its own [README](libs/plugins-runtime/README.md).
+  sets a few listeners to know when the penpot page/file/selection changes. It
-- plugins-styles: basic css library with penpot styles in case you need help for styling your plugins.
+  has its own [README](libs/plugins-runtime/README.md).
+- plugins-styles: basic css library with penpot styles in case you
+  need help for styling your plugins.
 
-In the `apps` folder you'll find some examples that use the libraries mentioned above.
+In the `apps` folder you'll find some examples that use the libraries mentioned
+above.
 
-- contrast-plugin: to run this example check <a href="#create-a-plugin-from-scratch-or-run-the-examples-from-the-apps-folder">Create a plugin from scratch</a>
+- contrast-plugin: to run this example check <a
+  href="#create-a-plugin-from-scratch-or-run-the-examples-from-the-apps-folder">Create
+  a plugin from scratch</a>
 
 - example-styles: to run this example you should run
 
@@ -26,13 +32,19 @@ Open in your browser: `http://localhost:4202/`
 
 ## Run Penpot sample plugins
 
-This guide will help you launch a Penpot plugin from the penpot-plugins repository. Before proceeding, ensure that you have Penpot running locally by following the [setup instructions](https://help.penpot.app/technical-guide/developer/devenv/).
+This guide will help you launch a Penpot plugin from the penpot-plugins
+repository. Before proceeding, ensure that you have Penpot running locally by
+following the [setup
+instructions](https://help.penpot.app/technical-guide/developer/devenv/).
 
-In the terminal, navigate to the **penpot-plugins** repository and run `pnpm install` to install the required dependencies.
+In the terminal, navigate to the **penpot-plugins** repository and run `pnpm -r
-Then, run `pnpm run start` to launch the plugins wrapper.
+install` to install the required dependencies. Then, run `pnpm run start` to
+launch the plugins runtime.
 
-After installing the dependencies, choose a plugin to launch. You can either run one of the provided examples or create your own (see "Creating a plugin from scratch" below).
+After installing the dependencies, choose a plugin to launch. You can either run
-To launch a plugin, Open a new terminal tab and run the appropriate startup script for the chosen plugin.
+one of the provided examples or create your own (see "Creating a plugin from
+scratch" below). To launch a plugin, Open a new terminal tab and run the
+appropriate startup script for the chosen plugin.
 
 For instance, to launch the Contrast plugin, use the following command:
 
@@ -41,23 +53,25 @@ For instance, to launch the Contrast plugin, use the following command:
 pnpm run start:plugin:contrast
 ```
 
-Finally, open in your browser the specific port. In this specific example would be `http://localhost:4302`
+Finally, open in your browser the specific port. In this specific example would
+be `http://localhost:4302`
 
-A table listing the available plugins and their corresponding startup commands is provided below.
+A table listing the available plugins and their corresponding startup commands
+is provided below.
 
 ## Sample plugins
 
 | Plugin                  | Description                                                 | PORT | Start command                          | Manifest URL                               |
 | ----------------------- | ----------------------------------------------------------- | ---- | -------------------------------------- | ------------------------------------------ |
-| poc-state-plugin        | Sandbox plugin to test new plugins api functionality        | 4301 | pnpm run start:plugin:poc-state        | http://localhost:4301/assets/manifest.json |
+| poc-state-plugin        | Sandbox plugin to test new plugins api functionality        | 4202 | pnpm run start:plugin:poc-state        | http://localhost:4202/assets/manifest.json |
-| contrast-plugin         | Sample plugin that gives you color contrast information     | 4302 | pnpm run start:plugin:contrast         | http://localhost:4302/assets/manifest.json |
+| contrast-plugin         | Sample plugin that gives you color contrast information     | 4202 | pnpm run start:plugin:contrast         | http://localhost:4202/assets/manifest.json |
-| icons-plugin            | Tool to add icons from [Feather](https://feathericons.com/) | 4303 | pnpm run start:plugin:icons            | http://localhost:4303/assets/manifest.json |
+| icons-plugin            | Tool to add icons from [Feather](https://feathericons.com/) | 4202 | pnpm run start:plugin:icons            | http://localhost:4202/assets/manifest.json |
-| lorem-ipsum-plugin      | Generate Lorem ipsum text                                   | 4304 | pnpm run start:plugin:loremipsum       | http://localhost:4304/assets/manifest.json |
+| lorem-ipsum-plugin      | Generate Lorem ipsum text                                   | 4202 | pnpm run start:plugin:loremipsum       | http://localhost:4202/assets/manifest.json |
-| create-palette-plugin   | Creates a board with all the palette colors                 | 4305 | pnpm run start:plugin:palette          | http://localhost:4305/assets/manifest.json |
+| create-palette-plugin   | Creates a board with all the palette colors                 | 4202 | pnpm run start:plugin:palette          | http://localhost:4202/assets/manifest.json |
-| table-plugin            | Create or import table                                      | 4306 | pnpm run start:table-plugin            | http://localhost:4306/assets/manifest.json |
+| table-plugin            | Create or import table                                      | 4202 | pnpm run start:table-plugin            | http://localhost:4202/assets/manifest.json |
-| rename-layers-plugin    | Rename layers in bulk                                       | 4307 | pnpm run start:plugin:renamelayers     | http://localhost:4307/assets/manifest.json |
+| rename-layers-plugin    | Rename layers in bulk                                       | 4202 | pnpm run start:plugin:renamelayers     | http://localhost:4202/assets/manifest.json |
-| colors-to-tokens-plugin | Generate tokens JSON file                                   | 4308 | pnpm run start:plugin:colors-to-tokens | http://localhost:4308/assets/manifest.json |
+| colors-to-tokens-plugin | Generate tokens JSON file                                   | 4202 | pnpm run start:plugin:colors-to-tokens | http://localhost:4202/assets/manifest.json |
-| poc-tokens-plugin       | Sandbox plugin to test tokens functionality                 | 4309 | pnpm run start:plugin:poc-tokens       | http://localhost:4309/assets/manifest.json |
+| poc-tokens-plugin       | Sandbox plugin to test tokens functionality                 | 4202 | pnpm run start:plugin:poc-tokens       | http://localhost:4202/assets/manifest.json |
 
 ## Web Apps
 
@@ -68,7 +82,8 @@ A table listing the available plugins and their corresponding startup commands i
 
 ## Creating a plugin from scratch
 
-If you want to create a new plugin, read the following [README](docs/create-plugin.md)
+If you want to create a new plugin, read the following
+[README](docs/create-plugin.md)
 
 ## License
 

plugins/angular.json

@@ -64,7 +64,7 @@
             "development": {
               "buildTarget": "contrast-plugin:build:development",
               "host": "0.0.0.0",
-              "port": 4302
+              "port": 4202
             }
           },
           "defaultConfiguration": "development"
@@ -132,7 +132,7 @@
             "development": {
               "buildTarget": "icons-plugin:build:development",
               "host": "0.0.0.0",
-              "port": 4303
+              "port": 4202
             }
           },
           "defaultConfiguration": "development"
@@ -202,7 +202,7 @@
             "development": {
               "buildTarget": "lorem-ipsum-plugin:build:development",
               "host": "0.0.0.0",
-              "port": 4304
+              "port": 4202
             }
           },
           "defaultConfiguration": "development"
@@ -270,7 +270,7 @@
             "development": {
               "buildTarget": "table-plugin:build:development",
               "host": "0.0.0.0",
-              "port": 4306
+              "port": 4202
             }
           },
           "defaultConfiguration": "development"
@@ -340,7 +340,7 @@
             "development": {
               "buildTarget": "rename-layers-plugin:build:development",
               "host": "0.0.0.0",
-              "port": 4307
+              "port": 4202
             }
           },
           "defaultConfiguration": "development"
@@ -410,7 +410,7 @@
             "development": {
               "buildTarget": "colors-to-tokens-plugin:build:development",
               "host": "0.0.0.0",
-              "port": 4308
+              "port": 4202
             }
           },
           "defaultConfiguration": "development"
@@ -479,7 +479,7 @@
             "development": {
               "buildTarget": "poc-state-plugin:build:development",
               "host": "0.0.0.0",
-              "port": 4309
+              "port": 4202
             }
           },
           "defaultConfiguration": "development"

plugins/package.json

@@ -8,7 +8,6 @@
     "start": "pnpm run start:app:runtime",
     "start:app:runtime": "concurrently --kill-others --names build,server \"pnpm --filter @penpot/plugins-runtime run build:watch\" \"pnpm --filter @penpot/plugins-runtime run preview\"",
     "start:app:styles-example": "pnpm --filter example-styles dev",
-    "start:plugin:all": "concurrently --kill-others \"pnpm:start:plugin:*(!all)\"",
     "start:plugin:poc-state": "pnpm --filter poc-state-plugin serve",
     "start:plugin:contrast": "pnpm --filter contrast-plugin serve",
     "start:plugin:icons": "pnpm --filter icons-plugin serve",
@@ -18,7 +17,7 @@
     "start:plugin:renamelayers": "pnpm --filter rename-layers-plugin serve",
     "start:plugin:colors-to-tokens": "pnpm --filter colors-to-tokens-plugin serve",
     "start:plugin:poc-tokens": "pnpm --filter poc-tokens serve",
-    "build": "pnpm --filter @penpot/plugins-runtime build",
+    "build:runtime": "pnpm --filter @penpot/plugins-runtime build",
     "build:plugins": "pnpm --filter './apps/*-plugin' --filter '!poc-state-plugin' build",
     "build:styles-example": "pnpm --filter example-styles build",
     "lint": "pnpm -r --parallel lint",