Updated custom html

Move headless capability into own library

.1.gitignore

@@ -1,17 +0,0 @@
-lib/project/templates/vue
-lib/project/templates/blank
-tools
-test
-.vscode/
-tmp
-examples/**/example*
-!examples/**/*.*
-node_modules
-cmd.old
-lib.old
-cmd/wails/wails
-.DS_Store
-rewrite
-.rewrite
-examples/WIP/*
-docs

app.go

@@ -69,10 +69,10 @@ func CreateApp(optionalConfig ...*AppConfig) *App {
 func (a *App) Run() error {
 	if DebugMode == "true" {
 		return a.cli.Run()
-	} else {
-		a.logLevel = "error"
-		return a.start()
 	}
+
+	a.logLevel = "error"
+	return a.start()
 }
 
 func (a *App) start() error {

assets/bridge/wailsbridge.js

@@ -0,0 +1,214 @@
+/*
+    Wails Bridge (c) 2019-present Lea Anthony
+
+    This library creates a bridge between your application
+    and the frontend, allowing you to develop your app using 
+    standard tooling (browser extensions, live reload, etc). 
+
+    Usage:
+    ```
+    import Bridge from "./wailsbridge";
+    Bridge.Start(startApp);
+    ```
+
+    The given callback (startApp in the example) will be called
+    when the bridge has successfully initialised. It passes the
+    window.wails object back, in case it is not accessible directly.
+*/
+
+// Bridge object
+window.wailsbridge = {
+  reconnectOverlay: null,
+  reconnectTimer: 300,
+  wsURL: "ws://localhost:34115/bridge",
+  connectionState: null,
+  config: {},
+  websocket: null,
+  callback: null,
+  overlayHTML:
+    '<div class="wails-reconnect-overlay"><div class="wails-reconnect-overlay-content"><div class="wails-reconnect-overlay-title">Wails Bridge</div><br><div class="wails-reconnect-overlay-loadingspinner"></div><br><div id="wails-reconnect-overlay-message">Waiting for backend</div></div></div>',
+  overlayCSS:
+    ".wails-reconnect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);font-family:sans-serif;display:none;z-index:999999}.wails-reconnect-overlay-content{padding:20px 30px;text-align:center;width:20em;position:relative;height:14em;border-radius:1em;margin:5% auto 0;background-color:#fff;box-shadow:1px 1px 20px 3px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAuCAMAAACPpbA7AAAAqFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEBAQAAAAAAAAEBAQAAAAAAAAAAAAEBAQEBAQDAwMBAQEAAAABAQEAAAAAAAAAAAABAQEAAAAAAAACAgICAgIBAQEAAAAAAAAAAAAAAAAAAAAAAAABAQEAAAACAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBQWKCj6oAAAAN3RSTlMALiIqDhkGBAswJjP0GxP6NR4W9/ztjRDMhWU50G9g5eHXvbZ9XEI9xZTcqZl2aldKo55QwoCvZUgzhAAAAs9JREFUSMeNleeWqjAUhU0BCaH3Itiw9zKT93+zG02QK1hm/5HF+jzZJ6fQe6cyXE+jg9X7o9wxuylIIf4Tv2V3+bOrEXnf8dwQ/KQIGDN2/S+4OmVCVXL/ScBnfibxURqIByP/hONE8r8T+bDMlQ98KSl7Y8hzjpS8v1qtDh8u5f8KQpGpfnPPhqG8JeogN37Hq9eaN2xRhIwAaGnvws8F1ShxqK5ob2twYi1FAMD4rXsYtnC/JEiRbl4cUrCWhnMCLRFemXezXbb59QK4WASOsm6n2W1+4CBT2JmtzQ6fsrbGubR/NFbd2g5Y179+5w/GEHaKsHjYCet7CgrXU3txarNC7YxOVJtIj4/ERzMdZfzc31hp+8cD6eGILgarZY9uZ12hAs03vfBD9C171gS5Omz7OcvxALQIn4u8RRBBBcsi9WW2woO9ipLgfzpYlggg3ZRdROUC8KT7QLqq3W9KB5BbdFVg4929kdwp6+qaZnMCCNBdj+NyN1W885Ry/AL3D4AQbsVV4noCiM/C83kyYq80XlDAYQtralOiDzoRAHlotWl8q2tjvYlOgcg1A8jEApZa+C06TBdAz2Qv0wu11I/zZOyJQ6EwGez2P2b8PIQr1hwwnAZsAxwA4UAYOyXUxM/xp6tHAn4GUmPGM9R28oVxgC0e/zQJJI6DyhyZ1r7uzRQhpcW7x7vTaWSzKSG6aep77kroTEl3U81uSVaUTtgEINfC8epx+Q4F9SpplHG84Ek6m4RAq9/TLkOBrxyeuddZhHvGIp1XXfFy3Z3vtwNblKGiDn+J+92vwwABHghj7HnzlS1H5kB49AZvdGCFgiBPq69qfXPr3y++yilF0ON4R8eR7spAsLpZ95NqAW5tab1c4vkZm6aleajchMwYTdILQQTwE2OV411ZM9WztDjPql12caBi6gDpUKmDd4U1XNdQxZ4LIXQ5/Tr4P7I9tYcFrDK3AAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:center}.wails-reconnect-overlay-title{font-size:2em}.wails-reconnect-overlay-message{font-size:1.3em}.wails-reconnect-overlay-loadingspinner{pointer-events:none;width:2.5em;height:2.5em;border:.4em solid transparent;border-color:#3E67EC #eee #eee;border-radius:50%;animation:loadingspin 1s linear infinite;margin:auto;padding:2.5em}@keyframes loadingspin{100%{transform:rotate(360deg)}}",
+  log: function (message) {
+    console.log(
+      "%c wails bridge %c " + message + " ",
+      "background: #aa0000; color: #fff; border-radius: 3px 0px 0px 3px; padding: 1px; font-size: 0.7rem",
+      "background: #009900; color: #fff; border-radius: 0px 3px 3px 0px; padding: 1px; font-size: 0.7rem"
+    );
+  }
+};
+
+// Adapted from webview - thanks zserge!
+function injectCSS(css) {
+  var elem = document.createElement("style");
+  elem.setAttribute("type", "text/css");
+  if (elem.styleSheet) {
+    elem.styleSheet.cssText = css;
+  } else {
+    elem.appendChild(document.createTextNode(css));
+  }
+  var head = document.head || document.getElementsByTagName("head")[0];
+  head.appendChild(elem);
+}
+
+// Creates a node in the Dom
+function createNode(parent, elementType, id, className, content) {
+  var d = document.createElement(elementType);
+  if (id) {
+    d.id = id;
+  }
+  if (className) {
+    d.className = className;
+  }
+  if (content) {
+    d.innerHTML = content;
+  }
+  parent.appendChild(d);
+  return d;
+}
+
+// Sets up the overlay
+function setupOverlay() {
+  var body = document.body;
+  var wailsBridgeNode = createNode(body, "div", "wails-bridge");
+  wailsBridgeNode.innerHTML = window.wailsbridge.overlayHTML;
+
+  // Inject the overlay CSS
+  injectCSS(window.wailsbridge.overlayCSS);
+}
+
+// Start the Wails Bridge
+function startBridge() {
+  // Setup the overlay
+  setupOverlay();
+
+  window.wailsbridge.websocket = null;
+  window.wailsbridge.connectTimer = null;
+  window.wailsbridge.reconnectOverlay = document.querySelector(
+    ".wails-reconnect-overlay"
+  );
+  window.wailsbridge.connectionState = "disconnected";
+
+  // Shows the overlay
+  function showReconnectOverlay() {
+    window.wailsbridge.reconnectOverlay.style.display = "block";
+  }
+
+  // Hides the overlay
+  function hideReconnectOverlay() {
+    window.wailsbridge.reconnectOverlay.style.display = "none";
+  }
+
+  // Bridge external.invoke
+  window.external = {
+    invoke: function (msg) {
+      window.wailsbridge.websocket.send(msg);
+    }
+  };
+
+  // Adds a script to the Dom.
+  // Removes it if second parameter is true.
+  function addScript(script, remove) {
+    var s = document.createElement("script");
+    s.textContent = script;
+    document.head.appendChild(s);
+
+    // Remove internal messages from the DOM
+    if (remove) {
+      s.parentNode.removeChild(s);
+    }
+  }
+
+  // Handles incoming websocket connections
+  function handleConnect() {
+    window.wailsbridge.log("Connected to backend");
+    hideReconnectOverlay();
+    clearInterval(window.wailsbridge.connectTimer);
+    window.wailsbridge.websocket.onclose = handleDisconnect;
+    window.wailsbridge.websocket.onmessage = handleMessage;
+    window.wailsbridge.connectionState = "connected";
+  }
+
+  // Handles websocket disconnects
+  function handleDisconnect() {
+    window.wailsbridge.log("Disconnected from backend");
+    window.wailsbridge.websocket = null;
+    window.wailsbridge.connectionState = "disconnected";
+    showReconnectOverlay();
+    connect();
+  }
+
+  // Try to connect to the backend every 300ms (default value).
+  // Change this value in the main wailsbridge object.
+  function connect() {
+    window.wailsbridge.connectTimer = setInterval(function () {
+      if (window.wailsbridge.websocket == null) {
+        window.wailsbridge.websocket = new WebSocket(window.wailsbridge.wsURL);
+        window.wailsbridge.websocket.onopen = handleConnect;
+        window.wailsbridge.websocket.onerror = function (e) {
+          e.stopImmediatePropagation();
+          e.stopPropagation();
+          e.preventDefault();
+          window.wailsbridge.websocket = null;
+          return false;
+        };
+      }
+    }, window.wailsbridge.reconnectTimer);
+  }
+
+  function handleMessage(message) {
+    // As a bridge we ignore js and css injections
+
+    switch (message.data[0]) {
+      // Wails library - inject!
+      case "w":
+        addScript(message.data.slice(1));
+
+        // Now wails runtime is loaded, wails for the ready event
+        // and callback to the main app
+        window.wails.events.on("wails:loaded", function () {
+          window.wailsbridge.log("Wails Ready");
+          if (window.wailsbridge.callback) {
+            window.wailsbridge.log("Notifying application");
+            window.wailsbridge.callback(window.wails);
+          }
+        });
+        window.wailsbridge.log("Loaded Wails Runtime");
+        break;
+      // Notifications
+      case "n":
+        addScript(message.data.slice(1), true);
+        break;
+      // Binding
+      case "b":
+        var binding = message.data.slice(1)
+        //log("Binding: " + binding)
+        window.wails._.newBinding(binding);
+        break;
+      // Call back
+      case "c":
+        var callbackData = message.data.slice(1);
+        log("Callback = " + callbackData);
+        window.wails._.callback(callbackData);
+        break;
+    }
+  }
+
+  // Start by showing the overlay...
+  showReconnectOverlay();
+
+  // ...and attempt to connect
+  connect();
+}
+
+export default {
+  // The main function
+  // Passes the main Wails object to the callback if given.
+  Start: function (callback) {
+    // Save the callback
+    window.wailsbridge.callback = callback;
+
+    // Start Bridge
+    startBridge();
+  }
+};

