✨ Add enhacements to plugins build mechanism (#8326)

* 🐛 Fix plugin code build

* 🔧 Update editor.defaultFormatter to new Prettier

* 🐛 Fix lint issues in create-palette-plugin

* 🐛 Add missing run in pnpm init script for plugins

plugins/.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "prettier.singleQuote": true,
-  "editor.defaultFormatter": "prettier.prettier-vscode",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true
 }

plugins/apps/colors-to-tokens-plugin/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build colors-to-tokens-plugin",
+    "build": "ng build colors-to-tokens-plugin && pnpm run build:plugin",
     "build:dev": "ng build colors-to-tokens-plugin --configuration development",
+    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=colors-to-tokens-plugin",
+    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=colors-to-tokens-plugin --watch",
     "serve": "ng serve colors-to-tokens-plugin",
+    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/contrast-plugin/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build contrast-plugin",
+    "build": "ng build contrast-plugin && pnpm run build:plugin",
     "build:dev": "ng build contrast-plugin --configuration development",
+    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=contrast-plugin",
+    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=contrast-plugin --watch",
     "serve": "ng serve contrast-plugin",
+    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/create-palette-plugin/eslint.config.js

@@ -3,6 +3,7 @@ import baseConfig from '../../eslint.config.js';
 export default [
   ...baseConfig,
   {
+    files: ['**/*.ts', '**/*.tsx'],
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -22,5 +23,5 @@ export default [
     files: ['**/*.js', '**/*.jsx'],
     rules: {},
   },
-  { ignores: ['vite.config.ts'] },
+  { ignores: ['**/assets/*.js', 'vite.config.ts'] },
 ];

plugins/apps/create-palette-plugin/package.json

@@ -8,6 +8,7 @@
     "build": "vite build",
     "build:watch": "vite build --watch --mode development",
     "preview": "vite preview",
+    "init": "concurrently --kill-others --names build,serve \"pnpm run build:watch\" \"pnpm run preview\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/icons-plugin/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build icons-plugin",
+    "build": "ng build icons-plugin && pnpm run build:plugin",
     "build:dev": "ng build icons-plugin --configuration development",
+    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=icons-plugin",
+    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=icons-plugin --watch",
     "serve": "ng serve icons-plugin",
+    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/lorem-ipsum-plugin/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build lorem-ipsum-plugin",
+    "build": "ng build lorem-ipsum-plugin && pnpm run build:plugin",
     "build:dev": "ng build lorem-ipsum-plugin --configuration development",
+    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=lorem-ipsum-plugin",
+    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=lorem-ipsum-plugin --watch",
     "serve": "ng serve lorem-ipsum-plugin",
+    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/poc-state-plugin/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build poc-state-plugin",
+    "build": "ng build poc-state-plugin && pnpm run build:plugin",
     "build:dev": "ng build poc-state-plugin --configuration development",
+    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=poc-state-plugin",
+    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=poc-state-plugin --watch",
     "serve": "ng serve poc-state-plugin",
+    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/poc-tokens-plugin/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build poc-tokens-plugin",
+    "build": "ng build poc-tokens-plugin && pnpm run build:plugin",
     "build:dev": "ng build poc-tokens-plugin --configuration development",
+    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=poc-tokens-plugin",
+    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=poc-tokens-plugin --watch",
     "serve": "ng serve poc-tokens-plugin",
+    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "exit 0"
   }

plugins/apps/rename-layers-plugin/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build rename-layers-plugin",
+    "build": "ng build rename-layers-plugin && pnpm run build:plugin",
     "build:dev": "ng build rename-layers-plugin --configuration development",
+    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=rename-layers-plugin",
+    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=rename-layers-plugin --watch",
     "serve": "ng serve rename-layers-plugin",
+    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/apps/table-plugin/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "ng build table-plugin",
+    "build": "ng build table-plugin && pnpm run build:plugin",
     "build:dev": "ng build table-plugin --configuration development",
+    "build:plugin": "node ../../tools/scripts/build-plugin.mjs --plugin=table-plugin",
+    "build:plugin:watch": "node ../../tools/scripts/build-plugin.mjs --plugin=table-plugin --watch",
     "serve": "ng serve table-plugin",
+    "init": "concurrently --kill-others --names plugin,serve \"pnpm run build:plugin:watch\" \"pnpm run serve\"",
     "lint": "eslint .",
     "test": "vitest"
   }

plugins/eslint.config.js

@@ -27,13 +27,21 @@ export default [
         sourceType: 'module',
       },
     },
