Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-01-06 14:50:21 -05:00
Code Issues Activity

feat: nx plugin to build angular apps

Browse source
This commit is contained in:
Juanfran 2024-06-06 15:42:52 +02:00
parent d17c08332c
commit a1fc329018
11 changed files with 53 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -67,7 +67,7 @@ Open in your browser: `http://localhost:4210/`
| Plugin | Description | PORT | Start command | Manifest URL |
| --------------------- | ----------------------------------------------------------- | ---- | --------------------------------- | ------------------------------------------ |
| poc-state-plugin | Sandbox plugin to test new plugins api functionality | 4301 | npm run start:plugin:poc-state | http://localhost:4301/assets/manifest.json |
| contrast-plugin | Sample plugin that gives you color contrast information | 4302 | npm run start:plugin:contrast | http://localhost:4302/manifest.json |
| contrast-plugin | Sample plugin that gives you color contrast information | 4302 | npm run start:plugin:contrast | http://localhost:4302/assets/manifest.json |
| icons-plugin | Tool to add icons from [Feather](https://feathericons.com/) | 4303 | npm run start:plugin:icons | http://localhost:4303/assets/manifest.json |
| lorem-ipsum-plugin | Generate Lorem ipsum text | 4304 | npm run start:plugin:loremipsum | http://localhost:4304/assets/manifest.json |
| create-palette-plugin | Creates a board with all the palette colors | 4305 | npm run start:plugin:palette | http://localhost:4305/assets/manifest.json |

19
apps/contrast-plugin/project.json
View file

@ -74,23 +74,6 @@
"options": {
"buildTarget": "contrast-plugin:build"
}
},
"buildPlugin": {
"executor": "@nx/esbuild:esbuild",
"outputs": [
"{options.outputPath}"
],
"options": {
"minify": true,
"outputPath": "apps/contrast-plugin/src/assets/",
"main": "apps/contrast-plugin/src/plugin.ts",
"tsConfig": "apps/contrast-plugin/tsconfig.plugin.json",
"generatePackageJson": false,
"format": [
"esm"
],
"deleteOutputPath": false
}
},
}
}
}

13
apps/icons-plugin/project.json
View file

@ -6,19 +6,6 @@
"sourceRoot": "apps/icons-plugin/src",
"tags": ["type:plugin"],
"targets": {
"buildPlugin": {
"executor": "@nx/esbuild:esbuild",
"outputs": ["{options.outputPath}"],
"options": {
"minify": true,
"outputPath": "apps/icons-plugin/src/assets/",
"main": "apps/icons-plugin/src/plugin.ts",
"tsConfig": "apps/icons-plugin/tsconfig.plugin.json",
"generatePackageJson": false,
"format": ["esm"],
"deleteOutputPath": false
}
},
"build": {
"executor": "@angular-devkit/build-angular:application",
"outputs": ["{options.outputPath}"],

17
apps/lorem-ipsum-plugin/project.json
View file

@ -74,23 +74,6 @@
"options": {
"buildTarget": "lorem-ipsum-plugin:build"
}
},
"buildPlugin": {
"executor": "@nx/esbuild:esbuild",
"outputs": [
"{options.outputPath}"
],
"options": {
"minify": true,
"outputPath": "apps/lorem-ipsum-plugin/src/assets/",
"main": "apps/lorem-ipsum-plugin/src/plugin.ts",
"tsConfig": "apps/lorem-ipsum-plugin/tsconfig.plugin.json",
"generatePackageJson": false,
"format": [
"esm"
],
"deleteOutputPath": false
}
}
}
}

17
apps/poc-state-plugin/project.json
View file

