chore(playground): update resvg-wasm

playground/components/resvg_worker.ts

@@ -1,6 +1,7 @@
 import * as resvg from '@resvg/resvg-wasm'
 
-fetch('/resvg.wasm').then((res) => resvg.initWasm(res))
+const wasmPath = new URL('@resvg/resvg-wasm/index_bg.wasm', import.meta.url)
+fetch(wasmPath).then((res) => resvg.initWasm(res))
 
 self.onmessage = (e) => {
   const { svg, width, _id } = e.data
@@ -11,7 +12,8 @@ self.onmessage = (e) => {
       value: width,
     },
   })
-  const pngData = renderer.render()
-  const url = URL.createObjectURL(new Blob([pngData], { type: 'image/png' }))
+  const image = renderer.render()
+  const pngBuffer = image.asPng()
+  const url = URL.createObjectURL(new Blob([pngBuffer], { type: 'image/png' }))
   self.postMessage({ _id, url })
 }

playground/package.json

@@ -11,8 +11,7 @@
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@monaco-editor/react": "^4.4.5",
-    "@resvg/resvg-js": "^1.4.0",
-    "@resvg/resvg-wasm": "2.0.0-alpha.4",
+    "@resvg/resvg-wasm": "^2.3.1",
     "blob-stream": "^0.1.3",
     "copy-to-clipboard": "^3.3.2",
     "fflate": "^0.7.3",

playground/pages/index.tsx

@@ -64,7 +64,14 @@ async function init() {
         res.arrayBuffer()
       ),
       !globalThis.Intl || !globalThis.Intl.Segmenter
-        ? createIntlSegmenterPolyfill(fetch('/break_iterator.wasm'))
+        ? createIntlSegmenterPolyfill(
+            fetch(
+              new URL(
+                'intl-segmenter-polyfill/dist/break_iterator.wasm',
+                import.meta.url
+              )
+            )
+          )
         : null,
     ]))