From 2296bd79ddb3d74d5bb0552e9024366a3588d8dd Mon Sep 17 00:00:00 2001
From: Sylwester Wroblewski <swrobl@proton.me>
Date: Sun, 13 Oct 2024 12:15:17 +0200
Subject: [PATCH] Fixes to global imports

---
 package-lock.json                                    | 7 +++++++
 package.json                                         | 1 +
 src/Components/UnsupportedBrowser.vue                | 2 +-
 src/DataManipulation/CompilationModule/YamlParser.ts | 8 ++++----
 src/v1/GoldenLayout/AceEditorComponent.ts            | 2 +-
 src/v1/GoldenLayout/GoldenLayoutUI.ts                | 7 +++----
 src/v1/GoldenLayout/GoldenLayoutUIConfig.ts          | 2 +-
 src/v1/utils/LocalForageWrapper.ts                   | 2 +-
 8 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8bf31108..c5cb048a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,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",
@@ -2538,6 +2539,12 @@
       "integrity": "sha512-M95hNBMa/hnwErH+a+VOD/sYgTmo15OTYTM2Hr52/e0OdOuY+Crag+kd3/ioZrhg0WGbl9Sm3hR7UU+MH6rfOw==",
       "dev": true
     },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
diff --git a/package.json b/package.json
index 3d41e3c8..faf5272f 100644
--- a/package.json
+++ b/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",
diff --git a/src/Components/UnsupportedBrowser.vue b/src/Components/UnsupportedBrowser.vue
index 296d15ba..ebcc8e18 100644
--- a/src/Components/UnsupportedBrowser.vue
+++ b/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";
diff --git a/src/DataManipulation/CompilationModule/YamlParser.ts b/src/DataManipulation/CompilationModule/YamlParser.ts
index 47da809a..4da8f8d7 100644
--- a/src/DataManipulation/CompilationModule/YamlParser.ts
+++ b/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;
     }
 }
\ No newline at end of file
diff --git a/src/v1/GoldenLayout/AceEditorComponent.ts b/src/v1/GoldenLayout/AceEditorComponent.ts
index 60f406d2..340aef57 100644
--- a/src/v1/GoldenLayout/AceEditorComponent.ts
+++ b/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";
diff --git a/src/v1/GoldenLayout/GoldenLayoutUI.ts b/src/v1/GoldenLayout/GoldenLayoutUI.ts
index 0c3f631b..5ef18770 100644
--- a/src/v1/GoldenLayout/GoldenLayoutUI.ts
+++ b/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();
     }
diff --git a/src/v1/GoldenLayout/GoldenLayoutUIConfig.ts b/src/v1/GoldenLayout/GoldenLayoutUIConfig.ts
index 36e09654..2a4bc244 100644
--- a/src/v1/GoldenLayout/GoldenLayoutUIConfig.ts
+++ b/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},
                                                         ]
                                                     }
                                                 ]
diff --git a/src/v1/utils/LocalForageWrapper.ts b/src/v1/utils/LocalForageWrapper.ts
index a711a350..27730b22 100644
--- a/src/v1/utils/LocalForageWrapper.ts
+++ b/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> {