From 1dae9f613fddecddef31473f70391812e64acb35 Mon Sep 17 00:00:00 2001
From: Lea Anthony <lea.anthony@gmail.com>
Date: Sun, 7 Jan 2024 08:19:07 +1100
Subject: [PATCH] Improved templates

---
 .../lit-ts/frontend/public/style.css          |  7 +++
 .../lit-ts/frontend/src/my-element.ts         |  9 ++--
 .../templates/lit/frontend/public/style.css   |  7 +++
 .../templates/lit/frontend/src/my-element.js  |  9 ++--
 .../preact-ts/frontend/public/style.css       |  7 +++
 .../templates/preact-ts/frontend/src/app.tsx  |  9 ++--
 .../preact/frontend/public/style.css          |  7 +++
 .../templates/preact/frontend/src/app.jsx     |  9 ++--
 .../qwik-ts/frontend/public/style.css         |  7 +++
 .../templates/qwik-ts/frontend/src/app.tsx    |  9 ++--
 .../templates/qwik/frontend/public/style.css  |  7 +++
 .../templates/qwik/frontend/src/app.jsx       |  9 ++--
 .../react-swc-ts/frontend/public/style.css    |  7 +++
 .../react-swc-ts/frontend/src/App.tsx         | 45 +++++++++---------
 .../react-swc/frontend/public/style.css       |  7 +++
 .../templates/react-swc/frontend/src/App.jsx  |  9 ++--
 .../react-ts/frontend/public/style.css        |  7 +++
 .../templates/react-ts/frontend/src/App.tsx   |  9 ++--
 .../templates/react/frontend/public/style.css |  7 +++
 .../templates/react/frontend/src/App.jsx      | 47 ++++++++++---------
 .../solid-ts/frontend/public/style.css        |  7 +++
 .../templates/solid-ts/frontend/src/App.tsx   |  9 ++--
 .../templates/solid/frontend/public/style.css |  7 +++
 .../templates/solid/frontend/src/App.jsx      |  9 ++--
 .../svelte-ts/frontend/public/style.css       |  7 +++
 .../svelte-ts/frontend/src/App.svelte         |  9 ++--
 .../svelte/frontend/public/style.css          |  7 +++
 .../templates/svelte/frontend/src/App.svelte  |  9 ++--
 .../templates/vanilla-ts/frontend/index.html  |  2 +-
 .../vanilla-ts/frontend/public/style.css      |  7 +++
 .../templates/vanilla-ts/frontend/src/main.ts |  2 +-
 .../templates/vanilla/frontend/main.js        |  2 +-
 .../vanilla/frontend/public/style.css         |  7 +++
 .../vue-ts/frontend/public/style.css          |  7 +++
 .../frontend/src/components/HelloWorld.vue    | 11 +++--
 .../templates/vue/frontend/public/style.css   |  7 +++
 .../frontend/src/components/HelloWorld.vue    | 11 +++--
 37 files changed, 248 insertions(+), 106 deletions(-)

