optimize and rearrange history object

src/components/console.vue

@@ -1,38 +1,37 @@
 <template>
   <div @click="focusInput()" class="console">
-    <div @keypress.enter="renderCommand()" class="group" v-for="(group, index) in history" :key="group">
+    <div @keypress.enter="displayCommand()" class="group" v-for="(group, index) in history" :key="group">
       <pre><span class="host">{{group.host}}</span><span
           v-if="index !== history.length-1">{{group.command}}</span><input
           v-else v-model="group.command" ref="consoleInput" type="text" autocomplete="off"></pre>
-      <pre><span v-for="output in group.output" :key="output" :class="output.color">{{
+      <pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
-        typeof output.content === "function"?output.content(group.command):
-        output.content}}</span></pre>
     </div>
   </div>
 </template>
 
 <script>
 import commands from "@/render-commands.js"
-commands.methods.renderCommand()
+
 export default {
   name: "console",
   data(){
     return{
-      history:commands.data().history
+      history:[{
+        host: "[cybre.town]$ ",
+        command: "welcome --help",
+        output: []
+      }],
+      currentInput: ""
     }
   },
   methods:{
-    execCommand(){
+    displayCommand(){
-      commands.methods.renderCommand()
+      let command = commands.methods.renderCommand(this.history[this.history.length-1].command);
-      this.$forceUpdate()
+      command.forEach((group, i) => {
-    },
-    renderCommand(){
-      let command = commands.methods.getCommand();
-      command.output.forEach((group, i) => {
         setTimeout(() => {
           this.history[this.history.length-1].output.push(group);
           if (group.forward) window.location = group.forward;
-          if (command.output.length-1 === i){
+          if (command.length-1 === i){
             this.history.push({
               host: "[cybre.town]$ ",
               command: "",
@@ -46,11 +45,13 @@ export default {
       })
     },
     focusInput(){
-      this.$nextTick(function(){
+      this.$nextTick(function lol(){
         this.$refs.consoleInput.focus();
-        this.$refs.consoleInput.select();
       })
     }
+  },
+  mounted() {
+    this.displayCommand();
   }
 }
 </script>

src/render-commands.js

@@ -24,7 +24,7 @@ let commands = [
       {color: "white", content: "\nWelcome to:\n", delay: 100},
       {
         color: "green",
-        content(){
+        content: function (){
           let fontSize = window.getComputedStyle(document.body,null).fontSize.split("px")[0];
           return window.innerWidth/fontSize<35?
             "            __  \n" +
@@ -51,7 +51,7 @@ let commands = [
             " \\/____/\\/___/\\ \\___/ \\/_/ \\/____/\\/_/ \\/__//___/ \\/_/\\/_/   \\/_/\\/_/\n" +
             "           /\\___/\n" +
             "           \\/__/                                             @adb.sh\n\n";
-        },
+        }(),
         delay: 300
       },
       {
@@ -133,33 +133,38 @@ let commands = [
       {color: "white", content: "forwarding", delay: 400},
       {color: "white", content: " ...", forward: "https://meet.adb.sh", delay: 600}
     ]
+  },
+  {
+    name: ["test"],
+    output(input){ return[
+      {color: "blue", content: "\nJitsi", delay: 100},
+      {color: "white", content: " is loading\n", delay: 200},
+      {color: "white", content: input, delay: 400}
+    ]}
   }
 ]
 
-let history = [{
-  host: "[cybre.town]$ ",
-  command: "welcome --help",
-  output: []
-}]
-
 export default {
   data(){
     return {
-      commands,
+      commands
-      history
     }
   },
   methods:{
     renderCommand(input){
-      history[history.length-1].output = this.getCommand(input).output;
+      let toRender = this.getCommand(input).output
-      history.push({
+      let payload = [];
-        host: "[cybre.town]$ ",
+      if (typeof toRender === "function"){
-        command: "",
+        payload = toRender(input)
-        output: []
+      }else{
-      })
+        toRender.forEach(part =>
+          payload.push(typeof part === "function"?part(input):part)
+        )
+      }
+      return payload;
     },
     getCommand(input) {
-      input = (input?input:history[history.length-1].command).split(" ")[0];
+      input = input.split(" ")[0];
       let command = commands.find(
         command => Array.isArray(command.name)?command.name.find(
           altName => altName === input):command.name === input);