assets/bridge/wailsbridge.prod.js

@@ -0,0 +1,15 @@
+/*
+    Wails Bridge (c) 2019-present Lea Anthony
+
+    This prod version is to get around having to rewrite your code
+    for production. When doing a release build, this file will be used 
+    instead of the full version.
+*/
+
+export default {
+  // The main function
+  // Passes the main Wails object to the callback if given.
+  Start: function (callback) {
+    return callback();
+  }
+};

assets/headless/index.html

@@ -20,7 +20,7 @@
       text-align: center;
       width: 20em;
       position: relative;
-      height: 17em;
+      height: 14em;
       border-radius: 1em;
       margin: 5% auto 0;
       background-color: white;
@@ -94,18 +94,34 @@
         }
       };
 
-      function addScript(script, id) {
-        var s = document.createElement("script")
-        if (id) {
-          s.id = id;
-        }
+      // Adds a script to the Dom.
+      // Removes it if second parameter is true.
+      function addScript(script, remove) {
+        var s = document.createElement("script");
         s.textContent = script;
-        document.head.appendChild(s)
+        document.head.appendChild(s);
+
+        // Remove internal messages from the DOM
+        if (remove) {
+          s.parentNode.removeChild(s);
+        }
+      }
+
+      // Adapted from webview - thanks zserge!
+      function injectCSS(css) {
+        var elem = document.createElement("style");
+        elem.setAttribute("type", "text/css");
+        if (elem.styleSheet) {
+          elem.styleSheet.cssText = css;
+        } else {
+          elem.appendChild(document.createTextNode(css));
+        }
+        var head = document.head || document.getElementsByTagName("head")[0];
+        head.appendChild(elem);
       }
 
       function handleConnect() {
-        console.log("[Wails] Connected to backend");
-        addKeyListener();
+        log("Connected to backend");
         hideReconnectOverlay();
         clearInterval(connectTimer);
         websocket.onclose = handleDisconnect;
@@ -115,9 +131,8 @@
       }
 
       function handleDisconnect() {
-        console.log("[Wails] Disconnected from backend");
+        log("Disconnected from backend");
         websocket = null;
-        removeKeyListener();
         connectionState = "disconnected";
         showReconnectOverlay();
         connect();
@@ -138,38 +153,73 @@
           }
         }, 300);
       }
