♻️ Remove Nx and rely on pnpm monorepo features

frontend/package.json

@@ -51,6 +51,7 @@
     "@penpot/svgo": "penpot/svgo#v3.2",
     "@penpot/text-editor": "workspace:./text-editor",
     "@playwright/test": "1.58.0",
+    "@penpot/ui": "workspace:./packages/ui",
     "@storybook/addon-docs": "10.1.11",
     "@storybook/addon-themes": "10.1.11",
     "@storybook/addon-vitest": "10.1.11",

frontend/packages/ui/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [],
+  "plugins": []
+}

frontend/packages/ui/.gitignore

@@ -0,0 +1 @@
+dist/

frontend/packages/ui/.storybook/main.ts

@@ -0,0 +1,23 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  addons: [],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.mts',
+      },
+    },
+  },
+};
+
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+
+export default config;

frontend/packages/ui/README.md

@@ -0,0 +1,11 @@
+# UI
+
+A React component library with TypeScript for the Penpot ecosystem.
+
+## Commands
+
+Run from workspace root:
+
+- **`pnpm storybook:ui`** - Start Storybook for component development
+- **`pnpm build:ui`** - Build the library for production
+- **`pnpm start:ui`** - Build in watch mode for development

frontend/packages/ui/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@penpot/ui",
+  "version": "0.0.1",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "watch": "vite build --watch",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@storybook/react": "10.2.0",
+    "@storybook/react-vite": "10.2.0",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "16.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.1",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "react-compiler-runtime": "^1.0.0",
+    "storybook": "10.2.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": ">=19.2",
+    "react-dom": ">=19.2"
+  }
+}

frontend/packages/ui/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/example/Example';

frontend/packages/ui/src/lib/example/Example.module.css

@@ -0,0 +1,5 @@
+.container {
+  background-color: #f0f0f0;
+  padding: 16px;
+  border: 2px solid #000;
+}

frontend/packages/ui/src/lib/example/Example.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Example from './Example';
+
+describe('Example', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Example />);
+    expect(baseElement).toBeTruthy();
+  });
+});

frontend/packages/ui/src/lib/example/Example.stories.ts

@@ -0,0 +1,12 @@
+import { Example } from './Example';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+  title: 'UI/Example',
+  component: Example,
+} satisfies Meta<typeof Example>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

frontend/packages/ui/src/lib/example/Example.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import styles from './Example.module.css';
+
+export function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className={styles.container}>
+      <h1>Example!</h1>
+      <div>
+        <h2>Counter: {count}</h2>
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+        <button onClick={() => setCount(count - 1)}>Decrement</button>
+        <button onClick={() => setCount(0)}>Reset</button>
+      </div>
+    </div>
+
+  );
+}
+
+export default Example;

frontend/packages/ui/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vitest"],
+    "baseUrl": "."
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
+}

frontend/packages/ui/tsconfig.lib.json

@@ -0,0 +1,37 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

frontend/packages/ui/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

frontend/packages/ui/tsconfig.storybook.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": "",
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}

frontend/packages/ui/vite.config.mts

@@ -0,0 +1,66 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { copyFileSync } from 'node:fs';
+
+const copyCssPlugin = () => ({
+  name: 'copy-css',
+  closeBundle: () => {
+    try {
+      copyFileSync(
+        'dist/index.css',
+        '../../resources/public/css/ui.css',
+      );
+    } catch (e) {
+      console.log('Error copying css file', e);
+    }
+  },
+});
+
+export default defineConfig(() => ({
+  root: import.meta.dirname,
+  plugins: [
+    react({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'),
+      pathsToAliases: false,
+    }),
+    copyCssPlugin(),
+  ],
+  build: {
+    outDir: 'dist/',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      entry: 'src/index.ts',
+      name: 'ui',
+      fileName: 'index',
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+  test: {
+    name: 'ui',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/ui',
+      provider: 'v8' as const,
+    },
+  },
+}));

frontend/pnpm-workspace.yaml

@@ -7,3 +7,4 @@ packages:
   - "packages/draft-js"
   - "packages/mousetrap"
   - "text-editor"
+  - "packages/ui"

frontend/resources/templates/index.mustache

@@ -18,6 +18,7 @@
     <meta name="twitter:creator" content="@penpotapp">
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
     <link id="theme" href="css/main.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
