refactor: remove vanilla templates assignment to window object (#212)

* refactor: remove vanilla templates assignment to window object

* change file

Author: amrbashir

.changes/vanilla-global.md

@@ -0,0 +1,6 @@
+---
+"create-tauri-app": patch
+"create-tauri-app-js": patch
+---
+
+Change `vanilla` and `vanilla-ts` templates to attach the click handler through Javascript, instead of assigining to the `window` object.

packages/cli/fragments/fragment-vanilla-ts/index.html

@@ -46,7 +46,7 @@ <h1>Welcome to Tauri!</h1>
       <div class="row">
         <div>
           <input id="greet-input" placeholder="Enter a name..." />
-          <button type="button" onclick="greet()">Greet</button>
+          <button id="greet-button" type="button">Greet</button>
         </div>
       </div>
 

packages/cli/fragments/fragment-vanilla-ts/src/main.ts

@@ -3,11 +3,6 @@ import { invoke } from "@tauri-apps/api/tauri";
 let greetInputEl: HTMLInputElement | null;
 let greetMsgEl: HTMLElement | null;
 
-window.addEventListener("DOMContentLoaded", () => {
-  greetInputEl = document.querySelector("#greet-input");
-  greetMsgEl = document.querySelector("#greet-msg");
-});
-
 async function greet() {
   if (greetMsgEl && greetInputEl) {
     // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
@@ -17,4 +12,10 @@ async function greet() {
   }
 }
 
-window.greet = greet;
+window.addEventListener("DOMContentLoaded", () => {
+  greetInputEl = document.querySelector("#greet-input");
+  greetMsgEl = document.querySelector("#greet-msg");
+  document
+    .querySelector("#greet-button")
+    ?.addEventListener("click", () => greet());
+});

packages/cli/fragments/fragment-vanilla-ts/src/vite-env.d.ts

@@ -38,7 +38,7 @@ <h1>Welcome to Tauri!</h1>
       <div class="row">
         <div>
           <input id="greet-input" placeholder="Enter a name..." />
-          <button type="button" onclick="greet()">Greet</button>
+          <button id="greet-button" type="button">Greet</button>
         </div>
       </div>
 

packages/cli/fragments/fragment-vanilla/src/index.html

@@ -3,14 +3,15 @@ const { invoke } = window.__TAURI__.tauri;
 let greetInputEl;
 let greetMsgEl;
 
-window.addEventListener("DOMContentLoaded", () => {
-  greetInputEl = document.querySelector("#greet-input");
-  greetMsgEl = document.querySelector("#greet-msg");
-});
-
 async function greet() {
   // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
   greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
 }
 
-window.greet = greet;
+window.addEventListener("DOMContentLoaded", () => {
+  greetInputEl = document.querySelector("#greet-input");
+  greetMsgEl = document.querySelector("#greet-msg");
+  document
+    .querySelector("#greet-button")
+    .addEventListener("click", () => greet());
+});