-
-      function handleMessage(e) {
-        addScript(e.data);
+      function log(message) {
+        console.log(
+          "%c wails headless %c " + message + " ",
+          "background: #aa0000; color: #fff; border-radius: 3px 0px 0px 3px; padding: 1px; font-size: 0.7rem",
+          "background: #009900; color: #fff; border-radius: 0px 3px 3px 0px; padding: 1px; font-size: 0.7rem"
+        );
       }
 
-      // Key listener
-      var delta = 300;
-      var lastKeypressTime = 0;
-      function KeyHandler(event) {
-        if (event.key === "`") {
-          var thisKeypressTime = new Date();
-          if (thisKeypressTime - lastKeypressTime <= delta) {
-            console.log("Double tap!")
-            // optional - if we'd rather not detect a triple-press
-            // as a second double-press, reset the timestamp
-            thisKeypressTime = 0;
-          }
-          lastKeypressTime = thisKeypressTime;
+      function handleMessage(message) {
+        // As a bridge we ignore js and css injections
+        debugger;
+
+        switch (message.data[0]) {
+          // Wails library - inject!
+          case "w":
+            addScript(message.data.slice(1));
+
+            // Now wails runtime is loaded, wails for the ready event
+            // and callback to the main app
+            window.wails.events.on("wails:loaded", function () {
+              log("Wails Ready");
+            });
+            log("Loaded Wails Runtime");
+            break;
+
+          // Notification
+          case "n":
+            log("Notification: " + message.data.slice(1))
+            addScript(message.data.slice(1), true);
+            break;
+
+          // Binding
+          case "b":
+            var binding = message.data.slice(1)
+            //log("Binding: " + binding)
+            window.wails._.newBinding(binding);
+            break;
+
+          // Call back
+          case "c":
+            var callbackData = message.data.slice(1);
+            log("Callback = " + callbackData);
+            window.wails._.callback(callbackData);
+            break;
+
+          // CSS
+          case "s":
+            addScript(message.data.slice(1), true);
+            break;
+
+          // JS
+          case "j":
+            addScript(message.data.slice(1));
+            break;
+
+          // HTML
+          case "h":
+            addScript(message.data.slice(1), true);
+            break;
+
+          default:
+            log("Ignored message: " + message.data.slice(0, 100))
         }
       }
 
-      function addKeyListener() {
-        document.body.addEventListener('keydown', KeyHandler);
-      }
-
-      function removeKeyListener() {
-        document.body.removeEventListener('keydown', KeyHandler);
-      }
-
       connect();
 
-
     }());
 
   </script>

cmd/project.go

@@ -249,7 +249,7 @@ func (po *ProjectOptions) PromptForInputs() error {
 	}
 
 	// Setup NPM Project name
-	po.NPMProjectName = strings.Replace(po.Name, " ", "_", -1)
+	po.NPMProjectName = strings.ToLower(strings.Replace(po.Name, " ", "_", -1))
 
 	// If we selected custom, prompt for framework
 	if po.Template == "custom - Choose your own CSS Framework" {

cmd/templates/basic/frontend/main.html

@@ -0,0 +1,8 @@
+<div style="text-align:center">
+  <div
+    class="wails-logo"
+    style="width: 25rem;margin: auto;height: 25rem;"
+  ></div>
+  <h1>Basic Template</h1>
+  Welcome to your basic Wails app!
+</div>

cmd/templates/basic/main.go.template

@@ -1,24 +1,21 @@
 package main
 
 import (
+  "github.com/gobuffalo/packr"
 	wails "github.com/wailsapp/wails"
 )
 
-var html = `
-<div style='text-align:center'>
-<h1> Basic Template </h1>
-Welcome to your basic Wails app!
-</div>
-`
-
 func main() {
 
+	// Assets
+	assets := packr.NewBox("./frontend")
+
 	// Initialise the app
 	app := wails.CreateApp(&wails.AppConfig{
 		Width:  1024,
 		Height: 768,
 		Title:  "{{.Name}}",
-		HTML:   html,
+		HTML:   wails.BoxString(&assets, "main.html"),
 	})
 	app.Run()
 }

cmd/templates/custom/frontend/main.html

@@ -0,0 +1,8 @@
+<div style="text-align:center">
+  <div
+    class="wails-logo"
+    style="width: 25rem;margin: auto;height: 25rem;"
+  ></div>
+  <h1>Custom CSS Template</h1>
+  Welcome to your basic Wails app with custom CSS!
+</div>

cmd/templates/custom/main.go.template

@@ -1,24 +1,21 @@
 package main
 
 import (
+  "github.com/gobuffalo/packr"
 	wails "github.com/wailsapp/wails"
 )
 
-var html = `
-<div style='text-align:center'>
-<h1> Custom </h1>
-Welcome to your basic Wails app with added CSS!
-</div>
-`
-
 func main() {
 
+	// Assets
+	assets := packr.NewBox("./frontend")
+
 	// Initialise the app
 	app := wails.CreateApp(&wails.AppConfig{
-		Width:  800,
-		Height: 600,
+		Width:  1024,
+		Height: 768,
 		Title:  "{{.Name}}",
-		HTML:   html,
+		HTML:   wails.BoxString(&assets, "main.html"),
 	})
 	app.Run()
 }

cmd/templates/vuewebpack/frontend/src/components/Quote.vue

@@ -8,6 +8,7 @@
 
 <script>
 import "../assets/css/quote.css";
+import { eventBus } from "../main";
 
 export default {
   data() {
@@ -24,7 +25,7 @@ export default {
     }
   },
   created() {
-    this.getNewQuote();
+    eventBus.$on("ready", this.getNewQuote);
   }
 };
 </script>

cmd/templates/vuewebpack/frontend/src/main.js

@@ -1,8 +1,14 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-Vue.config.productionTip = false
+import Vue from "vue";
+export const eventBus = new Vue();
 
+import App from "./App.vue";
 new Vue({
-  render: h => h(App),
-}).$mount('#app')
+  render: h => h(App)
+}).$mount("#app");
+
+import Bridge from "./wailsbridge";
+Bridge.Start(startApp);
+
+function startApp() {
+  eventBus.$emit("ready");
+}

