Add logging to kitchen sink

v2/test/kitchensink/basic.go

@@ -1,35 +0,0 @@
-package main
-
-import (
-	"fmt"
-
-	wails "github.com/wailsapp/wails/v2"
-)
-
-// Basic application struct
-type Basic struct {
-	runtime *wails.Runtime
-}
-
-// newBasic creates a new Basic application struct
-func newBasic() *Basic {
-	return &Basic{}
-}
-
-// WailsInit is called at application startup
-func (b *Basic) WailsInit(runtime *wails.Runtime) error {
-	// Perform your setup here
-	b.runtime = runtime
-	runtime.Window.SetTitle("kitchensink")
-	return nil
-}
-
-// WailsShutdown is called at application termination
-func (b *Basic) WailsShutdown() {
-	// Perform your teardown here
-}
-
-// Greet returns a greeting for the given name
-func (b *Basic) Greet(name string) string {
-	return fmt.Sprintf("Hello %s!", name)
-}

v2/test/kitchensink/frontend/package-lock.json

@@ -3121,6 +3121,15 @@
         }
       }
     },
+    "rollup-plugin-string": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-string/-/rollup-plugin-string-3.0.0.tgz",
+      "integrity": "sha512-vqyzgn9QefAgeKi+Y4A7jETeIAU1zQmS6VotH6bzm/zmUQEnYkpIGRaOBPY41oiWYV4JyBoGAaBjYMYuv+6wVw==",
+      "dev": true,
+      "requires": {
+        "rollup-pluginutils": "^2.4.1"
+      }
+    },
     "rollup-plugin-svelte": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.3.tgz",

v2/test/kitchensink/frontend/package.json

@@ -18,6 +18,7 @@
     "rollup": "^2.0.0",
     "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^5.1.2",
     "sirv-cli": "^0.4.4",

v2/test/kitchensink/frontend/rollup.config.js

@@ -5,6 +5,7 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
 import autoPreprocess from 'svelte-preprocess';
