Get ready for template

latest.html

@@ -5,6 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="Permissions-Policy" content="interest-cohort=()" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
   <title>Vyxal 3 Interpreter</title>
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
@@ -28,9 +29,6 @@
   <script src="https://unpkg.com/@popperjs/core@2"></script>
   <script defer src="https://unpkg.com/react-popper/dist/index.umd.js"></script>
   <script defer src="https://unpkg.com/[email protected]"></script>
-  <link rel="stylesheet" href="https://vyxal.github.io/Vylight/mode-vyxal.css">
-
-  <link rel="stylesheet" href="https://vyxal.github.io/Vylight/mode-vyxal.css">
 
   <script type="importmap">
     {
@@ -47,24 +45,17 @@
       selectedBox = box;
     }
 
-    function backupLoad(remotePath) {
-      let scriptTag = document.createElement("script");
-      scriptTag.src = remotePath;
-      scriptTag.onerror = function () {
-        console.log("Error loading both local and remote scripts for " + remotePath);
-      }
-      document.head.appendChild(scriptTag);
-    }
-
     function setFunctions() {
       resizeCodeBox = window.resizeCodeBox;
       updateCount = window.updateCount;
       copyToClipboard = window.copyToClipboard;
     }
   </script>
   <script src="./main.js" type="module" onload="setFunctions()" defer></script>
-  <script src="parsed_yaml.js" onerror="backupLoad('https://vyxal.github.io/Vyxal/parsed_yaml.js')" defer></script>
-  <script src="keyboard.js" type="module"></script>
+  <!-- === -->
+  <script src="https://vyxal.github.io/Vyxal/parsed_yaml.js" defer></script>
+  <!-- === -->
+  <script src="keyboard.js" type="module" defer></script>
   <link rel="stylesheet" type="text/css" href="./style.css">
 </head>
 
@@ -149,4 +140,4 @@ <h2 style="display: inline-block;"><a href="https://github.com/Vyxal/Vyxal/tree/
   </details>
 </body>
 
-</html>
+</html>

main.js

@@ -1,44 +1,15 @@
+/* === */
+import { Vyxal } from "https://vyxal.github.io/Vyxal/vyxal.js";
+import { HelpText } from "https://vyxal.github.io/Vyxal/helpText.js";
+/* === */
+
 import { aliases } from "./sugars.js"
 import { other_aliases } from "./keywords.js"
 import { incomptabile } from "./incompatible_versions.js";
 
-var Vyxal = null;
-var HelpText = null;
-var codepage = ""
-
-async function importOr(localPath, remotePath) {
-    let response = await import(localPath).catch(() => import(remotePath));
-    return response;
-}
-
-importOr("./vyxal.js", "https://vyxal.github.io/Vyxal/vyxal.js").then(
-    response => {
-        Vyxal = response.Vyxal;
-        window.Vyxal = Vyxal
-        codepage = Vyxal.getCodepage();
-
-        fetchOr("/ShortDictionary.txt", "https://vyxal.github.io/Vyxal/ShortDictionary.txt").then(
-            (text) => {
-                shortDict = text
-                Vyxal.setShortDict(shortDict)
 
+var codepage = Vyxal.getCodepage()
 
-            })
-        fetchOr("/LongDictionary.txt", "https://vyxal.github.io/Vyxal/LongDictionary.txt").then(
-            (text) => {
-                longDict = text
-                Vyxal.setLongDict(longDict)
-            }
-        )
-    }
-);
-
-
-importOr("./helpText.js", "https://vyxal.github.io/Vyxal/helpText.js").then(
-    response => {
-        HelpText = response.HelpText;
-    }
-);
 
 const $ = x => document.getElementById(x)
 
@@ -354,12 +325,12 @@ function initCodeMirror() {
     function resize(elem) {
         var dummy = $$$("#dummy")
         dummy.style.fontFamily = getComputedStyle($$$('.CodeMirror.cm-s-default')).fontFamily
-        dummy.style.fontSize = '15px'
+        dummy.style.fontSize = '12px'
         dummy.style.lineHeight = '24px'
         dummy.value = elem.doc.getValue()
         elem.setSize(
             null,
-            (elem.lineCount() * 22) + 24
+            (elem.lineCount() * 24) + 24
         )
         elem.refresh();
         dummy.value = ""
@@ -371,7 +342,7 @@ function initCodeMirror() {
     }
 
     let mode = {
-        mode: 'vyxal',
+        mode: '',
         lineWrapping: true,
         autofocus: true,
     }
@@ -440,7 +411,6 @@ function initCodeMirror() {
     }
 
     for (const boxId of ['header', 'code', 'footer']) {
-        console.log(boxId)
         globalThis['e_' + boxId] = CodeMirror.fromTextArea($$$('#' + boxId), boxId === 'code' ? codeMode : mode)
         globalThis['e_' + boxId].on('change', cm => {
             resize(globalThis['e_' + boxId])