@ -6,23 +6,6 @@
"sourceRoot": "apps/poc-state-plugin/src",
"tags": ["type:plugin"],
"targets": {
"buildPlugin": {
"executor": "@nx/esbuild:esbuild",
"outputs": [
"{options.outputPath}"
],
"options": {
"minify": true,
"outputPath": "apps/poc-state-plugin/src/assets/",
"main": "apps/poc-state-plugin/src/plugin.ts",
"tsConfig": "apps/poc-state-plugin/tsconfig.plugin.json",
"generatePackageJson": false,
"format": [
"esm"
],
"deleteOutputPath": false
}
},
"build": {
"executor": "@angular-devkit/build-angular:application",
"outputs": ["{options.outputPath}"],

13
apps/rename-layers-plugin/project.json
View file

@ -74,19 +74,6 @@
"options": {
"buildTarget": "rename-layers-plugin:build"
}
},
"buildPlugin": {
"executor": "@nx/esbuild:esbuild",
"outputs": ["{options.outputPath}"],
"options": {
"minify": true,
"outputPath": "apps/rename-layers-plugin/src/assets/",
"main": "apps/rename-layers-plugin/src/plugin.ts",
"tsConfig": "apps/rename-layers-plugin/tsconfig.plugin.json",
"generatePackageJson": false,
"format": ["esm"],
"deleteOutputPath": false
}
}
}
}

13
apps/table-plugin/project.json
View file

@ -73,19 +73,6 @@
"options": {
"buildTarget": "table-plugin:build"
}
},
"buildPlugin": {
"executor": "@nx/esbuild:esbuild",
"outputs": ["{options.outputPath}"],
"options": {
"minify": true,
"outputPath": "apps/table-plugin/src/assets/",
"main": "apps/table-plugin/src/plugin.ts",
"tsConfig": "apps/table-plugin/tsconfig.plugin.json",
"generatePackageJson": false,
"format": ["esm"],
"deleteOutputPath": false
}
}
}
}

21
docs/create-angular-plugin.md
View file

@ -26,29 +26,10 @@ Next, create a `manifest.json` file inside the `/src/assets` directory. This fil
### Step 3: Update Project Configuration
Now, add the following configuration to your `project.json` to compile the `plugin.ts` file:
Now, add the plugin tag.
```typescript
"tags": ["type:plugin"],
"targets": {
"buildPlugin": {
"executor": "@nx/esbuild:esbuild",
"outputs": [
"{options.outputPath}"
],
"options": {
"minify": true,
"outputPath": "apps/example-plugin/src/assets/",
"main": "apps/example-plugin/src/plugin.ts",
"tsConfig": "apps/example-plugin/tsconfig.plugin.json",
"generatePackageJson": false,
"format": [
"esm"
],
"deleteOutputPath": false
}
},
}
```
Also, update `targets.build` with the following code to allow the use of Penpot styles and build the plugin code.

2
nx.json
View file

@ -30,7 +30,7 @@
},
"plugins": [
{
"plugin": "./tools/plugins/init-plugin.ts"
"plugin": "./tools/plugins/plugin-tasks.ts"
},
{
"plugin": "@nx/vite/plugin",

30
tools/plugins/init-plugin.ts
View file

@ -1,30 +0,0 @@
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`,
},
},
},
},
},
};
},
];

49
tools/plugins/plugin-tasks.ts Normal file
View file

@ -0,0 +1,49 @@
import { CreateNodes, readJsonFile, logger } from '@nx/devkit';
import { dirname } from 'path';
import * as fs from 'fs';
export const createNodes: CreateNodes = [
'**/project.json',
async (configFilePath) => {
const projectConfiguration = readJsonFile(configFilePath);
if (
!projectConfiguration.tags ||
!projectConfiguration?.tags.includes('type:plugin') ||
!projectConfiguration?.targets.build
) {
return {};
}
const projectRoot = dirname(configFilePath);
return {
projects: {
[projectRoot]: {
root: projectRoot,
targets: {
init: {
executor: 'nx:run-commands',
options: {
command: `nx run-many --parallel --targets=buildPlugin,serve --projects=${projectConfiguration.name} --watch`,
},
},
buildPlugin: {
executor: '@nx/esbuild:esbuild',
outputs: ['{options.outputPath}'],
options: {
minify: true,
outputPath: `${projectConfiguration.sourceRoot}/assets/`,
main: `${projectConfiguration.sourceRoot}/plugin.ts`,
tsConfig: `${projectRoot}/tsconfig.plugin.json`,
generatePackageJson: false,
format: ['esm'],
deleteOutputPath: false,
},
},
},
},
},
};
},
];