Get preferences working.

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.13.1

src/Preferences.vue

@@ -1,27 +1,53 @@
 <template>
-  <div class="h-screen bg-system-background-window text-system-text text-sm">
+  <div class="h-screen text-sm bg-system-background-window text-system-text">
     <p class="controls-heading">OBS Connection</p>
     <div class="control-field">
       <label>Host</label>
-      <input type="text">
+      <input type="text" v-model="connection.host">
     </div>
     <div class="control-field">
       <label>Port</label>
-      <input type="number">
+      <input type="number" v-model="connection.port">
     </div>
     <div class="control-field">
       <label>Password</label>
-      <input type="password">
+      <input type="password" v-model="connection.password">
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import '@/assets/shared.css';
+import { ipcRenderer } from 'electron';
 import { defineComponent } from 'vue'
+import { isOBSConnectionOptions } from './obs/connection';
 
 export default defineComponent({
   name: 'Preferences',
+  data() {
+    return {
+      connection: {
+        host: 'localhost',
+        port: 4444,
+        password: null
+      }
+    }
+  },
+  mounted() {
+    ipcRenderer.invoke('load-obs-connection')
+      .then(connection => {
+        if (connection) {
+          this.connection = connection
+        }
+      });
+  },
+  watch: {
+    connection (newValue) {
+      if (isOBSConnectionOptions(newValue)) {
+        ipcRenderer.send('set-obs-connection', newValue);
+      }
+    }
+  }
 })
 </script>
 

src/background.ts

@@ -7,13 +7,25 @@ import { installContextMenuHandling, configureApplicationMenu } from './electron
 import emitter from './electron/events';
 import { openPreferences } from './electron/preferences-window';
 import { injectSystemColors } from './electron/colors';
+import Preferences from './electron/preferences';
+import { install as installInterface } from './electron/interface';
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
   { scheme: 'app', privileges: { secure: true, standard: true } }
 ])
 
+const preferences = new Preferences({
+  name: process.argv0,
+  defaults: {
+    connection: null
+  }
+});
+installInterface({
+  preferences
+})
+
 let mainWindow: BrowserWindow | null = null;
 
 async function createWindow() {

src/electron/interface.ts

@@ -0,0 +1,17 @@
+import { OBSConnectionOptions } from "@/obs/connection";
+import { ipcMain } from "electron";
+import Preferences from "./preferences";
+
+export interface InstallationOptions {
+  preferences: Preferences
+}
+
+export function install(options: InstallationOptions): void {
+  ipcMain.handle('load-obs-connection', () => {
+    return options.preferences.obsConnection
+  });
+
+  ipcMain.on('set-obs-connection', (_, connection: OBSConnectionOptions) => {
+    options.preferences.obsConnection = connection
+  })
+}

src/electron/preferences.ts

@@ -1,17 +1,17 @@
 import { Store, StoreOptions } from './store'
 import { safeStorage } from 'electron'
-import { OBSConnection, isOBSConnection } from '@/obs/connection';
+import { OBSConnectionOptions, isOBSConnectionOptions } from '@/obs/connection';
 
 export default class Preferences {
-  store: Store;
+  store: Store
 
   constructor(options: StoreOptions) {
     this.store = new Store(options);
   }
 
-  get obsConnection(): OBSConnection | null {
+  get obsConnection(): OBSConnectionOptions | null {
     const connection = this.store.get('obs-connection');
-    if (isOBSConnection(connection)) {
+    if (isOBSConnectionOptions(connection)) {
       if (connection.password) {
         connection.password = safeStorage.decryptString(Buffer.from(connection.password, 'base64'))
       }
@@ -22,7 +22,7 @@ export default class Preferences {
     return null;
   }
 
-  set obsConnection(value: OBSConnection | null) {
+  set obsConnection(value: OBSConnectionOptions | null) {
     if (value && value.password) {
       value.password = safeStorage.encryptString(value.password).toString('base64')
     }

src/obs/connection.ts

@@ -1,20 +1,22 @@
-export interface OBSConnection {
+export interface OBSConnectionOptions {
   host: string;
   port: number;
   password?: string;
 }
 
-export function isOBSConnection(obj: unknown): obj is OBSConnection {
-  const hasRequiredFields = (obj as OBSConnection).host !== undefined
-    && typeof (obj as OBSConnection).host === 'string'
-    && (obj as OBSConnection).port !== undefined
-    && typeof (obj as OBSConnection).port !== 'number';
+export function isOBSConnectionOptions(obj: unknown): obj is OBSConnectionOptions {
+  if (typeof obj !== 'object') { return false; }
+
+  const hasRequiredFields = (obj as OBSConnectionOptions).host !== undefined
+    && typeof (obj as OBSConnectionOptions).host === 'string'
+    && (obj as OBSConnectionOptions).port !== undefined
+    && typeof (obj as OBSConnectionOptions).port !== 'number';
   if (!hasRequiredFields) {
     return false;
   }
 
-  if ((obj as OBSConnection).password !== undefined) {
-    if (typeof (obj as OBSConnection).password !== 'string') {
+  if ((obj as OBSConnectionOptions).password !== undefined) {
+    if (typeof (obj as OBSConnectionOptions).password !== 'string') {
       return false;
     }
   }

src/store/preferences.ts

@@ -1,9 +1,9 @@
 import { InjectionKey } from '@vue/runtime-core'
 import { createStore, Store } from 'vuex'
-import { OBSConnection } from '@/obs/connection';
+import { OBSConnectionOptions } from '@/obs/connection';
 
 export interface State {
-  connection: OBSConnection | undefined
+  connection: OBSConnectionOptions | undefined
 }
 
 export const key: InjectionKey<Store<State>> = Symbol()

vue.config.js

@@ -5,7 +5,20 @@ module.exports = {
   },
   pluginOptions: {
     electronBuilder: {
-      nodeIntegration: true
+      nodeIntegration: true,
+      // This fixes an issue where some ESNext features wouldn't be available
+      // https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1432
+      chainWebpackMainProcess: config => {
+        config.module
+          .rule('babel')
+          .before('ts')
+          .use('babel')
+          .loader('babel-loader')
+          .options({
+            presets: [['@babel/preset-env', { modules: false }]],
+            plugins: ['@babel/plugin-proposal-class-properties']
+          })
+      }
     }
   }
 }