Fixes to global imports

package.json

@@ -35,6 +35,7 @@
     "@parcel/transformer-inline-string": "^2.12.0",
     "@parcel/transformer-vue": "^2.12.0",
     "@types/dateformat": "^5.0.2",
+    "@types/js-yaml": "^4.0.9",
     "assert": "^2.1.0",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",

src/Components/UnsupportedBrowser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import * as bowser from "bowser";
+import bowser from "bowser";
 import {ref} from "vue";
 
 const localStorageRecord = localStorage.getItem("hideUnsupported") === "true";

src/DataManipulation/CompilationModule/YamlParser.ts

@@ -1,12 +1,12 @@
-import * as jsyaml from "js-yaml";
 import {YamlFileInfo} from "./JsImporter";
+import {load, CORE_SCHEMA, LoadOptions} from "js-yaml";
 
 export class YamlParser {
     public static parseIKsyFile(yamlInfo: YamlFileInfo): KsySchema.IKsyFile {
-        const options = {
-            schema: jsyaml.CORE_SCHEMA,
+        const options: LoadOptions = {
+            schema: CORE_SCHEMA,
             filename: yamlInfo.filePath,
         };
-        return jsyaml.load(yamlInfo.fileContent, options);
+        return load(yamlInfo.fileContent, options) as KsySchema.IKsyFile;
     }
 }

src/v1/GoldenLayout/AceEditorComponent.ts

@@ -1,5 +1,5 @@
 import GoldenLayout from "golden-layout";
-import * as Ace from "ace-builds";
+import Ace from "ace-builds";
 import "ace-builds/esm-resolver";
 import "ace-builds/src-noconflict/theme-monokai";
 import {LanguageProvider} from "ace-linters";

src/v1/GoldenLayout/GoldenLayoutUI.ts

@@ -1,9 +1,8 @@
 import {GoldenLayoutWrapper} from "./GoldenLayoutWrapper";
 import {GoldenLayoutUIConfig} from "./GoldenLayoutUIConfig";
 
-// GoldenLayout imports, one is a types import, the second is a module!
-import GoldenLayout, * as GoldenLayoutModule from "golden-layout";
 import {Ace} from "ace-builds";
+import GoldenLayout from "golden-layout";
 
 export class GoldenLayoutUI {
     layoutManager: GoldenLayoutWrapper<GoldenLayoutUI>;
@@ -13,7 +12,7 @@ export class GoldenLayoutUI {
     errorWindow: GoldenLayout.Container;
 
     constructor() {
-        const goldenLayout = new GoldenLayoutModule(GoldenLayoutUIConfig);
+        const goldenLayout = new GoldenLayout(GoldenLayoutUIConfig);
         this.layoutManager = new GoldenLayoutWrapper(this, goldenLayout);
         this.layoutManager.addAceCodeEditorTab("ksyEditor", {lang: "yaml"});
         this.layoutManager.addAceCodeEditorTab("genCodeViewer", {lang: "javascript", isReadOnly: true});
@@ -22,13 +21,13 @@ export class GoldenLayoutUI {
         this.layoutManager.addExistingDiv("hex-viewer");
         this.layoutManager.addExistingDiv("parsedDataTree");
         this.layoutManager.addExistingDiv("fileTreeNew");
+        this.layoutManager.addExistingDiv("converter-panel");
 
         this.layoutManager.addComponent("errorWindow", cont => {
             cont.getElement().append($("<div></div>"));
         });
 
         this.layoutManager.addExistingDiv("infoPanel");
-        this.layoutManager.addComponent("converterPanel", cont => cont.getElement().append($("#converter-panel")));
 
         this.layoutManager.goldenLayout.init();
     }

src/v1/GoldenLayout/GoldenLayoutUIConfig.ts

@@ -37,7 +37,7 @@ export const GoldenLayoutUIConfig: GoldenLayout.Config = {
                                                                 isClosable: false,
                                                                 width: 40
                                                             },
-                                                            {type: "component", componentName: "converterPanel", title: "converter", isClosable: false},
+                                                            {type: "component", componentName: "converter-panel", title: "converter", isClosable: false},
                                                         ]
                                                     }
                                                 ]

src/v1/utils/LocalForageWrapper.ts

@@ -1,5 +1,5 @@
 import {IFsItem} from "../FileSystems/FileSystemsTypes";
-import * as localforage from "localforage";
+import localforage from "localforage";
 
 export class LocalForageWrapper {
     public static getFsItem(ksyFsItemName: string): Promise<IFsItem> {