Add Events.On

v2/test/kitchensink/events.go

@@ -0,0 +1,29 @@
+package main
+
+import (
+	wails "github.com/wailsapp/wails/v2"
+)
+
+// Events struct
+type Events struct {
+	runtime *wails.Runtime
+}
+
+// WailsInit is called at application startup
+func (e *Events) WailsInit(runtime *wails.Runtime) error {
+	// Perform your setup here
+	e.runtime = runtime
+	return nil
+}
+
+// Subscribe will subscribe
+func (e *Events) Subscribe(eventName string) {
+	e.runtime.Events.On(eventName, func(args ...interface{}) {
+		type callbackData struct {
+			Name string
+			Data []interface{}
+		}
+		result := callbackData{Name: eventName, Data: args}
+		e.runtime.Events.Emit("event fired by go subscriber", result)
+	})
+}

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

@@ -162,7 +162,7 @@
         background-color: #e5e5e5;
         border-radius: 5px;
         border: 1px solid #ccc;
-        padding: 15px;
+        padding: 5px;
         margin-top: 20px;
         margin-bottom: 10px;
     }

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

@@ -38,7 +38,9 @@ import { afterUpdate } from 'svelte';
         margin-top: 10px;
         margin-bottom: 10px;
         border: 1px solid #5555;
-        overflow: auto;
+        overflow-y: auto;
+        overflow-wrap: break-word;
+
     }
 
     .faketerm-dark {

v2/test/kitchensink/frontend/src/pages/events/Events.svelte

@@ -1,5 +1,6 @@
 <script>
     import On from './On/On.svelte';
+    import Emit from './Emit/Emit.svelte';
 </script>
 
 <div>
@@ -19,7 +20,8 @@
     <div style="padding: 15px"></div>
      
     <On></On>
-
+    <br/>
+    <Emit></Emit>
 </div>
 
 <style>

v2/test/kitchensink/frontend/src/pages/events/On/On.svelte

@@ -5,10 +5,10 @@
     import description from './description.txt';
     import { UniqueID } from '../../../utils/utils';
     import FakeTerm from '../../../components/FakeTerm.svelte';
+    import jsCode from './code.jsx';
+    import goCode from './code.go';
 
     let isJs = false;
-    let jsCode = "js";
-    let goCode = "go";
     $: lang = isJs ? 'Javascript' : 'Go';
 
     // Listeners
@@ -18,31 +18,43 @@
     let eventName = "";
     let loggingOutput = writable("");
 
+
+    function updateLog(eventName, data, source) {
+        loggingOutput.update( (log) => {
+            let datatext = (data ? JSON.stringify(data) : "(No data given)");
+            return log + "[" + eventName + " (" + source + ")] data: " + datatext + "\n";
+        });
+    }
+
+    // Subscribe to the Go event calls
+    Events.On("event fired by go subscriber", (input) => {
+        // Format the data for printing
+        updateLog(input.Name, input.Data, "Go");
+    });
+
     function subscribe() {
         if (eventName.length == 0) {
             return
         }
 
+        let name = eventName + " (" + (isJs ? 'JS' : 'Go') + ")"
+        if( $listeners.includes(name) ) {
+            return
+        }
+
         // Add eventName to listeners list
         listeners.update( (current) => {
-            // Don't add twice
-            if( current.includes(eventName) ) {
-                return current;
-            }
-            return current.concat(eventName);
+            return current.concat(name);
         });
 
         if( isJs ) {
-            console.log("Adding listener for " + eventName);
-            Events.On(eventName, (data) => {
-                console.log("CALLED! " + eventName);
-                loggingOutput.update( (log) => {
-                    let datatext = (data ? JSON.stringify(data) : "(No data given)");
-                    return log + "[" + eventName + "] " + datatext + "\n";
-                });
+            Events.On(eventName, (...data) => {
+                updateLog(eventName, data, "JS");
             })
         } else {
-            console.log("go!");
+            // We call a function in Go to register a subscriber
+            // for us
+            backend.main.Events.Subscribe(eventName);
         }
     }
 
@@ -51,6 +63,7 @@
 <CodeBlock bind:isJs={isJs} {jsCode} {goCode} {id} title="Events.On(eventName, callback)" {description}>
     <div class="logging-form">
         <form data-wails-no-drag class="mw-full"> 
+            {#if $listeners.length > 0 }
             Subscribed to:
             <div class="form-group">
                 <ul class="list">
@@ -58,7 +71,8 @@
                     <li>"{listener}"</li>
                 {/each}
             </div>
-
+            Now use <code>Events.Emit</code> to trigger the subscribers!<br/>
+            {/if}
             <div class="form-group">
                 <label for="{id}-eventName" class="required">Event Name to subscribe to</label>
                 <input type="text" class="form-control" id="{id}-eventName" placeholder="MyEventName" bind:value="{eventName}" required="required">

v2/test/kitchensink/frontend/src/pages/events/On/code.go

@@ -0,0 +1,19 @@
+package main
+
+import wails "github.com/wailsapp/wails/v2"
+
+type MyStruct struct {
+	runtime *wails.Runtime
+}
+
+func (m *MyStruct) WailsInit(runtime *wails.Runtime) error {
+
+	runtime.Events.On("notes updated", func(optionalData ...interface{}) {
+		// Get notes
+		notes := optionalData[0].(*Notes)
+		// Save the notes to disk
+	})
+
+	m.runtime = runtime
+	return nil
+}

v2/test/kitchensink/frontend/src/pages/events/On/code.jsx

@@ -0,0 +1,8 @@
+import { Events } from '@wails/runtime';
+
+let notes = [];
+
+// Do some things
+Events.On("notes loaded", (newNotes) => {
+  notes = newNotes;
+});

v2/test/kitchensink/frontend/src/pages/events/On/description.txt

@@ -1 +1,2 @@
-Events.On is used to subscribe to events. The given callback will be called whenever an event matching the given event name is received.
+<code>Events.On()</code> is used to subscribe to events. 
+The given callback will be called whenever an event matching the given event name is received.

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

@@ -29,7 +29,7 @@
         }
     }
 
-    $: encodedMessage = message.replace(`"`, `“`);
+    $: encodedMessage = message.replace(`"`, `\"`);
     $: testcodeJs = "import { runtime } from '@wails/runtime';\nruntime.Log." + loglevel + "(`" + encodedMessage + "`);";
     $: testcodeGo = '// runtime is given through WailsInit()\nruntime.Log.' + loglevel + '("' + encodedMessage + '")'; 
 

v2/test/kitchensink/main.go

@@ -24,6 +24,7 @@ func main() {
 		LogLevel: logger.TRACE,
 	})
 
+	app.Bind(&Events{})
 	app.Bind(&Logger{})
 
 	app.Run()