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

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

This reverts commit 13c1f5ff6b.

* Adds a changeset

.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'];

pnpm-lock.yaml

@@ -498,7 +498,6 @@ importers:
       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
@@ -529,6 +528,7 @@ importers:
       rollup: ^2.70.2
       sass: ^1.50.1
       semver: ^7.3.7
+      serialize-javascript: ^6.0.0
       shiki: ^0.10.1
       sirv: ^2.0.2
       slash: ^4.0.0
@@ -559,7 +559,6 @@ importers:
       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
@@ -588,6 +587,7 @@ importers:
       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
@@ -5543,10 +5543,6 @@ packages:
       defined: 1.0.0
       minimist: 1.2.6
 
-  /devalue/2.0.1:
-    resolution: {integrity: sha512-I2TiqT5iWBEyB8GRfTDP0hiLZ0YeDJZ+upDxjBfOC2lebO5LezQMv7QvIUTzdb64jQyAKLf1AHADtGN+jw6v8Q==}
-    dev: false
-
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -8753,7 +8749,6 @@ packages:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
     dependencies:
       safe-buffer: 5.2.1
-    dev: true
 
   /raw-body/2.5.1:
     resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==}
@@ -9252,7 +9247,6 @@ packages:
     resolution: {integrity: sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==}
     dependencies:
       randombytes: 2.1.0
-    dev: true
 
   /set-blocking/2.0.0:
     resolution: {integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc=}