feat(media/developer): adds store communication between renderer and …

…main processes

packages/media/app/main/src/ipc.ts

@@ -14,7 +14,7 @@ import {
 } from '@library-api/core'
 import { MediaDetailsDTO } from '@library-api/core/types/dto'
 
-import { imageExtensions, videoExtensions } from 'shared/extensions'
+import { imageExtensions, videoExtensions } from 'shared/src/extensions'
 import { initDirectories } from './directories'
 import { getControlWindow, getDisplayWindow } from './window'
 import { CATALOG_PATH, DOWNLOAD_DIR, VIDEO_DIR } from './constants'

packages/media/app/main/src/window.ts

@@ -4,7 +4,7 @@ import { join } from 'path'
 import { checkExists } from '@library-api/core'
 import AspectRatioBrowserWindow from 'electron-aspect-ratio-browser-window'
 
-import { store } from 'shared/store'
+import { store } from 'shared/src/store'
 
 import { CATALOG_PATH } from './constants'
 

packages/media/app/preload/src/index.ts

@@ -1,8 +1,12 @@
 import { contextBridge, ipcRenderer } from 'electron'
 import { functions } from 'electron-log'
 
-const apiKey: keyof Window = 'electron'
-const api: ElectronApi = {
+import { store } from 'shared/src/store'
+
+import { ElectronApi, StoreApi } from 'shared/types/electron-api'
+
+const electronApiKey: keyof Window = 'electron'
+const electronApi: ElectronApi = {
   invoke (channel, args) {
     return ipcRenderer.invoke(channel, args)
   },
@@ -14,5 +18,19 @@ const api: ElectronApi = {
   }
 }
 
-contextBridge.exposeInMainWorld(apiKey, api)
+const storeApiKey: keyof Window = 'store'
+const storeApi: StoreApi = {
+  get (key: string, defaultValue?: unknown) {
+    return store.get(key, defaultValue)
+  },
+  set (key, value) {
+    store.set(key, value)
+  },
+  watch (key, cb) {
+    return store.onDidChange(key, cb)
+  }
+}
+
+contextBridge.exposeInMainWorld(electronApiKey, electronApi)
+contextBridge.exposeInMainWorld(storeApiKey, storeApi)
 contextBridge.exposeInMainWorld('log', functions)

packages/media/app/renderer/.eslintrc.js

@@ -17,5 +17,14 @@ module.exports = {
   ignorePatterns: [
     ...baseConfig.ignorePatterns,
     'index.html'
+  ],
+  overrides: [
+    ...baseConfig.overrides,
+    {
+      files: ['src/composables/**/*.ts'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off'
+      }
+    }
   ]
 }

packages/media/app/renderer/src/composables/store.ts

@@ -0,0 +1,21 @@
+import { onBeforeUnmount, reactive, toRaw, watch } from 'vue'
+
+import { StoreDefinition } from 'shared/types/store'
+
+export function useStore<Key extends keyof StoreDefinition> (key: Key) {
+  const store = reactive(window.store.get<Key>(key))
+
+  watch(store, (newValue) => {
+    window.store.set(key, toRaw(newValue) as StoreDefinition[Key])
+  })
+  const unwatch = window.store.watch(key, (newValue) => {
+    Object.assign(store, newValue)
+  })
+  onBeforeUnmount(() => {
+    unwatch()
+  })
+
+  return {
+    store
+  }
+}

packages/media/app/renderer/src/pages/Display.vue

@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 
-import { imageExtensions, videoExtensions } from 'shared/extensions'
+import { imageExtensions, videoExtensions } from 'shared/src/extensions'
 
 import { DisplayMedia, DisplayClear } from 'shared/types/ipc'
 

packages/media/app/renderer/tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "rootDir": "..",
     "composite": false,
+    "module": "es2020",
     "paths": {
       "@/*": [
         "src/*"

packages/media/app/shared/store.ts → packages/media/app/shared/src/store.ts

@@ -1,6 +1,6 @@
 import Store from 'electron-store'
 
-import { StoreDefinition } from './types/store'
+import { StoreDefinition } from '../types/store'
 
 const devToolsWidth = import.meta.env.DEV ? 350 : 0
 

packages/media/app/shared/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "module": "es2020"
+  },
+  "include": [
+    "src/**/*.ts",
+    "types/**/*.ts"
+  ]
+}

packages/media/app/shared/types/electron-api.d.ts

@@ -1,10 +1,14 @@
-interface ElectronApi {
+import { StoreDefinition } from './store'
+
+export interface ElectronApi {
   invoke<T extends { Args?: unknown, Response: unknown }> (channel: string, args?: T['Args']): Promise<T['Response']>
   send<T extends { Args?: unknown }> (channel: string, args?: T['Args']): void
   on<T extends { Args?: unknown }> (channel: string, cb: (args: T['Args']) => void): void
 }
 
-declare interface Window {
-  electron: Readonly<ElectronApi>
-  log: import('electron-log').LogFunctions
+export interface StoreApi {
+  get<Key extends keyof StoreDefinition> (key: Key, defaultValue?: StoreDefinition[Key]): StoreDefinition[Key]
+  get<Key extends string, Value extends unknown> (key: Key, defaultValue?: Value): Value
+  set<Key extends keyof StoreDefinition> (key: Key, value: StoreDefinition[Key]): void
+  watch<Key extends keyof StoreDefinition> (key: Key, cb: (newValue?: StoreDefinition[Key]) => void): () => void
 }

packages/media/app/shared/types/window.d.ts

@@ -0,0 +1,5 @@
+declare interface Window {
+  electron: Readonly<import('./electron-api').ElectronApi>
+  log: import('electron-log').LogFunctions
+  store: import('./electron-api').StoreApi
+}