♻️ Make vite configs compatible with the native config loader

Replace __dirname with import.meta.dirname in the plugins workspace
vite configs (root paths and the plugins-runtime tsconfigPath) and in
frontend/vite.config.js, dropping the fileURLToPath fallback.

Import vite.config.iife with the explicit .ts extension in the
plugin-api-test-suite headless/tests configs and allow it in
tsconfig.node.json (moduleResolution Bundler + noEmit), matching the
mcp/packages/plugin precedent.

Remove .storybook/vitest.setup.ts and its setupFiles entry;
@storybook/addon-vitest 10.3+ provisions preview annotations
automatically.

These clear the Vite `configLoader: 'native'` warnings ahead of that
loader becoming the default.

AI-assisted-by: omen-alpha

frontend/.storybook/vitest.setup.ts

@@ -1,6 +0,0 @@
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './preview';
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([projectAnnotations]);

frontend/vite.config.js

@@ -7,12 +7,8 @@ import { playwright } from '@vitest/browser-playwright'
 
 // https://vitejs.dev/config/
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
-const dirname =
+const dirname = import.meta.dirname;
-  typeof __dirname !== "undefined"
-    ? __dirname
-    : path.dirname(fileURLToPath(import.meta.url));
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
@@ -45,15 +41,14 @@ export default defineConfig({
               {browser: "chromium"},
             ],
           },
-          setupFiles: [".storybook/vitest.setup.ts"],
         },
       },
     ],
   },
   resolve: {
     alias: {
-      "@target": resolve(__dirname, "./target/storybook"),
+      "@target": resolve(dirname, "./target/storybook"),
-      "@public": resolve(__dirname, "./resources/public/js/"),
+      "@public": resolve(dirname, "./resources/public/js/"),
     },
   },
 });

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

@@ -2,7 +2,7 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   test: {
     watch: false,
     globals: true,

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

@@ -2,7 +2,7 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   test: {
     globals: true,
     environment: 'jsdom',

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

@@ -1,7 +1,7 @@
 /// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   server: {
     port: 4202,
     host: '0.0.0.0',

plugins/apps/e2e/vite.config.ts

@@ -2,7 +2,7 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   test: {
     testTimeout: 20000,
     watch: false,

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

@@ -1,7 +1,7 @@
 /// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   server: {
     port: 4202,
     host: '0.0.0.0',

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

@@ -2,7 +2,7 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   test: {
     watch: false,
     globals: true,

plugins/apps/plugin-api-test-suite/tsconfig.node.json

@@ -4,6 +4,7 @@
     "outDir": "../../dist/out-tsc",
     "module": "ESNext",
     "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
     "types": ["node"],
     "noUnusedLocals": true,
     "noUnusedParameters": true

plugins/apps/plugin-api-test-suite/vite.config.headless.ts

@@ -1,4 +1,4 @@
-import { iifeConfig } from './vite.config.iife';
+import { iifeConfig } from './vite.config.iife.ts';
 
 // Builds the CI test entry as a single self-executing (IIFE) bundle, evaluated
 // inside the Penpot plugin sandbox via `globalThis.ɵloadPlugin({ code })` by the

plugins/apps/plugin-api-test-suite/vite.config.iife.ts

@@ -12,7 +12,7 @@ import { defineConfig, type UserConfig } from 'vite';
  */
 export function iifeConfig(name: string, entry: string): UserConfig {
   return defineConfig({
-    root: __dirname,
+    root: import.meta.dirname,
     resolve: {
       tsconfigPaths: true,
     },

plugins/apps/plugin-api-test-suite/vite.config.tests.ts

@@ -1,4 +1,4 @@
-import { iifeConfig } from './vite.config.iife';
+import { iifeConfig } from './vite.config.iife.ts';
 
 // Builds the test cases as a single self-executing (IIFE) bundle that publishes
 // the discovered tests on `globalThis.__penpotReloadedTests`. The UI "Reload"

plugins/apps/plugin-api-test-suite/vite.config.ts

@@ -2,7 +2,7 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   // Emit relative asset URLs in index.html so the built plugin works when served
   // from a subdirectory (Penpot serves the bundled plugins under `/plugins/...`).
   // Vite resolves `./` to `/` for the dev server, so `pnpm run dev` is unaffected.

plugins/apps/poc-tokens-plugin/vite.config.ts

@@ -2,7 +2,7 @@
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   test: {
     watch: false,
     globals: true,

plugins/libs/plugins-runtime/vite.config.ts

@@ -7,7 +7,7 @@ import * as path from 'path';
 import checker from 'vite-plugin-checker';
 
 export default defineConfig({
-  root: __dirname,
+  root: import.meta.dirname,
   cacheDir: '../node_modules/.vite/plugins-runtime',
 
   resolve: {
@@ -17,7 +17,7 @@ export default defineConfig({
   plugins: [
     dts({
       entryRoot: 'src',
-      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+      tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'),
     }),
     checker({
       typescript: {