Vanilla template: Update to use runtime module

2026-08-05 13:53:43 -07:00 · 2023-12-29 12:50:25 +11:00
parent 9f567fe2bc
commit 8a12a32d31
10 changed files with 78 additions and 42 deletions
@@ -7,7 +7,19 @@
    <title>Wails App</title>
  </head>
  <body>
-    <div id="app"></div>
+    <a wml-openurl="https://wails.io">
+      <img src="/wails.png" class="logo" alt="Wails logo"/>
+    </a>
+    <a wml-openurl="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
+      <img src="/javascript.svg" class="logo vanilla" alt="JavaScript logo"/>
+    </a>
+    <h1>Hello Wails!</h1>
+    <div class="card">
+      <button id="test" onclick="doGreet()">Press me!</button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Wails logo to learn more
+    </p>
    <script type="module" src="/main.js"></script>
  </body>
 </html>
@@ -371,14 +371,25 @@ tasks:
    summary: Build the frontend project
    dir: frontend
    sources:
-      - "*"
+      - "**/*"
    generates:
      - dist/*
    deps:
      - install:frontend:deps
+      - generate:bindings
    cmds:
      - npm run build -q

+  generate:bindings:
+    summary: Generates bindings for the frontend
+    sources:
+      - "**/*.go"
+    generates:
+      - "frontend/bindings/**/*"
+    cmds:
+      - wails3 generate bindings
+      # - wails3 generate bindings -silent
+
  go:mod:tidy:
    summary: Runs `go mod tidy`
    internal: true
@@ -0,0 +1,7 @@
+package main
+
+type GreetService struct{}
+
+func (g *GreetService) Greet(name string) string {
+	return "Hello " + name + "!"
+}
@@ -15,6 +15,9 @@ func main() {
 	app := application.New(application.Options{
 		Name:        "{{.ProjectName}}",
 		Description: "A demo of using raw HTML & CSS",
+        Bind: []any{
+            &GreetService{},
+        },
 		Assets: application.AssetOptions{
 			FS: assets,
 		},
@@ -1,9 +0,0 @@
-export function setupCounter(element) {
-  let counter = 0
-  const setCounter = (count) => {
-    counter = count
-    element.innerHTML = `count is ${counter}`
-  }
-  element.addEventListener('click', () => setCounter(counter + 1))
-  setCounter(0)
-}
@@ -1,13 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/wails.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/wails.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="stylesheet" href="/style.css"/>
    <title>Wails App</title>
-  </head>
-  <body>
-    <div id="app"></div>
+</head>
+<body>
+    <div class="container">
+        <div>
+            <a wml-openURL="https://wails.io">
+                <img src="/wails.png" class="logo" alt="Wails logo"/>
+            </a>
+            <a wml-openURL="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
+                <img src="/javascript.svg" class="logo vanilla" alt="JavaScript logo"/>
+            </a>
+        </div>
+        <h1>Hello Wails!</h1>
+        <div class="card">
+            <button id="test" onclick="doGreet()">Press me!</button>
+        </div>
+        <p class="read-the-docs">
+            Click on the Wails logo to learn more
+        </p>
+    </div>
    <script type="module" src="/main.js"></script>
-  </body>
+</body>
 </html>
@@ -1,23 +1,9 @@
-import './style.css'
-import javascriptLogo from './javascript.svg'
-import { setupCounter } from './counter.js'
+import {Greet} from "./bindings/main/GreetService.js";

-document.querySelector('#app').innerHTML = `
-  <div>
-    <a href="https://wails.io" target="_blank">
-      <img src="/wails.png" class="logo" alt="Wails logo" />
-    </a>
-    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
-      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
-    </a>
-    <h1>Hello Wails!</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Wails logo to learn more
-    </p>
-  </div>
-`
-
-setupCounter(document.querySelector('#counter'))
+window.doGreet = () => {
+    Greet('test').then((result) => {
+        console.log(result);
+    }).catch((err) => {
+        console.log(err);
+    });
+}
@@ -9,6 +9,7 @@
    "preview": "vite preview"
  },
  "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^4.0.0",
+    "@wailsio/runtime": "^3.0.0-alpha.6"
  }
 }
@@ -28,10 +28,18 @@ body {
  margin: 0;
  display: flex;
  place-items: center;
+  place-content: center;
  min-width: 320px;
  min-height: 100vh;
 }

+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 h1 {
  font-size: 3.2em;
  line-height: 1.1;