initial kitchen sink

v2/test/kitchensink/basic.go

@@ -0,0 +1,35 @@
+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/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store

v2/test/kitchensink/frontend/README.md

@@ -0,0 +1,93 @@
+*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+
+## Deploying to the web
+
+### With [now](https://zeit.co/now)
+
+Install `now` if you haven't already:
+
+```bash
+npm install -g now
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+now deploy --name my-project
+```
+
+As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```

v2/test/kitchensink/frontend/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rollup -c --failAfterWarnings",
+    "dev": "rollup -c -w --failAfterWarnings",
+    "start": "sirv public",
+    "start:dev": "sirv public --single --host 0.0.0.0 --dev"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^7.0.0",
+    "@wailsapp/runtime2": "^1.0.3",
+    "focus-visible": "^5.0.2",
+    "halfmoon": "^1.1.0",
+    "postcss": "^8.1.1",
+    "postcss-import": "^12.0.1",
+    "rollup": "^2.0.0",
+    "rollup-plugin-livereload": "^1.0.0",
+    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-terser": "^5.1.2",
+    "sirv-cli": "^0.4.4",
+    "svelte": "^3.0.0",
+    "svelte-highlight": "^0.6.2",
+    "svelte-preprocess": "^4.3.2"
+  },
+  "dependencies": {}
+}

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

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('postcss-import'),
+    ],
+}

v2/test/kitchensink/frontend/public/bundle.css.map

@@ -0,0 +1,20 @@
+{
+  "version": 3,
+  "file": "bundle.css",
+  "sources": [
+    "../App.svelte",
+    "../Events.svelte",
+    "../Logging.svelte",
+    "../MainPage.svelte",
+    "../TitlePage.svelte"
+  ],
+  "sourcesContent": [
+    "\n<script>\n\n  import runtime from '@wailsapp/runtime2';\n  import { selectedPage } from './Store';\n  import MainPage from './MainPage.svelte';\n  import Events from './Events.svelte';\n\n  // Handle Dark/Light themes automatically\n  var darkMode = runtime.System.DarkModeEnabled();\n  runtime.System.OnThemeChange( (isDarkMode) => {\n    darkMode = isDarkMode;\n  });\n\n  function linkClicked(event) {\n    let linkText = event.target.innerText;\n    selectedPage.set(linkText); \n    console.log(event.target.innerText);\n  }\n\n  function homepageClicked() {\n    selectedPage.set(null); \n  }\n\n  let runtimePages = [\n    'Logging',\n    'Events',\n    'Calls',\n    'Dialog',\n    'Browser',\n    'File System',\n    'Window',\n  ];\n\n</script>\n\n<div data-wails-drag class=\"page-wrapper with-sidebar\" class:dark-mode=\"{darkMode}\" data-sidebar-type=\"full-height\" >\n  <!-- Sticky alerts (toasts), empty container -->\n  <div class=\"sticky-alerts\"></div>\n  <!-- Sidebar -->\n  <div class=\"sidebar noselect\">\n    <div data-wails-no-drag class=\"sidebar-menu\">\n      <!-- Sidebar brand -->\n      <div on:click=\"{ homepageClicked }\" class=\"sidebar-brand\">        \n      Wails Kitchen Sink\n      </div>\n      <!-- Sidebar links and titles -->\n      <h5 class=\"sidebar-title\">Runtime</h5>\n      <div class=\"sidebar-divider\"></div>\n      {#each runtimePages as link}\n        <span on:click=\"{linkClicked}\" class=\"sidebar-link\" class:active=\"{$selectedPage == link}\">{link}</span> \n      {/each}\n      <br />\n      <h5 class=\"sidebar-title\">Links</h5>\n      <div class=\"sidebar-divider\"></div>\n      <span on:click=\"{linkClicked}\" class=\"sidebar-link\">Github</span>\n      <span on:click=\"{linkClicked}\" class=\"sidebar-link\">Website</span>\n    </div>\n  </div>\n  <!-- Content wrapper -->\n  <div class=\"content-wrapper\" class:dark-content-wrapper=\"{darkMode}\">\n    <MainPage></MainPage>\n  </div>\n</div>\n\n\n<style global>\n  @import 'halfmoon/css/halfmoon-variables.min.css';\n\n  :global(:root) {\n    --lm-base-body-bg-color: #0000;\n    --dm-base-body-bg-color: #0000;\n    --lm-sidebar-bg-color: #0000;\n    --dm-sidebar-bg-color: #0000;\n    --dm-sidebar-link-text-color: white;\n    --dm-sidebar-link-text-color-hover: rgb(255, 214, 0);\n    --lm-sidebar-link-text-color: black;\n    --lm-sidebar-link-text-color-hover: rgb(158, 158, 255);\n\n    --dm-sidebar-link-text-color-active: rgb(255, 214, 0);\n    --dm-sidebar-link-text-color-active-hover: rgb(255, 214, 0);\n\n    --sidebar-title-font-size: 1.75rem;\n    --sidebar-brand-font-size: 2.3rem;\n  }\n\n  :global(.sidebar-link) {\n    font-weight: bold;\n    cursor: pointer;\n  }\n\n  :global(.content-wrapper) {\n    background-color: #eee;\n  }\n\n  :global(.dark-content-wrapper) {\n    background-color: #25282c;\n  }\n/* \n  .sidebar {\n    background-color: #0000;\n  } */\n\n  :global(.sidebar-brand) {\n    padding-top: 35px;\n    padding-bottom: 25px;\n    cursor: pointer;\n  }\n\n  :global(.sidebar-menu) {\n    background-color: #0000;\n  }\n\n  /* Credit: https://stackoverflow.com/a/4407335 */\n  :global(.noselect) {\n                   cursor: default;\n    -webkit-touch-callout: none; /* iOS Safari */\n      -webkit-user-select: none; /* Safari */\n       -khtml-user-select: none; /* Konqueror HTML */\n         -moz-user-select: none; /* Old versions of Firefox */\n          -ms-user-select: none; /* Internet Explorer/Edge */\n              user-select: none; /* Non-prefixed version, currently\n                                    supported by Chrome, Edge, Opera and Firefox */\n  }\n</style>\n",
+    "<script>\n\n  import runtime from '@wailsapp/runtime2';\n  import { Highlight } from \"svelte-highlight\";\n  import { typescript } from \"svelte-highlight/languages\";\n  import { atomOneDark, atomOneLight } from \"svelte-highlight/styles\";\n\n  let css = runtime.System.DarkModeEnabled() ? atomOneDark : atomOneLight;\n  $: code = `const add = (a: number, b: number) => a + b;`;\n\n  runtime.System.OnThemeChange( (isDarkMode) => {\n    css = isDarkMode ? atomOneDark : atomOneLight;\n  });\n</script>\n\n<svelte:head>\n  {@html css}\n</svelte:head>\n\n<div class=\"page\">\n    <h4>Events</h4>\n\n<Highlight language=\"{typescript}\" {code} />\n    Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:\n    \n    <ul class=\"list\">\n        <li>Debug</li>\n        <li>Info</li>\n        <li>Warning</li>\n        <li>Error</li>\n        <li>Fatal</li>\n    </ul>\n    All methods will log to the console and <code>Fatal</code> will also exit the program.\n\n    <h5>Try Me</h5>\n    <hr>\n    <div class=\"logging-form\">\n    </div>\n</div>\n\n<style>\n    .page {\n        margin-left: 50px;\n        margin-top: 10px;\n    }\n\n    h5 {\n        margin-top: 3rem;\n    }\n</style>",
+    "<script>\n\n    import { Log } from '@wailsapp/runtime2';\n\n    var loglevel = 'Debug';\n    var message = '';\n\n    var options = [\"Debug\", \"Info\", \"Warning\", \"Error\", \"Fatal\"];\n\n    function sendLogMessage() {\n        if( message.length > 0 ) {\n            Log[loglevel](message);\n        }\n    }\n\n</script>\n<div class=\"page\">\n    <h4>Logging</h4>\n\n    Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:\n    \n    <ul class=\"list\">\n        <li>Debug</li>\n        <li>Info</li>\n        <li>Warning</li>\n        <li>Error</li>\n        <li>Fatal</li>\n    </ul>\n    All methods will log to the console and <code>Fatal</code> will also exit the program.\n\n    <h5>Try Me</h5>\n    <hr>\n    <div class=\"logging-form\">\n        <form data-wails-no-drag class=\"w-400 mw-full\"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->\n            <!-- Radio -->\n            <div class=\"form-group\">\n                <label for=\"Debug\">Log Level</label>\n                {#each options as option}\n                <div class=\"custom-radio\">\n                    <input type=\"radio\" name=\"logging\" bind:group=\"{loglevel}\" id=\"{option}\" value=\"{option}\">\n                    <label for=\"{option}\">{option}</label>\n                </div>   \n                {/each}\n            </div>\n\n            <!-- Input -->\n            <div class=\"form-group\">\n                <label for=\"message\" class=\"required\">Message</label>\n                <input type=\"text\" class=\"form-control\" id=\"message\" placeholder=\"Hello World!\" bind:value=\"{message}\" required=\"required\">\n            </div>\n\n            <input class=\"btn btn-primary\" type=\"submit\" on:click=\"{sendLogMessage}\" value=\"Run!\">\n        </form>\n    </div>\n</div>\n\n<style>\n    .page {\n        margin-left: 50px;\n        margin-top: 10px;\n    }\n    .logging-form {\n        margin-top: 2rem;\n    }\n    .list {\n        margin-top: 2rem;\n        margin-left: 2rem;\n    }\n\n    .list li {\n        margin-bottom: 0.5rem;\n    }\n\n    h5 {\n        margin-top: 3rem;\n    }\n</style>",
+    "<script>\n\n    import {selectedPage} from './Store';\n    import TitlePage from './TitlePage.svelte';\n    import Logging from './Logging.svelte';\n    import Events from './Events.svelte';\n\n</script>\n\n<div class=\"mainpage\">\n    {#if $selectedPage == undefined} <TitlePage ></TitlePage> {/if}\n    {#if $selectedPage == \"Logging\"} <Logging></Logging> {/if}\n    {#if $selectedPage == \"Events\"} <Events></Events> {/if}\n</div>\n\n<style>\n    .mainpage {\n        margin-top: 55px;\n        margin-left: 25px;\n    }\n    h3 {\n        margin-left: 20px;\n    }\n</style>",
+    "\n<div class=\"mainpage\">\n    <h2>Wails Kitchen Sink</h2>\n\n    This application is a demonstation of the capabilities of Wails.\n</div>\n\n<style>\n    .mainpage {\n        text-align: center;\n    }\n</style>"
+  ],
+  "names": [],
+  "mappings": "AAmEE,QAAQ,yCAAyC,CAAC,AAE1C,KAAK,AAAE,CAAC,AACd,uBAAuB,CAAE,KAAK,CAC9B,uBAAuB,CAAE,KAAK,CAC9B,qBAAqB,CAAE,KAAK,CAC5B,qBAAqB,CAAE,KAAK,CAC5B,4BAA4B,CAAE,KAAK,CACnC,kCAAkC,CAAE,gBAAgB,CACpD,4BAA4B,CAAE,KAAK,CACnC,kCAAkC,CAAE,kBAAkB,CAEtD,mCAAmC,CAAE,gBAAgB,CACrD,yCAAyC,CAAE,gBAAgB,CAE3D,yBAAyB,CAAE,OAAO,CAClC,yBAAyB,CAAE,MAAM,AACnC,CAAC,AAEO,aAAa,AAAE,CAAC,AACtB,WAAW,CAAE,IAAI,CACjB,MAAM,CAAE,OAAO,AACjB,CAAC,AAEO,gBAAgB,AAAE,CAAC,AACzB,gBAAgB,CAAE,IAAI,AACxB,CAAC,AAEO,qBAAqB,AAAE,CAAC,AAC9B,gBAAgB,CAAE,OAAO,AAC3B,CAAC,AAMO,cAAc,AAAE,CAAC,AACvB,WAAW,CAAE,IAAI,CACjB,cAAc,CAAE,IAAI,CACpB,MAAM,CAAE,OAAO,AACjB,CAAC,AAEO,aAAa,AAAE,CAAC,AACtB,gBAAgB,CAAE,KAAK,AACzB,CAAC,AAGO,SAAS,AAAE,CAAC,AACH,MAAM,CAAE,OAAO,CAC9B,qBAAqB,CAAE,IAAI,CACzB,mBAAmB,CAAE,IAAI,CACxB,kBAAkB,CAAE,IAAI,CACtB,gBAAgB,CAAE,IAAI,CACrB,eAAe,CAAE,IAAI,CACjB,WAAW,CAAE,IAAI,AAE7B,CAAC;AClFC,KAAK,cAAC,CAAC,AACH,WAAW,CAAE,IAAI,CACjB,UAAU,CAAE,IAAI,AACpB,CAAC,AAED,EAAE,cAAC,CAAC,AACA,UAAU,CAAE,IAAI,AACpB,CAAC;ACSD,KAAK,8BAAC,CAAC,AACH,WAAW,CAAE,IAAI,CACjB,UAAU,CAAE,IAAI,AACpB,CAAC,AACD,aAAa,8BAAC,CAAC,AACX,UAAU,CAAE,IAAI,AACpB,CAAC,AACD,KAAK,8BAAC,CAAC,AACH,UAAU,CAAE,IAAI,CAChB,WAAW,CAAE,IAAI,AACrB,CAAC,AAED,oBAAK,CAAC,EAAE,eAAC,CAAC,AACN,aAAa,CAAE,MAAM,AACzB,CAAC,AAED,EAAE,8BAAC,CAAC,AACA,UAAU,CAAE,IAAI,AACpB,CAAC;AC3DD,SAAS,eAAC,CAAC,AACP,UAAU,CAAE,IAAI,CAChB,WAAW,CAAE,IAAI,AACrB,CAAC;ACXD,SAAS,cAAC,CAAC,AACP,UAAU,CAAE,MAAM,AACtB,CAAC"
+}

v2/test/kitchensink/frontend/public/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width,initial-scale=1" />
+	<meta name="mobile-web-app-capable" content="yes" />
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+	<meta name="apple-mobile-web-app-title" content="svelte-mui" />
+	<meta name="application-name" content="svelte-mui" />
+	<meta name="theme-color" content="#212121" />
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/bundle.css'>
+
+	<script defer src='/bundle.js'></script>
+  </head>
+  <body>
+	<noscript>Please enable JavaScript.</noscript>
+  </body>
+</html>

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

@@ -0,0 +1,96 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+import autoPreprocess from 'svelte-preprocess';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/bundle.js'
+	},
+	onwarn: handleRollupWarning,
+	plugins: [
+		svelte({
+			preprocess: autoPreprocess(),
+			// enable run-time checks when not in production
+			dev: !production,
+			// we'll extract any component CSS out into
+			// a separate file - better for performance
+			css: css => {
+				css.write('public/bundle.css');
+			},
+			emitCss: true,
+		}),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte']
+		}),
+		commonjs(),
+
+		// PostCSS preprocessing
+		postcss({
+			extensions: ['.css', '.scss'],
+			extract: true,
+			minimize: false, 
+			use: [
+				['sass', {
+					includePaths: [
+						'./src/theme',
+						'./node_modules'
+					]
+				}]
+			],
+		}),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};
+
+function handleRollupWarning(warning) {
+	console.error('ERROR: ' + warning.toString());
+	process.exit(1);
+}
+
+function serve() {
+	let started = false;
+
+	return {
+		writeBundle() {
+			if (!started) {
+				started = true;
+
+				require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+					stdio: ['ignore', 'inherit', 'inherit'],
+					shell: true
+				});
+			}
+		}
+	};
+}

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

@@ -0,0 +1,125 @@
+
+<script>
+
+  import runtime from '@wailsapp/runtime2';
+  import { selectedPage } from './Store';
+  import MainPage from './MainPage.svelte';
+  import Events from './Events.svelte';
+
+  // Handle Dark/Light themes automatically
+  var darkMode = runtime.System.DarkModeEnabled();
+  runtime.System.OnThemeChange( (isDarkMode) => {
+    darkMode = isDarkMode;
+  });
+
+  function linkClicked(event) {
+    let linkText = event.target.innerText;
+    selectedPage.set(linkText); 
+    console.log(event.target.innerText);
+  }
+
+  function homepageClicked() {
+    selectedPage.set(null); 
+  }
+
+  let runtimePages = [
+    'Logging',
+    'Events',
+    'Calls',
+    'Dialog',
+    'Browser',
+    'File System',
+    'Window',
+  ];
+
+</script>
+
+<div data-wails-drag class="page-wrapper with-sidebar" class:dark-mode="{darkMode}" data-sidebar-type="full-height" >
+  <!-- Sticky alerts (toasts), empty container -->
+  <div class="sticky-alerts"></div>
+  <!-- Sidebar -->
+  <div class="sidebar noselect">
+    <div data-wails-no-drag class="sidebar-menu">
+      <!-- Sidebar brand -->
+      <div on:click="{ homepageClicked }" class="sidebar-brand">        
+      Wails Kitchen Sink
+      </div>
+      <!-- Sidebar links and titles -->
+      <h5 class="sidebar-title">Runtime</h5>
+      <div class="sidebar-divider"></div>
+      {#each runtimePages as link}
+        <span on:click="{linkClicked}" class="sidebar-link" class:active="{$selectedPage == link}">{link}</span> 
+      {/each}
+      <br />
+      <h5 class="sidebar-title">Links</h5>
+      <div class="sidebar-divider"></div>
+      <span on:click="{linkClicked}" class="sidebar-link">Github</span>
+      <span on:click="{linkClicked}" class="sidebar-link">Website</span>
+    </div>
+  </div>
+  <!-- Content wrapper -->
+  <div class="content-wrapper" class:dark-content-wrapper="{darkMode}">
+    <MainPage></MainPage>
+  </div>
+</div>
+
+
+<style global>
+  @import 'halfmoon/css/halfmoon-variables.min.css';
+
+  :root {
+    --lm-base-body-bg-color: #0000;
+    --dm-base-body-bg-color: #0000;
+    --lm-sidebar-bg-color: #0000;
+    --dm-sidebar-bg-color: #0000;
+    --dm-sidebar-link-text-color: white;
+    --dm-sidebar-link-text-color-hover: rgb(255, 214, 0);
+    --lm-sidebar-link-text-color: black;
+    --lm-sidebar-link-text-color-hover: rgb(158, 158, 255);
+
+    --dm-sidebar-link-text-color-active: rgb(255, 214, 0);
+    --dm-sidebar-link-text-color-active-hover: rgb(255, 214, 0);
+
+    --sidebar-title-font-size: 1.75rem;
+    --sidebar-brand-font-size: 2.3rem;
+  }
+
+  .sidebar-link {
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  .content-wrapper {
+    background-color: #eee;
+  }
+
+  .dark-content-wrapper {
+    background-color: #25282c;
+  }
+/* 
+  .sidebar {
+    background-color: #0000;
+  } */
+
+  .sidebar-brand {
+    padding-top: 35px;
+    padding-bottom: 25px;
+    cursor: pointer;
+  }
+
+  .sidebar-menu {
+    background-color: #0000;
+  }
+
+  /* Credit: https://stackoverflow.com/a/4407335 */
+  .noselect {
+                   cursor: default;
+    -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+       -khtml-user-select: none; /* Konqueror HTML */
+         -moz-user-select: none; /* Old versions of Firefox */
+          -ms-user-select: none; /* Internet Explorer/Edge */
+              user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome, Edge, Opera and Firefox */
+  }
+</style>

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

@@ -0,0 +1,50 @@
+<script>
+
+  import runtime from '@wailsapp/runtime2';
+  import { Highlight } from "svelte-highlight";
+  import { typescript } from "svelte-highlight/languages";
+  import { atomOneDark, atomOneLight } from "svelte-highlight/styles";
+
+  let css = runtime.System.DarkModeEnabled() ? atomOneDark : atomOneLight;
+  $: code = `const add = (a: number, b: number) => a + b;`;
+
+  runtime.System.OnThemeChange( (isDarkMode) => {
+    css = isDarkMode ? atomOneDark : atomOneLight;
+  });
+</script>
+
+<svelte:head>
+  {@html css}
+</svelte:head>
+
+<div class="page">
+    <h4>Events</h4>
+
+<Highlight language="{typescript}" {code} />
+    Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:
+    
+    <ul class="list">
+        <li>Debug</li>
+        <li>Info</li>
+        <li>Warning</li>
+        <li>Error</li>
+        <li>Fatal</li>
+    </ul>
+    All methods will log to the console and <code>Fatal</code> will also exit the program.
+
+    <h5>Try Me</h5>
+    <hr>
+    <div class="logging-form">
+    </div>
+</div>
+
+<style>
+    .page {
+        margin-left: 50px;
+        margin-top: 10px;
+    }
+
+    h5 {
+        margin-top: 3rem;
+    }
+</style>

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

@@ -0,0 +1,77 @@
+<script>
+
+    import { Log } from '@wailsapp/runtime2';
+
+    var loglevel = 'Debug';
+    var message = '';
+
+    var options = ["Debug", "Info", "Warning", "Error", "Fatal"];
+
+    function sendLogMessage() {
+        if( message.length > 0 ) {
+            Log[loglevel](message);
+        }
+    }
+
+</script>
+<div class="page">
+    <h4>Logging</h4>
+
+    Logging is part of the Wails Runtime and is accessed through the <code>runtime.Log</code> object. There are 5 methods available:
+    
+    <ul class="list">
+        <li>Debug</li>
+        <li>Info</li>
+        <li>Warning</li>
+        <li>Error</li>
+        <li>Fatal</li>
+    </ul>
+    All methods will log to the console and <code>Fatal</code> will also exit the program.
+
+    <h5>Try Me</h5>
+    <hr>
+    <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 -->
+            <div class="form-group">
+                <label for="Debug">Log Level</label>
+                {#each options as option}
+                <div class="custom-radio">
+                    <input type="radio" name="logging" bind:group="{loglevel}" id="{option}" value="{option}">
+                    <label for="{option}">{option}</label>
+                </div>   
+                {/each}
+            </div>
+
+            <!-- Input -->
+            <div class="form-group">
+                <label for="message" class="required">Message</label>
+                <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!">
+        </form>
+    </div>
+</div>
+
+<style>
+    .page {
+        margin-left: 50px;
+        margin-top: 10px;
+    }
+    .logging-form {
+        margin-top: 2rem;
+    }
+    .list {
+        margin-top: 2rem;
+        margin-left: 2rem;
+    }
+
+    .list li {
+        margin-bottom: 0.5rem;
+    }
+
+    h5 {
+        margin-top: 3rem;
+    }
+</style>

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

@@ -0,0 +1,24 @@
+<script>
+
+    import {selectedPage} from './Store';
+    import TitlePage from './TitlePage.svelte';
+    import Logging from './Logging.svelte';
+    import Events from './Events.svelte';
+
+</script>
+
+<div class="mainpage">
+    {#if $selectedPage == undefined} <TitlePage ></TitlePage> {/if}
+    {#if $selectedPage == "Logging"} <Logging></Logging> {/if}
+    {#if $selectedPage == "Events"} <Events></Events> {/if}
+</div>
+
+<style>
+    .mainpage {
+        margin-top: 55px;
+        margin-left: 25px;
+    }
+    h3 {
+        margin-left: 20px;
+    }
+</style>

v2/test/kitchensink/frontend/src/Store.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export let selectedPage = writable();

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

@@ -0,0 +1,12 @@
+
+<div class="mainpage">
+    <h2>Wails Kitchen Sink</h2>
+
+    This application is a demonstation of the capabilities of Wails.
+</div>
+
+<style>
+    .mainpage {
+        text-align: center;
+    }
+</style>

v2/test/kitchensink/frontend/src/main.js

@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'Wails User'
+	}
+});
+
+export default app;

v2/test/kitchensink/go.mod

@@ -0,0 +1,9 @@
+module test
+
+go 1.13
+
+require (
+	github.com/wailsapp/wails/v2 v2.0.0-alpha
+)
+
+replace github.com/wailsapp/wails/v2 v2.0.0-alpha => /Users/lea/projects/wails/v2

v2/test/kitchensink/go.sum

@@ -0,0 +1,82 @@
+github.com/cheekybits/is v0.0.0-20150225183255-68e9c0620927/go.mod h1:h/aW8ynjgkuj+NQRlZcDbAbM1ORAbXjXX77sX7T289U=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
+github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4IgpuI1SZQ=
+github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
+github.com/gin-gonic/gin v1.6.3/go.mod h1:75u5sXoLsGZoRN5Sgbi1eraJ4GU3++wFwWzhwvtwp4M=
+github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
+github.com/go-playground/locales v0.13.0/go.mod h1:taPMhCMXrRLJO55olJkUXHZBHCxTMfnGwq/HNwmWNS8=
+github.com/go-playground/universal-translator v0.17.0/go.mod h1:UkSxE5sNxxRwHyU+Scu5vgOQjsIJAF8j9muTVoKLVtA=
+github.com/go-playground/validator/v10 v10.2.0/go.mod h1:uOYAAleCW8F/7oMFd6aG0GOhaH6EGOAJShg8Id5JGkI=
+github.com/gobwas/httphead v0.0.0-20180130184737-2c6c146eadee/go.mod h1:L0fX3K22YWvt/FAX9NnzrNzcI4wNYi9Yku4O0LKYflo=
+github.com/gobwas/pool v0.2.0/go.mod h1:q8bcK0KcYlCgd9e7WYLm9LpyS+YeLd8JVDW6WezmKEw=
+github.com/gobwas/ws v1.0.2/go.mod h1:szmBTxLgaFppYjEmNtny/v3w89xOydFnnZMcgRRu/EM=
+github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
+github.com/golang/protobuf v1.3.5/go.mod h1:6O5/vntMXwX2lRkT1hjjk0nAC1IDOTvTlVgjlRvqsdk=
+github.com/google/go-cmp v0.4.0/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/gorilla/websocket v1.4.1/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/imdario/mergo v0.3.11 h1:3tnifQM4i+fbajXKBHXWEH+KvNHqojZ778UH75j3bGA=
+github.com/imdario/mergo v0.3.11/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
+github.com/json-iterator/go v1.1.9/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
+github.com/klauspost/compress v1.10.3/go.mod h1:aoV0uJVorq1K+umq18yTdKaF57EivdYsUV+/s2qKfXs=
+github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
+github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/leaanthony/clir v1.0.4/go.mod h1:k/RBkdkFl18xkkACMCLt09bhiZnrGORoxmomeMvDpE0=
+github.com/leaanthony/gosod v0.0.4/go.mod h1:nGMCb1PJfXwBDbOAike78jEYlpqge+xUKFf0iBKjKxU=
+github.com/leaanthony/slicer v1.4.1/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/leodido/go-urn v1.2.0/go.mod h1:+8+nEpDfqqsY+g338gtMEUOtuK+4dEMhiQEgxpxOKII=
+github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
+github.com/matryer/try v0.0.0-20161228173917-9ac251b645a2/go.mod h1:0KeJpeMD6o+O4hW7qJOT7vyQPKrWmj26uf5wMc/IiIs=
+github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
+github.com/mattn/go-runewidth v0.0.7/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
+github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
+github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e/go.mod h1:zD1mROLANZcx1PVRCS0qkT7pwLkGfwJo4zjcN/Tysno=
+github.com/olekukonko/tablewriter v0.0.4/go.mod h1:zq6QwlOf5SlnkVbMSr5EoBv3636FWnp+qbPhuoO21uA=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
+github.com/tdewolff/minify v2.3.6+incompatible/go.mod h1:9Ov578KJUmAWpS6NeZwRZyT56Uf6o3Mcz9CEsg8USYs=
+github.com/tdewolff/minify/v2 v2.9.5/go.mod h1:jshtBj/uUJH6JX1fuxTLnnHOA1RVJhF5MM+leJzDKb4=
+github.com/tdewolff/parse v2.3.4+incompatible/go.mod h1:8oBwCsVmUkgHO8M5iCzSIDtpzXOT0WXX9cWhz+bIzJQ=
+github.com/tdewolff/parse/v2 v2.5.3/go.mod h1:WzaJpRSbwq++EIQHYIRTpbYKNA3gn9it1Ik++q4zyho=
+github.com/tdewolff/test v1.0.6/go.mod h1:6DAvZliBAAnD7rhVgwaM7DE5/d9NMOAJ09SqYqeK4QE=
+github.com/ugorji/go v1.1.7/go.mod h1:kZn38zHttfInRq0xu/PH0az30d+z6vm202qpg1oXVMw=
+github.com/ugorji/go/codec v1.1.7/go.mod h1:Ax+UKWsSmolVDwsd+7N3ZtXu+yMGCf907BLYF3GoBXY=
+github.com/xyproto/xpm v1.2.1/go.mod h1:cMnesLsD0PBXLgjDfTDEaKr8XyTFsnP1QycSqRw7BiY=
+github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20200822124328-c89045814202/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20200625203802-6e8e738ad208/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20191005200804-aed5e4c7ecf9/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200724161237-0e2f3a69832c/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
+golang.org/x/time v0.0.0-20191024005414-555d28b269f0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.0.0-20200902012652-d1954cc86c82/go.mod h1:Cj7w3i3Rnn0Xh82ur9kSqwfTHTeVxaDqrfMjpcNT6bE=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20200902074654-038fdea0a05b/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
+nhooyr.io/websocket v1.8.6/go.mod h1:B70DZP8IakI65RVQ51MsWP/8jndNma26DVA/nFSCgW0=

v2/test/kitchensink/main.go

@@ -0,0 +1,31 @@
+package main
+
+import (
+	wails "github.com/wailsapp/wails/v2"
+	"github.com/wailsapp/wails/v2/pkg/options"
+	"github.com/wailsapp/wails/v2/pkg/options/mac"
+)
+
+func main() {
+
+	// Create application with options
+	app := wails.CreateAppWithOptions(&options.App{
+		Title:     "Kitchen Sink",
+		Width:     1024,
+		Height:    768,
+		MinWidth:  800,
+		MinHeight: 600,
+		MaxWidth:  1400,
+		MaxHeight: 800,
+		Mac: &mac.Options{
+			WebviewIsTransparent:          true,
+			WindowBackgroundIsTranslucent: true,
+			// TitleBar: mac.TitleBarHiddenInset(),
+			TitleBar: mac.TitleBarHiddenInset(),
+		},
+	})
+
+	app.Bind(newBasic())
+
+	app.Run()
+}

v2/test/kitchensink/wails.json

@@ -0,0 +1,9 @@
+{
+    "name": "kitchensink",
+    "outputfilename": "kitchensink",
+    "html": "frontend/public/index.html",
+    "js": "frontend/public/bundle.js",
+    "css": "frontend/public/bundle.css",
+    "frontend:build": "npm run build",
+    "frontend:install": "npm install"
+}