diff --git a/apps/contrast-plugin/project.json b/apps/contrast-plugin/project.json index 20bd11f..8833af6 100644 --- a/apps/contrast-plugin/project.json +++ b/apps/contrast-plugin/project.json @@ -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" diff --git a/apps/icons-plugin/project.json b/apps/icons-plugin/project.json index 3ad953b..c594ba8 100644 --- a/apps/icons-plugin/project.json +++ b/apps/icons-plugin/project.json @@ -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" diff --git a/apps/lorem-ipsum-plugin/project.json b/apps/lorem-ipsum-plugin/project.json index 8406278..8e09cd2 100644 --- a/apps/lorem-ipsum-plugin/project.json +++ b/apps/lorem-ipsum-plugin/project.json @@ -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 } - }, + } } } diff --git a/apps/poc-state-plugin/project.json b/apps/poc-state-plugin/project.json index 1e6d91e..7da5562 100644 --- a/apps/poc-state-plugin/project.json +++ b/apps/poc-state-plugin/project.json @@ -79,7 +79,8 @@ }, "development": { "buildTarget": "poc-state-plugin:build:development", - "port": 4301 + "port": 4301, + "host": "0.0.0.0" } }, "defaultConfiguration": "development" diff --git a/apps/table-plugin/project.json b/apps/table-plugin/project.json index 0b44595..4cfc620 100644 --- a/apps/table-plugin/project.json +++ b/apps/table-plugin/project.json @@ -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" diff --git a/docs/create-angular-plugin.md b/docs/create-angular-plugin.md index d12df73..c2d1d59 100644 --- a/docs/create-angular-plugin.md +++ b/docs/create-angular-plugin.md @@ -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: diff --git a/nx.json b/nx.json index a4d090b..0a348af 100644 --- a/nx.json +++ b/nx.json @@ -29,6 +29,9 @@ } }, "plugins": [ + { + "plugin": "./tools/plugins/init-plugin.ts" + }, { "plugin": "@nx/vite/plugin", "options": { diff --git a/package.json b/package.json index f60661e..c761a50 100644 --- a/package.json +++ b/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", diff --git a/tools/plugins/init-plugin.ts b/tools/plugins/init-plugin.ts new file mode 100644 index 0000000..8696ed2 --- /dev/null +++ b/tools/plugins/init-plugin.ts @@ -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`, + }, + }, + }, + }, + }, + }; + }, +];