terminal setup

package.json

@@ -28,14 +28,17 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@vueform/toggle": "^2.1.3",
-    "vue-router": "^4.0.13"
+    "vue-router": "^4.0.13",
+    "winston": "^3.10.0",
+    "winston-transport": "^4.5.0"
   },
   "devDependencies": {
     "@electron-toolkit/eslint-config": "^1.0.1",
     "@electron-toolkit/eslint-config-ts": "^1.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@rushstack/eslint-patch": "^1.3.3",
     "@types/node": "^18.17.5",
+    "@types/winston": "^2.4.4",
     "@vitejs/plugin-vue": "^4.3.1",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",

src/main/browser.ts

@@ -1,5 +1,24 @@
+import { createLogger, transports, format, Logger } from 'winston'
+import ForwardTransport from './utils/logForward'
+
+export const logger: Logger = createLogger({
+  level: 'info',
+  format: format.combine(
+    format.timestamp({ format: 'DD.MM.YYYY | HH:mm:ss' }),
+    format.printf(({ timestamp, level, message }) => {
+      // when changing this format, also change the format in the logForward.ts file
+      return `${timestamp} [${level}] ${message}`
+    })
+  ),
+  transports: [
+    new transports.Console(),
+    new transports.File({ filename: 'app.log' }),
+    new ForwardTransport()
+  ]
+})
+
 export function enable() {
-  console.log('enabling the browser window')
+  logger.info('enabling the browser window')
 
   import('./handlers/browseHandler')
   import('./handlers/contextMenuHandler')

src/main/ipc.ts

@@ -1,4 +1,4 @@
-import { WindowRequest, WindowToNode } from '../shared/Emit'
+import { NodeToWindow, WindowRequest, WindowToNode } from '../shared/Emit'
 import { IpcMainEvent, IpcMainInvokeEvent, ipcMain } from 'electron'
 
 type RequestHandler<T extends keyof WindowRequest> = (
@@ -20,4 +20,8 @@ function handleEmit<T extends keyof WindowToNode>(
   ipcMain.on(key, listener)
 }
 
-export { handleRequest, handleEmit }
+function send<T extends keyof NodeToWindow>(key: T, args: NodeToWindow[T]) {
+  ipcMain.emit(key, args)
+}
+
+export { handleRequest, handleEmit, send }

src/main/utils/logForward.ts

@@ -0,0 +1,19 @@
+import Transport from 'winston-transport'
+import { send } from '../ipc'
+
+export type LogRecord = {
+  level: 'debug' | 'info' | 'warn' | 'error'
+  message: string
+  timestamp: string
+}
+
+export default class extends Transport {
+  constructor(opts?: Transport.TransportStreamOptions) {
+    super(opts)
+  }
+
+  public log(data: LogRecord, next: () => void) {
+    send('log', `${data.timestamp} [${data.level}] ${data.message}`)
+    next()
+  }
+}

src/renderer/src/components/TerminalComponent.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="w-full bg-slate-900 rounded-xl p-5">
+    <header class="bg-slate-700 w-full p-2 font-semibold text-2xl rounded-t-xl">Terminal</header>
+    <ScrollComponent axis="vertical" class="h-[25vh]">
+      <p v-for="(logRecord, index) in logRecords" :key="index">{{ logRecord }}</p>
+    </ScrollComponent>
+    <input
+      ref="in"
+      type="text"
+      class="w-full p-2 bg-slate-950 rounded-b-xl"
+      :placeholder="inputPlaceholder"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import ScrollComponent from './ScrollComponent.vue'
+import { on } from '@renderer/ipc'
+import Config from '@shared/Config'
+
+export type TerminalComponentType = { addLogRecord: (logRecord: string) => void }
+
+export default defineComponent({
+  components: { ScrollComponent },
+  data() {
+    return {
+      logRecords: [] as string[],
+      inputPlaceholder: Config.TERMINAL_INPUT_PLACEHOLDER
+    }
+  },
+  mounted() {
+    const inputField = this.$refs.in as HTMLInputElement
+    inputField.focus()
+
+    on('log', (_ev, logRecord: string) => {
+      this.addLogRecord(logRecord)
+    })
+  },
+  methods: {
+    addLogRecord(logRecord: string) {
+      this.logRecords.push(logRecord)
+    }
+  }
+})
+</script>

src/renderer/src/ipc.ts

@@ -1,4 +1,5 @@
-import type { WindowRequest, WindowToNode } from '@shared/Emit'
+import type { NodeToWindow, WindowRequest, WindowToNode } from '@shared/Emit'
+import { IpcRendererEvent } from 'electron'
 
 async function request<T extends keyof WindowRequest>(
   key: T,
@@ -13,4 +14,11 @@ function send<T extends keyof WindowToNode>(key: T, args: WindowToNode[T]) {
   window.electron.ipcRenderer.send(key, args)
 }
 
-export { request, send }
+function on<T extends keyof NodeToWindow>(
+  key: T,
+  listener: (event: IpcRendererEvent, args: NodeToWindow[T]) => void
+) {
+  window.electron.ipcRenderer.on(key, listener)
+}
+
+export { request, send, on }

src/renderer/src/router.ts

@@ -34,6 +34,10 @@ export default createRouter({
         {
           path: 'confirm',
           component: () => import('./views/test/ConfirmTestView.vue')
+        },
+        {
+          path: 'terminal',
+          component: () => import('./views/test/TerminalTestView.vue')
         }
       ]
     }

src/renderer/src/views/HomeView.vue

@@ -9,6 +9,7 @@
     <router-link to="/test/preview/file">Click to test preview with a file</router-link>
     <router-link to="/test/preview/directory">Click to test preview with a directory</router-link>
     <router-link to="/test/confirm">Click to test the confirm component</router-link>
+    <router-link to="/test/terminal">Click to test the terminal</router-link>
   </div>
 </template>
 <script lang="ts">

src/renderer/src/views/test/TerminalTestView.vue

@@ -0,0 +1,22 @@
+<template>
+  <TerminalComponent ref="tc" />
+</template>
+<script lang="ts">
+import TerminalComponent, {
+  TerminalComponentType
+} from '@renderer/components/TerminalComponent.vue'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: {
+    TerminalComponent
+  },
+  mounted() {
+    const tc = this.$refs.tc as TerminalComponentType
+
+    for (let i = 0; i < 100; i++) {
+      tc.addLogRecord('07.10.2023 | 18:11:35 [info] enabling the browser window')
+    }
+  }
+})
+</script>

src/shared/Config.ts

@@ -1,4 +1,5 @@
 export default {
   MAX_PREVIEW_FILE_SIZE: 0.5 * 1024 * 1024, // = 0.5mb
-  GITIGNORE_RECOMMENDED: ['node_modules', '.idea', '.vscode', '.DS_Store', 'target']
+  GITIGNORE_RECOMMENDED: ['node_modules', '.idea', '.vscode', '.DS_Store', 'target'],
+  TERMINAL_INPUT_PLACEHOLDER: 'Enter a command...'
 }

src/shared/Emit.ts

@@ -1,6 +1,7 @@
 import { type Directory } from './Directory'
 import { FsEntry } from './FsEntry'
 import { PreviewType } from './PreviewType'
+import { LogRecord } from './LogRecord'
 
 const contextMenuTypes = [
   'open.open',
@@ -65,4 +66,8 @@ type WindowToNode = {
   }
 }
 
-export type { WindowRequest, WindowToNode, contextMenuTypes }
+type NodeToWindow = {
+  log: LogRecord
+}
+
+export type { WindowRequest, WindowToNode, contextMenuTypes, NodeToWindow }