feat: finalize signals

ndabAP · ndabAP · commit 22a0bfa8a4a9 · 2022-12-25T10:38:21.000+01:00
diff --git a/README.md b/README.md
@@ -280,14 +280,14 @@ inject: ["exit", "terminal"],
 
 ## 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
+You can send and receive signals like `SIGINT`, `SIGTERM` or `SIGKILL`.
+`SIGINT` is the only implemented signal for now. When the user presses
+<kbd>Ctrl</kbd> + <kbd>c</kbd>, you can listen to this event by providing a
 signal name and a callback:
 
 ```js
 const signals = inject("signals");
-signals.on("SIGNINT", () => console.debug("SIGINT"));
+signals.on("SIGINT", () => console.debug("SIGINT"));
 ```
 
 ## Nice-to-haves
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="favicon.ico"><![endif]--><title>vue-command</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><link href="css/app.dc600676.css" rel="preload" as="style"><link href="js/app.ccacc744.js" rel="preload" as="script"><link href="js/chunk-vendors.237296fb.js" rel="preload" as="script"><link href="css/app.dc600676.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png"><link rel="manifest" href="manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="vue-command"><link rel="apple-touch-icon" href="img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but vue-command doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.237296fb.js"></script><script src="js/app.ccacc744.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="favicon.ico"><![endif]--><title>vue-command</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><link href="css/app.dc600676.css" rel="preload" as="style"><link href="js/app.1c48fd61.js" rel="preload" as="script"><link href="js/chunk-vendors.237296fb.js" rel="preload" as="script"><link href="css/app.dc600676.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png"><link rel="manifest" href="manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="vue-command"><link rel="apple-touch-icon" href="img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but vue-command doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.237296fb.js"></script><script src="js/app.1c48fd61.js"></script></body></html>
diff --git a/docs/js/app.1c48fd61.js b/docs/js/app.1c48fd61.js
diff --git a/docs/js/app.1c48fd61.js.map b/docs/js/app.1c48fd61.js.map
diff --git a/docs/js/app.ccacc744.js b/docs/js/app.ccacc744.js
diff --git a/docs/js/app.ccacc744.js.map b/docs/js/app.ccacc744.js.map
diff --git a/docs/precache-manifest.4af45eb0bd164658140cfe45f68b9fbb.js b/docs/precache-manifest.4af45eb0bd164658140cfe45f68b9fbb.js
@@ -1,15 +1,15 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "41ea92d2220469da0ef2",
+    "revision": "08f3678f038dd723afed",
     "url": "css/app.dc600676.css"
   },
   {
-    "revision": "b825913d9118f944000bde80bed82a17",
+    "revision": "d456809b0afff9e778f5d74e4f5c74e0",
     "url": "index.html"
   },
   {
-    "revision": "41ea92d2220469da0ef2",
-    "url": "js/app.ccacc744.js"
+    "revision": "08f3678f038dd723afed",
+    "url": "js/app.1c48fd61.js"
   },
   {
     "revision": "37263e520d1b52d48297",
diff --git a/docs/service-worker.js b/docs/service-worker.js
@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "precache-manifest.2032eed84a887953ede510352a11da7d.js"
+  "precache-manifest.4af45eb0bd164658140cfe45f68b9fbb.js"
 );
 
 workbox.core.setCacheNameDetails({prefix: "vue-command"});
