CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-02-12 14:42:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Make plugins devserver to be able run inside devenv

Browse Source
This commit is contained in:
Andrey Antukh
2026-02-09 17:56:04 +01:00
parent 96b682aa12
commit e3dfa69011
5 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.github/workflows/tests.yml vendored
View File

@@ -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

5
docker/devenv/docker-compose.yaml
View File

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

61
plugins/README.md
View File

@@ -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 <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.
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

14
plugins/angular.json
View File

@@ -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"

3
plugins/package.json
View File

@@ -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",