Add the onresize event handler to Element (#2479)

* Add the capability to handle resize event for web target

* Add the capability to handle resize event for desktop target

* Return all the sizes, not just the first one

* Fix conversion from platform to generic ResizedData for liveview

* Update the generated interpreter js code base

* Fix clippy warnings

* Fix inconsistent use of block_size and inline_size

* Rename `onresized` event to `onresize`

* Remove the the special-casing logic from the binding logic

* Propagating the resize events using CustomEvent

* Fix case convention in core ts

* revert changes to unified bindings

* Cleanup as suggested

* add a resize example

* Fix desktop resize events

* remove tracing from resize example

* use the raw resize entry so we can downcast on web

* remove unused ResizeEventDetail

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>

packages/interpreter/src/ts/serialize.ts

@@ -58,6 +58,13 @@ export function serializeEvent(
     extend({});
   }
 
+  if (event instanceof CustomEvent) {
+    const detail = event.detail;
+    if (detail instanceof ResizeObserverEntry) {
+      extend(serializeResizeEventDetail(detail));
+    }
+  }
+
   // safari is quirky and doesn't have TouchEvent
   if (typeof TouchEvent !== "undefined" && event instanceof TouchEvent) {
     extend(serializeTouchEvent(event));
@@ -96,6 +103,47 @@ export function serializeEvent(
   return contents;
 }
 
+function toSerializableResizeObserverSize(
+  size: ResizeObserverSize,
+  is_inline_width: boolean
+): Object {
+  return [
+    is_inline_width ? size.inlineSize : size.blockSize,
+    is_inline_width ? size.blockSize : size.inlineSize,
+  ];
+}
+
+export function serializeResizeEventDetail(
+  detail: ResizeObserverEntry
+): SerializedEvent {
+  let is_inline_width = true;
+  if (detail.target instanceof HTMLElement) {
+    let target_style = window.getComputedStyle(detail.target);
+    let target_writing_mode = target_style.getPropertyValue("writing-mode");
+    if (target_writing_mode !== "horizontal-tb") {
+      is_inline_width = false;
+    }
+  }
+
+  return {
+    border_box_size:
+      detail.borderBoxSize !== undefined
+        ? toSerializableResizeObserverSize(
+            detail.borderBoxSize[0],
+            is_inline_width
+          )
+        : detail.contentRect,
+    content_box_size:
+      detail.contentBoxSize !== undefined
+        ? toSerializableResizeObserverSize(
+            detail.contentBoxSize[0],
+            is_inline_width
+          )
+        : detail.contentRect,
+    content_rect: detail.contentRect,
+  };
+}
+
 function serializeInputEvent(
   event: InputEvent,
   target: EventTarget