feat: send signals

Author: ndabAP

Diff for: README.md

@@ -1,6 +1,8 @@
 # vue-command
 
-A fully working, most feature-rich Vue.js terminal emulator. See the [demo](https://ndabap.github.io/vue-command/) and check the demo [source code](https://github.com/ndabAP/vue-command/blob/master/src/hosted/App.vue).
+A fully working, most feature-rich Vue.js terminal emulator. See the
+[demo](https://ndabap.github.io/vue-command/) and check the demo
+[source code](https://github.com/ndabAP/vue-command/blob/master/src/hosted/App.vue).
 
 ## Features
 
@@ -234,10 +236,12 @@ import { listFormatter } from "vue-command";
 | `optionsResolver`    |
 | `parser`             |
 | `programs`           |
+| `sendSignal`         |
 | `setCursorPosition`  |
 | `setFullscreen`      |
 | `setHistoryPosition` |
 | `showHelp`           |
+| `signals`            |
 | `setQuery`           |
 | `terminal`           |
 
@@ -258,10 +262,12 @@ inject: ["exit", "terminal"],
 | `exit`               |
 | `incrementHistory`   |
 | `programs`           |
+| `sendSignal`         |
 | `setCursorPosition`  |
 | `setFullscreen`      |
 | `setHistoryPosition` |
 | `setQuery`           |
+| `signals`            |
 | `terminal`           |
 
 ## Events
@@ -272,6 +278,18 @@ inject: ["exit", "terminal"],
 | `minimizeClicked`   | Emitted on button minimize click   |
 | `fullscreenClicked` | Emitted on button fullscreen click |
 
+## Signals
+
+It's possible to send and receive signals like `SIGINT`, `SIGTERM` or `SIGKILL`.
+`SIGINT` is the only implemented signal. When the terminal user clicks
+<kbd>Ctrl</kbd> + <kbd>c</kbd>, you can listen to the event by providing the
+signal name and a callback:
+
+```js
+const signals = inject("signals");
+signals.on("SIGNINT", () => console.debug("SIGINT"));
+```
+
 ## Nice-to-haves
 
 These features didn't make it into the last release. If you would like to

Diff for: src/components/VueCommand.vue

@@ -95,7 +95,9 @@ import {
 } from '@/library'
 import {
   and,
-  or
+  or,
+  newEventBus,
+  PUBLISH_SYMBOL
 } from '@/utils'
 import head from 'lodash.head'
 import isFunction from 'lodash.isfunction'
@@ -233,6 +235,9 @@ const vueCommandHistoryEntryComponentRefs = ref(null)
 const vueCommandHistoryRef = ref(null)
 const vueCommandRef = ref(null)
 
+// Signals like SIGINT or SIGKILL
+const signals = reactive(newEventBus())
+
 // A local copy to allow the absence of properties
 const local = reactive({
   cursorPosition: props.cursorPosition,
@@ -269,6 +274,7 @@ const shouldShowHistoryEntry = computed(() => {
     and(local.isFullscreen, eq(index, size(local.history) - 1))
   )
 })
+// Determinates if the given history entry at index should be fullscreen or not
 const shouldBeFullscreen = computed(() => {
   return index => and(local.isFullscreen, eq(index, size(local.history) - 1))
 })
@@ -303,6 +309,10 @@ const autoFocus = () => {
 const autoHistoryPosition = () => {
   setHistoryPosition(local.dispatchedQueries.size)
 }
+const appendToHistory = (...components) => {
+  local.history.push(...components)
+  emits('update:history', local.history)
+}
 // Parses the query, looks for a user given command and appends the resulting
 // component to the history
 const dispatch = async () => {
@@ -357,11 +367,6 @@ const dispatch = async () => {
   })
   appendToHistory(markRaw(component))
 }
-
-const appendToHistory = (...components) => {
-  local.history.push(...components)
-  emits('update:history', local.history)
-}
 // Tear down component and execute final steps
 const exit = () => {
   // TODO Does order matter?
@@ -396,6 +401,10 @@ const scrollToBottom = async () => {
   await nextTick()
   vueCommandHistoryRef.value.scrollTop = vueCommandHistoryRef.value.scrollHeight
 }
+const sendSignal = signal => {
+  console.log(signal)
+  signals[PUBLISH_SYMBOL](signal)
+}
 const setCursorPosition = cursorPosition => {
   local.cursorPosition = cursorPosition
   emits('update:cursorPosition', cursorPosition)
@@ -469,10 +478,12 @@ provide('invert', props.invert)
 provide('optionsResolver', props.optionsResolver)
 provide('parser', props.parser)
 provide('programs', programs)
+provide('sendSignal', sendSignal)
 provide('setCursorPosition', setCursorPosition)
 provide('setFullscreen', setFullscreen)
 provide('setHistoryPosition', setHistoryPosition)
 provide('showHelp', props.showHelp)
+provide('signals', signals)
 provide('setQuery', setQuery)
 provide('terminal', terminal)
 
@@ -484,10 +495,12 @@ defineExpose({
   exit,
   incrementHistory,
   programs,
+  sendSignal,
   setCursorPosition,
   setFullscreen,
   setHistoryPosition,
   setQuery,
+  signals,
   terminal
 })
 </script>

Diff for: src/components/VueCommandQuery.vue

@@ -29,7 +29,6 @@
       type="text"
       @click="setCursorPosition($refs.queryRef.selectionStart)"
       @input="setQuery($event.target.value)"
-      @keydown.ctrl.c.exact.prevent="sigint"
       @keydown.tab.exact.prevent="autocompleteQuery"
       @keydown.ctrl.r.exact.prevent="reverseISearch"
       @keyup.arrow-left.exact="setCursorPosition($refs.queryRef.selectionStart)"
@@ -78,6 +77,7 @@ const programs = inject('programs')
 const setCursorPosition = inject('setCursorPosition')
 const setQuery = inject('setQuery')
 const showHelp = inject('showHelp')
+const signals = inject('signals')
 const terminal = inject('terminal')
 
 const isOutdated = ref(false)
@@ -165,6 +165,9 @@ const autocompleteQuery = async () => {
 const focus = () => {
   queryRef.value.focus()
 }
+const bindSignals = () => {
+  signals.on('SIGINT', sigint)
+}
 const reverseISearch = event => {
   // TODO
   // console.debug(event)
@@ -216,6 +219,7 @@ const unwatchTerminalQuery = watch(
 )
 // Free resources if query is outdated/inactive
 const unwatchIsOutdated = watch(isOutdated, () => {
+  signals.off('SIGINT')
   unwatchTerminalQuery()
   unwatchLocalQuery()
   unwatchTerminalCursorPosition()
@@ -231,6 +235,9 @@ onMounted(() => {
 
   // Show eventually help as placeholder
   showDelayedHelp()
+
+  // Bind signals like "SIGINT"
+  bindSignals()
 })
 
 defineExpose({

Diff for: src/hosted/ChuckNorris.vue

@@ -13,7 +13,7 @@ const API_TIMEOUT = 5000 // 5 seconds
 const abortController = new AbortController()
 
 export default {
-  inject: ['exit'],
+  inject: ['exit', 'signals'],
 
   data: () => ({
     isError: false,
@@ -30,6 +30,12 @@ export default {
       }
     }, API_TIMEOUT)
 
+    this.signals.on('SIGINT', () => {
+      console.debug('SIGINT')
+      abortController.abort()
+      this.exit()
+    })
+
     try {
       const response = await fetch(API_URL, { signal: abortController.signal })
       if (!response.ok) {

Diff for: src/library.js

@@ -16,10 +16,9 @@ import isFunction from 'lodash.isfunction'
 const ARROW_UP_KEY = 'ArrowUp'
 const ARROW_DOWN_KEY = 'ArrowDown'
 
-// Cycles through dispatched queries with arrow keyes
-export const defaultHistoryEventResolver = (refs, eventProvider) => {
-  // TODO Bind on last query?
-  const vueCommandHistoryRef = refs.vueCommandHistoryRef
+// Cycles through dispatched queries with arrow keys
+export const defaultHistoryEventResolver = (refs, { decrementHistory, incrementHistory }) => {
+  const vueCommandRef = refs.vueCommandRef
 
   const eventResolver = event => {
     switch (event.key) {
@@ -34,22 +33,35 @@ export const defaultHistoryEventResolver = (refs, eventProvider) => {
         switch (event.key) {
           // Back in history, index down
           case ARROW_UP_KEY:
-            eventProvider.decrementHistory()
+            decrementHistory()
             break
 
           // Back in history, index up
           case ARROW_DOWN_KEY:
-            eventProvider.incrementHistory()
+            incrementHistory()
             break
         }
     }
   }
 
-  vueCommandHistoryRef.addEventListener('keydown', eventResolver)
+  vueCommandRef.addEventListener('keydown', eventResolver)
+}
+
+export const defaultSignalEventResolver = (refs, { sendSignal }) => {
+  const vueCommandRef = refs.vueCommandRef
+
+  const eventResolver = event => {
+    switch (event.key) {
+      // Validate event
+    }
+    sendSignal('SIGINT')
+  }
+
+  vueCommandRef.addEventListener('keydown', eventResolver)
 }
 
 // Returns a list of default event resolver
-export const newDefaultEventResolver = () => [defaultHistoryEventResolver]
+export const newDefaultEventResolver = () => [defaultHistoryEventResolver, defaultSignalEventResolver]
 
 // Creates a "stdout" with the given formatter or text and name. It exits as
 // soon as the component has been mounted

Diff for: src/utils/index.js

@@ -1,5 +1,36 @@
 // These are helpers for the package
 
+export const PUBLISH_SYMBOL = Symbol('publish')
+
+// Creats a new event bus to publish, subscribe and unsubscribe from events
+export const newEventBus = () => {
+  const events = {}
+  return {
+    [PUBLISH_SYMBOL] (event) {
+      const callbacks = events[event]
+      if (!callbacks) {
+        return
+      }
+
+      for (const callback of callbacks) {
+        callback()
+      }
+    },
+
+    on (event, callback) {
+      if (!events[event]) {
+        events[event] = []
+      }
+
+      events[event].push(callback)
+    },
+
+    off (event) {
+      delete events[event]
+    }
+  }
+}
+
 export const and = (x, y) => {
   return x && y
 }