+     <link href="css/ui.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
     {{#isDebug}}
     <link href="css/debug.css?version={{& version_tag}}" rel="stylesheet" type="text/css" />
     {{/isDebug}}

frontend/scripts/build-libs.js

@@ -1,6 +1,20 @@
 import * as esbuild from "esbuild";
 import { readFile } from "node:fs/promises";
 
+/**
+ * esbuild plugin to watch a directory recursively
+ */
+const watchExtraDirPlugin = {
+  name: 'watch-extra-dir',
+  setup(build) {
+    build.onLoad({ filter: /target\/index.js/, namespace: 'file' }, async (args) => {
+      return {
+        watchDirs: ["packages/ui/dist"],
+      };
+    });
+  }
+};
+
 const filter =
   /react-virtualized[/\\]dist[/\\]es[/\\]WindowScroller[/\\]utils[/\\]onScroll\.js$/;
 
@@ -36,7 +50,7 @@ const config = {
     js: '"use strict";\nvar global = globalThis;',
   },
   outfile: "resources/public/js/libs.js",
-  plugins: [fixReactVirtualized, rebuildNotify],
+  plugins: [fixReactVirtualized, rebuildNotify, watchExtraDirPlugin],
 };
 
 async function watch() {

plugins/.husky/commit-msg

@@ -1 +0,0 @@
-pnpx --no -- commitlint --edit $1

plugins/.husky/pre-commit

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-if [ -z "$HUSKY_HOOK" ] || [ "$HUSKY_HOOK" = "pre-commit" ]; then
-    pnpm run lint:affected
-fi

plugins/.husky/pre-push

@@ -1,5 +0,0 @@
-#!/bin/bash
-
-if [ "$HUSKY_HOOK" = "pre-push" ]; then
-    pnpm run lint:affected
-fi

plugins/.npmrc

@@ -0,0 +1 @@
+ignore-workspace-root-check=true

plugins/.vscode/extensions.json

@@ -1,8 +1,3 @@
 {
-  "recommendations": [
-    "nrwl.angular-console",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "firsttris.vscode-jest-runner"
-  ]
+  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
 }

plugins/.vscode/settings.json

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

plugins/CONTRIBUTING.md

@@ -1,134 +0,0 @@
-# Contributing Guide
-
-Thank you for your interest in contributing to Penpot Plugins. This is a
-generic guide that details how to contribute to Penpot Plugins in a way that
-is efficient for everyone. If you want a specific documentation for
-different parts of the platform, please refer to `docs/` directory.
-
-## Reporting Bugs
-
-We are using [GitHub Issues](https://github.com/penpot/penpot/issues)
-for our public bugs. We keep a close eye on this and try to make it
-clear when we have an internal fix in progress. Before filing a new
-task, try to make sure your problem doesn't already exist.
-
-If you found a bug, please report it, as far as possible with:
-
-- a detailed explanation of steps to reproduce the error
-- a browser and the browser version used
-- a dev tools console exception stack trace (if it is available)
-
-If you found a bug that you consider better discuss in private (for
-example: security bugs), consider first send an email to
-`support@penpot.app`.
-
-**We don't have formal bug bounty program for security reports; this
-is an open source application and your contribution will be recognized
-in the changelog.**
-
-## Pull requests
-
-If you want propose a change or bug fix with the Pull-Request system
-firstly you should carefully read the **DCO** section and format your
-commits accordingly.
-
-If you intend to fix a bug it's fine to submit a pull request right
-away but we still recommend to file an issue detailing what you're
-fixing. This is helpful in case we don't accept that specific fix but
-want to keep track of the issue.
-
-If you want to implement or start working in a new feature, please
-open a **question** / **discussion** issue for it. No pull-request
-will be accepted without previous chat about the changes,
-independently if it is a new feature, already planned feature or small
-quick win.
-
-If is going to be your first pull request, You can learn how from this
-free video series:
-
-https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
-
-We will use the `easy fix` mark for tag for indicate issues that are
-easy for beginners.
-
-## Commit Guidelines
-
-To maintain a clear and organized commit history in this repository, we adhere to the Conventional Commits specification. Conventional Commits provide a structured format for commit messages, making it easier to track changes, automate versioning, and improve readability.
-
-Please familiarize yourself with the Conventional Commits rules by visiting the [official Conventional Commits website](https://www.conventionalcommits.org/en/v1.0.0/). This specification outlines how to structure your commit messages, including types, scopes, and descriptions.
-
-## Code of conduct
-
-As contributors and maintainers of this project, we pledge to respect
-all people who contribute through reporting issues, posting feature
-requests, updating documentation, submitting pull requests or patches,
-and other activities.
-
-We are committed to making participation in this project a
-harassment-free experience for everyone, regardless of level of
-experience, gender, gender identity and expression, sexual
-orientation, disability, personal appearance, body size, race,
-ethnicity, age, or religion.
-
-Examples of unacceptable behavior by participants include the use of
-sexual language or imagery, derogatory comments or personal attacks,
-trolling, public or private harassment, insults, or other
-unprofessional conduct.
-
-Project maintainers have the right and responsibility to remove, edit,
-or reject comments, commits, code, wiki edits, issues, and other
-contributions that are not aligned to this Code of Conduct. Project
-maintainers who do not follow the Code of Conduct may be removed from
-the project team.
-
-This code of conduct applies both within project spaces and in public
-spaces when an individual is representing the project or its
-community.
-
-Instances of abusive, harassing, or otherwise unacceptable behavior
-may be reported by opening an issue or contacting one or more of the
-project maintainers.
-
-This Code of Conduct is adapted from the Contributor Covenant, version
-1.1.0, available from http://contributor-covenant.org/version/1/1/0/
-
-## Developer's Certificate of Origin (DCO)
-
-By submitting code you are agree and can certify the below:
-
-    Developer's Certificate of Origin 1.1
-
-    By making a contribution to this project, I certify that:
-
-    (a) The contribution was created in whole or in part by me and I
-        have the right to submit it under the open source license
-        indicated in the file; or
-
-    (b) The contribution is based upon previous work that, to the best
-        of my knowledge, is covered under an appropriate open source
-        license and I have the right under that license to submit that
-        work with modifications, whether created in whole or in part
-        by me, under the same open source license (unless I am
-        permitted to submit under a different license), as indicated
-        in the file; or
-
-    (c) The contribution was provided directly to me by some other
-        person who certified (a), (b) or (c) and I have not modified
-        it.
-
-    (d) I understand and agree that this project and the contribution
-        are public and that a record of the contribution (including all
-        personal information I submit with it, including my sign-off) is
-        maintained indefinitely and may be redistributed consistent with
-        this project or the open source license(s) involved.
-
-Then, all your code patches (**documentation are excluded**) should
-contain a sign-off at the end of the patch/commit description body. It
-can be automatically added on adding `-s` parameter to `git commit`.
-
-This is an example of the aspect of the line:
-
-    Signed-off-by: Andrey Antukh <niwi@niwi.nz>
-
-Please, use your real name (sorry, no pseudonyms or anonymous
-contributions are allowed).

plugins/angular.json

@@ -0,0 +1,490 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "apps",
+  "projects": {
+    "contrast-plugin": {
+      "projectType": "application",
+      "root": "apps/contrast-plugin",
+      "sourceRoot": "apps/contrast-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/contrast-plugin",
+            "index": "apps/contrast-plugin/src/index.html",
+            "browser": "apps/contrast-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/contrast-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/contrast-plugin/src/_headers",
+              "apps/contrast-plugin/src/favicon.ico",
+              "apps/contrast-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/contrast-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "contrast-plugin:build:production" },
+            "development": {
+              "buildTarget": "contrast-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4302
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "icons-plugin": {
+      "projectType": "application",
+      "root": "apps/icons-plugin",
+      "sourceRoot": "apps/icons-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/icons-plugin",
+            "index": "apps/icons-plugin/src/index.html",
+            "browser": "apps/icons-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/icons-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/icons-plugin/src/_headers",
+              "apps/icons-plugin/src/favicon.ico",
+              "apps/icons-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/icons-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "icons-plugin:build:production" },
+            "development": {
+              "buildTarget": "icons-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4303
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "lorem-ipsum-plugin": {
+      "projectType": "application",
+      "root": "apps/lorem-ipsum-plugin",
+      "sourceRoot": "apps/lorem-ipsum-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/lorem-ipsum-plugin",
+            "index": "apps/lorem-ipsum-plugin/src/index.html",
+            "browser": "apps/lorem-ipsum-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/lorem-ipsum-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/lorem-ipsum-plugin/src/_headers",
+              "apps/lorem-ipsum-plugin/src/favicon.ico",
+              "apps/lorem-ipsum-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/lorem-ipsum-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "lorem-ipsum-plugin:build:production"
+            },
+            "development": {
+              "buildTarget": "lorem-ipsum-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4304
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "table-plugin": {
+      "projectType": "application",
+      "root": "apps/table-plugin",
+      "sourceRoot": "apps/table-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/table-plugin",
+            "index": "apps/table-plugin/src/index.html",
+            "browser": "apps/table-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/table-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/table-plugin/src/_headers",
+              "apps/table-plugin/src/favicon.ico",
+              "apps/table-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/table-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": { "buildTarget": "table-plugin:build:production" },
+            "development": {
+              "buildTarget": "table-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4306
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "rename-layers-plugin": {
+      "projectType": "application",
+      "root": "apps/rename-layers-plugin",
+      "sourceRoot": "apps/rename-layers-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/rename-layers-plugin",
+            "index": "apps/rename-layers-plugin/src/index.html",
+            "browser": "apps/rename-layers-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/rename-layers-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/rename-layers-plugin/src/_headers",
+              "apps/rename-layers-plugin/src/favicon.ico",
+              "apps/rename-layers-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/rename-layers-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "rename-layers-plugin:build:production"
+            },
+            "development": {
+              "buildTarget": "rename-layers-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4307
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "colors-to-tokens-plugin": {
+      "projectType": "application",
+      "root": "apps/colors-to-tokens-plugin",
+      "sourceRoot": "apps/colors-to-tokens-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/colors-to-tokens-plugin",
+            "index": "apps/colors-to-tokens-plugin/src/index.html",
+            "browser": "apps/colors-to-tokens-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/colors-to-tokens-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/colors-to-tokens-plugin/src/_headers",
+              "apps/colors-to-tokens-plugin/src/favicon.ico",
+              "apps/colors-to-tokens-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/colors-to-tokens-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "colors-to-tokens-plugin:build:production"
+            },
+            "development": {
+              "buildTarget": "colors-to-tokens-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4308
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    },
+    "poc-state-plugin": {
+      "projectType": "application",
+      "root": "apps/poc-state-plugin",
+      "sourceRoot": "apps/poc-state-plugin/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/apps/poc-state-plugin",
+            "index": "apps/poc-state-plugin/src/index.html",
+            "browser": "apps/poc-state-plugin/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "apps/poc-state-plugin/tsconfig.app.json",
+            "assets": [
+              "apps/poc-state-plugin/src/favicon.ico",
+              "apps/poc-state-plugin/src/assets"
+            ],
+            "styles": [
+              "libs/plugins-styles/src/lib/styles.css",
+              "apps/poc-state-plugin/src/styles.css"
+            ],
+            "scripts": [],
+            "optimization": {
+              "scripts": true,
+              "styles": true,
+              "fonts": false
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "poc-state-plugin:build:production"
+            },
+            "development": {
+              "buildTarget": "poc-state-plugin:build:development",
+              "host": "0.0.0.0",
+              "port": 4309
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

plugins/apps/colors-to-tokens-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

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

@@ -0,0 +1,13 @@
+{
+  "name": "colors-to-tokens-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build colors-to-tokens-plugin",
+    "build:dev": "ng build colors-to-tokens-plugin --configuration development",
+    "serve": "ng serve colors-to-tokens-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

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

@@ -1,80 +0,0 @@
-{
-  "name": "colors-to-tokens-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/colors-to-tokens-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/apps/colors-to-tokens-plugin",
-        "index": "apps/colors-to-tokens-plugin/src/index.html",
-        "browser": "apps/colors-to-tokens-plugin/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/colors-to-tokens-plugin/tsconfig.app.json",
-        "assets": [
-          "apps/colors-to-tokens-plugin/src/_headers",
-          "apps/colors-to-tokens-plugin/src/favicon.ico",
-          "apps/colors-to-tokens-plugin/src/assets"
-        ],
-        "styles": [
-          "libs/plugins-styles/src/lib/styles.css",
-          "apps/colors-to-tokens-plugin/src/styles.css"
-        ],
-        "scripts": [],
-        "optimization": {
-          "scripts": true,
-          "styles": true,
-          "fonts": false
-        }
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
-          "outputHashing": "all"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "dependsOn": ["buildPlugin"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "colors-to-tokens-plugin:build:production"
-        },
-        "development": {
-          "buildTarget": "colors-to-tokens-plugin:build:development",
-          "host": "0.0.0.0",
-          "port": 4308
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "colors-to-tokens-plugin:build"
-      }
-    }
-  }
-}

plugins/apps/colors-to-tokens-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/colors-to-tokens-plugin/src/plugin.ts

@@ -41,7 +41,7 @@ penpot.ui.onMessage<PluginUIEvent>((message) => {
 
 function resize(width: number, height: number) {
   if ('resize' in penpot.ui) {
-    (penpot as any).ui.resize(width, height);
+    penpot.ui.resize(width, height);
   }
 }
 

plugins/apps/colors-to-tokens-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

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

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

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

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/plugin.ts"],
   "include": ["../../libs/plugin-types/index.d.ts"]

plugins/apps/colors-to-tokens-plugin/tsconfig.spec.json

@@ -8,7 +8,9 @@
       "vite/client",
       "node",
       "vitest"
-    ]
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "include": [
     "vite.config.ts",

plugins/apps/colors-to-tokens-plugin/vite.config.ts

@@ -1,15 +1,11 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../node_modules/.vite/colors-to-tokens-plugin',
   test: {
     watch: false,
     globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],

plugins/apps/contrast-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

plugins/apps/contrast-plugin/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "contrast-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build contrast-plugin",
+    "build:dev": "ng build contrast-plugin --configuration development",
+    "serve": "ng serve contrast-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

plugins/apps/contrast-plugin/project.json

@@ -1,80 +0,0 @@
-{
-  "name": "contrast-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/contrast-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/apps/contrast-plugin",
-        "index": "apps/contrast-plugin/src/index.html",
-        "browser": "apps/contrast-plugin/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/contrast-plugin/tsconfig.app.json",
-        "assets": [
-          "apps/contrast-plugin/src/_headers",
-          "apps/contrast-plugin/src/favicon.ico",
-          "apps/contrast-plugin/src/assets"
-        ],
-        "styles": [
-          "libs/plugins-styles/src/lib/styles.css",
-          "apps/contrast-plugin/src/styles.css"
-        ],
-        "scripts": [],
-        "optimization": {
-          "scripts": true,
-          "styles": true,
-          "fonts": false
-        }
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
-          "outputHashing": "all"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "dependsOn": ["buildPlugin"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "contrast-plugin:build:production"
-        },
-        "development": {
-          "buildTarget": "contrast-plugin:build:development",
-          "host": "0.0.0.0",
-          "port": 4302
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "contrast-plugin:build"
-      }
-    }
-  }
-}

plugins/apps/contrast-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/contrast-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

plugins/apps/contrast-plugin/tsconfig.json

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

plugins/apps/contrast-plugin/tsconfig.plugin.json

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/plugin.ts"],
   "include": ["../../libs/plugin-types/index.d.ts"]

plugins/apps/contrast-plugin/vite.config.ts

@@ -1,14 +1,10 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../node_modules/.vite/contrast-plugin',
   test: {
     globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],

plugins/apps/create-palette-plugin/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@nx/js/babel"]
-}

plugins/apps/create-palette-plugin/.swcrc

@@ -1,8 +0,0 @@
-{
-  "jsc": {
-    "parser": {
-      "syntax": "typescript"
-    },
-    "target": "es2016"
-  }
-}

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

@@ -0,0 +1,14 @@
+{
+  "name": "create-palette-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:watch": "vite build --watch --mode development",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

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

@@ -1,8 +0,0 @@
-{
-  "name": "create-palette-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "sourceRoot": "apps/create-palette-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {}
-}

plugins/apps/create-palette-plugin/vite.config.ts

@@ -1,12 +1,9 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
-
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/create-palette-plugin',
-
   server: {
     port: 4305,
     host: '0.0.0.0',
@@ -16,14 +13,7 @@ export default defineConfig({
     port: 4305,
     host: '0.0.0.0',
   },
-
-  plugins: [nxViteTsPaths()],
-
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
-
+  plugins: [tsconfigPaths()],
   build: {
     outDir: '../../dist/apps/create-palette-plugin',
     reportCompressedSize: true,
@@ -40,12 +30,8 @@ export default defineConfig({
       },
     },
   },
-
   test: {
     globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
 

plugins/apps/e2e/eslint.config.js

@@ -7,7 +7,7 @@ export default [
   {
     languageOptions: {
       parser: typescriptEslintParser,
-      parserOptions: { project: './apps/e2e/tsconfig.json' },
+      parserOptions: { project: './tsconfig.json' },
     },
   },
   {

plugins/apps/e2e/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "e2e",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "vitest",
+    "lint": "eslint ."
+  }
+}

plugins/apps/e2e/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "e2e",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "implicitDependencies": [],
-  "tags": ["type:e2e"],
-  "targets": {}
-}

plugins/apps/e2e/src/utils/agent.ts

@@ -107,6 +107,7 @@ export async function Agent() {
 
       console.log('Running plugin code...');
       await page.evaluate((testingPlugin) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (globalThis as any).ɵloadPlugin({
           pluginId: 'TEST',
           name: 'Test',

plugins/apps/e2e/vite.config.ts

@@ -1,16 +1,12 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../../node_modules/.vite/e2e',
   test: {
     testTimeout: 20000,
     watch: false,
     globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
     environment: 'happy-dom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],

plugins/apps/example-styles/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@nx/js/babel"]
-}

plugins/apps/example-styles/.swcrc

@@ -1,8 +0,0 @@
-{
-  "jsc": {
-    "parser": {
-      "syntax": "typescript"
-    },
-    "target": "es2016"
-  }
-}

plugins/apps/example-styles/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "example-styles",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:watch": "vite build --watch --mode development",
+    "preview": "vite preview",
+    "lint": "eslint ."
+  }
+}

plugins/apps/example-styles/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "example-styles",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "sourceRoot": "apps/example-styles/src",
-  "tags": ["type:app"],
-  "targets": {}
-}

plugins/apps/example-styles/src/app/app.element.ts

@@ -25,7 +25,8 @@ export class AppElement extends HTMLElement {
       el.remove();
     });
 
-    (window as any).hljs.highlightAll();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).hljs?.highlightAll();
   }
 
   getIndentationSize(str: string) {

plugins/apps/example-styles/vite.config.ts

@@ -1,12 +1,9 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
-
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../../node_modules/.vite/apps/example-styles',
-
   server: {
     port: 4201,
     host: '0.0.0.0',
@@ -17,12 +14,7 @@ export default defineConfig({
     host: '0.0.0.0',
   },
 
-  plugins: [nxViteTsPaths()],
-
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
+  plugins: [tsconfigPaths()],
 
   build: {
     outDir: '../../dist/apps/example-styles',
@@ -34,9 +26,6 @@ export default defineConfig({
 
   test: {
     globals: true,
-    cache: {
-      dir: '../../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
 

plugins/apps/icons-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

plugins/apps/icons-plugin/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "icons-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build icons-plugin",
+    "build:dev": "ng build icons-plugin --configuration development",
+    "serve": "ng serve icons-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

plugins/apps/icons-plugin/project.json

@@ -1,80 +0,0 @@
-{
-  "name": "icons-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/icons-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/apps/icons-plugin",
-        "index": "apps/icons-plugin/src/index.html",
-        "browser": "apps/icons-plugin/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/icons-plugin/tsconfig.app.json",
-        "assets": [
-          "apps/icons-plugin/src/_headers",
-          "apps/icons-plugin/src/favicon.ico",
-          "apps/icons-plugin/src/assets"
-        ],
-        "styles": [
-          "libs/plugins-styles/src/lib/styles.css",
-          "apps/icons-plugin/src/styles.css"
-        ],
-        "optimization": {
-          "scripts": true,
-          "styles": true,
-          "fonts": false
-        },
-        "scripts": []
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
-          "outputHashing": "all"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "dependsOn": ["buildPlugin"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "icons-plugin:build:production"
-        },
-        "development": {
-          "buildTarget": "icons-plugin:build:development",
-          "host": "0.0.0.0",
-          "port": 4303
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "icons-plugin:build"
-      }
-    }
-  }
-}

plugins/apps/icons-plugin/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component, inject, signal } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { FeatherIconNames, icons } from 'feather-icons';
-import { SafeHtmlPipe } from './pipes/safe-html.pipe';
 import { IconButtonComponent } from './components/icon-button/icon-button.component';
 import { IconSearchComponent } from './components/icon-search/icon-search.component';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -10,12 +9,7 @@ import { PluginMessageEvent } from '../model';
 
 @Component({
   selector: 'app-root',
-  imports: [
-    RouterModule,
-    SafeHtmlPipe,
-    IconButtonComponent,
-    IconSearchComponent,
-  ],
+  imports: [RouterModule, IconButtonComponent, IconSearchComponent],
   styleUrl: './app.component.css',
   template: `<div class="icons-plugin">
     <div class="icons-search">

plugins/apps/icons-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/icons-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

plugins/apps/icons-plugin/tsconfig.json

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

plugins/apps/icons-plugin/tsconfig.plugin.json

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/plugin.ts"],
   "include": ["../../libs/plugin-types/index.d.ts"]

plugins/apps/lorem-ipsum-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

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

@@ -0,0 +1,13 @@
+{
+  "name": "lorem-ipsum-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build lorem-ipsum-plugin",
+    "build:dev": "ng build lorem-ipsum-plugin --configuration development",
+    "serve": "ng serve lorem-ipsum-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

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

@@ -1,80 +0,0 @@
-{
-  "name": "lorem-ipsum-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/lorem-ipsum-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/apps/lorem-ipsum-plugin",
-        "index": "apps/lorem-ipsum-plugin/src/index.html",
-        "browser": "apps/lorem-ipsum-plugin/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/lorem-ipsum-plugin/tsconfig.app.json",
-        "assets": [
-          "apps/lorem-ipsum-plugin/src/_headers",
-          "apps/lorem-ipsum-plugin/src/favicon.ico",
-          "apps/lorem-ipsum-plugin/src/assets"
-        ],
-        "styles": [
-          "libs/plugins-styles/src/lib/styles.css",
-          "apps/lorem-ipsum-plugin/src/styles.css"
-        ],
-        "scripts": [],
-        "optimization": {
-          "scripts": true,
-          "styles": true,
-          "fonts": false
-        }
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
-          "outputHashing": "all"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "dependsOn": ["buildPlugin"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "lorem-ipsum-plugin:build:production"
-        },
-        "development": {
-          "buildTarget": "lorem-ipsum-plugin:build:development",
-          "host": "0.0.0.0",
-          "port": 4304
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "lorem-ipsum-plugin:build"
-      }
-    }
-  }
-}

plugins/apps/lorem-ipsum-plugin/src/generator.ts

@@ -101,7 +101,7 @@ export function generateCharacters(count: number, startWithLorem = true) {
 }
 
 export function generateWords(count: number, startWithLorem = true) {
-  let words = [];
+  const words = [];
 
   if (startWithLorem) {
     words.push(...lorem.split(' ').slice(0, count));
@@ -115,9 +115,9 @@ export function generateWords(count: number, startWithLorem = true) {
 }
 
 export function generateSentences(count: number, startWithLorem = true) {
-  let sentences = [];
+  const sentences = [];
   for (let i = 0; i < count; i++) {
-    let sentenceLength = Math.floor(Math.random() * 10) + 3; // between 3 and 12 words per sentence
+    const sentenceLength = Math.floor(Math.random() * 10) + 3; // between 3 and 12 words per sentence
     let sentence = generateWords(sentenceLength, false);
 
     if (startWithLorem && i === 0) {
@@ -131,9 +131,9 @@ export function generateSentences(count: number, startWithLorem = true) {
 }
 
 export function generateParagraphs(count: number, startWithLorem = true) {
-  let paragraphs = [];
+  const paragraphs = [];
   for (let i = 0; i < count; i++) {
-    let paragraphLength = Math.floor(Math.random() * 5) + 3; // between 3 and 7 sentences per paragraph
+    const paragraphLength = Math.floor(Math.random() * 5) + 3; // between 3 and 7 sentences per paragraph
     paragraphs.push(
       generateSentences(paragraphLength, startWithLorem && i === 0),
     );

plugins/apps/lorem-ipsum-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/lorem-ipsum-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

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

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

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

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/plugin.ts"],
   "include": ["../../libs/plugin-types/index.d.ts"]

plugins/apps/lorem-ipsum-plugin/vite.config.ts

@@ -1,15 +1,11 @@
-/// <reference types='vitest' />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: __dirname,
-  cacheDir: '../node_modules/.vite/lorem-ipsum-plugin',
   test: {
     watch: false,
     globals: true,
-    cache: {
-      dir: '../node_modules/.vitest',
-    },
     environment: 'jsdom',
     include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
     reporters: ['default'],

plugins/apps/poc-state-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,15 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

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

@@ -0,0 +1,13 @@
+{
+  "name": "poc-state-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build poc-state-plugin",
+    "build:dev": "ng build poc-state-plugin --configuration development",
+    "serve": "ng serve poc-state-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

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

@@ -1,79 +0,0 @@
-{
-  "name": "poc-state-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/poc-state-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/apps/poc-state-plugin",
-        "index": "apps/poc-state-plugin/src/index.html",
-        "browser": "apps/poc-state-plugin/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/poc-state-plugin/tsconfig.app.json",
-        "assets": [
-          "apps/poc-state-plugin/src/favicon.ico",
-          "apps/poc-state-plugin/src/assets"
-        ],
-        "styles": [
-          "libs/plugins-styles/src/lib/styles.css",
-          "apps/poc-state-plugin/src/styles.css"
-        ],
-        "scripts": [],
-        "optimization": {
-          "scripts": true,
-          "styles": true,
-          "fonts": false
-        }
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
-          "outputHashing": "all"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "dependsOn": ["buildPlugin"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "poc-state-plugin:build:production"
-        },
-        "development": {
-          "buildTarget": "poc-state-plugin:build:development",
-          "port": 4301,
-          "host": "0.0.0.0"
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "poc-state-plugin:build"
-      }
-    }
-  }
-}

plugins/apps/poc-state-plugin/src/app/app.component.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import { Component, effect, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import type { Shape } from '@penpot/plugin-types';

plugins/apps/poc-state-plugin/src/main.ts

@@ -1,4 +1,7 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [provideZoneChangeDetection()],
+}).catch((err) => console.error(err));

plugins/apps/poc-state-plugin/src/plugin.ts

@@ -533,7 +533,7 @@ async function exportSelected() {
   const selection = await penpot.selection[0];
 
   if (selection) {
-    let data = await selection.export({ type: 'png', skipChildren: true });
+    const data = await selection.export({ type: 'png', skipChildren: true });
     penpot.ui.sendMessage({
       type: 'start-download',
       name: 'export.png',
@@ -547,8 +547,8 @@ async function resizeModal() {
 }
 
 async function saveLocalStorage() {
-  let oldvalue = penpot.localStorage.getItem('test');
-  let newvalue = oldvalue ? parseInt(oldvalue, 10) + 1 : 1;
+  const oldvalue = penpot.localStorage.getItem('test');
+  const newvalue = oldvalue ? parseInt(oldvalue, 10) + 1 : 1;
   console.log(newvalue);
   penpot.localStorage.setItem('test', newvalue);
 }

plugins/apps/poc-state-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

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

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

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

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/plugin.ts"],
   "include": ["../../libs/plugin-types/index.d.ts"]

plugins/apps/rename-layers-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

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

@@ -0,0 +1,13 @@
+{
+  "name": "rename-layers-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build rename-layers-plugin",
+    "build:dev": "ng build rename-layers-plugin --configuration development",
+    "serve": "ng serve rename-layers-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}

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

@@ -1,80 +0,0 @@
-{
-  "name": "rename-layers-plugin",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "application",
-  "prefix": "app",
-  "sourceRoot": "apps/rename-layers-plugin/src",
-  "tags": ["type:plugin"],
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:application",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/apps/rename-layers-plugin",
-        "index": "apps/rename-layers-plugin/src/index.html",
-        "browser": "apps/rename-layers-plugin/src/main.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "apps/rename-layers-plugin/tsconfig.app.json",
-        "assets": [
-          "apps/rename-layers-plugin/src/_headers",
-          "apps/rename-layers-plugin/src/favicon.ico",
-          "apps/rename-layers-plugin/src/assets"
-        ],
-        "styles": [
-          "libs/plugins-styles/src/lib/styles.css",
-          "apps/rename-layers-plugin/src/styles.css"
-        ],
-        "optimization": {
-          "scripts": true,
-          "styles": true,
-          "fonts": false
-        },
-        "scripts": []
-      },
-      "configurations": {
-        "production": {
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "2kb",
-              "maximumError": "4kb"
-            }
-          ],
-          "outputHashing": "all"
-        },
-        "development": {
-          "optimization": false,
-          "extractLicenses": false,
-          "sourceMap": true
-        }
-      },
-      "defaultConfiguration": "production",
-      "dependsOn": ["buildPlugin"]
-    },
-    "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "configurations": {
-        "production": {
-          "buildTarget": "rename-layers-plugin:build:production"
-        },
-        "development": {
-          "buildTarget": "rename-layers-plugin:build:development",
-          "host": "0.0.0.0",
-          "port": 4307
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
-      "options": {
-        "buildTarget": "rename-layers-plugin:build"
-      }
-    }
-  }
-}

plugins/apps/rename-layers-plugin/src/app/app.component.html

@@ -38,107 +38,125 @@
     </button>
   </div>
 
-  <div *ngIf="tab === 'add'" class="form">
-    <p class="explanation body-s">
-      Select layers to rename (otherwise it will apply to all layers) and enter
-      the text you want to add.
-    </p>
-    <div class="form-group">
-      <label class="input-label-hidden" for="search">Add text</label>
-      <input
-        #addElement
-        [(ngModel)]="addText"
-        class="input"
-        type="text"
-        placeholder="[Original layer name]"
-        id="addText"
-        (keydown.enter)="updateText()"
-      />
+  @if (tab === 'add') {
+    <div class="form">
+      <p class="explanation body-s">
+        Select layers to rename (otherwise it will apply to all layers) and
+        enter the text you want to add.
+      </p>
+      <div class="form-group">
+        <label class="input-label-hidden" for="search">Add text</label>
+        <input
+          #addElement
+          [(ngModel)]="addText"
+          class="input"
+          type="text"
+          placeholder="[Original layer name]"
+          id="addText"
+          (keydown.enter)="updateText()"
+        />
+      </div>
+      <button
+        type="button"
+        data-appearance="primary"
+        [class.btn-feedback]="btnFeedback"
+        [disabled]="addText === '[Original layer name]' || !addText"
+        (click)="updateText()"
+      >
+        @if (!btnFeedback) {
+          <span class="text-btn">Add</span>
+        }
+        @if (btnFeedback) {
+          <span class="icon icon-btn">
+            <svg viewBox="0 0 16 16" fill="none">
+              <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
+            </svg>
+          </span>
+        }
+      </button>
+      <p class="body-s preview">Previsualization:</p>
+      <ul class="preview-list">
+        @for (preview of previewList(); track preview) {
+          <li class="preview-item">
+            <span class="original" [title]="preview.name">{{
+              preview.name
+            }}</span>
+            <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
+            <span class="result" [title]="resultAddText(preview)">{{
+              resultAddText(preview)
+            }}</span>
+          </li>
+        }
+      </ul>
     </div>
-    <button
-      type="button"
-      data-appearance="primary"
-      [class.btn-feedback]="btnFeedback"
-      [disabled]="addText === '[Original layer name]' || !addText"
-      (click)="updateText()"
-    >
-      <span *ngIf="!btnFeedback" class="text-btn">Add</span>
-      <span *ngIf="btnFeedback" class="icon icon-btn">
-        <svg viewBox="0 0 16 16" fill="none">
-          <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
-        </svg>
-      </span>
-    </button>
-    <p class="body-s preview">Previsualization:</p>
-    <ul class="preview-list">
-      <li class="preview-item" *ngFor="let preview of previewList()">
-        <span class="original" [title]="preview.name">{{ preview.name }}</span>
-        <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
-        <span class="result" [title]="resultAddText(preview)">{{
-          resultAddText(preview)
-        }}</span>
-      </li>
-    </ul>
-  </div>
+  }
 
-  <div *ngIf="tab === 'replace'" class="form">
-    <p class="explanation body-s">
-      Select layers to rename (otherwise it will apply to all layers) and enter
-      the replacement text.
-    </p>
-    <div class="form-group">
-      <label class="input-label-hidden" for="search">Search</label>
-      <input
-        [(ngModel)]="textToReplace.search"
-        class="input"
-        type="text"
-        placeholder="Search"
-        id="search"
-        #searchElement
-        (keydown)="previewReplace()"
-      />
+  @if (tab === 'replace') {
+    <div class="form">
+      <p class="explanation body-s">
+        Select layers to rename (otherwise it will apply to all layers) and
+        enter the replacement text.
+      </p>
+      <div class="form-group">
+        <label class="input-label-hidden" for="search">Search</label>
+        <input
+          [(ngModel)]="textToReplace.search"
+          class="input"
+          type="text"
+          placeholder="Search"
+          id="search"
+          #searchElement
+          (keydown)="previewReplace()"
+        />
+      </div>
+      <div class="form-group">
+        <label class="input-label-hidden" for="replace">Replace</label>
+        <input
+          [(ngModel)]="textToReplace.replace"
+          class="input"
+          type="text"
+          placeholder="Write the new text"
+          id="replace"
+          (keydown.enter)="updateText()"
+        />
+      </div>
+      <button
+        type="button"
+        data-appearance="primary"
+        (click)="updateText()"
+        [class.btn-feedback]="btnFeedback"
+        [disabled]="!textToReplace.search"
+      >
+        @if (!btnFeedback) {
+          <span class="text-btn">Replace</span>
+        }
+        @if (btnFeedback) {
+          <span class="icon icon-btn icon-tick">
+            <svg width="16" height="16" fill="none">
+              <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
+            </svg>
+          </span>
+        }
+      </button>
+      <p class="body-s preview">Previsualization:</p>
+      <ul class="preview-list replace">
+        @if (previewList().length === 0) {
+          <li class="no-match">No matches found</li>
+        }
+        @for (preview of previewList(); track preview) {
+          <li class="preview-item">
+            <span
+              class="original"
+              [innerHTML]="highlightMatch(preview.name)"
+              [title]="preview.name"
+            ></span>
+            <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
+            <span class="result" [title]="resultReplaceText(preview.name)">{{
+              resultReplaceText(preview.name)
+            }}</span>
+          </li>
+        }
+      </ul>
     </div>
-    <div class="form-group">
-      <label class="input-label-hidden" for="replace">Replace</label>
-      <input
-        [(ngModel)]="textToReplace.replace"
-        class="input"
-        type="text"
-        placeholder="Write the new text"
-        id="replace"
-        (keydown.enter)="updateText()"
-      />
-    </div>
-    <button
-      type="button"
-      data-appearance="primary"
-      (click)="updateText()"
-      [class.btn-feedback]="btnFeedback"
-      [disabled]="!textToReplace.search"
-    >
-      <span *ngIf="!btnFeedback" class="text-btn">Replace</span>
-      <span *ngIf="btnFeedback" class="icon icon-btn icon-tick">
-        <svg width="16" height="16" fill="none">
-          <path d="M13.333 4 6 11.333 2.667 8" class="stroke" />
-        </svg>
-      </span>
-    </button>
-    <p class="body-s preview">Previsualization:</p>
-    <ul class="preview-list replace">
-      <li *ngIf="previewList().length === 0" class="no-match">
-        No matches found
-      </li>
-      <li class="preview-item" *ngFor="let preview of previewList()">
-        <span
-          class="original"
-          [innerHTML]="highlightMatch(preview.name)"
-          [title]="preview.name"
-        ></span>
-        <ng-template *ngTemplateOutlet="iconArrowRight"></ng-template>
-        <span class="result" [title]="resultReplaceText(preview.name)">{{
-          resultReplaceText(preview.name)
-        }}</span>
-      </li>
-    </ul>
-  </div>
+  }
 </div>

plugins/apps/rename-layers-plugin/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

plugins/apps/rename-layers-plugin/src/plugin.ts

@@ -25,7 +25,6 @@ penpot.ui.onMessage<PluginMessageEvent>((message) => {
     });
     shapesToUpdate?.forEach((shape) => {
       shape.name = shape.name.replace(
-        // eslint-disable-next-line
         message.content.search,
         message.content.replace,
       );

plugins/apps/rename-layers-plugin/tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],

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

@@ -8,7 +8,9 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "preserve"
   },
   "files": [],
   "include": [],

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

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": []
+    "types": [],
+    "moduleResolution": "bundler"
   },
   "files": ["src/plugin.ts"],
   "include": ["../../libs/plugin-types/index.d.ts"]

plugins/apps/table-plugin/eslint.config.js

@@ -1,46 +1,33 @@
 import baseConfig from '../../eslint.config.js';
-import { compat } from '../../eslint.base.config.js';
+import angular from '@angular-eslint/eslint-plugin';
+import angularTemplate from '@angular-eslint/eslint-plugin-template';
+import angularTemplateParser from '@angular-eslint/template-parser';
 
 export default [
   ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates',
-      ],
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts'],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'app',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'app',
-            style: 'kebab-case',
-          },
-        ],
-      },
-    })),
-  ...compat
-    .config({ extends: ['plugin:@nx/angular-template'] })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {},
-    })),
-  { ignores: ['**/assets/*.js'] },
   {
+    files: ['**/*.ts'],
+    plugins: {
+      '@angular-eslint': angular,
+    },
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
     languageOptions: {
       parserOptions: {
         project: './tsconfig.*?.json',
@@ -48,4 +35,16 @@ export default [
       },
     },
   },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplate,
+    },
+    languageOptions: {
+      parser: angularTemplateParser,
+    },
+    processor: '@angular-eslint/template/extract-inline-html',
+    rules: {},
+  },
+  { ignores: ['**/assets/*.js'] },
 ];

plugins/apps/table-plugin/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "table-plugin",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "ng build table-plugin",
+    "build:dev": "ng build table-plugin --configuration development",
+    "serve": "ng serve table-plugin",
+    "lint": "eslint .",
+    "test": "vitest"
+  }
+}