diff --git a/src/components/VueCommand.vue b/src/components/VueCommand.vue
@@ -352,6 +352,7 @@ const dispatch = async () => {
 
   // Command is user created component. Decorate component
   const component = defineComponent({
+    name: 'VueCommandEntryComponent',
     provide () {
       return {
         // This will be unique for the component and not reactive by design
@@ -376,23 +377,23 @@ const exit = () => {
   setFullscreen(false)
   setQuery('')
 }
-const incrementHistory = () => {
-  // History pointer must be lower query history
-  if (!lt(local.historyPosition, local.dispatchedQueries.size)) {
+const decrementHistory = () => {
+  // History pointer must be greater zero
+  if (eq(local.historyPosition, 0)) {
     return
   }
 
-  setHistoryPosition(local.historyPosition + 1)
+  setHistoryPosition(local.historyPosition - 1)
   const query = nth([...local.dispatchedQueries], local.historyPosition)
   setQuery(query)
 }
-const decrementHistory = () => {
-  // History pointer must be greater zero
-  if (eq(local.historyPosition, 0)) {
+const incrementHistory = () => {
+  // History pointer must be lower query history
+  if (!lt(local.historyPosition, local.dispatchedQueries.size)) {
     return
   }
 
-  setHistoryPosition(local.historyPosition - 1)
+  setHistoryPosition(local.historyPosition + 1)
   const query = nth([...local.dispatchedQueries], local.historyPosition)
   setQuery(query)
 }
@@ -402,7 +403,6 @@ const scrollToBottom = async () => {
   vueCommandHistoryRef.value.scrollTop = vueCommandHistoryRef.value.scrollHeight
 }
 const sendSignal = signal => {
-  console.log(signal)
   signals[PUBLISH_SYMBOL](signal)
 }
 const setCursorPosition = cursorPosition => {
diff --git a/src/hosted/App.vue b/src/hosted/App.vue
@@ -128,10 +128,6 @@ export default {
           return createStdout(tableFormatter(history))
         },
 
-        json: () => {
-          return createStdout(jsonFormatter({ test: 1 }))
-        },
-
         nano: () => NanoEditor,
         norris: () => ChuckNorris
       },
diff --git a/src/hosted/ChuckNorris.vue b/src/hosted/ChuckNorris.vue
@@ -1,65 +1,56 @@
 <template>
   <div>
     <span v-if="!isLoading && !isError">{{ joke }}</span>
-    <span v-if="isLoading && !isError">Loading ...</span>
+    <span v-if="isLoading && !isError">{{ loadingText }}</span>
     <span v-if="isError">There was an error getting the joke</span>
   </div>
 </template>
 
 <script lang="js">
 const API_URL = 'https://api.chucknorris.io/jokes/random'
-const API_TIMEOUT = 5000 // 5 seconds
-
-const abortController = new AbortController()
 
 export default {
   inject: ['exit', 'signals'],
 
   data: () => ({
     isError: false,
     isLoading: true,
-    joke: ''
+    joke: '',
+    loadingText: 'Loading ...'
   }),
 
   async mounted () {
-    // Abort getting joke when API request takes longer than defined in
-    // "API_TIMEOUT"
-    setTimeout(() => {
-      if (this.isLoading) {
-        abortController.abort()
-      }
-    }, API_TIMEOUT)
+    const abortController = new AbortController()
 
     this.signals.on('SIGINT', () => {
-      console.debug('SIGINT')
       abortController.abort()
-      this.exit()
+      this.signals.off('SIGINT')
     })
 
     try {
       const response = await fetch(API_URL, { signal: abortController.signal })
+      this.signals.off('SIGINT')
       if (!response.ok) {
         this.isLoading = false
-        this.setIsError(true)
+        this.isError = true
         this.exit()
-
         return
       }
 
       const { value } = await response.json()
       this.joke = value
+      this.isLoading = false
     } catch (error) {
-      this.setIsError(true)
+      if (error.name === 'AbortError') {
+        // Simulate SIGINT
+        this.loadingText = `${this.loadingText}^C`
+      } else {
+        this.isError = true
+        this.isLoading = false
+      }
     } finally {
-      this.isLoading = false
       this.exit()
     }
-  },
-
-  methods: {
-    setIsError (isError) {
-      this.isError = isError
-    }
   }
 }
 </script>
diff --git a/src/library.js b/src/library.js
@@ -15,6 +15,7 @@ import isFunction from 'lodash.isfunction'
 // Suffix "KEY" is added to avoid collisions
 const ARROW_UP_KEY = 'ArrowUp'
 const ARROW_DOWN_KEY = 'ArrowDown'
+const C_KEY = 'c'
 
 // Cycles through dispatched queries with arrow keys
 export const defaultHistoryEventResolver = (refs, { decrementHistory, incrementHistory }) => {
@@ -47,17 +48,24 @@ export const defaultHistoryEventResolver = (refs, { decrementHistory, incrementH
   vueCommandRef.addEventListener('keydown', eventResolver)
 }
 
-export const defaultSignalEventResolver = (refs, { sendSignal }) => {
-  const vueCommandRef = refs.vueCommandRef
-
+// Sends common signals based on certain keyboard inputs
+export const defaultSignalEventResolver = (_, { sendSignal }) => {
   const eventResolver = event => {
-    switch (event.key) {
-      // Validate event
+    switch (event.ctrlKey) {
+      case true:
+        switch (event.key) {
+          // SIGINT, Ctrl + c
+          case C_KEY:
+            sendSignal('SIGINT')
+        }
+        break
+
+      case false:
+        break
     }
-    sendSignal('SIGINT')
   }
 
-  vueCommandRef.addEventListener('keydown', eventResolver)
+  window.addEventListener('keydown', eventResolver)
 }
 
 // Returns a list of default event resolver

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="favicon.ico"><![endif]--><title>vue-command</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><link href="css/app.dc600676.css" rel="preload" as="style"><link href="js/app.ccacc744.js" rel="preload" as="script"><link href="js/chunk-vendors.237296fb.js" rel="preload" as="script"><link href="css/app.dc600676.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png"><link rel="manifest" href="manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="vue-command"><link rel="apple-touch-icon" href="img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but vue-command doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.237296fb.js"></script><script src="js/app.ccacc744.js"></script></body></html>
	`1`	+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="favicon.ico"><![endif]--><title>vue-command</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><link href="css/app.dc600676.css" rel="preload" as="style"><link href="js/app.1c48fd61.js" rel="preload" as="script"><link href="js/chunk-vendors.237296fb.js" rel="preload" as="script"><link href="css/app.dc600676.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png"><link rel="manifest" href="manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="vue-command"><link rel="apple-touch-icon" href="img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but vue-command doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.237296fb.js"></script><script src="js/app.1c48fd61.js"></script></body></html>
Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`	`1`	`self.__precacheManifest = (self.__precacheManifest \|\| []).concat([`
`2`	`2`	`{`
`3`		`- "revision": "41ea92d2220469da0ef2",`
	`3`	`+ "revision": "08f3678f038dd723afed",`
`4`	`4`	`"url": "css/app.dc600676.css"`
`5`	`5`	`},`
`6`	`6`	`{`
`7`		`- "revision": "b825913d9118f944000bde80bed82a17",`
	`7`	`+ "revision": "d456809b0afff9e778f5d74e4f5c74e0",`
`8`	`8`	`"url": "index.html"`
`9`	`9`	`},`
`10`	`10`	`{`
`11`		`- "revision": "41ea92d2220469da0ef2",`
`12`		`- "url": "js/app.ccacc744.js"`
	`11`	`+ "revision": "08f3678f038dd723afed",`
	`12`	`+ "url": "js/app.1c48fd61.js"`
`13`	`13`	`},`
`14`	`14`	`{`
`15`	`15`	`"revision": "37263e520d1b52d48297",`