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

…astro#3304)

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

This reverts commit 13c1f5f.

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