WebSocketsPlugin: polyfill structureClone in Safari < 15

Author: larabr

package-lock.json

@@ -60,6 +60,7 @@
   "dependencies": {
     "@types/koa": "^2.11.6",
     "@types/ws": "^7.4.0",
+    "@ungap/structured-clone": "^1.2.0",
     "@web/parse5-utils": "^2.1.0",
     "chokidar": "^4.0.1",
     "clone": "^2.1.2",
@@ -82,6 +83,7 @@
     "@types/koa-etag": "^3.0.0",
     "@types/koa-static": "^4.0.1",
     "@types/parse5": "^6.0.1",
+    "@types/ungap__structured-clone": "^1.2.0",
     "abort-controller": "^3.0.0",
     "express": "^4.18.2",
     "nanoid": "^3.1.25",

packages/dev-server-core/package.json

@@ -1,6 +1,7 @@
 import { Plugin } from '../plugins/Plugin.js';
 import { NAME_WEB_SOCKET_IMPORT, NAME_WEB_SOCKET_API } from './WebSocketsManager.js';
 import { appendToDocument, isHtmlFragment } from '@web/parse5-utils';
+import structuredClonePolyfill from '@ungap/structured-clone';
 
 export const webSocketScript = `<!-- injected by web-dev-server -->
 <script type="module" src="${NAME_WEB_SOCKET_IMPORT}"></script>`;
@@ -40,7 +41,7 @@ export function webSocketsPlugin(): Plugin {
         }
 
         export function stable (obj, replacer, spacer) {
-          var target = structuredClone(obj)
+          var target = ('structuredClone' in globalThis) ? structuredClone(obj) : structuredClonePolyfill(obj)
           var tmp = deterministicDecirc(target, '', [], undefined) || target
           var res
           if (replacerStack.length === 0) {