Add component diffing on event responses.

This change is gated by a flag called `enable_component_tree_diffs`.
When enabled, the full component tree will not be returned in event
responses. Instead only the changed compnent fields will be returned
to the frontend. The frontend will then apply the diff to update its
copy of the component tree.

.github/workflows/ci.yml

@@ -48,7 +48,14 @@ jobs:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
-
+      - name: Run playwright test with component tree diffs enabled
+        run: ENABLE_COMPONENT_TREE_DIFFS=1 yarn playwright test
+      - uses: actions/upload-artifact@a8a3f3ad30e3422c9c7b888a15615d19a852ae32 # v3.1.3
+        if: always()
+        with:
+          name: playwright-report-with-component-diffs-enabled
+          path: playwright-report-with-component-diffs-enabled/
+          retention-days: 30
   # Deploy docs
   deploy-docs:
     # Only deploy docs if we're pushing to main (see on.push.branches)

mesop/component_helpers/BUILD

@@ -1,4 +1,4 @@
-load("//build_defs:defaults.bzl", "py_library")
+load("//build_defs:defaults.bzl", "THIRD_PARTY_PY_ABSL_PY", "THIRD_PARTY_PY_PYTEST", "py_library", "py_test")
 
 package(
     default_visibility = ["//build_defs:mesop_internal"],
@@ -8,8 +8,15 @@ py_library(
     name = "component_helpers",
     srcs = glob(["*.py"]),
     deps = [
+        "//mesop/events",
         "//mesop/protos:ui_py_pb2",
         "//mesop/runtime",
         "//mesop/utils",
-    ],
+    ] + THIRD_PARTY_PY_ABSL_PY,
+)
+
+py_test(
+    name = "diff_component_test",
+    srcs = ["diff_component_test.py"],
+    deps = [":component_helpers"] + THIRD_PARTY_PY_PYTEST,
 )

mesop/component_helpers/__init__.py

@@ -1,6 +1,9 @@
 from .helper import (
   component as component,
 )
+from .helper import (
+  diff_component as diff_component,
+)
 from .helper import (
   get_qualified_fn_name as get_qualified_fn_name,
 )