refactor: bundle webstudio packages in cli (#4706)

Having all webstudio packages as dependency in CLI leads to very long
and bloated install.

Before
<img width="762" alt="Screenshot 2025-01-03 at 19 49 31"
src="https://github.com/user-attachments/assets/96624dae-c72a-4407-83ea-e56ed5d3f7d8"
/>

After
<img width="385" alt="Screenshot 2025-01-03 at 20 00 17"
src="https://github.com/user-attachments/assets/f3271c6e-07ca-47f6-9dfb-491ca68e7caf"
/>

after/before
<img width="633" alt="Screenshot 2025-01-03 at 19 58 15"
src="https://github.com/user-attachments/assets/8273072a-c71e-485c-aa39-116c9698bc8f"
/>

Author: TrySound

apps/builder/app/builder/features/settings-panel/shared.tsx

@@ -400,5 +400,8 @@ export const humanizeAttribute = (string: string) => {
   if (string === "className") {
     return "Class";
   }
+  if (string === "htmlFor") {
+    return "For";
+  }
   return humanizeString(string);
 };

packages/cli/package.json

@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "typecheck": "tsc",
-    "build": "rm -rf lib && esbuild src/cli.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "rm -rf lib && vite build",
     "test": "vitest run"
   },
   "license": "AGPL-3.0-or-later",
@@ -32,21 +32,20 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@webstudio-is/http-client": "workspace:*",
-    "@webstudio-is/image": "workspace:*",
-    "@webstudio-is/react-sdk": "workspace:*",
-    "@webstudio-is/sdk": "workspace:*",
-    "@webstudio-is/sdk-components-react": "workspace:*",
-    "@webstudio-is/sdk-components-react-radix": "workspace:*",
-    "@webstudio-is/sdk-components-react-remix": "workspace:*",
+    "@emotion/hash": "^0.9.2",
+    "acorn": "^8.14.0",
+    "acorn-walk": "^8.3.4",
     "change-case": "^5.4.4",
     "deepmerge": "^4.3.1",
     "env-paths": "^3.0.0",
+    "nanoid": "^5.0.8",
     "p-limit": "^4.0.0",
     "parse5": "7.1.2",
     "picocolors": "^1.1.0",
-    "strip-indent": "^4.0.0",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "reserved-identifiers": "^1.0.0",
     "tinyexec": "^0.3.1",
+    "warn-once": "^0.1.1",
     "yargs": "^17.7.2",
     "zod": "^3.22.4"
   },
@@ -63,9 +62,15 @@
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.33",
     "@vitejs/plugin-react": "^4.3.4",
+    "@webstudio-is/http-client": "workspace:*",
+    "@webstudio-is/image": "workspace:*",
+    "@webstudio-is/react-sdk": "workspace:*",
+    "@webstudio-is/sdk": "workspace:*",
+    "@webstudio-is/sdk-components-react": "workspace:*",
+    "@webstudio-is/sdk-components-react-radix": "workspace:*",
+    "@webstudio-is/sdk-components-react-remix": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     "prettier": "3.4.2",
-    "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "ts-expect": "^1.3.0",
     "vike": "^0.4.210",

packages/cli/vite.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig } from "vite";
+import pkg from "./package.json";
+
+const isExternal = (id: string, importer: string | undefined) => {
+  if (id.startsWith("@webstudio-is/")) {
+    return false;
+  }
+  if (id.startsWith("node:")) {
+    return true;
+  }
+  if (id.startsWith("@")) {
+    const packageName = id.split("/").slice(0, 2).join("/");
+    if (packageName in pkg.dependencies === false) {
+      throw Error(
+        `${packageName} imported from ${importer} is not found in direct dependencies`
+      );
+    }
+    return true;
+  }
+  if (id.includes(".") === false) {
+    const [packageName] = id.split("/");
+    if (packageName in pkg.dependencies === false) {
+      throw Error(
+        `${packageName} imported from ${importer} is not found in direct dependencies`
+      );
+    }
+    return true;
+  }
+  return false;
+};
+
+export default defineConfig({
+  // resolve only webstudio condition in tests
+  resolve: {
+    conditions: ["webstudio"],
+  },
+  build: {
+    minify: false,
+    lib: {
+      entry: ["src/cli.ts"],
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: isExternal,
+      output: {
+        dir: "lib",
+      },
+    },
+  },
+});

