Move console js to built app.js file. (#1471)

resources/css/console.css

@@ -0,0 +1,51 @@
+@import url('@xterm/xterm/css/xterm.css');
+
+#terminal {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    overflow: hidden;
+}
+
+.xterm-selection div {
+    background-color: transparent !important;
+}
+
+.xterm .xterm-rows > div {
+    padding-left: 10px;
+    padding-top: 2px;
+    padding-right: 10px;
+}
+
+#send-command:read-only {
+    cursor: not-allowed;
+}
+
+::-webkit-scrollbar {
+    background: none;
+    width: 14px;
+    height: 14px;
+}
+
+::-webkit-scrollbar-thumb {
+    border: solid 0 rgb(0 0 0 / 0%);
+    border-right-width: 4px;
+    border-left-width: 4px;
+    -webkit-border-radius: 9px 4px;
+    -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
+}
+
+::-webkit-scrollbar-track-piece {
+    margin: 4px 0;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    border-right-width: 0;
+    border-left-width: 0;
+    border-top-width: 4px;
+    border-bottom-width: 4px;
+    -webkit-border-radius: 4px 9px;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}

resources/js/console.js

@@ -0,0 +1,13 @@
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { SearchAddon } from '@xterm/addon-search';
+import { SearchBarAddon } from 'xterm-addon-search-bar';
+
+window.Xterm = {
+    Terminal,
+    FitAddon,
+    WebLinksAddon,
+    SearchAddon,
+    SearchBarAddon,
+};

resources/views/filament/components/server-console.blade.php

@@ -14,13 +14,7 @@
             }
         </style>
     @endif
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm/lib/xterm.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit/lib/addon-fit.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links/lib/addon-web-links.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search/lib/addon-search.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-search-bar/lib/xterm-addon-search-bar.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm/css/xterm.min.css">
-    <link rel="stylesheet" href="{{ asset('/css/filament/server/console.css') }}">
+    @vite(['resources/js/console.js', 'resources/css/console.css'])
     @endassets
 
     <div id="terminal" wire:ignore></div>
@@ -82,12 +76,13 @@
             theme: theme
         };
 
-        const terminal = new Terminal(options);
-        const fitAddon = new FitAddon.FitAddon();
-        const webLinksAddon = new WebLinksAddon.WebLinksAddon();
-        const searchAddon = new SearchAddon.SearchAddon();
-        const searchAddonBar = new SearchBarAddon.SearchBarAddon({ searchAddon });
+        const { Terminal, FitAddon, WebLinksAddon, SearchAddon, SearchBarAddon } = window.Xterm;
 
+        const terminal = new Terminal(options);
+        const fitAddon = new FitAddon();
+        const webLinksAddon = new WebLinksAddon();
+        const searchAddon = new SearchAddon();
+        const searchAddonBar = new SearchBarAddon({ searchAddon });
         terminal.loadAddon(fitAddon);
         terminal.loadAddon(webLinksAddon);
         terminal.loadAddon(searchAddon);