webapp: get rid of innerHTML, use DOM API instead

ilyagr · Mar 14, 2024 · 53b13af · 53b13af
1 parent 820bee9
commit 53b13af
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 42 deletions.
diff --git a/webapp/dist/assets/index-D3Bm5jCz.js → webapp/dist/assets/index-Ca1uhQEV.js b/webapp/dist/assets/index-D3Bm5jCz.js → webapp/dist/assets/index-Ca1uhQEV.js
diff --git a/webapp/dist/index.html b/webapp/dist/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diffedit3</title>
-    <script type="module" crossorigin src="/assets/index-D3Bm5jCz.js"></script>
+    <script type="module" crossorigin src="/assets/index-Ca1uhQEV.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-lMSNPRYN.css">
   </head>
 

diff --git a/webapp/src/main.ts b/webapp/src/main.ts
@@ -9,7 +9,7 @@ import {
   exit_user_abandoned_merge,
 } from "./backend_interactions";
 import { MergeState } from "./merge_state";
-import { unreachable } from "./utils";
+import { replaceElementByIdWithNewEmptyDiv, unreachable } from "./utils";
 
 // Error handling
 function show_error_to_user(e: any) {
@@ -38,9 +38,7 @@ async function run_and_show_any_errors_to_user<T>(f: {
 
 import { listen } from "@tauri-apps/api/event";
 window.addEventListener("DOMContentLoaded", async () => {
-  const loading_elt = document.getElementById("loading_message")!;
-  // TODO: Try the until directive?
-  loading_elt.innerHTML = "";
+  const loading_elt = replaceElementByIdWithNewEmptyDiv("loading_message")!;
   lit_html_render(
     html`
       <h2>Loading...</h2>

diff --git a/webapp/src/merge_state.ts b/webapp/src/merge_state.ts
@@ -8,7 +8,7 @@ import {
   SingleFileMergeInput,
   to_text,
 } from "./backend_interactions";
-import { unreachable } from "./utils";
+import { replaceElementByIdWithNewEmptyDiv, unreachable } from "./utils";
 
 export class MergeState {
   protected merge_views: Record<string, MergeView>;
@@ -111,8 +111,7 @@ export class MergeState {
       }
     }
 
-    const target_element = document.getElementById(unique_id)!;
-    target_element.innerHTML = ""; // TODO: Should use replaceWith or something
+    let target_element = replaceElementByIdWithNewEmptyDiv(unique_id)!;
     lit_html_render(html`${templates}`, target_element);
 
     const merge_state = new MergeState();
@@ -245,16 +244,9 @@ export class MergeState {
       return;
     }
     let dom_id = this.dom_ids[filename];
-    const codemirror_dom_id = `cm_${dom_id}`;
-
+
     const current_state = this.getSingleMergeState(filename);
-
-    const new_codemirror_element = document.createElement("div");
-    document
-      .getElementById(codemirror_dom_id)
-      ?.replaceWith(new_codemirror_element);
-    new_codemirror_element.id = codemirror_dom_id;
-
+    replaceElementByIdWithNewEmptyDiv(`cm_${dom_id}`);
     this.createCodeMirrorMergeWidget(
       dom_id,
       filename,

diff --git a/webapp/src/utils.ts b/webapp/src/utils.ts
@@ -2,4 +2,15 @@ export function unreachable(): never {
     throw new Error(
       "this statement is unreachable; this check exists to make TS happy"
     );
+}
+
+export function replaceElementByIdWithNewEmptyDiv(id: string) {
+    const old_element = document.getElementById(id);
+    if (old_element == null) {
+        return;
+    }
+    const new_element = document.createElement("div");
+    new_element.id = id;
+    old_element.replaceWith(new_element);
+    return new_element;
 }