mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-21 06:02:34 -05:00
feat: simple plugin init
This commit is contained in:
Juanfran
parent
ca91505215
commit
8e7a44c5be
9 changed files with 86 additions and 24 deletions
|
|
@ -52,7 +52,8 @@
|
|||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
"defaultConfiguration": "production",
|
||||
"dependsOn": ["buildPlugin"]
|
||||
},
|
||||
"serve": {
|
||||
"executor": "@angular-devkit/build-angular:dev-server",
|
||||
|
|
@ -61,7 +62,9 @@
|
|||
"buildTarget": "contrast-plugin:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "contrast-plugin:build:development"
|
||||
"buildTarget": "contrast-plugin:build:development",
|
||||
"host": "0.0.0.0",
|
||||
"port": 4302
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
|
|
|||
|
|
@ -75,7 +75,9 @@
|
|||
"buildTarget": "icons-plugin:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "icons-plugin:build:development"
|
||||
"buildTarget": "icons-plugin:build:development",
|
||||
"host": "0.0.0.0",
|
||||
"port": 4303
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@
|
|||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
"defaultConfiguration": "production",
|
||||
"dependsOn": ["buildPlugin"]
|
||||
},
|
||||
"serve": {
|
||||
"executor": "@angular-devkit/build-angular:dev-server",
|
||||
|
|
@ -61,7 +62,9 @@
|
|||
"buildTarget": "lorem-ipsum-plugin:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "lorem-ipsum-plugin:build:development"
|
||||
"buildTarget": "lorem-ipsum-plugin:build:development",
|
||||
"host": "0.0.0.0",
|
||||
"port": 4304
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
|
@ -88,6 +91,6 @@
|
|||
],
|
||||
"deleteOutputPath": false
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,8 @@
|
|||
},
|
||||
"development": {
|
||||
"buildTarget": "poc-state-plugin:build:development",
|
||||
"port": 4301
|
||||
"port": 4301,
|
||||
"host": "0.0.0.0"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@
|
|||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
"defaultConfiguration": "production",
|
||||
"dependsOn": ["buildPlugin"]
|
||||
},
|
||||
"serve": {
|
||||
"executor": "@angular-devkit/build-angular:dev-server",
|
||||
|
|
@ -61,7 +62,8 @@
|
|||
"buildTarget": "table-plugin:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "table-plugin:build:development"
|
||||
"buildTarget": "table-plugin:build:development",
|
||||
"port": 4306
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
|
|
|||
|
|
@ -51,17 +51,29 @@ Now, add the following configuration to your `project.json` to compile the `plug
|
|||
}
|
||||
```
|
||||
|
||||
Also, update `targets.build` with the following code to allow the use of Penpot styles.
|
||||
Also, update `targets.build` with the following code to allow the use of Penpot styles and build the plugin code.
|
||||
|
||||
```json
|
||||
"styles": [
|
||||
"libs/plugins-styles/src/lib/styles.css",
|
||||
"apps/example-plugin/src/styles.css"
|
||||
],
|
||||
"optimization": {
|
||||
"scripts": true,
|
||||
"styles": true,
|
||||
"fonts": false
|
||||
"options": {
|
||||
"styles": [
|
||||
"libs/plugins-styles/src/lib/styles.css",
|
||||
"apps/example-plugin/src/styles.css"
|
||||
],
|
||||
"optimization": {
|
||||
"scripts": true,
|
||||
"styles": true,
|
||||
"fonts": false
|
||||
}
|
||||
},
|
||||
"dependsOn": ["buildPlugin"]
|
||||
```
|
||||
|
||||
Add the default port to the `serve.configurations.development` task:
|
||||
|
||||
```json
|
||||
"development": {
|
||||
// ...
|
||||
"port": 4302,
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -103,7 +115,7 @@ console.log('Hello Plugin');
|
|||
Run this command:
|
||||
|
||||
```sh
|
||||
npx nx run-many --targets=buildPlugin,serve --projects=example-plugin --watch
|
||||
npx nx run example-plugin:init
|
||||
```
|
||||
|
||||
This will run two tasks: `serve`, the usual Angular server, and `buildPlugin`, which will compile the `plugin.ts` file.
|
||||
|
|
@ -116,6 +128,12 @@ Finally, to load your plugin into Penpot, execute the following command in the b
|
|||
ɵloadPluginByUrl('http://localhost:4201/assets/manifest.json');
|
||||
```
|
||||
|
||||
### Step 7: Build plugin
|
||||
|
||||
```
|
||||
npx nx run example-plugin:build
|
||||
```
|
||||
|
||||
### Learn More About Plugin Development
|
||||
|
||||
For more detailed information on plugin development, check out our guides:
|
||||
|
|
|
|||
3
nx.json
3
nx.json
|
|
@ -29,6 +29,9 @@
|
|||
}
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
"plugin": "./tools/plugins/init-plugin.ts"
|
||||
},
|
||||
{
|
||||
"plugin": "@nx/vite/plugin",
|
||||
"options": {
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -8,12 +8,12 @@
|
|||
"start:app:runtime": "concurrently --kill-others --names build,server \"npx nx run plugins-runtime:build --watch --mode development\" \"npx nx run plugins-runtime:preview\"",
|
||||
"start:app:styles-example": "npx nx run example-styles:serve --host 0.0.0.0 --port 4201",
|
||||
"start:plugin:all": "concurrently --kill-others \"npm:start:plugin:*(!all)\"",
|
||||
"start:plugin:poc-state": "npx nx run-many --targets=buildPlugin,serve --projects=poc-state-plugin --watch --host 0.0.0.0 --port 4301",
|
||||
"start:plugin:contrast": "npx nx run-many --targets=buildPlugin,serve --projects=contrast-plugin --watch --host 0.0.0.0 --port 4302",
|
||||
"start:plugin:icons": "npx nx run-many --targets=buildPlugin,serve --projects=icons-plugin --watch --host 0.0.0.0 --port 4303",
|
||||
"start:plugin:loremipsum": "npx nx run-many --targets=buildPlugin,serve --projects=lorem-ipsum-plugin --watch --port 4304",
|
||||
"start:plugin:poc-state": "npx nx run poc-state-plugin:init",
|
||||
"start:plugin:contrast": "npx nx run contrast-plugin:init",
|
||||
"start:plugin:icons": "npx nx run icons-plugin:init",
|
||||
"start:plugin:loremipsum": "npx nx run lorem-ipsum-plugin:init",
|
||||
"start:plugin:palette": "npx nx run create-palette-plugin:build --watch & npx nx run create-palette-plugin:preview",
|
||||
"start:plugin:table": "npx nx run-many --targets=buildPlugin,serve --projects=table-plugin --watch --port 4306",
|
||||
"start:plugin:table": "npx nx run table-plugin:init",
|
||||
"build": "npx nx build plugins-runtime --emptyOutDir=true",
|
||||
"lint": "nx run-many --all --target=lint --parallel",
|
||||
"lint:affected": "npx nx affected --target=lint",
|
||||
|
|
|
|||
30
tools/plugins/init-plugin.ts
Normal file
30
tools/plugins/init-plugin.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { CreateNodes } from '@nx/devkit';
|
||||
import { dirname } from 'path';
|
||||
|
||||
export const createNodes: CreateNodes = [
|
||||
'**/tsconfig.plugin.json',
|
||||
async (configFilePath) => {
|
||||
const projectRoot = dirname(configFilePath);
|
||||
const projectName = projectRoot.split('/').pop();
|
||||
|
||||
if (!projectName) {
|
||||
throw new Error('Could not determine project name');
|
||||
}
|
||||
|
||||
return {
|
||||
projects: {
|
||||
[projectRoot]: {
|
||||
root: projectRoot,
|
||||
targets: {
|
||||
init: {
|
||||
executor: 'nx:run-commands',
|
||||
options: {
|
||||
command: `nx run-many --parallel --targets=buildPlugin,serve --projects=${projectName} --watch`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
];
|
||||
Loading…
Add table
Reference in a new issue