feat: React compiler setup

.changeset/wild-lands-exist.md

@@ -0,0 +1,6 @@
+---
+"@reshaped/headless": patch
+"reshaped": patch
+---
+
+Adopted React compiler for internal builds

package.json

@@ -53,6 +53,7 @@
 		"@vitest/browser-playwright": "4.0.16",
 		"@vitest/coverage-istanbul": "4.0.16",
 		"@vitest/coverage-v8": "4.0.16",
+		"babel-plugin-react-compiler": "1.0.0",
 		"chromatic": "13.3.4",
 		"cssnano": "7.1.2",
 		"eslint": "9.39.2",
@@ -87,6 +88,7 @@
 		"typescript": "5.9.3",
 		"typescript-eslint": "8.50.1",
 		"vite": "7.3.0",
+		"vite-plugin-dts": "4.5.4",
 		"vite-tsconfig-paths": "5.1.4",
 		"vitest": "4.0.16",
 		"vitest-browser-react": "2.0.2"

packages/headless/package.json

@@ -37,13 +37,14 @@
 	"scripts": {
 		"clean": "rm -rf dist",
 		"dev": "tsc-watch --onSuccess \"resolve-tspaths\"",
-		"build": "tsc && resolve-tspaths"
+		"build": "vite build"
 	},
 	"peerDependencies": {
 		"react": "^18 || ^19",
 		"react-dom": "^18 || ^19"
 	},
 	"dependencies": {
-		"@reshaped/utilities": "workspace:*"
+		"@reshaped/utilities": "workspace:*",
+		"react-compiler-runtime": "1.0.0"
 	}
 }

packages/headless/vite.config.mjs

@@ -0,0 +1,56 @@
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const ReactCompilerConfig = {
+	target: "18",
+};
+
+export default defineConfig({
+	plugins: [
+		react({
+			babel: {
+				plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
+			},
+		}),
+		tsconfigPaths(),
+		dts({
+			exclude: ["**/*.stories.tsx"],
+		}),
+	],
+	build: {
+		target: "es2022",
+		outDir: "dist",
+		emptyOutDir: true,
+		sourcemap: false,
+		minify: false,
+		lib: {
+			entry: {
+				index: resolve(__dirname, "src/index.ts"),
+				internal: resolve(__dirname, "src/internal.ts"),
+			},
+			formats: ["es"],
+		},
+		rollupOptions: {
+			external: [
+				"react",
+				"react/jsx-runtime",
+				"react-dom",
+				"react-compiler-runtime",
+				/^@reshaped\//,
+			],
+			output: {
+				preserveModules: true,
+				preserveModulesRoot: "src",
+				entryFileNames: "[name].js",
+			},
+		},
+	},
+});

packages/reshaped/package.json

@@ -80,10 +80,10 @@
     "dev": "storybook dev -p 3001 -c ../../.storybook --disable-telemetry",
     "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
-    "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
+    "build:esm": "vite build",
     "build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
     "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
-    "build:bundle": "vite build && shx cp dist/index.d.ts dist/bundle.d.ts",
+    "build:bundle": "vite build --mode bundle && shx cp dist/index.d.ts dist/bundle.d.ts",
     "build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
     "release:local": "pnpm build && pnpm pack --out reshaped-local.tgz",
     "test:browser": "vitest run --project=storybook",
@@ -106,6 +106,7 @@
     "cssnano": "7.1.1",
     "csstype": "3.1.3",
     "culori": "4.0.2",
-    "postcss-custom-media": "11.0.6"
+    "postcss-custom-media": "11.0.6",
+    "react-compiler-runtime": "^1.0.0"
   }
 }

packages/reshaped/vite.config.mjs

@@ -3,37 +3,88 @@ import { fileURLToPath } from "url";
 
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-export default defineConfig({
-	plugins: [react(), tsconfigPaths()],
-	css: {
-		postcss: resolve(__dirname, "tools/build"),
-	},
-	build: {
-		target: "es2015",
-		emptyOutDir: false,
-		lib: {
-			entry: resolve(__dirname, "src/index.ts"),
-			name: "Reshaped",
-			fileName: "bundle",
-			formats: ["umd"],
-		},
-		rollupOptions: {
-			logLevel: "silent",
-			external: ["react", "react/jsx-runtime", "react-dom"],
-			output: {
-				entryFileNames: "bundle.js",
-				chunkFileNames: "[name].js",
-				globals: {
-					react: "React",
-					"react-dom": "ReactDOM",
-					"react/jsx-runtime": "react/jsx-runtime",
+const ReactCompilerConfig = {
+	target: "18",
+};
+
+export default defineConfig(({ mode }) => {
+	const isBundle = mode === "bundle";
+
+	return {
+		plugins: [
+			react({
+				babel: {
+					plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
 				},
-			},
+			}),
+			tsconfigPaths(),
+			!isBundle &&
+				dts({
+					exclude: [
+						"**/*.test.ts",
+						"**/*.test.tsx",
+						"**/*.stories.tsx",
+						"src/utilities/testPresets.tsx",
+					],
+				}),
+		].filter(Boolean),
+		css: {
+			postcss: resolve(__dirname, "tools/build"),
 		},
-	},
+		build: isBundle
+			? {
+					target: "es2015",
+					emptyOutDir: false,
+					lib: {
+						entry: resolve(__dirname, "src/index.ts"),
+						name: "Reshaped",
+						fileName: "bundle",
+						formats: ["umd"],
+					},
+					rollupOptions: {
+						logLevel: "silent",
+						external: ["react", "react/jsx-runtime", "react-dom"],
+						output: {
+							entryFileNames: "bundle.js",
+							chunkFileNames: "[name].js",
+							globals: {
+								react: "React",
+								"react-dom": "ReactDOM",
+								"react/jsx-runtime": "react/jsx-runtime",
+							},
+						},
+					},
+				}
+			: {
+					target: "es2022",
+					outDir: "dist",
+					emptyOutDir: true,
+					sourcemap: false,
+					minify: false,
+					lib: {
+						entry: resolve(__dirname, "src/index.ts"),
+						formats: ["es"],
+					},
+					rollupOptions: {
+						external: [
+							"react",
+							"react/jsx-runtime",
+							"react-dom",
+							"react-compiler-runtime",
+							/^@reshaped\//,
+						],
+						output: {
+							preserveModules: true,
+							preserveModulesRoot: "src",
+							entryFileNames: "[name].js",
+						},
+					},
+				},
+	};
 });