refactor: preserve components structure for better tree shaking (#4418)

Here replaced esbuild with vite for building sdk-components packages.
Vite can be configured to output preserved structure instead of bundling
everything into single module which hurts treeshaking a lot.

sdk-components-react
./fixtures/ssg/dist/client: 284kB (-24kB)
./fixtures/webstudio-remix-netlify-functions/build/client: 368kB (-28kB)
./fixtures/webstudio-remix-vercel/build/client: 1004kB (-8kB)


sdk-components-react-radix
./fixtures/ssg/dist/client: 284kB (-4kB)
./fixtures/webstudio-remix-netlify-functions/build/client: 372kB (0kB)
./fixtures/webstudio-remix-vercel/build/client: 900kB (-108kB)

Author: TrySound

.github/workflows/main.yml

@@ -83,8 +83,9 @@ jobs:
               }
             }
             const results = [
-              await assertSize('./fixtures/ssg/dist/client', 308),
-              await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 396),
+              await assertSize('./fixtures/ssg/dist/client', 288),
+              await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 376),
+              await assertSize('./fixtures/webstudio-remix-vercel/build/client', 904),
             ]
             for (const result of results) {
               if (result.passed) {

packages/sdk-components-react-radix/package.json

@@ -35,7 +35,7 @@
     }
   },
   "scripts": {
-    "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts src/hooks.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:tailwind": "tsx scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",

packages/sdk-components-react-remix/package.json

@@ -30,7 +30,7 @@
     }
   },
   "scripts": {
-    "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.ts' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc"

packages/sdk-components-react-remix/src/hooks.ts

@@ -35,7 +35,7 @@
     }
   },
   "scripts": {
-    "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.test.{ts,tsx} !./src/*.ws.ts' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "vitest run",

packages/sdk-components-react/package.json

@@ -0,0 +1,30 @@
+import { defineConfig } from "vite";
+
+const isBareImport = (id: string) =>
+  id.startsWith("@") || id.includes(".") === false;
+
+export default defineConfig({
+  // resolve only webstudio condition in tests
+  resolve: {
+    conditions: ["webstudio"],
+  },
+  build: {
+    lib: {
+      entry: [
+        "src/components.ts",
+        "src/metas.ts",
+        "src/props.ts",
+        "src/hooks.ts",
+      ],
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: isBareImport,
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: "src",
+        dir: "lib",
+      },
+    },
+  },
+});