Send experiment settings on initial page load (#1093)

google · Nov 5, 2024 · 8efc807 · 8efc807
1 parent 4ce8096
commit 8efc807
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 31 deletions.
diff --git a/mesop/protos/ui.proto b/mesop/protos/ui.proto
@@ -172,15 +172,8 @@ message RenderEvent {
 
     // Only sent in editor mode:
     repeated ComponentConfig component_configs = 5;
-    // Only sent in initial render:
-    optional ExperimentSettings experiment_settings = 7;
 }
 
-message ExperimentSettings {
-    optional bool experimental_editor_toolbar_enabled = 1;
-    optional bool concurrent_updates_enabled = 2;
-    optional bool websockets_enabled = 3;
-}
 
 // UI response event for updating state.
 message UpdateStateEvent {

diff --git a/mesop/server/server.py b/mesop/server/server.py
@@ -16,8 +16,6 @@
 from mesop.component_helpers import diff_component
 from mesop.editor.component_configs import get_component_configs
 from mesop.env.env import (
-  EXPERIMENTAL_EDITOR_TOOLBAR_ENABLED,
-  MESOP_CONCURRENT_UPDATES_ENABLED,
   MESOP_WEBSOCKETS_ENABLED,
 )
 from mesop.events import LoadEvent
@@ -101,13 +99,6 @@ def render_loop(
             f"/{WEB_COMPONENTS_PATH_SEGMENT}{js_module}"
             for js_module in js_modules
           ],
-          experiment_settings=pb.ExperimentSettings(
-            websockets_enabled=MESOP_WEBSOCKETS_ENABLED,
-            concurrent_updates_enabled=MESOP_CONCURRENT_UPDATES_ENABLED,
-            experimental_editor_toolbar_enabled=EXPERIMENTAL_EDITOR_TOOLBAR_ENABLED,
-          )
-          if init_request
-          else None,
         )
       )
       yield serialize(data)

diff --git a/mesop/server/static_file_serving.py b/mesop/server/static_file_serving.py
@@ -1,5 +1,6 @@
 import gzip
 import io
+import json
 import mimetypes
 import os
 import re
@@ -12,7 +13,12 @@
 from flask import Flask, Response, g, make_response, request, send_file
 from werkzeug.security import safe_join
 
-from mesop.env.env import get_app_base_path
+from mesop.env.env import (
+  EXPERIMENTAL_EDITOR_TOOLBAR_ENABLED,
+  MESOP_CONCURRENT_UPDATES_ENABLED,
+  MESOP_WEBSOCKETS_ENABLED,
+  get_app_base_path,
+)
 from mesop.exceptions import MesopException
 from mesop.runtime import runtime
 from mesop.server.constants import WEB_COMPONENTS_PATH_SEGMENT
@@ -75,6 +81,19 @@ def retrieve_index_html() -> io.BytesIO | str:
             for stylesheet in page_config.stylesheets
           ]
         )
+      if (
+        line.strip() == "<!-- Inject experiment settings script (if needed) -->"
+      ):
+        experiment_settings = {
+          "websocketsEnabled": MESOP_WEBSOCKETS_ENABLED,
+          "concurrentUpdatesEnabled": MESOP_CONCURRENT_UPDATES_ENABLED,
+          "experimentalEditorToolbarEnabled": EXPERIMENTAL_EDITOR_TOOLBAR_ENABLED,
+        }
+        lines[i] = f"""
+          <script nonce="{g.csp_nonce}">
+            window.__MESOP_EXPERIMENTS__ = {json.dumps(experiment_settings)};
+          </script>
+        """
 
     # Create a BytesIO object from the modified lines
     modified_file_content = "".join(lines)

diff --git a/mesop/web/src/app/editor/index.html b/mesop/web/src/app/editor/index.html
@@ -18,6 +18,7 @@
   <body>
     <mesop-editor-app ngCspNonce="$$INSERT_CSP_NONCE$$"></mesop-editor-app>
     <!-- Inject livereload script (if needed) -->
+    <!-- Inject experiment settings script (if needed) -->
     <script src="zone.js/bundles/zone.umd.js"></script>
     <script src="editor_bundle/bundle.js" type="module"></script>
   </body>

diff --git a/mesop/web/src/app/prod/index.html b/mesop/web/src/app/prod/index.html
@@ -18,6 +18,7 @@
   <body>
     <mesop-app ngCspNonce="$$INSERT_CSP_NONCE$$"></mesop-app>
     <!-- Inject livereload script (if needed) -->
+    <!-- Inject experiment settings script (if needed) -->
     <script src="zone.js/bundles/zone.umd.js"></script>
     <script src="prod_bundle.js" type="module"></script>
   </body>

diff --git a/mesop/web/src/services/channel.ts b/mesop/web/src/services/channel.ts
@@ -305,17 +305,6 @@ export class Channel {
         } else {
           this.rootComponent = rootComponent;
         }
-        const experimentSettings = uiResponse
-          .getRender()!
-          .getExperimentSettings();
-        if (experimentSettings) {
-          this.experimentService.websocketsEnabled =
-            experimentSettings.getWebsocketsEnabled() ?? false;
-          this.experimentService.concurrentUpdatesEnabled =
-            experimentSettings.getConcurrentUpdatesEnabled() ?? false;
-          this.experimentService.experimentalEditorToolbarEnabled =
-            experimentSettings.getExperimentalEditorToolbarEnabled() ?? false;
-        }
 
         this.componentConfigs = uiResponse
           .getRender()!

diff --git a/mesop/web/src/services/experiment_service.ts b/mesop/web/src/services/experiment_service.ts
@@ -1,10 +1,35 @@
 import {Injectable} from '@angular/core';
 
+interface ExperimentSettings {
+  readonly websocketsEnabled: boolean;
+  readonly concurrentUpdatesEnabled: boolean;
+  readonly experimentalEditorToolbarEnabled: boolean;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class ExperimentService {
-  concurrentUpdatesEnabled = false;
-  experimentalEditorToolbarEnabled = false;
-  websocketsEnabled = false;
+  private readonly settings: ExperimentSettings;
+
+  constructor() {
+    const windowSettings = (window as any).__MESOP_EXPERIMENTS__;
+    this.settings = windowSettings ?? {
+      websocketsEnabled: false,
+      concurrentUpdatesEnabled: false,
+      experimentalEditorToolbarEnabled: false,
+    };
+  }
+
+  get websocketsEnabled(): boolean {
+    return this.settings.websocketsEnabled;
+  }
+
+  get concurrentUpdatesEnabled(): boolean {
+    return this.settings.concurrentUpdatesEnabled;
+  }
+
+  get experimentalEditorToolbarEnabled(): boolean {
+    return this.settings.experimentalEditorToolbarEnabled;
+  }
 }