Improved templates

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;

v3/internal/templates/lit-ts/frontend/src/my-element.ts

@@ -30,10 +30,11 @@ export class MyElement extends LitElement {
 
 
     doGreet() {
-        if (!this.name) {
+        let name = this.name;
-            this.name = 'from Go';
+        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="card">
                 <div class="result">${this.result}</div>
+                <div class="card">
                     <div class="input-box">
                         <input class="input" .value=${this.name} @input=${(e: InputEvent) => this.name = (e.target as HTMLInputElement).value} type="text"
                                autocomplete="off"/>

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;

v3/internal/templates/lit/frontend/src/my-element.js

@@ -20,10 +20,11 @@ export class MyElement extends LitElement {
     }
 
     doGreet() {
-        if (!this.name) {
+        let name = this.name;
-            this.name = 'from Go';
+        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="card">
                 <div class="result">${this.result}</div>
+                <div class="card">
                     <div class="input-box">
                         <input class="input" .value=${this.name} @input=${e => this.name = e.target.value} type="text"
                                autocomplete="off"/>

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;

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) {
+        let localName = name;
-            setName('from Go');
+        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="card">
                 <div className="result">{result}</div>
+                <div className="card">
                     <div className="input-box">
                         <input className="input" value={name} onInput={(e) => setName(e.currentTarget.value)}
                                type="text" autocomplete="off"/>

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;

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) {
+    let localName = name;
-      setName('from Go');
+    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="card">
       <div className="result">{result}</div>
+      <div className="card">
         <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>

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;

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) {
+    let localName = name.value;
-      name.value = 'from Go';
+    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="card">
       <div class="result">{result.value}</div>
+      <div class="card">
         <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>

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;

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) {
+    let localName = name.value;
-      name.value = 'from Go';
+    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="card">
       <div class="result">{result.value}</div>
+      <div class="card">
         <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>

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;

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) {
+    let localName = name;
-      setName('from Go');
+    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="card">
         <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>

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;

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) {
+    let localName = name;
-      setName('from Go');
+    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="card">
       <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>

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;

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) {
+    let localName = name;
-      setName('from Go');
+    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="card">
       <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>

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;

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) {
+    let localName = name;
-      setName('from Go');
+    if (!localName) {
+      localName = 'anonymous';
     }
-    Greet(name).then((resultValue) => {
+    Greet(localName).then((resultValue) => {
       setResult(resultValue);
     }).catch((err) => {
       console.log(err);
@@ -29,16 +30,16 @@ function App() {
   return (
     <div className="container">
       <div>
-          <a wml:openURL="https://wails.io">
+        <a wml-openURL="https://wails.io">
           <img src="/wails.png" className="logo" alt="Wails logo"/>
         </a>
-          <a wml:openURL="https://reactjs.org">
+        <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="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>

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;

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()) {
+    let localName = name();
-      setName('from Go');
+    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="card">
       <div class="result">{result()}</div>
+      <div class="card">
         <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>

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;

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()) {
+    let localName = name();
-      setName('from Go');
+    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="card">
       <div className="result">{result()}</div>
+      <div className="card">
         <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>

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;

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) {
+    let localName = name;
-      name = 'from Go';
+    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="card">
   <div class="result">{result}</div>
+  <div class="card">
     <div class="input-box">
       <input class="input" bind:value={name} type="text" autocomplete="off"/>
       <button class="btn" on:click={doGreet}>Greet</button>

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;

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) {
+  let localName = name;
-    name = 'from Go';
+  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="card">
   <div class="result">{result}</div>
+  <div class="card">
     <div class="input-box">
       <input class="input" bind:value={name} type="text" autocomplete="off"/>
       <button class="btn" on:click={doGreet}>Greet</button>

v3/internal/templates/vanilla-ts/frontend/index.html

@@ -18,8 +18,8 @@
         </a>
     </div>
     <h1>Wails + Typescript</h1>
-    <div class="card">
     <div class="result" id="result">Please enter your name below 👇</div>
+    <div class="card">
         <div class="input-box" id="input">
             <input class="input" id="name" type="text" autocomplete="off"/>
             <button class="btn" id="greet">Greet</button>

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;

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;

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;

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;

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;

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) {
+  let localName = name.value;
-    name.value = 'from Go';
+  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="card">
   <div class="result">{{ result }}</div>
+  <div class="card">
     <div class="input-box">
       <input class="input" v-model="name" type="text" autocomplete="off"/>
       <button class="btn" @click="doGreet">Greet</button>

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;

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) {
+  let localName = name.value;
-    name.value = 'from Go';
+  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="card">
   <div class="result">{{ result }}</div>
+  <div class="card">
     <div class="input-box">
       <input class="input" v-model="name" type="text" autocomplete="off"/>
       <button class="btn" @click="doGreet">Greet</button>