packages/image/src/image.tsx

@@ -9,6 +9,7 @@ const defaultTag = "img";
 
 type ImageProps = ComponentProps<typeof defaultTag> & {
   quality?: number;
+  /** Optimize the image for enhanced performance. */
   optimize?: boolean;
   loader: ImageLoader;
 };

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

@@ -41,7 +41,7 @@
   },
   "scripts": {
     "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:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.template.tsx !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc"

packages/sdk-components-react-radix/src/__generated__/select.props.ts

@@ -20,12 +20,6 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...props,
-    htmlFor: {
-      ...props.htmlFor,
-      label: "For",
-    },
-  },
+  props,
   initialProps: ["id", "className", "htmlFor"],
 };

packages/sdk-components-react-radix/src/__generated__/tabs.props.ts

@@ -76,7 +76,7 @@ const components = [
 ];
 
 const createMenuContentItem = (props: (typeof components)[number]) => (
-  <radix.NavigationMenuLink>
+  <radix.NavigationMenuLink key={props.title}>
     <$.Link
       href={`https://ui.shadcn.com${props.href}`}
       // block select-none space-y-1 rounded-md p-3 leading-none

packages/sdk-components-react-radix/src/label.ws.ts

@@ -41,7 +41,7 @@
   },
   "scripts": {
     "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\"",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.test.{ts,tsx} !./src/*.ws.ts !./src/*.ws.ts !./src/*.template.tsx' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "vitest run",
     "typecheck": "tsc"

packages/sdk-components-react-radix/src/navigation-menu.template.tsx

@@ -45,24 +45,16 @@ export const meta: WsComponentMeta = {
   order: 0,
 };
 
-// Automatically generated props don't have the right control.
-export const propsOverrides = {
-  src: {
-    type: "string",
-    control: "file",
-    label: "Source",
-    required: false,
-  },
-} as const;
-
-const optimize = props.optimize;
-optimize.description = "Optimize the image for enhanced performance.";
-
 export const propsMeta: WsComponentPropsMeta = {
   props: {
     ...props,
-    ...propsOverrides,
-    optimize,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: false,
+    },
   },
   initialProps: [
     "id",

packages/sdk-components-react/package.json

@@ -29,12 +29,6 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...props,
-    htmlFor: {
-      ...props.htmlFor,
-      label: "For",
-    },
-  },
+  props,
   initialProps: ["id", "className", "htmlFor"],
 };

packages/sdk-components-react/src/__generated__/image.props.ts

@@ -7,7 +7,7 @@ import {
 import { props } from "./__generated__/vimeo-play-button.props";
 import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import { button } from "@webstudio-is/sdk/normalize.css";
-import { defaultTag } from "./vimeo-play-button";
+import type { defaultTag } from "./vimeo-play-button";
 
 const presetStyle = {
   button,

packages/sdk-components-react/src/__generated__/vimeo-preview-image.props.ts

@@ -2,11 +2,7 @@ import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
-import {
-  propsOverrides as imagePropsOverrides,
-  propsMeta as imagePropsMeta,
-  meta as imageMeta,
-} from "./image.ws";
+import { propsMeta as imagePropsMeta, meta as imageMeta } from "./image.ws";
 import { props } from "./__generated__/vimeo-preview-image.props";
 
 export const meta: WsComponentMeta = {
@@ -20,6 +16,15 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  props: { ...props, ...imagePropsOverrides },
+  props: {
+    ...props,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: false,
+    },
+  },
   initialProps: imagePropsMeta.initialProps,
 };

packages/sdk-components-react/src/__generated__/vimeo.props.ts

@@ -8,7 +8,7 @@ import {
 } from "@webstudio-is/react-sdk";
 import { div } from "@webstudio-is/sdk/normalize.css";
 import { props } from "./__generated__/vimeo.props";
-import { Vimeo } from "./vimeo";
+import type { Vimeo } from "./vimeo";
 
 const presetStyle = {
   div,

packages/sdk-components-react/src/image.ws.ts

@@ -49,7 +49,6 @@
     "@webstudio-is/template": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     "html-tags": "^4.0.0",
-    "strip-indent": "^4.0.0",
     "vitest": "^2.1.8"
   }
 }