Revert "refactor: remove serialize-javascript (#3278)"

.changeset/sour-pianos-help.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes regression that prevented passing classes to islands

packages/astro/package.json

@@ -92,7 +92,6 @@
     "ci-info": "^3.3.0",
     "common-ancestor-path": "^1.0.1",
     "debug": "^4.3.4",
-    "devalue": "^2.0.1",
     "diff": "^5.0.0",
     "eol": "^0.9.1",
     "es-module-lexer": "^0.10.5",
@@ -121,6 +120,7 @@
     "resolve": "^1.22.0",
     "rollup": "^2.70.2",
     "semver": "^7.3.7",
+    "serialize-javascript": "^6.0.0",
     "shiki": "^0.10.1",
     "sirv": "^2.0.2",
     "slash": "^4.0.0",

packages/astro/src/@types/serialize-javascript.d.ts

@@ -0,0 +1,3 @@
+declare module 'serialize-javascript' {
+	export default function serialize(value: any): string;
+}

packages/astro/src/core/create-vite.ts

@@ -21,6 +21,7 @@ const ALWAYS_EXTERNAL = new Set([
 	...builtinModules.map((name) => `node:${name}`),
 	'@sveltejs/vite-plugin-svelte',
 	'micromark-util-events-to-acorn',
+	'serialize-javascript',
 	'node-fetch',
 	'prismjs',
 	'shiki',
@@ -92,6 +93,13 @@ export async function createVite(
 		css: {
 			postcss: astroConfig.style.postcss || {},
 		},
+		resolve: {
+			alias: {
+				// This is needed for Deno compatibility, as the non-browser version
+				// of this module depends on Node `crypto`
+				randombytes: 'randombytes/browser',
+			},
+		},
 		// Note: SSR API is in beta (https://vitejs.dev/guide/ssr.html)
 		ssr: {
 			external: [...ALWAYS_EXTERNAL],

packages/astro/src/runtime/server/hydration.ts

@@ -1,12 +1,12 @@
 import type { AstroComponentMetadata, SSRLoadedRenderer } from '../../@types/astro';
 import type { SSRElement, SSRResult } from '../../@types/astro';
 import { hydrationSpecifier, serializeListValue } from './util.js';
-import devalue from 'devalue';
+import serializeJavaScript from 'serialize-javascript';
 
 // Serializes props passed into a component so that they can be reused during hydration.
 // The value is any
 export function serializeProps(value: any) {
-	return devalue(value);
+	return serializeJavaScript(value);
 }
 
 const HydrationDirectives = ['load', 'idle', 'media', 'visible', 'only'];