diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index c4e715e55a..e4021568ca 100644
--- a/.github/workflows/tests.yml
+++ b/.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
diff --git a/docker/devenv/docker-compose.yaml b/docker/devenv/docker-compose.yaml
index 322a68985d..349690ec45 100644
--- a/docker/devenv/docker-compose.yaml
+++ b/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
diff --git a/plugins/README.md b/plugins/README.md
index 47fb5dbeeb..e8c7d968fc 100644
--- a/plugins/README.md
+++ b/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.
- It 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.
+- 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. It
+ 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 Create a plugin from scratch
+- contrast-plugin: to run this example check Create
+ a plugin from scratch
- 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.
-Then, run `pnpm run start` to launch the plugins wrapper.
+In the terminal, navigate to the **penpot-plugins** repository and run `pnpm -r
+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).
-To launch a plugin, Open a new terminal tab and run the appropriate startup script for the chosen plugin.
+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). 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 |
-| contrast-plugin | Sample plugin that gives you color contrast information | 4302 | pnpm run start:plugin:contrast | http://localhost:4302/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 |
-| lorem-ipsum-plugin | Generate Lorem ipsum text | 4304 | pnpm run start:plugin:loremipsum | http://localhost:4304/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 |
-| table-plugin | Create or import table | 4306 | pnpm run start:table-plugin | http://localhost:4306/assets/manifest.json |
-| rename-layers-plugin | Rename layers in bulk | 4307 | pnpm run start:plugin:renamelayers | http://localhost:4307/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 |
-| poc-tokens-plugin | Sandbox plugin to test tokens functionality | 4309 | pnpm run start:plugin:poc-tokens | http://localhost:4309/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 | 4202 | pnpm run start:plugin:contrast | http://localhost:4202/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 | 4202 | pnpm run start:plugin:loremipsum | http://localhost:4202/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 | 4202 | pnpm run start:table-plugin | http://localhost:4202/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 | 4202 | pnpm run start:plugin:colors-to-tokens | http://localhost:4202/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
diff --git a/plugins/angular.json b/plugins/angular.json
index 32b3a9897e..2aa33aa16c 100644
--- a/plugins/angular.json
+++ b/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"
diff --git a/plugins/package.json b/plugins/package.json
index aa00026f40..053666f4c2 100644
--- a/plugins/package.json
+++ b/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",