+    rules: {
+      'no-multiple-empty-lines': ['error', { max: 1 }],
+      quotes: ['error', 'single', { avoidEscape: true }],
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+    },
     rules: {
       '@typescript-eslint/no-unused-vars': [
         'error',
         { argsIgnorePattern: '^_' },
       ],
-      'no-multiple-empty-lines': ['error', { max: 1 }],
-      quotes: ['error', 'single', { avoidEscape: true }],
     },
   },
   {

plugins/package.json

@@ -8,15 +8,15 @@
     "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:poc-state": "pnpm --filter poc-state-plugin serve",
-    "start:plugin:contrast": "pnpm --filter contrast-plugin serve",
-    "start:plugin:icons": "pnpm --filter icons-plugin serve",
-    "start:plugin:loremipsum": "pnpm --filter lorem-ipsum-plugin serve",
-    "start:plugin:palette": "pnpm --filter create-palette-plugin build:watch & pnpm --filter create-palette-plugin preview",
-    "start:plugin:table": "pnpm --filter table-plugin serve",
-    "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-plugin serve",
+    "start:plugin:poc-state": "pnpm --filter poc-state-plugin run init",
+    "start:plugin:contrast": "pnpm --filter contrast-plugin run init",
+    "start:plugin:icons": "pnpm --filter icons-plugin run init",
+    "start:plugin:loremipsum": "pnpm --filter lorem-ipsum-plugin run init",
+    "start:plugin:palette": "pnpm --filter create-palette-plugin run init",
+    "start:plugin:table": "pnpm --filter table-plugin run init",
+    "start:plugin:renamelayers": "pnpm --filter rename-layers-plugin run init",
+    "start:plugin:colors-to-tokens": "pnpm --filter colors-to-tokens-plugin run init",
+    "start:plugin:poc-tokens": "pnpm --filter poc-tokens-plugin run init",
     "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",

plugins/tools/scripts/build-plugin.mjs

@@ -0,0 +1,92 @@
+import esbuild from 'esbuild';
+import { existsSync } from 'fs';
+import { readdir } from 'fs/promises';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const rootDir = resolve(__dirname, '../..');
+const appsDir = resolve(rootDir, 'apps');
+
+const watch = process.argv.includes('--watch');
+const filterPlugin = process.argv
+    .find((arg) => arg.startsWith('--plugin='))
+    ?.replace('--plugin=', '');
+
+async function getPluginEntryPoints() {
+    const entries = await readdir(appsDir, { withFileTypes: true });
+    const entryPoints = [];
+
+    for (const entry of entries) {
+        if (!entry.isDirectory()) continue;
+
+        if (filterPlugin && entry.name !== filterPlugin) continue;
+
+        const pluginTs = resolve(appsDir, entry.name, 'src/plugin.ts');
+        const tsconfigPlugin = resolve(
+            appsDir,
+            entry.name,
+            'tsconfig.plugin.json',
+        );
+
+        if (existsSync(pluginTs) && existsSync(tsconfigPlugin)) {
+            entryPoints.push({
+                name: entry.name,
+                entryPoint: pluginTs,
+                tsconfig: tsconfigPlugin,
+                outdir: resolve(appsDir, entry.name, 'src/assets'),
+            });
+        }
+    }
+
+    return entryPoints;
+}
+
+async function buildPlugin(plugin) {
+    const options = {
+        entryPoints: [plugin.entryPoint],
+        bundle: true,
+        outfile: resolve(plugin.outdir, 'plugin.js'),
+        minify: !watch,
+        format: 'esm',
+        tsconfig: plugin.tsconfig,
+        logLevel: 'info',
+    };
+
+    if (watch) {
+        const ctx = await esbuild.context(options);
+        await ctx.watch();
+        console.log(`[buildPlugin] Watching ${plugin.name}...`);
+        return ctx;
+    } else {
+        await esbuild.build(options);
+        console.log(`[buildPlugin] Built ${plugin.name}`);
+    }
+}
+
+async function main() {
+    const plugins = await getPluginEntryPoints();
+
+    if (plugins.length === 0) {
+        console.warn('[buildPlugin] No plugins found to build.');
+        return;
+    }
+
+    console.log(
+        `[buildPlugin] ${watch ? 'Watching' : 'Building'} ${plugins.length} plugin(s): ${plugins.map((p) => p.name).join(', ')}`,
+    );
+
+    const results = await Promise.all(plugins.map(buildPlugin));
+
+    if (watch) {
+        process.on('SIGINT', async () => {
+            await Promise.all(results.map((ctx) => ctx?.dispose()));
+            process.exit(0);
+        });
+    }
+}
+
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});