feat(create-mud): remove window global usage in vanilla template (#1774)

Co-authored-by: alvarius <[email protected]> Co-authored-by: Kevin Ingersoll <[email protected]>
latticexyz · Dec 4, 2023 · f613359 · f613359
1 parent c314bad
commit f613359
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/.changeset/khaki-cars-suffer.md b/.changeset/khaki-cars-suffer.md
@@ -0,0 +1,5 @@
+---
+"create-mud": minor
+---
+
+Replaced usage of `window` global in vanilla JS template with an event listener on the button.
diff --git a/templates/vanilla/packages/client/index.html b/templates/vanilla/packages/client/index.html
@@ -8,6 +8,6 @@
   <body>
     <script type="module" src="/src/index.ts"></script>
     <div>Counter: <span id="counter">0</span></div>
-    <button onclick="window.increment()">Increment</button>
+    <button id="incrementButton">Increment</button>
   </body>
 </html>
diff --git a/templates/vanilla/packages/client/src/index.ts b/templates/vanilla/packages/client/src/index.ts
@@ -14,11 +14,8 @@ components.Counter.update$.subscribe((update) => {
   document.getElementById("counter")!.innerHTML = String(nextValue?.value ?? "unset");
 });
 
-// Just for demonstration purposes: we create a global function that can be
-// called to invoke the Increment system contract via the world. (See IncrementSystem.sol.)
-(window as any).increment = async () => {
-  console.log("new counter value:", await increment());
-};
+// Attach the increment function to the html element with ID `incrementButton` (if it exists)
+document.querySelector("#incrementButton")?.addEventListener("click", increment);
 
 // https://vitejs.dev/guide/env-and-mode.html
 if (import.meta.env.DEV) {