cmd/templates/vuewebpack/frontend/src/wailsbridge.js

@@ -0,0 +1,213 @@
+/*
+    Wails Bridge (c) 2019-present Lea Anthony
+
+    This library creates a bridge between your application
+    and the frontend, allowing you to develop your app using 
+    standard tooling (browser extensions, live reload, etc). 
+
+    Usage:
+    ```
+    import Bridge from "./wailsbridge";
+    Bridge.Start(startApp);
+    ```
+
+    The given callback (startApp in the example) will be called
+    when the bridge has successfully initialised. 
+*/
+
+// Bridge object
+window.wailsbridge = {
+  reconnectOverlay: null,
+  reconnectTimer: 300,
+  wsURL: "ws://localhost:34115/bridge",
+  connectionState: null,
+  config: {},
+  websocket: null,
+  callback: null,
+  overlayHTML:
+    '<div class="wails-reconnect-overlay"><div class="wails-reconnect-overlay-content"><div class="wails-reconnect-overlay-title">Wails Bridge</div><br><div class="wails-reconnect-overlay-loadingspinner"></div><br><div id="wails-reconnect-overlay-message">Waiting for backend</div></div></div>',
+  overlayCSS:
+    ".wails-reconnect-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);font-family:sans-serif;display:none;z-index:999999}.wails-reconnect-overlay-content{padding:20px 30px;text-align:center;width:20em;position:relative;height:14em;border-radius:1em;margin:5% auto 0;background-color:#fff;box-shadow:1px 1px 20px 3px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAuCAMAAACPpbA7AAAAqFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEBAQAAAAAAAAEBAQAAAAAAAAAAAAEBAQEBAQDAwMBAQEAAAABAQEAAAAAAAAAAAABAQEAAAAAAAACAgICAgIBAQEAAAAAAAAAAAAAAAAAAAAAAAABAQEAAAACAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBQWKCj6oAAAAN3RSTlMALiIqDhkGBAswJjP0GxP6NR4W9/ztjRDMhWU50G9g5eHXvbZ9XEI9xZTcqZl2aldKo55QwoCvZUgzhAAAAs9JREFUSMeNleeWqjAUhU0BCaH3Itiw9zKT93+zG02QK1hm/5HF+jzZJ6fQe6cyXE+jg9X7o9wxuylIIf4Tv2V3+bOrEXnf8dwQ/KQIGDN2/S+4OmVCVXL/ScBnfibxURqIByP/hONE8r8T+bDMlQ98KSl7Y8hzjpS8v1qtDh8u5f8KQpGpfnPPhqG8JeogN37Hq9eaN2xRhIwAaGnvws8F1ShxqK5ob2twYi1FAMD4rXsYtnC/JEiRbl4cUrCWhnMCLRFemXezXbb59QK4WASOsm6n2W1+4CBT2JmtzQ6fsrbGubR/NFbd2g5Y179+5w/GEHaKsHjYCet7CgrXU3txarNC7YxOVJtIj4/ERzMdZfzc31hp+8cD6eGILgarZY9uZ12hAs03vfBD9C171gS5Omz7OcvxALQIn4u8RRBBBcsi9WW2woO9ipLgfzpYlggg3ZRdROUC8KT7QLqq3W9KB5BbdFVg4929kdwp6+qaZnMCCNBdj+NyN1W885Ry/AL3D4AQbsVV4noCiM/C83kyYq80XlDAYQtralOiDzoRAHlotWl8q2tjvYlOgcg1A8jEApZa+C06TBdAz2Qv0wu11I/zZOyJQ6EwGez2P2b8PIQr1hwwnAZsAxwA4UAYOyXUxM/xp6tHAn4GUmPGM9R28oVxgC0e/zQJJI6DyhyZ1r7uzRQhpcW7x7vTaWSzKSG6aep77kroTEl3U81uSVaUTtgEINfC8epx+Q4F9SpplHG84Ek6m4RAq9/TLkOBrxyeuddZhHvGIp1XXfFy3Z3vtwNblKGiDn+J+92vwwABHghj7HnzlS1H5kB49AZvdGCFgiBPq69qfXPr3y++yilF0ON4R8eR7spAsLpZ95NqAW5tab1c4vkZm6aleajchMwYTdILQQTwE2OV411ZM9WztDjPql12caBi6gDpUKmDd4U1XNdQxZ4LIXQ5/Tr4P7I9tYcFrDK3AAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:center}.wails-reconnect-overlay-title{font-size:2em}.wails-reconnect-overlay-message{font-size:1.3em}.wails-reconnect-overlay-loadingspinner{pointer-events:none;width:2.5em;height:2.5em;border:.4em solid transparent;border-color:#3E67EC #eee #eee;border-radius:50%;animation:loadingspin 1s linear infinite;margin:auto;padding:2.5em}@keyframes loadingspin{100%{transform:rotate(360deg)}}",
+  log: function(message) {
+    console.log(
+      "%c wails bridge %c " + message + " ",
+      "background: #aa0000; color: #fff; border-radius: 3px 0px 0px 3px; padding: 1px; font-size: 0.7rem",
+      "background: #009900; color: #fff; border-radius: 0px 3px 3px 0px; padding: 1px; font-size: 0.7rem"
+    );
+  }
+};
+
+// Adapted from webview - thanks zserge!
+function injectCSS(css) {
+  var elem = document.createElement("style");
+  elem.setAttribute("type", "text/css");
+  if (elem.styleSheet) {
+    elem.styleSheet.cssText = css;
+  } else {
+    elem.appendChild(document.createTextNode(css));
+  }
+  var head = document.head || document.getElementsByTagName("head")[0];
+  head.appendChild(elem);
+}
+
+// Creates a node in the Dom
+function createNode(parent, elementType, id, className, content) {
+  var d = document.createElement(elementType);
+  if (id) {
+    d.id = id;
+  }
+  if (className) {
+    d.className = className;
+  }
+  if (content) {
+    d.innerHTML = content;
+  }
+  parent.appendChild(d);
+  return d;
+}
+
+// Sets up the overlay
+function setupOverlay() {
+  var body = document.body;
+  var wailsBridgeNode = createNode(body, "div", "wails-bridge");
+  wailsBridgeNode.innerHTML = window.wailsbridge.overlayHTML;
+
+  // Inject the overlay CSS
+  injectCSS(window.wailsbridge.overlayCSS);
+}
+
+// Start the Wails Bridge
+function startBridge() {
+  // Setup the overlay
+  setupOverlay();
+
+  window.wailsbridge.websocket = null;
+  window.wailsbridge.connectTimer = null;
+  window.wailsbridge.reconnectOverlay = document.querySelector(
+    ".wails-reconnect-overlay"
+  );
+  window.wailsbridge.connectionState = "disconnected";
+
+  // Shows the overlay
+  function showReconnectOverlay() {
+    window.wailsbridge.reconnectOverlay.style.display = "block";
+  }
+
+  // Hides the overlay
+  function hideReconnectOverlay() {
+    window.wailsbridge.reconnectOverlay.style.display = "none";
+  }
+
+  // Bridge external.invoke
+  window.external = {
+    invoke: function(msg) {
+      window.wailsbridge.websocket.send(msg);
+    }
+  };
+
+  // Adds a script to the Dom.
+  // Removes it if second parameter is true.
+  function addScript(script, remove) {
+    var s = document.createElement("script");
+    s.textContent = script;
+    document.head.appendChild(s);
+
+    // Remove internal messages from the DOM
+    if (remove) {
+      s.parentNode.removeChild(s);
+    }
+  }
+
+  // Handles incoming websocket connections
+  function handleConnect() {
+    window.wailsbridge.log("Connected to backend");
+    hideReconnectOverlay();
+    clearInterval(window.wailsbridge.connectTimer);
+    window.wailsbridge.websocket.onclose = handleDisconnect;
+    window.wailsbridge.websocket.onmessage = handleMessage;
+    window.wailsbridge.connectionState = "connected";
+  }
+
+  // Handles websocket disconnects
+  function handleDisconnect() {
+    window.wailsbridge.log("Disconnected from backend");
+    window.wailsbridge.websocket = null;
+    window.wailsbridge.connectionState = "disconnected";
+    showReconnectOverlay();
+    connect();
+  }
+
+  // Try to connect to the backend every 300ms (default value).
+  // Change this value in the main wailsbridge object.
+  function connect() {
+    window.wailsbridge.connectTimer = setInterval(function() {
+      if (window.wailsbridge.websocket == null) {
+        window.wailsbridge.websocket = new WebSocket(window.wailsbridge.wsURL);
+        window.wailsbridge.websocket.onopen = handleConnect;
+        window.wailsbridge.websocket.onerror = function(e) {
+          e.stopImmediatePropagation();
+          e.stopPropagation();
+          e.preventDefault();
+          window.wailsbridge.websocket = null;
+          return false;
+        };
+      }
+    }, window.wailsbridge.reconnectTimer);
+  }
+
+  function handleMessage(message) {
+    // As a bridge we ignore js and css injections
+
+    switch (message.data[0]) {
+      // Wails library - inject!
+      case "w":
+        addScript(message.data.slice(1));
+
+        // Now wails runtime is loaded, wails for the ready event
+        // and callback to the main app
+        window.wails.events.on("wails:loaded", function() {
+          window.wailsbridge.log("Wails Ready");
+          if (window.wailsbridge.callback) {
+            window.wailsbridge.log("Notifying application");
+            window.wailsbridge.callback();
+          }
+        });
+        window.wailsbridge.log("Loaded Wails Runtime");
+        break;
+      // Notifications
+      case "n":
+        addScript(message.data.slice(1), true);
+        break;
+      // Binding
+      case "b":
+        var binding = message.data.slice(1);
+        //window.wailsbridge.log("Binding: " + binding)
+        window.wails._.newBinding(binding);
+        break;
+      // Call back
+      case "c":
+        var callbackData = message.data.slice(1);
+        // window.wailsbridge.log("Callback = " + callbackData);
+        window.wails._.callback(callbackData);
+        break;
+    }
+  }
+
+  // Start by showing the overlay...
+  showReconnectOverlay();
+
+  // ...and attempt to connect
+  connect();
+}
+
+export default {
+  // The main function
+  // Passes the main Wails object to the callback if given.
+  Start: function(callback) {
+    // Save the callback
+    window.wailsbridge.callback = callback;
+
+    // Start Bridge
+    startBridge();
+  }
+};

