initial work to move target event data

Author: rmorshea

src/client/packages/idom-client-react/src/event-to-object.js

@@ -5,27 +5,40 @@ export function serializeEvent(event) {
     Object.assign(data, eventTransforms[event.type](event));
   }
 
-  const target = event.target;
-  if (target.tagName in targetTransforms) {
-    targetTransforms[target.tagName].forEach((trans) =>
-      Object.assign(data, trans(target))
-    );
-  }
+  data.target = serializeDomElement(event.target);
+  data.currentTarget =
+    event.target === event.currentTarget
+      ? data.target
+      : serializeDomElement(event.currentTarget);
+  data.relatedTarget = serializeDomElement(event.relatedTarget);
 
   return data;
 }
 
-const targetTransformCategories = {
-  hasValue: (target) => ({
-    value: target.value,
+function serializeDomElement(element) {
+  let elementData = null;
+  if (element) {
+    elementData = defaultElementTransform(element);
+    if (element.tagName in elementTransforms) {
+      elementTransforms[element.tagName].forEach((trans) =>
+        Object.assign(elementData, trans(element))
+      );
+    }
+  }
+  return elementData;
+}
+
+const elementTransformCategories = {
+  hasValue: (element) => ({
+    value: element.value,
   }),
-  hasCurrentTime: (target) => ({
-    currentTime: target.currentTime,
+  hasCurrentTime: (element) => ({
+    currentTime: element.currentTime,
   }),
-  hasFiles: (target) => {
-    if (target?.type === "file") {
+  hasFiles: (element) => {
+    if (element?.type === "file") {
       return {
-        files: Array.from(target.files).map((file) => ({
+        files: Array.from(element.files).map((file) => ({
           lastModified: file.lastModified,
           name: file.name,
           size: file.size,
@@ -38,7 +51,11 @@ const targetTransformCategories = {
   },
 };
 
-const targetTagCategories = {
+function defaultElementTransform(element) {
+  return { boundingClientRect: element.getBoundingClientRect() };
+}
+
+const elementTagCategories = {
   hasValue: [
     "BUTTON",
     "INPUT",
@@ -54,12 +71,13 @@ const targetTagCategories = {
   hasFiles: ["INPUT"],
 };
 
-const targetTransforms = {};
+const elementTransforms = {};
 
-Object.keys(targetTagCategories).forEach((category) => {
-  targetTagCategories[category].forEach((type) => {
-    const transforms = targetTransforms[type] || (targetTransforms[type] = []);
-    transforms.push(targetTransformCategories[category]);
+Object.keys(elementTagCategories).forEach((category) => {
+  elementTagCategories[category].forEach((type) => {
+    const transforms =
+      elementTransforms[type] || (elementTransforms[type] = []);
+    transforms.push(elementTransformCategories[category]);
   });
 });
 

src/idom/core/_event_proxy.py

@@ -0,0 +1,23 @@
+from typing import Any, Sequence
+from warnings import warn
+
+
+def _wrap_in_warning_event_proxies(values: Sequence[Any]) -> Sequence[Any]:
+    return [_EventProxy(x) if isinstance(x, dict) else x for x in values]
+
+
+class _EventProxy(dict[Any, Any]):
+    def __getitem__(self, key: Any) -> Any:
+        try:
+            return super().__getitem__(key)
+        except KeyError:
+            target = self.get("target")
+            if isinstance(target, dict) and key in target:
+                warn(
+                    f"The event key event[{key!r}] has been moved event['target'][{key!r}",
+                    DeprecationWarning,
+                    stacklevel=1,
+                )
+                return target[key]
+            else:
+                raise

src/idom/core/layout.py

@@ -29,6 +29,7 @@
 )
 from idom.utils import Ref
 
+from ._event_proxy import _wrap_in_warning_event_proxies
 from .hooks import LifeCycleHook
 from .proto import ComponentType, EventHandlerDict, VdomJson
 from .vdom import validate_vdom_json
@@ -119,7 +120,7 @@ async def deliver(self, event: LayoutEvent) -> None:
 
         if handler is not None:
             try:
-                await handler.function(event.data)
+                await handler.function(_wrap_in_warning_event_proxies(event.data))
             except Exception:
                 logger.exception(f"Failed to execute event handler {handler}")
         else: