Add ImageData

docs/compatibility.md

@@ -129,6 +129,7 @@ By default, all feature flags are enabled. The following are the feature flags a
 | [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) | ✅ | ✅ | ✅ |
 | [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) | ✅ | ✅ | ✅ |
 | [`DOMException`](https://developer.mozilla.org/en-US/docs/Web/API/DOMException) | ✅ | ✅ |  ✅ |
+| [`ImageData`](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) | ✅ | ✅ |  ✅ |
 
 [^1]: `Feature.BigIntTypedArray` must be enabled, otherwise throws an `UnsupportedTypeError`.
 [^2]: `Feature.ErrorPrototypeStack` must be enabled if serializing `Error.prototype.stack` is desired.

packages/plugins/web/image-data.ts

@@ -0,0 +1,68 @@
+import type { SerovalNode } from 'seroval';
+import { createPlugin } from 'seroval';
+
+interface ImageDataNode {
+  data: SerovalNode;
+  width: SerovalNode;
+  height: SerovalNode;
+  options: SerovalNode;
+}
+
+const ImageDataPlugin = /* @__PURE__ */createPlugin<ImageData, ImageDataNode>({
+  tag: 'seroval-plugins/web/ImageData',
+  test(value) {
+    if (typeof ImageData === 'undefined') {
+      return false;
+    }
+    return value instanceof ImageData;
+  },
+  parse: {
+    sync(value, ctx) {
+      return {
+        data: ctx.parse(value.data),
+        width: ctx.parse(value.width),
+        height: ctx.parse(value.height),
+        options: ctx.parse({
+          colorSpace: value.colorSpace,
+        }),
+      };
+    },
+    async async(value, ctx) {
+      return {
+        data: await ctx.parse(value.data),
+        width: await ctx.parse(value.width),
+        height: await ctx.parse(value.height),
+        options: await ctx.parse({
+          colorSpace: value.colorSpace,
+        }),
+      };
+    },
+    stream(value, ctx) {
+      return {
+        data: ctx.parse(value.data),
+        width: ctx.parse(value.width),
+        height: ctx.parse(value.height),
+        options: ctx.parse({
+          colorSpace: value.colorSpace,
+        }),
+      };
+    },
+  },
+  serialize(node, ctx) {
+    return 'new ImageData('
+      + ctx.serialize(node.data) + ','
+      + ctx.serialize(node.width) + ','
+      + ctx.serialize(node.height) + ','
+      + ctx.serialize(node.options) + ')';
+  },
+  deserialize(node, ctx) {
+    return new ImageData(
+      ctx.deserialize(node.data) as Uint8ClampedArray,
+      ctx.deserialize(node.width) as number,
+      ctx.deserialize(node.height) as number,
+      ctx.deserialize(node.options) as ImageDataSettings,
+    );
+  },
+});
+
+export default ImageDataPlugin;

packages/plugins/web/index.ts

@@ -5,6 +5,7 @@ export { default as EventPlugin } from './event';
 export { default as FilePlugin } from './file';
 export { default as FormDataPlugin } from './form-data';
 export { default as HeadersPlugin } from './headers';
+export { default as ImageDataPlugin } from './image-data';
 export { default as ReadableStreamPlugin } from './readable-stream';
 export { default as Request } from './request';
 export { default as Response } from './response';