cmd/templates/vuewebpack/frontend/src/wailsbridge.prod.js

@@ -0,0 +1,15 @@
+/*
+    Wails Bridge (c) 2019-present Lea Anthony
+
+    This prod version is to get around having to rewrite your code
+    for production. When doing a release build, this file will be used 
+    instead of the full version.
+*/
+
+export default {
+  // The main function
+  // Passes the main Wails object to the callback if given.
+  Start: function (callback) {
+    return callback();
+  }
+};

cmd/wails/3_build.go

@@ -215,7 +215,7 @@ func init() {
 
 		// If we are forcing a rebuild
 		if forceRebuild {
-			buildCommand.Add(" -a")
+			buildCommand.Add("-a")
 		}
 
 		// Release mode

renderer_headless.go

@@ -14,6 +14,22 @@ import (
 var headlessAssets = packr.NewBox("./assets/headless")
 var defaultAssets = packr.NewBox("./assets/default")
 
+type messageType int
+
+const (
+	jsMessage messageType = iota
+	cssMessage
+	htmlMessage
+	notifyMessage
+	bindingMessage
+	callbackMessage
+	wailsRuntimeMessage
+)
+
+func (m messageType) toString() string {
+	return [...]string{"j", "s", "h", "n", "b", "c", "w"}[m]
+}
+
 // Headless is a backend that opens a local web server
 // and renders the files over a websocket
 type Headless struct {
@@ -32,6 +48,8 @@ type Headless struct {
 	initialisationJS []string
 	server           *http.Server
 	theConnection    *websocket.Conn
+	bridgeMode       bool
+	connectionType   string
 }
 
 // Initialise the Headless Renderer
@@ -39,15 +57,23 @@ func (h *Headless) Initialise(appConfig *AppConfig, ipcManager *ipcManager, even
 	h.ipcManager = ipcManager
 	h.appConfig = appConfig
 	h.eventManager = eventManager
+	h.bridgeMode = false
+	h.connectionType = "Websocket"
+
+	ipcManager.bindRenderer(h)
 	h.log = newCustomLogger("Headless")
 	return nil
 }
 
-func (h *Headless) evalJS(js string) error {
+func (h *Headless) evalJS(js string, mtype messageType) error {
+
+	message := mtype.toString() + js
+
 	if h.theConnection == nil {
-		h.initialisationJS = append(h.initialisationJS, js)
+		h.initialisationJS = append(h.initialisationJS, message)
 	} else {
-		h.sendMessage(h.theConnection, js)
+		// Prepend message type to message
+		h.sendMessage(h.theConnection, message)
 	}
 
 	return nil
@@ -62,10 +88,11 @@ func (h *Headless) injectCSS(css string) {
 		h.log.Fatal("Unable to minify CSS: " + css)
 	}
 	minifiedCSS := string(minified)
+	minifiedCSS = strings.Replace(minifiedCSS, "\\", "\\\\", -1)
 	minifiedCSS = strings.Replace(minifiedCSS, "'", "\\'", -1)
 	minifiedCSS = strings.Replace(minifiedCSS, "\n", " ", -1)
 	inject := fmt.Sprintf("wails._.injectCSS('%s')", minifiedCSS)
-	h.evalJS(inject)
+	h.evalJS(inject, cssMessage)
 }
 
 func (h *Headless) rootHandler(w http.ResponseWriter, r *http.Request) {
@@ -73,15 +100,21 @@ func (h *Headless) rootHandler(w http.ResponseWriter, r *http.Request) {
 	fmt.Fprintf(w, "%s", indexHTML)
 }
 
+func (h *Headless) wsBridgeHandler(w http.ResponseWriter, r *http.Request) {
+	h.bridgeMode = true
+	h.connectionType = "Bridge"
+	h.wsHandler(w, r)
+}
+
 func (h *Headless) wsHandler(w http.ResponseWriter, r *http.Request) {
 	conn, err := websocket.Upgrade(w, r, w.Header(), 1024, 1024)
 	if err != nil {
 		http.Error(w, "Could not open websocket connection", http.StatusBadRequest)
 	}
 	h.theConnection = conn
-	h.log.Infof("Connection %p accepted.", h.theConnection)
+	h.log.Infof("%s connection accepted [%p].", h.connectionType, h.theConnection)
 	conn.SetCloseHandler(func(int, string) error {
-		h.log.Infof("Connection %p dropped.", h.theConnection)
+		h.log.Infof("%s connection dropped [%p].", h.connectionType, h.theConnection)
 		h.theConnection = nil
 		return nil
 	})
@@ -98,76 +131,84 @@ func (h *Headless) start(conn *websocket.Conn) {
 
 	// set external.invoke
 	h.log.Infof("Connected to frontend.")
-
-	// If we are given an HTML fragment, load jquery
-	// for the html() function
-	if h.appConfig.isHTMLFragment {
-		// Inject jquery
-		jquery := BoxString(&defaultAssets, "jquery.3.3.1.min.js")
-		h.evalJS(jquery)
-	}
+	h.log.Infof("Mode = %s", h.connectionType)
 
 	wailsRuntime := BoxString(&defaultAssets, "wails.js")
-	h.evalJS(wailsRuntime)
+	h.evalJS(wailsRuntime, wailsRuntimeMessage)
+
+	if !h.bridgeMode {
+		// Inject jquery
+		jquery := BoxString(&defaultAssets, "jquery.3.3.1.min.js")
+		h.evalJS(jquery, jsMessage)
+	}
 
 	// Inject the initial JS
 	for _, js := range h.initialisationJS {
-		h.sendMessage(conn, js)
+		h.sendMessage(h.theConnection, js)
 	}
 
 	// Inject bindings
 	for _, binding := range h.bindingCache {
-		h.evalJS(binding)
+		h.evalJS(binding, bindingMessage)
 	}
 
-	// Inject Framework
-	if h.frameworkJS != "" {
-		h.evalJS(h.frameworkJS)
-	}
-	if h.frameworkCSS != "" {
-		h.injectCSS(h.frameworkCSS)
-	}
-
-	// If given an HMTL fragment, mount it on #app
-	// Otherwise, replace the html tag
-	var injectHTML string
-	if h.appConfig.isHTMLFragment {
-		injectHTML = fmt.Sprintf("$('#app').html('%s')", h.appConfig.HTML)
-	} else {
-		injectHTML = fmt.Sprintf("$('html').html('%s')", h.appConfig.HTML)
-	}
-	h.evalJS(injectHTML)
-
-	// Inject user CSS
-	if h.appConfig.CSS != "" {
-		outputCSS := fmt.Sprintf("%.45s", h.appConfig.CSS)
-		if len(outputCSS) > 45 {
-			outputCSS += "..."
+	// In Bridge mode, we only send the wails runtime and bindings
+	// so ignore this whole section
+	if !h.bridgeMode {
+		// Inject Framework
+		if h.frameworkJS != "" {
+			h.evalJS(h.frameworkJS, jsMessage)
 		}
-		h.log.DebugFields("Inject User CSS", Fields{"css": outputCSS})
-		h.injectCSS(h.appConfig.CSS)
-	}
-
-	// Inject all the CSS files that have been added
-	for _, css := range h.cssCache {
-		h.injectCSS(css)
-	}
-
-	// Inject all the JS files that have been added
-	for _, js := range h.jsCache {
-		h.evalJS(js)
-	}
-
-	// Inject user JS
-	if h.appConfig.JS != "" {
-		outputJS := fmt.Sprintf("%.45s", h.appConfig.JS)
-		if len(outputJS) > 45 {
-			outputJS += "..."
+		if h.frameworkCSS != "" {
+			h.injectCSS(h.frameworkCSS)
+		}
+
+		// Inject user CSS
+		if h.appConfig.CSS != "" {
+			outputCSS := fmt.Sprintf("%.45s", h.appConfig.CSS)
+			if len(outputCSS) > 45 {
+				outputCSS += "..."
+			}
+			h.log.DebugFields("Inject User CSS", Fields{"css": outputCSS})
+			h.injectCSS(h.appConfig.CSS)
+		} else {
+			// Use default wails css
+			h.log.Debug("Injecting Default Wails CSS")
+			defaultCSS := BoxString(&defaultAssets, "wails.css")
+
+			h.injectCSS(defaultCSS)
+		}
+
+		// Inject all the CSS files that have been added
+		for _, css := range h.cssCache {
+			h.injectCSS(css)
+		}
+
+		// Inject all the JS files that have been added
+		for _, js := range h.jsCache {
+			h.evalJS(js, jsMessage)
+		}
+
+		// Inject user JS
+		if h.appConfig.JS != "" {
+			outputJS := fmt.Sprintf("%.45s", h.appConfig.JS)
+			if len(outputJS) > 45 {
+				outputJS += "..."
+			}
+			h.log.DebugFields("Inject User JS", Fields{"js": outputJS})
+			h.evalJS(h.appConfig.JS, jsMessage)
+		}
+
+		var injectHTML string
+		if h.appConfig.isHTMLFragment {
+			injectHTML = fmt.Sprintf("$('#app').html('%s')", h.appConfig.HTML)
+			h.evalJS(injectHTML, htmlMessage)
 		}
-		h.log.DebugFields("Inject User JS", Fields{"js": outputJS})
-		h.evalJS(h.appConfig.JS)
 	}
 
+	// Emit that everything is loaded and ready
+	h.eventManager.Emit("wails:ready")
+
 	for {
 		messageType, buffer, err := conn.ReadMessage()
 		if messageType == -1 {
@@ -188,10 +229,12 @@ func (h *Headless) start(conn *websocket.Conn) {
 func (h *Headless) Run() error {
 	h.server = &http.Server{Addr: ":34115"}
 	http.HandleFunc("/ws", h.wsHandler)
+	http.HandleFunc("/bridge", h.wsBridgeHandler)
 	http.HandleFunc("/", h.rootHandler)
 
-	h.log.Info("Started on port 34115")
-	h.log.Info("Application running at http://localhost:34115")
+	h.log.Info("Headless mode started.")
+	h.log.Info("If using the Wails bridge, it will connect automatically.")
+	h.log.Info("You may also connect manually by browsing to http://localhost:34115")
 
 	err := h.server.ListenAndServe()
 	if err != nil {
@@ -202,8 +245,7 @@ func (h *Headless) Run() error {
 
 // NewBinding creates a new binding with the frontend
 func (h *Headless) NewBinding(methodName string) error {
-	objectCode := fmt.Sprintf("window.wails._.newBinding(`%s`);", methodName)
-	h.bindingCache = append(h.bindingCache, objectCode)
+	h.bindingCache = append(h.bindingCache, methodName)
 	return nil
 }
 
@@ -249,8 +291,7 @@ func (h *Headless) AddCSSList(cssCache []string) {
 
 // Callback sends a callback to the frontend
 func (h *Headless) Callback(data string) error {
-	callbackCMD := fmt.Sprintf("window.wails._.callback('%s');", data)
-	return h.evalJS(callbackCMD)
+	return h.evalJS(data, callbackMessage)
 }
 
 // NotifyEvent notifies the frontend of an event
@@ -277,8 +318,8 @@ func (h *Headless) NotifyEvent(event *eventData) error {
 		}
 	}
 
-	message := fmt.Sprintf("wails._.notify('%s','%s')", event.Name, data)
-	return h.evalJS(message)
+	message := fmt.Sprintf("window.wails._.notify('%s','%s')", event.Name, data)
+	return h.evalJS(message, notifyMessage)
 }
 
 // SetColour is unsupported for Headless but required

renderer_webview.go

@@ -208,6 +208,12 @@ func (w *webViewRenderer) Run() error {
 				}
 				w.log.DebugFields("Inject User CSS", Fields{"css": outputCSS})
 				w.injectCSS(w.config.CSS)
+			} else {
+				// Use default wails css
+				w.log.Debug("Injecting Default Wails CSS")
+				defaultCSS := BoxString(&defaultAssets, "wails.css")
+
+				w.injectCSS(defaultCSS)
 			}
 
 			// Inject all the CSS files that have been added

runtime.go

@@ -1,5 +1,6 @@
 package wails
 
+// Runtime is the Wails Runtime Interface, given to a user who has defined the WailsInit method
 type Runtime struct {
 	Events *RuntimeEvents
 	Log    *RuntimeLog

runtime_dialog.go

@@ -1,23 +1,28 @@
 package wails
 
+// RuntimeDialog exposes an interface to native dialogs
 type RuntimeDialog struct {
 	renderer Renderer
 }
 
+// newRuntimeDialog creates a new RuntimeDialog struct
 func newRuntimeDialog(renderer Renderer) *RuntimeDialog {
 	return &RuntimeDialog{
 		renderer: renderer,
 	}
 }
 
+// SelectFile prompts the user to select a file
 func (r *RuntimeDialog) SelectFile() string {
 	return r.renderer.SelectFile()
 }
 
+// SelectDirectory prompts the user to select a directory
 func (r *RuntimeDialog) SelectDirectory() string {
 	return r.renderer.SelectDirectory()
 }
 
+// SelectSaveFile prompts the user to select a file for saving
 func (r *RuntimeDialog) SelectSaveFile() string {
 	return r.renderer.SelectSaveFile()
 }

runtime_events.go

@@ -1,5 +1,6 @@
 package wails
 
+// RuntimeEvents exposes the events interface
 type RuntimeEvents struct {
 	eventManager *eventManager
 }

runtime_log.go

@@ -1,5 +1,6 @@
 package wails
 
+// RuntimeLog exposes the logging interface to the runtime
 type RuntimeLog struct {
 }
 
@@ -7,6 +8,7 @@ func newRuntimeLog() *RuntimeLog {
 	return &RuntimeLog{}
 }
 
+// New creates a new logger
 func (r *RuntimeLog) New(prefix string) *CustomLogger {
 	return newCustomLogger(prefix)
 }

runtime_window.go

@@ -1,5 +1,6 @@
 package wails
 
+// RuntimeWindow exposes an interface for manipulating the window
 type RuntimeWindow struct {
 	renderer Renderer
 }
@@ -10,23 +11,27 @@ func newRuntimeWindow(renderer Renderer) *RuntimeWindow {
 	}
 }
 
+// SetColour sets the the window colour
 func (r *RuntimeWindow) SetColour(colour string) error {
 	return r.renderer.SetColour(colour)
 }
 
+// Fullscreen makes the window fullscreen
 func (r *RuntimeWindow) Fullscreen() {
 	r.renderer.Fullscreen()
 }
 
+// UnFullscreen attempts to restore the window to the size/position before fullscreen
 func (r *RuntimeWindow) UnFullscreen() {
 	r.renderer.UnFullscreen()
 }
 
+// SetTitle sets the the window title
 func (r *RuntimeWindow) SetTitle(title string) {
 	r.renderer.SetTitle(title)
 }
 
+// Close shuts down the window and therefore the app
 func (r *RuntimeWindow) Close() {
-	// TODO: Add shutdown mechanism
 	r.renderer.Close()
 }