+import { string } from "rollup-plugin-string";
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -18,6 +19,9 @@ export default {
 	},
 	onwarn: handleRollupWarning,
 	plugins: [
+		string({
+			include: ["**/*.jsx","**/*.go"],
+		}),
 		svelte({
 			preprocess: autoPreprocess(),
 			// enable run-time checks when not in production

v2/test/kitchensink/frontend/src/App.svelte

@@ -93,8 +93,8 @@
     /* Switch */
     --dm-switch-bg-color: rgb(28,173,213);
     --lm-switch-bg-color: rgb(28,173,213);
-    --dm-switch-bg-color-checked: rgb(239,218,91);
-    --lm-switch-bg-color-checked: rgb(239,218,91);
+    --dm-switch-bg-color-checked: rgb(186,167,49);
+    --lm-switch-bg-color-checked: rgb(186,167,49);
     --lm-switch-slider-bg-color: #FFF;
     --dm-switch-slider-bg-color: #FFF;
   }

v2/test/kitchensink/frontend/src/MainPage.svelte

@@ -2,13 +2,13 @@
 
     import {selectedPage} from './Store';
     import TitlePage from './pages/TitlePage.svelte';
-    import Logging from './pages/Logging.svelte';
+    import Logging from './pages/logging/Logging.svelte';
     import Events from './pages/Events.svelte';
 
 </script>
 
 <div class="mainpage">
-    {#if $selectedPage == undefined} <TitlePage ></TitlePage> {/if}
+    {#if $selectedPage == undefined} <TitlePage></TitlePage> {/if}
     {#if $selectedPage == "Logging"} <Logging></Logging> {/if}
     {#if $selectedPage == "Events"} <Events></Events> {/if}
 </div>
@@ -18,5 +18,6 @@
         margin-top: 60px;
         margin-left: 45px;
         margin-right: 45px;
+        margin-bottom: 60px;
     }
 </style>

v2/test/kitchensink/frontend/src/components/CodeBlock.svelte

@@ -2,17 +2,29 @@
 <script>
     import { Highlight } from "svelte-highlight";
     import { go, javascript } from "svelte-highlight/languages";
-    let isJs = false;
+    
+    // Default to Go
+    export let isJs = false;
+    
+    // Calculate CSS to use
     $: lang = isJs ? javascript : go;
-    export let jsCode = "Hi form JS!";
-    export let goCode = "Hi form Go!";
 
+    // Calculate Code for code block
+    export let jsCode = "Hi from JS!";
+    export let goCode = "Hi from Go!";
     $: code = isJs ? jsCode : goCode;
+
+    // Handle hiding example
+    let hidden = false;
+
+    function toggleExample() {
+        hidden = !hidden;
+    }
 </script>
 
-<div data-wails-no-drag class="code">
+<div data-wails-no-drag class="codeblock">
     <div class="header">
-        <span>Title</span>
+        <span on:click="{toggleExample}">Title</span>
         <span class="toggle">
             <span>Go</span>
             <span class="custom-switch">
@@ -21,13 +33,17 @@
             </span>
         </span>
     </div>
+    {#if !hidden}
     <Highlight language="{lang}" {code} />
+    {/if}
 </div>
 
 <style>
 
     .header {
-        margin: 5px;
+        display: flex;
+        justify-content: space-between;
+        padding: 15px 15px 0 15px;
     }
 
     .toggle {
@@ -36,6 +52,13 @@
 
     .custom-switch {
         display: inline-block;
+        margin-left: 5px;
+    }
+
+    .codeblock {
+        background-color: #3F3F4B;
+        border-radius: 5px;
+        padding-bottom: 15px;
     }
 
 </style>

v2/test/kitchensink/frontend/src/pages/logging/Logging.svelte

@@ -1,15 +1,27 @@
 <script>
 
     import { Log } from '@wailsapp/runtime2';
+    import CodeBlock from '../../components/CodeBlock.svelte';
+    import jsCode from './code.jsx';
+    import goCode from './code.go';
 
     var loglevel = 'Debug';
     var message = '';
+    var isJs = false;
 
     var options = ["Debug", "Info", "Warning", "Error", "Fatal"];
 
+    $: lang = isJs ? 'Javascript' : 'Go';
+
     function sendLogMessage() {
         if( message.length > 0 ) {
-            Log[loglevel](message);
+            if( isJs ) {
+                // Call JS runtime
+                Log[loglevel](message);
+            } else {
+                // Call Go method which calls Go Runtime
+                backend.main.Logger[loglevel](message);              
+            }
         }
     }
 
@@ -30,6 +42,7 @@
 
     <h5>Try Me</h5>
     <hr>
+    <CodeBlock bind:isJs={isJs} {jsCode} {goCode}></CodeBlock>
     <div class="logging-form">
         <form data-wails-no-drag class="w-400 mw-full"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
             <!-- Radio -->
@@ -49,7 +62,7 @@
                 <input type="text" class="form-control" id="message" placeholder="Hello World!" bind:value="{message}" required="required">
             </div>
 
-            <input class="btn btn-primary" type="submit" on:click="{sendLogMessage}" value="Run!">
+            <input class="btn btn-primary" type="button" on:click="{sendLogMessage}" value="Call {lang} method">
         </form>
     </div>
 </div>

v2/test/kitchensink/frontend/src/pages/logging/code.go

@@ -0,0 +1,42 @@
+package main
+
+import (
+	wails "github.com/wailsapp/wails/v2"
+)
+
+// Logger struct
+type Logger struct {
+	runtime *wails.Runtime
+}
+
+// WailsInit is called at application startup
+func (l *Logger) WailsInit(runtime *wails.Runtime) error {
+	// Perform your setup here
+	l.runtime = runtime
+	return nil
+}
+
+// Debug will log the given message
+func (l *Logger) Debug(message string) {
+	l.runtime.Log.Debug(message)
+}
+
+// Info will log the given message
+func (l *Logger) Info(message string) {
+	l.runtime.Log.Info(message)
+}
+
+// Warning will log the given message
+func (l *Logger) Warning(message string) {
+	l.runtime.Log.Warning(message)
+}
+
+// Error will log the given message
+func (l *Logger) Error(message string) {
+	l.runtime.Log.Error(message)
+}
+
+// Fatal will log the given message
+func (l *Logger) Fatal(message string) {
+	l.runtime.Log.Fatal(message)
+}

v2/test/kitchensink/frontend/src/pages/logging/code.jsx

@@ -0,0 +1,18 @@
+
+import { Log } from '@wailsapp/runtime2';
+
+function doSomeOperation() {
+    // Do things
+    let value = doSomething();
+    Log.Debug("I got: " + value);
+    /*
+    Log.Info("An Info message");
+    Log.Warning("A Warning message");
+    Log.Error("An Error message");
+    */
+}
+
+function abort() {
+    // Do some things
+    Log.Fatal("I accidentally the whole application!");
+}

v2/test/kitchensink/logger.go

@@ -0,0 +1,42 @@
+package main
+
+import (
+	wails "github.com/wailsapp/wails/v2"
+)
+
+// Logger struct
+type Logger struct {
+	runtime *wails.Runtime
+}
+
+// WailsInit is called at application startup
+func (l *Logger) WailsInit(runtime *wails.Runtime) error {
+	// Perform your setup here
+	l.runtime = runtime
+	return nil
+}
+
+// Debug will log the given message
+func (l *Logger) Debug(message string) {
+	l.runtime.Log.Debug(message)
+}
+
+// Info will log the given message
+func (l *Logger) Info(message string) {
+	l.runtime.Log.Info(message)
+}
+
+// Warning will log the given message
+func (l *Logger) Warning(message string) {
+	l.runtime.Log.Warning(message)
+}
+
+// Error will log the given message
+func (l *Logger) Error(message string) {
+	l.runtime.Log.Error(message)
+}
+
+// Fatal will log the given message
+func (l *Logger) Fatal(message string) {
+	l.runtime.Log.Fatal(message)
+}

v2/test/kitchensink/main.go

@@ -24,7 +24,7 @@ func main() {
 		},
 	})
 
-	app.Bind(newBasic())
+	app.Bind(&Logger{})
 
 	app.Run()
 }