Restore hot reload functionality (#1138)

google · Dec 7, 2024 · 21fa88a · 21fa88a
1 parent 453f833
commit 21fa88a
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 3 deletions.
diff --git a/mesop/web/src/app/editor/BUILD b/mesop/web/src/app/editor/BUILD
@@ -17,7 +17,7 @@ ng_module(
         "*.ts",
     ]),
     deps = [
-        "//mesop/web/src/shell",
+        "//mesop/web/src/editor",
     ] + ANGULAR_CORE_DEPS,
 )
 

diff --git a/mesop/web/src/app/editor/bundle.ts b/mesop/web/src/app/editor/bundle.ts
@@ -1,3 +1,3 @@
-import {bootstrapApp} from '../../shell/shell';
+import {bootstrapApp} from '../../editor/editor';
 
 bootstrapApp();
diff --git a/mesop/web/src/app/editor/index.html b/mesop/web/src/app/editor/index.html
@@ -16,7 +16,7 @@
     <!-- Inject favicon -->
   </head>
   <body>
-    <mesop-app ngCspNonce="$$INSERT_CSP_NONCE$$"></mesop-app>
+    <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>

diff --git a/mesop/web/src/editor/BUILD b/mesop/web/src/editor/BUILD
@@ -0,0 +1,20 @@
+load("//build_defs:defaults.bzl", "ANGULAR_CDK_TS_DEPS", "ANGULAR_CORE_DEPS", "ANGULAR_MATERIAL_TS_DEPS", "ng_module")
+
+package(
+    default_visibility = ["//build_defs:mesop_internal"],
+)
+
+ng_module(
+    name = "editor",
+    srcs = glob([
+        "*.ts",
+    ]),
+    deps = [
+        "//mesop/protos:ui_jspb_proto",
+        "//mesop/web/src/component_renderer",
+        "//mesop/web/src/error",
+        "//mesop/web/src/services",
+        "//mesop/web/src/shell",
+        "//mesop/web/src/utils",
+    ] + ANGULAR_CORE_DEPS + ANGULAR_CDK_TS_DEPS + ANGULAR_MATERIAL_TS_DEPS,
+)
diff --git a/mesop/web/src/editor/editor.ts b/mesop/web/src/editor/editor.ts
@@ -0,0 +1,49 @@
+import {Component} from '@angular/core';
+import {
+  DefaultHotReloadWatcher,
+  HotReloadWatcher,
+} from '../services/hot_reload_watcher';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {provideAnimations} from '@angular/platform-browser/animations';
+import {RouterOutlet, Routes, provideRouter} from '@angular/router';
+import {
+  DebugErrorDialogService,
+  ErrorDialogService,
+} from '../services/error_dialog_service';
+import {Shell, registerComponentRendererElement} from '../shell/shell';
+// Keep the following comment to ensure there's a hook for adding TS imports in the downstream sync.
+// ADD_TS_IMPORT_HERE
+
+@Component({
+  selector: 'mesop-editor',
+  template: '<mesop-shell></mesop-shell>',
+  standalone: true,
+  imports: [Shell],
+  providers: [{provide: HotReloadWatcher, useClass: DefaultHotReloadWatcher}],
+})
+class Editor {
+  constructor(
+    private readonly hotReloadWatcher: HotReloadWatcher /* Inject hotReloadWatcher to ensure it's instantiated. */,
+  ) {}
+}
+
+const routes: Routes = [{path: '**', component: Editor}];
+
+@Component({
+  selector: 'mesop-editor-app',
+  template: '<router-outlet></router-outlet>',
+  imports: [Editor, RouterOutlet],
+  standalone: true,
+})
+class MesopEditorApp {}
+
+export async function bootstrapApp() {
+  const app = await bootstrapApplication(MesopEditorApp, {
+    providers: [
+      provideAnimations(),
+      provideRouter(routes),
+      {provide: ErrorDialogService, useClass: DebugErrorDialogService},
+    ],
+  });
+  registerComponentRendererElement(app);
+}