chore: react compiler

apps/guide/next.config.js

@@ -1,16 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/no-require-imports */
-// import bundleAnalyzer from '@next/bundle-analyzer';
 // import { withContentlayer } from 'next-contentlayer';
-const bundleAnalyzer = require('@next/bundle-analyzer');
 const { withContentlayer } = require('next-contentlayer');
 
-const withBundleAnalyzer = bundleAnalyzer({
+module.exports = withContentlayer({
-	enabled: process.env.ANALYZE === 'true',
-});
-
-module.exports = withBundleAnalyzer(
-	withContentlayer({
 	reactStrictMode: true,
 	experimental: {
 		typedRoutes: true,
@@ -21,5 +14,4 @@ module.exports = withBundleAnalyzer(
 		contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
 	},
 	poweredByHeader: false,
-	}),
+});
-);

apps/guide/package.json

@@ -54,35 +54,34 @@
 		"ariakit": "2.0.0-next.44",
 		"cmdk": "^1.0.0",
 		"contentlayer": "^0.3.4",
-		"next": "14.2.1",
+		"next": "^14.2.3",
 		"next-contentlayer": "^0.3.4",
 		"next-themes": "^0.3.0",
-		"react": "^18.2.0",
+		"react": "^18.3.1",
 		"react-custom-scrollbars-2": "^4.5.0",
-		"react-dom": "^18.2.0",
+		"react-dom": "^18.3.1",
 		"rehype-autolink-headings": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
-		"sharp": "^0.33.3"
+		"sharp": "^0.33.4"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "14.2.1",
+		"@testing-library/react": "^15.0.7",
-		"@testing-library/react": "^15.0.2",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/html-escaper": "^3.0.2",
 		"@types/node": "18.18.8",
-		"@types/react": "^18.2.79",
+		"@types/react": "^18.3.2",
-		"@types/react-dom": "^18.2.25",
+		"@types/react-dom": "^18.3.0",
-		"@unocss/eslint-plugin": "^0.59.3",
+		"@unocss/eslint-plugin": "^0.60.2",
-		"@unocss/postcss": "^0.58.5",
+		"@unocss/postcss": "^0.60.2",
-		"@unocss/reset": "^0.59.3",
+		"@unocss/reset": "^0.60.2",
 		"@vitejs/plugin-react": "^4.2.1",
-		"@vitest/coverage-v8": "^1.5.0",
+		"@vitest/coverage-v8": "^1.6.0",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.57.0",
 		"eslint-config-neon": "^0.1.62",
 		"eslint-formatter-pretty": "^6.0.1",
-		"happy-dom": "^14.7.1",
+		"happy-dom": "^14.11.0",
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^8.0.0",
 		"html-escaper": "^3.0.3",
@@ -90,7 +89,7 @@
 		"prettier": "^3.2.5",
 		"turbo": "^1.13.2",
 		"typescript": "^5.4.5",
-		"unocss": "^0.59.3",
+		"unocss": "^0.60.2",
 		"vercel": "^34.0.0",
 		"vitest": "^1.5.0"
 	},

apps/website/next.config.mjs

