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/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;