diff --git a/v3/internal/templates/lit-ts/frontend/public/style.css b/v3/internal/templates/lit-ts/frontend/public/style.css
index 7ce1046b8..8403ee0fd 100644
--- a/v3/internal/templates/lit-ts/frontend/public/style.css
+++ b/v3/internal/templates/lit-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/lit-ts/frontend/src/my-element.ts b/v3/internal/templates/lit-ts/frontend/src/my-element.ts
index 6d0afdc1e..b5001919b 100644
--- a/v3/internal/templates/lit-ts/frontend/src/my-element.ts
+++ b/v3/internal/templates/lit-ts/frontend/src/my-element.ts
@@ -30,10 +30,11 @@ export class MyElement extends LitElement {
 
 
     doGreet() {
-        if (!this.name) {
-            this.name = 'from Go';
+        let name = this.name;
+        if (!name) {
+            name = 'anonymous';
         }
-        Greet(this.name).then((resultValue: string) => {
+        Greet(name).then((resultValue: string) => {
             this.result = resultValue;
         }).catch((err: Error) => {
             console.log(err);
@@ -52,8 +53,8 @@ export class MyElement extends LitElement {
                     </a>
                 </div>
                 <slot></slot>
+                <div class="result">${this.result}</div>
                 <div class="card">
-                    <div class="result">${this.result}</div>
                     <div class="input-box">
                         <input class="input" .value=${this.name} @input=${(e: InputEvent) => this.name = (e.target as HTMLInputElement).value} type="text"
                                autocomplete="off"/>
diff --git a/v3/internal/templates/lit/frontend/public/style.css b/v3/internal/templates/lit/frontend/public/style.css
index 7ce1046b8..8403ee0fd 100644
--- a/v3/internal/templates/lit/frontend/public/style.css
+++ b/v3/internal/templates/lit/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/lit/frontend/src/my-element.js b/v3/internal/templates/lit/frontend/src/my-element.js
index b5843922f..ded9d6ad6 100644
--- a/v3/internal/templates/lit/frontend/src/my-element.js
+++ b/v3/internal/templates/lit/frontend/src/my-element.js
@@ -20,10 +20,11 @@ export class MyElement extends LitElement {
     }
 
     doGreet() {
-        if (!this.name) {
-            this.name = 'from Go';
+        let name = this.name;
+        if (!name) {
+            name = 'anonymous';
         }
-        Greet(this.name).then((resultValue) => {
+        Greet(name).then((resultValue) => {
             this.result = resultValue;
         }).catch((err) => {
             console.log(err);
@@ -42,8 +43,8 @@ export class MyElement extends LitElement {
                     </a>
                 </div>
                 <slot></slot>
+                <div class="result">${this.result}</div>
                 <div class="card">
-                    <div class="result">${this.result}</div>
                     <div class="input-box">
                         <input class="input" .value=${this.name} @input=${e => this.name = e.target.value} type="text"
                                autocomplete="off"/>
diff --git a/v3/internal/templates/preact-ts/frontend/public/style.css b/v3/internal/templates/preact-ts/frontend/public/style.css
index e048efdfd..043b96be0 100644
--- a/v3/internal/templates/preact-ts/frontend/public/style.css
+++ b/v3/internal/templates/preact-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/preact-ts/frontend/src/app.tsx b/v3/internal/templates/preact-ts/frontend/src/app.tsx
index e832fc660..a7859e0c0 100644
--- a/v3/internal/templates/preact-ts/frontend/src/app.tsx
+++ b/v3/internal/templates/preact-ts/frontend/src/app.tsx
@@ -8,10 +8,11 @@ export function App() {
     const [time, setTime] = useState<string>('Listening for Time event...');
 
     const doGreet = (): void => {
-        if (!name) {
-            setName('from Go');
+        let localName = name;
+        if (!localName) {
+            localName = 'anonymous';
         }
-        Greet(name).then((resultValue: string) => {
+        Greet(localName).then((resultValue: string) => {
             setResult(resultValue);
         }).catch((err: any) => {
             console.log(err);
@@ -36,8 +37,8 @@ export function App() {
                     </a>
                 </div>
                 <h1>Wails + Preact</h1>
+                <div className="result">{result}</div>
                 <div className="card">
-                    <div className="result">{result}</div>
                     <div className="input-box">
                         <input className="input" value={name} onInput={(e) => setName(e.currentTarget.value)}
                                type="text" autocomplete="off"/>
diff --git a/v3/internal/templates/preact/frontend/public/style.css b/v3/internal/templates/preact/frontend/public/style.css
index e048efdfd..043b96be0 100644
--- a/v3/internal/templates/preact/frontend/public/style.css
+++ b/v3/internal/templates/preact/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/preact/frontend/src/app.jsx b/v3/internal/templates/preact/frontend/src/app.jsx
index ae7a38b34..94264394d 100644
--- a/v3/internal/templates/preact/frontend/src/app.jsx
+++ b/v3/internal/templates/preact/frontend/src/app.jsx
@@ -8,10 +8,11 @@ export function App() {
   const [time, setTime] = useState('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name) {
-      setName('from Go');
+    let localName = name;
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name).then((resultValue) => {
+    Greet(localName).then((resultValue) => {
       setResult(resultValue);
     }).catch((err) => {
       console.log(err);
@@ -35,8 +36,8 @@ export function App() {
         </a>
       </div>
       <h1>Wails + Preact</h1>
+      <div className="result">{result}</div>
       <div className="card">
-        <div className="result">{result}</div>
         <div className="input-box">
           <input className="input" value={name} onInput={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
           <button className="btn" onClick={doGreet}>Greet</button>
diff --git a/v3/internal/templates/qwik-ts/frontend/public/style.css b/v3/internal/templates/qwik-ts/frontend/public/style.css
index be702b0c7..1f3534af9 100644
--- a/v3/internal/templates/qwik-ts/frontend/public/style.css
+++ b/v3/internal/templates/qwik-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/qwik-ts/frontend/src/app.tsx b/v3/internal/templates/qwik-ts/frontend/src/app.tsx
index 54fd7a90f..7b3b42ca3 100644
--- a/v3/internal/templates/qwik-ts/frontend/src/app.tsx
+++ b/v3/internal/templates/qwik-ts/frontend/src/app.tsx
@@ -8,10 +8,11 @@ export const App = component$(() => {
   const time = useSignal<string>('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name.value) {
-      name.value = 'from Go';
+    let localName = name.value;
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name.value).then((resultValue: string) => {
+    Greet(localName).then((resultValue: string) => {
       result.value = resultValue;
     }).catch((err: any) => {
       console.log(err);
@@ -37,8 +38,8 @@ export const App = component$(() => {
         </a>
       </div>
       <h1>Wails + Qwik</h1>
+      <div class="result">{result.value}</div>
       <div class="card">
-        <div class="result">{result.value}</div>
         <div class="input-box">
           <input class="input" value={name.value} onInput$={(e: InputEvent) => name.value = (e.target as HTMLInputElement).value} type="text" autocomplete="off"/>
           <button class="btn" onClick$={doGreet}>Greet</button>
diff --git a/v3/internal/templates/qwik/frontend/public/style.css b/v3/internal/templates/qwik/frontend/public/style.css
index be702b0c7..1f3534af9 100644
--- a/v3/internal/templates/qwik/frontend/public/style.css
+++ b/v3/internal/templates/qwik/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/qwik/frontend/src/app.jsx b/v3/internal/templates/qwik/frontend/src/app.jsx
index e350a96ae..eb32ea79a 100644
--- a/v3/internal/templates/qwik/frontend/src/app.jsx
+++ b/v3/internal/templates/qwik/frontend/src/app.jsx
@@ -8,10 +8,11 @@ export const App = component$(() => {
   const time = useSignal('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name.value) {
-      name.value = 'from Go';
+    let localName = name.value;
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name.value).then((resultValue) => {
+    Greet(localName).then((resultValue) => {
       result.value = resultValue;
     }).catch((err) => {
       console.log(err);
@@ -37,8 +38,8 @@ export const App = component$(() => {
         </a>
       </div>
       <h1>Wails + Qwik</h1>
+      <div class="result">{result.value}</div>
       <div class="card">
-        <div class="result">{result.value}</div>
         <div class="input-box">
           <input class="input" value={name.value} onInput$={(e) => name.value = e.target.value} type="text" autocomplete="off"/>
           <button class="btn" onClick$={doGreet}>Greet</button>
diff --git a/v3/internal/templates/react-swc-ts/frontend/public/style.css b/v3/internal/templates/react-swc-ts/frontend/public/style.css
index aa051a454..2312d932d 100644
--- a/v3/internal/templates/react-swc-ts/frontend/public/style.css
+++ b/v3/internal/templates/react-swc-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/react-swc-ts/frontend/src/App.tsx b/v3/internal/templates/react-swc-ts/frontend/src/App.tsx
index 5001c49c1..2a7bf4b9e 100644
--- a/v3/internal/templates/react-swc-ts/frontend/src/App.tsx
+++ b/v3/internal/templates/react-swc-ts/frontend/src/App.tsx
@@ -8,10 +8,11 @@ function App() {
   const [time, setTime] = useState<string>('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name) {
-      setName('from Go');
+    let localName = name;
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name).then((resultValue: string) => {
+    Greet(localName).then((resultValue: string) => {
       setResult(resultValue);
     }).catch((err: any) => {
       console.log(err);
@@ -27,28 +28,28 @@ function App() {
   }, []);
 
   return (
-    <div className="container">
-      <div>
-        <a wml-openURL="https://wails.io">
-          <img src="/wails.png" className="logo" alt="Wails logo"/>
-        </a>
-        <a wml-openURL="https://reactjs.org">
-          <img src="/react.svg" className="logo react" alt="React logo"/>
-        </a>
-      </div>
-      <h1>Wails + React</h1>
-      <div className="card">
+      <div className="container">
+        <div>
+          <a wml-openURL="https://wails.io">
+            <img src="/wails.png" className="logo" alt="Wails logo"/>
+          </a>
+          <a wml-openURL="https://reactjs.org">
+            <img src="/react.svg" className="logo react" alt="React logo"/>
+          </a>
+        </div>
+        <h1>Wails + React</h1>
         <div className="result">{result}</div>
-        <div className="input-box">
-          <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
-          <button className="btn" onClick={doGreet}>Greet</button>
+        <div className="card">
+          <div className="input-box">
+            <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
+            <button className="btn" onClick={doGreet}>Greet</button>
+          </div>
+        </div>
+        <div className="footer">
+          <div><p>Click on the Wails logo to learn more</p></div>
+          <div><p>{time}</p></div>
         </div>
       </div>
-      <div className="footer">
-        <div><p>Click on the Wails logo to learn more</p></div>
-        <div><p>{time}</p></div>
-      </div>
-    </div>
   )
 }
 
diff --git a/v3/internal/templates/react-swc/frontend/public/style.css b/v3/internal/templates/react-swc/frontend/public/style.css
index aa051a454..2312d932d 100644
--- a/v3/internal/templates/react-swc/frontend/public/style.css
+++ b/v3/internal/templates/react-swc/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/react-swc/frontend/src/App.jsx b/v3/internal/templates/react-swc/frontend/src/App.jsx
index 3978f55d4..97689f666 100644
--- a/v3/internal/templates/react-swc/frontend/src/App.jsx
+++ b/v3/internal/templates/react-swc/frontend/src/App.jsx
@@ -8,10 +8,11 @@ function App() {
   const [time, setTime] = useState('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name) {
-      setName('from Go');
+    let localName = name;
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name).then((resultValue) => {
+    Greet(localName).then((resultValue) => {
       setResult(resultValue);
     }).catch((err) => {
       console.log(err);
@@ -37,8 +38,8 @@ function App() {
         </a>
       </div>
       <h1>Wails + React</h1>
+      <div className="result">{result}</div>
       <div className="card">
-        <div className="result">{result}</div>
         <div className="input-box">
           <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
           <button className="btn" onClick={doGreet}>Greet</button>
diff --git a/v3/internal/templates/react-ts/frontend/public/style.css b/v3/internal/templates/react-ts/frontend/public/style.css
index aa051a454..2312d932d 100644
--- a/v3/internal/templates/react-ts/frontend/public/style.css
+++ b/v3/internal/templates/react-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/react-ts/frontend/src/App.tsx b/v3/internal/templates/react-ts/frontend/src/App.tsx
index 5001c49c1..37f011911 100644
--- a/v3/internal/templates/react-ts/frontend/src/App.tsx
+++ b/v3/internal/templates/react-ts/frontend/src/App.tsx
@@ -8,10 +8,11 @@ function App() {
   const [time, setTime] = useState<string>('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name) {
-      setName('from Go');
+    let localName = name;
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name).then((resultValue: string) => {
+    Greet(localName).then((resultValue: string) => {
       setResult(resultValue);
     }).catch((err: any) => {
       console.log(err);
@@ -37,8 +38,8 @@ function App() {
         </a>
       </div>
       <h1>Wails + React</h1>
+      <div className="result">{result}</div>
       <div className="card">
-        <div className="result">{result}</div>
         <div className="input-box">
           <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
           <button className="btn" onClick={doGreet}>Greet</button>
diff --git a/v3/internal/templates/react/frontend/public/style.css b/v3/internal/templates/react/frontend/public/style.css
index aa051a454..2312d932d 100644
--- a/v3/internal/templates/react/frontend/public/style.css
+++ b/v3/internal/templates/react/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/react/frontend/src/App.jsx b/v3/internal/templates/react/frontend/src/App.jsx
index b1b7c07b3..97689f666 100644
--- a/v3/internal/templates/react/frontend/src/App.jsx
+++ b/v3/internal/templates/react/frontend/src/App.jsx
@@ -8,10 +8,11 @@ function App() {
   const [time, setTime] = useState('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name) {
-      setName('from Go');
+    let localName = name;
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name).then((resultValue) => {
+    Greet(localName).then((resultValue) => {
       setResult(resultValue);
     }).catch((err) => {
       console.log(err);
@@ -27,28 +28,28 @@ function App() {
   }, []);
 
   return (
-      <div className="container">
-        <div>
-          <a wml:openURL="https://wails.io">
-            <img src="/wails.png" className="logo" alt="Wails logo"/>
-          </a>
-          <a wml:openURL="https://reactjs.org">
-            <img src='/react.svg' className="logo react" alt="React logo"/>
-          </a>
-        </div>
-        <h1>Wails + React</h1>
-        <div className="card">
-          <div className="result">{result}</div>
-          <div className="input-box">
-            <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
-            <button className="btn" onClick={doGreet}>Greet</button>
-          </div>
-        </div>
-        <div className="footer">
-          <div><p>Click on the Wails logo to learn more</p></div>
-          <div><p>{time}</p></div>
+    <div className="container">
+      <div>
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" className="logo" alt="Wails logo"/>
+        </a>
+        <a wml-openURL="https://reactjs.org">
+          <img src='/react.svg' className="logo react" alt="React logo"/>
+        </a>
+      </div>
+      <h1>Wails + React</h1>
+      <div className="result">{result}</div>
+      <div className="card">
+        <div className="input-box">
+          <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
+          <button className="btn" onClick={doGreet}>Greet</button>
         </div>
       </div>
+      <div className="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time}</p></div>
+      </div>
+    </div>
   )
 }
 
diff --git a/v3/internal/templates/solid-ts/frontend/public/style.css b/v3/internal/templates/solid-ts/frontend/public/style.css
index 5bd8f9773..63826ae72 100644
--- a/v3/internal/templates/solid-ts/frontend/public/style.css
+++ b/v3/internal/templates/solid-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/solid-ts/frontend/src/App.tsx b/v3/internal/templates/solid-ts/frontend/src/App.tsx
index 3725b5887..106f3425e 100644
--- a/v3/internal/templates/solid-ts/frontend/src/App.tsx
+++ b/v3/internal/templates/solid-ts/frontend/src/App.tsx
@@ -8,10 +8,11 @@ function App() {
   const [time, setTime] = createSignal('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name()) {
-      setName('from Go');
+    let localName = name();
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name()).then((resultValue: string) => {
+    Greet(localName).then((resultValue: string) => {
       setResult(resultValue);
     }).catch((err: any) => {
       console.log(err);
@@ -35,8 +36,8 @@ function App() {
         </a>
       </div>
       <h1>Wails + Solid</h1>
+      <div class="result">{result()}</div>
       <div class="card">
-        <div class="result">{result()}</div>
         <div class="input-box">
           <input class="input" value={name()} onInput={(e) => setName(e.currentTarget.value)} type="text" autocomplete="off"/>
           <button class="btn" onClick={doGreet}>Greet</button>
diff --git a/v3/internal/templates/solid/frontend/public/style.css b/v3/internal/templates/solid/frontend/public/style.css
index 5bd8f9773..63826ae72 100644
--- a/v3/internal/templates/solid/frontend/public/style.css
+++ b/v3/internal/templates/solid/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/solid/frontend/src/App.jsx b/v3/internal/templates/solid/frontend/src/App.jsx
index f49625ffb..467a8cb6a 100644
--- a/v3/internal/templates/solid/frontend/src/App.jsx
+++ b/v3/internal/templates/solid/frontend/src/App.jsx
@@ -8,10 +8,11 @@ function App() {
   const [time, setTime] = createSignal('Listening for Time event...');
 
   const doGreet = () => {
-    if (!name()) {
-      setName('from Go');
+    let localName = name();
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name()).then((resultValue) => {
+    Greet(localName).then((resultValue) => {
       setResult(resultValue);
     }).catch((err) => {
       console.log(err);
@@ -35,8 +36,8 @@ function App() {
         </a>
       </div>
       <h1>Wails + Solid</h1>
+      <div className="result">{result()}</div>
       <div className="card">
-        <div className="result">{result()}</div>
         <div className="input-box">
           <input className="input" value={name()} onInput={(e) => setName(e.target.value)} type="text" autocomplete="off"/>
           <button className="btn" onClick={doGreet}>Greet</button>
diff --git a/v3/internal/templates/svelte-ts/frontend/public/style.css b/v3/internal/templates/svelte-ts/frontend/public/style.css
index 7b0193862..865f7f38a 100644
--- a/v3/internal/templates/svelte-ts/frontend/public/style.css
+++ b/v3/internal/templates/svelte-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/svelte-ts/frontend/src/App.svelte b/v3/internal/templates/svelte-ts/frontend/src/App.svelte
index 642b484e8..cee9b5779 100644
--- a/v3/internal/templates/svelte-ts/frontend/src/App.svelte
+++ b/v3/internal/templates/svelte-ts/frontend/src/App.svelte
@@ -7,10 +7,11 @@
   let time: string = 'Listening for Time event...';
 
   const doGreet = (): void => {
-    if (!name) {
-      name = 'from Go';
+    let localName = name;
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name).then((resultValue: string) => {
+    Greet(localName).then((resultValue: string) => {
       result = resultValue;
     }).catch((err: any) => {
       console.log(err);
@@ -32,8 +33,8 @@
     </span>
   </div>
   <h1>Wails + Svelte</h1>
+  <div class="result">{result}</div>
   <div class="card">
-    <div class="result">{result}</div>
     <div class="input-box">
       <input class="input" bind:value={name} type="text" autocomplete="off"/>
       <button class="btn" on:click={doGreet}>Greet</button>
diff --git a/v3/internal/templates/svelte/frontend/public/style.css b/v3/internal/templates/svelte/frontend/public/style.css
index 7b0193862..865f7f38a 100644
--- a/v3/internal/templates/svelte/frontend/public/style.css
+++ b/v3/internal/templates/svelte/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/svelte/frontend/src/App.svelte b/v3/internal/templates/svelte/frontend/src/App.svelte
index 4fcfc708a..52b715124 100644
--- a/v3/internal/templates/svelte/frontend/src/App.svelte
+++ b/v3/internal/templates/svelte/frontend/src/App.svelte
@@ -7,10 +7,11 @@ let result = 'Please enter your name below 👇';
 let time = 'Listening for Time event...';
 
 const doGreet = () => {
-  if (!name) {
-    name = 'from Go';
+  let localName = name;
+  if (!localName) {
+    localName = 'anonymous';
   }
-  Greet(name).then((resultValue) => {
+  Greet(localName).then((resultValue) => {
     result = resultValue;
   }).catch((err) => {
     console.log(err);
@@ -32,8 +33,8 @@ Events.On('time', (timeValue) => {
     </span>
   </div>
   <h1>Wails + Svelte</h1>
+  <div class="result">{result}</div>
   <div class="card">
-    <div class="result">{result}</div>
     <div class="input-box">
       <input class="input" bind:value={name} type="text" autocomplete="off"/>
       <button class="btn" on:click={doGreet}>Greet</button>
diff --git a/v3/internal/templates/vanilla-ts/frontend/index.html b/v3/internal/templates/vanilla-ts/frontend/index.html
index 3f05e5d9d..3a3b53e4f 100644
--- a/v3/internal/templates/vanilla-ts/frontend/index.html
+++ b/v3/internal/templates/vanilla-ts/frontend/index.html
@@ -18,8 +18,8 @@
         </a>
     </div>
     <h1>Wails + Typescript</h1>
+    <div class="result" id="result">Please enter your name below 👇</div>
     <div class="card">
-        <div class="result" id="result">Please enter your name below 👇</div>
         <div class="input-box" id="input">
             <input class="input" id="name" type="text" autocomplete="off"/>
             <button class="btn" id="greet">Greet</button>
diff --git a/v3/internal/templates/vanilla-ts/frontend/public/style.css b/v3/internal/templates/vanilla-ts/frontend/public/style.css
index 7b0193862..865f7f38a 100644
--- a/v3/internal/templates/vanilla-ts/frontend/public/style.css
+++ b/v3/internal/templates/vanilla-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/vanilla-ts/frontend/src/main.ts b/v3/internal/templates/vanilla-ts/frontend/src/main.ts
index dadc3220b..274f9126d 100644
--- a/v3/internal/templates/vanilla-ts/frontend/src/main.ts
+++ b/v3/internal/templates/vanilla-ts/frontend/src/main.ts
@@ -9,7 +9,7 @@ const timeElement = document.getElementById('time')! as HTMLDivElement;
 greetButton.addEventListener('click', () => {
     let name = (nameElement as HTMLInputElement).value
     if (!name) {
-        name = 'from Go';
+        name = 'anonymous';
     }
     Greet(name).then((result: string) => {
         resultElement.innerText = result;
diff --git a/v3/internal/templates/vanilla/frontend/main.js b/v3/internal/templates/vanilla/frontend/main.js
index d50d5df3c..cf7031306 100644
--- a/v3/internal/templates/vanilla/frontend/main.js
+++ b/v3/internal/templates/vanilla/frontend/main.js
@@ -7,7 +7,7 @@ const timeElement = document.getElementById('time');
 window.doGreet = () => {
     let name = document.getElementById('name').value;
     if (!name) {
-        name = 'from Go';
+        name = 'anonymous';
     }
     Greet(name).then((result) => {
         resultElement.innerText = result;
diff --git a/v3/internal/templates/vanilla/frontend/public/style.css b/v3/internal/templates/vanilla/frontend/public/style.css
index 7b0193862..865f7f38a 100644
--- a/v3/internal/templates/vanilla/frontend/public/style.css
+++ b/v3/internal/templates/vanilla/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/vue-ts/frontend/public/style.css b/v3/internal/templates/vue-ts/frontend/public/style.css
index 88b48a11e..c748dca35 100644
--- a/v3/internal/templates/vue-ts/frontend/public/style.css
+++ b/v3/internal/templates/vue-ts/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue b/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue
index abfee7d95..96be517ec 100644
--- a/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue
+++ b/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue
@@ -10,10 +10,11 @@ const result = ref('Please enter your name below 👇')
 const time = ref('Listening for Time event...')
 
 const doGreet = () => {
-  if (!name.value) {
-    name.value = 'from Go';
+  let localName = name.value;
+  if (!localName) {
+    localName = 'anonymous';
   }
-  Greet(name.value).then((resultValue: string) => {
+  Greet(localName).then((resultValue: string) => {
     result.value = resultValue;
   }).catch((err: Error) => {
     console.log(err);
@@ -31,8 +32,8 @@ onMounted(() => {
 <template>
   <h1>{{ msg }}</h1>
 
+  <div class="result">{{ result }}</div>
   <div class="card">
-    <div class="result">{{ result }}</div>
     <div class="input-box">
       <input class="input" v-model="name" type="text" autocomplete="off"/>
       <button class="btn" @click="doGreet">Greet</button>
@@ -43,4 +44,4 @@ onMounted(() => {
     <div><p>Click on the Wails logo to learn more</p></div>
     <div><p>{{ time }}</p></div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/v3/internal/templates/vue/frontend/public/style.css b/v3/internal/templates/vue/frontend/public/style.css
index 88b48a11e..c748dca35 100644
--- a/v3/internal/templates/vue/frontend/public/style.css
+++ b/v3/internal/templates/vue/frontend/public/style.css
@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+* {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
 @font-face {
     font-family: "Inter";
     font-style: normal;
diff --git a/v3/internal/templates/vue/frontend/src/components/HelloWorld.vue b/v3/internal/templates/vue/frontend/src/components/HelloWorld.vue
index 2aa738748..fb9e26fa2 100644
--- a/v3/internal/templates/vue/frontend/src/components/HelloWorld.vue
+++ b/v3/internal/templates/vue/frontend/src/components/HelloWorld.vue
@@ -8,10 +8,11 @@ const result = ref('Please enter your name below 👇')
 const time = ref('Listening for Time event...')
 
 const doGreet = () => {
-  if (!name.value) {
-    name.value = 'from Go';
+  let localName = name.value;
+  if (!localName) {
+    localName = 'anonymous';
   }
-  Greet(name.value).then((resultValue) => {
+  Greet(localName).then((resultValue) => {
     result.value = resultValue;
   }).catch((err) => {
     console.log(err);
@@ -33,8 +34,8 @@ defineProps({
 <template>
   <h1>{{ msg }}</h1>
 
+  <div class="result">{{ result }}</div>
   <div class="card">
-    <div class="result">{{ result }}</div>
     <div class="input-box">
       <input class="input" v-model="name" type="text" autocomplete="off"/>
       <button class="btn" @click="doGreet">Greet</button>
@@ -45,4 +46,4 @@ defineProps({
     <div><p>Click on the Wails logo to learn more</p></div>
     <div><p>{{ time }}</p></div>
   </div>
-</template>
+</template>
\ No newline at end of file