@@ -1,11 +1,7 @@
-import bundleAnalyzer from '@next/bundle-analyzer';
+/**
-import localesPlugin from '@react-aria/optimize-locales-plugin';
+ * @type {import('next').NextConfig}
-
+ */
-const withBundleAnalyzer = bundleAnalyzer({
+export default {
-	enabled: process.env.ANALYZE === 'true',
-});
-
-export default withBundleAnalyzer({
 	reactStrictMode: true,
 	images: {
 		dangerouslyAllowSVG: true,
@@ -18,14 +14,8 @@ export default withBundleAnalyzer({
 		},
 	},
 	experimental: {
-		ppr: false,
+		ppr: true,
-	},
+		reactCompiler: true,
-	webpack(config, { isServer }) {
-		if (!isServer) {
-			config.plugins.push(localesPlugin.webpack({ locales: ['en-US'] }));
-		}
-
-		return config;
 	},
 	async redirects() {
 		return [
@@ -41,4 +31,4 @@ export default withBundleAnalyzer({
 			},
 		];
 	},
-});
+};

apps/website/package.json

@@ -50,52 +50,51 @@
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@react-icons/all-files": "^4.1.0",
 		"@vercel/analytics": "^1.2.2",
-		"@vercel/blob": "^0.22.3",
+		"@vercel/blob": "^0.23.2",
 		"@vercel/edge-config": "^1.1.0",
 		"@vercel/og": "^0.6.2",
 		"@vercel/postgres": "^0.8.0",
 		"cmdk": "^1.0.0",
 		"geist": "^1.3.0",
 		"jotai": "^2.8.0",
-		"lucide-react": "^0.368.0",
+		"lucide-react": "^0.378.0",
-		"meilisearch": "^0.38.0",
+		"meilisearch": "^0.40.0",
-		"next": "14.2.1",
+		"next": "^14.3.0-canary.70",
 		"next-mdx-remote": "^4.4.1",
 		"next-themes": "^0.3.0",
-		"overlayscrollbars": "^2.6.0",
+		"overlayscrollbars": "^2.8.0",
 		"overlayscrollbars-react": "^0.5.6",
-		"react": "^18.2.0",
+		"react": "^19.0.0-rc-3f1436cca1-20240516",
-		"react-aria-components": "^1.1.1",
+		"react-aria-components": "^1.2.0",
-		"react-dom": "^18.2.0",
+		"react-dom": "^19.0.0-rc-3f1436cca1-20240516",
-		"sharp": "^0.33.3",
+		"sharp": "^0.33.4",
 		"usehooks-ts": "^3.1.0",
-		"vaul": "^0.9.0"
+		"vaul": "^0.9.1"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "14.2.1",
+		"@shikijs/rehype": "^1.6.0",
-		"@react-aria/optimize-locales-plugin": "^1.0.2",
+		"@tailwindcss/typography": "^0.5.13",
-		"@shikijs/rehype": "1.1.7",
+		"@testing-library/react": "^15.0.7",
-		"@tailwindcss/typography": "^0.5.12",
-		"@testing-library/react": "^15.0.2",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/node": "18.18.8",
-		"@types/react": "^18.2.79",
+		"@types/react": "^18.3.2",
-		"@types/react-dom": "^18.2.25",
+		"@types/react-dom": "^18.3.0",
 		"@vitejs/plugin-react": "^4.2.1",
-		"@vitest/coverage-v8": "^1.5.0",
+		"@vitest/coverage-v8": "^1.6.0",
 		"autoprefixer": "^10.4.19",
+		"babel-plugin-react-compiler": "^0.0.0-experimental-592953e-20240517",
 		"cpy-cli": "^5.0.0",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.57.0",
 		"eslint-config-neon": "^0.1.62",
 		"eslint-formatter-pretty": "^6.0.1",
-		"happy-dom": "^14.7.1",
+		"happy-dom": "^14.11.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.2.5",
 		"prettier-plugin-tailwindcss": "^0.5.14",
 		"remark-gfm": "^3.0.1",
 		"remark-rehype": "^11.1.0",
-		"shiki": "1.3.0",
+		"shiki": "^1.6.0",
 		"tailwindcss": "^3.4.3",
 		"turbo": "^1.13.2",
 		"typescript": "^5.4.5",

apps/website/src/app/docs/packages/[packageName]/[version]/layout.tsx

@@ -5,7 +5,6 @@ import { Navigation } from '~/components/Navigation';
 import { OverlayScrollbarsComponent } from '~/components/OverlayScrollbars';
 import { Drawer } from '~/components/ui/Drawer';
 import { Footer } from '~/components/ui/Footer';
-import { ENV } from '~/util/env';
 import { fetchDependencies } from '~/util/fetchDependencies';
 
 // eslint-disable-next-line promise/prefer-await-to-then
@@ -33,11 +32,9 @@ export default async function Layout({
 	return (
 		// eslint-disable-next-line react/no-unknown-property
 		<div vaul-drawer-wrapper="" className="mx-auto flex max-w-screen-2xl flex-col gap-12 p-6 md:flex-row">
-			<div
+			<div className="sticky top-6 hidden flex-shrink-0 self-start md:block">
-				className={`sticky hidden flex-shrink-0 self-start md:block ${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'top-[64px]' : 'top-6'}`}
-			>
 				<OverlayScrollbarsComponent
-					className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'max-h-[calc(100dvh-48px-40px)]' : 'max-h-[calc(100dvh-48px)]'}`}
+					className="max-h-[calc(100dvh-48px)]"
 					defer
 					options={{
 						overflow: { x: 'hidden' },

apps/website/src/components/ui/CmdK.tsx

@@ -5,7 +5,7 @@ import { useAtom, useSetAtom } from 'jotai';
 import { ArrowRight } from 'lucide-react';
 import MeiliSearch from 'meilisearch';
 import { usePathname, useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDebounceValue } from 'usehooks-ts';
 import { isCmdKOpenAtom } from '~/stores/cmdk';
 import { isDrawerOpenAtom } from '~/stores/drawer';
@@ -25,15 +25,14 @@ export function CmdK({ dependencies }: { readonly dependencies: string[] }) {
 	const [search, setSearch] = useDebounceValue('', 250);
 	const [searchResults, setSearchResults] = useState<any[]>([]);
 
-	const packageName = useMemo(() => pathname?.split('/').slice(3, 4)[0], [pathname]);
+	const packageName = pathname?.split('/').slice(3, 4)[0];
-	const branchName = useMemo(() => pathname?.split('/').slice(4, 5)[0], [pathname]);
+	const branchName = pathname?.split('/').slice(4, 5)[0];
 
-	const searchResultItems = useMemo(
+	const searchResultItems =
-		() =>
 		searchResults?.map((item, idx) => (
 			<Command.Item
 				key={`${item.id}-${idx}`}
-					className="flex cursor-pointer place-items-center gap-2 rounded-md p-2 data-[selected]:bg-neutral-200 dark:data-[selected]:bg-neutral-800"
+				className="flex cursor-pointer place-items-center gap-2 rounded-md p-2 data-[selected='true']:bg-neutral-200 dark:data-[selected='true']:bg-neutral-800"
 				onSelect={() => {
 					router.push(item.path);
 					setOpen(false);
@@ -48,9 +47,7 @@ export function CmdK({ dependencies }: { readonly dependencies: string[] }) {
 				</div>
 				<ArrowRight aria-hidden className="flex-shrink-0" />
 			</Command.Item>
-			)) ?? [],
+		)) ?? [];
-		[router, searchResults, setOpen],
-	);
 
 	// Toggle the menu when ⌘K is pressed
 	useEffect(() => {

package.json

@@ -6,19 +6,19 @@
 	"private": true,
 	"scripts": {
 		"build": "turbo run build --concurrency=4",
-		"build:affected": "turbo run build --filter='...[origin/main]' --concurrency=4",
+		"build:affected": "turbo run build --filter=...[origin/main] --concurrency=4",
-		"build:apps": "turbo run build:local --filter='...{apps/*}' --concurrency=4",
+		"build:apps": "turbo run build:local --filter=...{apps/*} --concurrency=4",
-		"build:apps:affected": "turbo run build:local --filter='...{apps/*}[origin/main]' --concurrency=4",
+		"build:apps:affected": "turbo run build:local --filter=...{apps/*}[origin/main] --concurrency=4",
 		"test": "turbo run test --concurrency=4",
-		"test:affected": "turbo run test --filter='...[origin/main]' --concurrency=4",
+		"test:affected": "turbo run test --filter=...[origin/main] --concurrency=4",
 		"lint": "turbo run lint --concurrency=4",
-		"lint:affected": "turbo run lint --filter='...[origin/main]' --concurrency=4",
+		"lint:affected": "turbo run lint --filter=...[origin/main] --concurrency=4",
 		"format": "turbo run format --concurrency=4",
-		"format:affected": "turbo run format --filter='...[origin/main]' --concurrency=4",
+		"format:affected": "turbo run format --filter=...[origin/main] --concurrency=4",
 		"fmt": "turbo run format --concurrency=4",
-		"fmt:affected": "turbo run format --filter='...[origin/main]' --concurrency=4",
+		"fmt:affected": "turbo run format --filter=...[origin/main] --concurrency=4",
 		"docs": "turbo run docs --concurrency=4",
-		"docs:affected": "turbo run docs --filter='...[origin/main]' --concurrency=4",
+		"docs:affected": "turbo run docs --filter=...[origin/main] --concurrency=4",
 		"prepare": "is-ci || husky",
 		"update": "pnpm --recursive update --interactive",
 		"update:latest": "pnpm --recursive update --interactive --latest",
@@ -69,7 +69,7 @@
 		"turbo": "^1.13.2",
 		"typescript": "^5.4.5",
 		"typescript-eslint": "^7.7.0",
-		"unocss": "^0.59.3",
+		"unocss": "^0.60.2",
 		"vercel": "^34.0.0",
 		"vitest": "^1.5.0"
 	},
@@ -97,5 +97,5 @@
 	"engines": {
 		"node": ">=18"
 	},
-	"packageManager": "pnpm@8.15.7+sha256.50783dd0fa303852de2dd1557cd4b9f07cb5b018154a6e76d0f40635d6cee019"
+	"packageManager": "pnpm@9.1.1"
 }

packages/ui/package.json

@@ -54,8 +54,8 @@
 	"dependencies": {
 		"@react-icons/all-files": "^4.1.0",
 		"ariakit": "2.0.0-next.44",
-		"react": "^18.2.0",
+		"react": "^18.3.1",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.3.1"
 	},
 	"devDependencies": {
 		"@favware/cliff-jumper": "^3.0.2",
@@ -69,12 +69,12 @@
 		"@storybook/react-vite": "^8.0.8",
 		"@storybook/testing-library": "^0.2.2",
 		"@types/node": "18.18.8",
-		"@types/react": "^18.2.79",
+		"@types/react": "^18.3.2",
-		"@types/react-dom": "^18.2.25",
+		"@types/react-dom": "^18.3.0",
-		"@unocss/eslint-plugin": "^0.59.3",
+		"@unocss/eslint-plugin": "^0.60.2",
-		"@unocss/reset": "^0.59.3",
+		"@unocss/reset": "^0.60.2",
 		"@vitejs/plugin-react": "^4.2.1",
-		"@vitest/coverage-v8": "^1.5.0",
+		"@vitest/coverage-v8": "^1.6.0",
 		"chromatic": "^11.3.0",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.57.0",
@@ -85,7 +85,7 @@
 		"storybook": "^8.0.8",
 		"turbo": "^1.13.2",
 		"typescript": "^5.4.5",
-		"unocss": "^0.59.3",
+		"unocss": "^0.60.2",
 		"vite": "^5.2.9",
 		"vite-plugin-dts": "^3.8.3",
 		"vitest": "^1.5.0"