Improved templates

2025-05-04 23:23:48 +08:00 · 2024-01-07 08:19:07 +11:00 · 2024-01-07 08:19:07 +11:00 · 1dae9f613f
commit 1dae9f613f
parent 34f7f24e7e
37 changed files with 248 additions and 106 deletions
--- 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;
--- 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="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"/>
--- 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;
--- 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="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"/>
--- 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;
--- 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="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"/>
--- 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;
--- 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="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>
--- 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;
--- 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="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>
--- 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;
--- 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="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>
--- 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;
--- 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);
@ -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>
--- 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;
--- 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="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>
--- 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;
--- 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="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>
--- 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;
--- 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);
@ -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>
--- 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;
--- 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="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>
--- 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;
--- 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="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>
--- 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;
--- 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="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>
--- 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;
--- 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="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>
--- 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="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>
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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="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>
--- 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;
--- 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="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>