Code splitting, make fixture library work in browser

src/graph/nodes/generators/NoiseNode.ts

@@ -1,6 +1,6 @@
 import { ColorArrayInterface, NumberInterface, SliderInterface } from "@/graph/interfaces";
 import { CalculateFunction, Node } from "@baklavajs/core";
-import { makeNoise2D } from "open-simplex-noise";
+import { makeNoise2D } from "open-simplex-noise/lib/2d";
 import { Color, fromChroma, chroma } from "../../colors";
 import { LmsCalculationContext } from "../../types";
 

src/graph/options/script/ScriptOption.vue

@@ -36,9 +36,10 @@ import Button from "primevue/button";
 import Divider from "primevue/divider";
 
 import InterfaceView from "./InterfaceView.vue";
-import CodeEditor from "./CodeEditor.vue";
 import { ScriptNodeConfigurationInterface } from "../../interfaces";
-import { computed } from "vue";
+import { computed, defineAsyncComponent } from "vue";
+
+const CodeEditor = defineAsyncComponent(() => import("./CodeEditor.vue"));
 
 const props = defineProps<{
     intf: ScriptNodeConfigurationInterface;

src/stage/controllers/razerchroma/chromaApi.ts

@@ -1,10 +1,12 @@
-import axios, { AxiosInstance } from "axios";
+import type { AxiosInstance } from "axios";
 
 export class ChromaApi {
     private client?: AxiosInstance;
     private keepaliveTimer?: ReturnType<typeof setTimeout>;
 
     public async initialize() {
+        const axios = (await import("axios")).default;
+
         const r = await axios.post("http://localhost:54235/razer/chromasdk", {
             title: "LedMusic",
             description: "LedMusic Razer Output",

src/stage/fixtures/dmx/ChooseFixtureDialog.vue

@@ -2,7 +2,13 @@
     <Dialog v-model:visible="visible" modal header="Choose Fixture" style="width: 50vw; min-width: 1000px">
         <div class="fixture-library">
             <div class="toolbar">
-                <Button :disabled="updatingFixtureLibrary" label="Update Fixture Library" outlined @click="updateFixtureLibrary" />
+                <Button
+                    :icon="fixtureLibrary.updating ? 'pi pi-spin pi-spinner' : ''"
+                    :disabled="fixtureLibrary.updating"
+                    label="Update Fixture Library"
+                    outlined
+                    @click="updateFixtureLibrary"
+                />
             </div>
             <Listbox
                 class="manufacturer-list"
@@ -30,12 +36,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import Dialog from "primevue/dialog";
 import Button from "primevue/button";
 import Listbox from "primevue/listbox";
-import { useToast } from "primevue/usetoast";
 
+import { useErrorHandler } from "@/utils";
 import { Fixture } from "./open-fixture";
 import { Manufacturer, useFixtureLibrary } from "./fixtureLibrary";
 
@@ -44,23 +50,29 @@ const emit = defineEmits<{
     (e: "setFixture", fixture: Fixture): void;
 }>();
 
-const toast = useToast();
 const fixtureLibrary = useFixtureLibrary();
+const errorHandler = useErrorHandler();
 
-const updatingFixtureLibrary = ref(false);
 const selectedManufacturer = ref<Manufacturer | null>(null);
 const selectedFixture = ref<Fixture | null>(null);
 
-async function updateFixtureLibrary() {
-    updatingFixtureLibrary.value = true;
-    try {
-        await fixtureLibrary.updateFixtures();
-    } catch (err) {
-        console.error(err);
-        toast.add({ severity: "error", life: 5000, summary: "Failed to update fixture library" });
-    } finally {
-        updatingFixtureLibrary.value = false;
+onMounted(async () => {
+    if (fixtureLibrary.fixtures.length === 0) {
+        updateFixtureLibrary();
     }
+});
+
+async function updateFixtureLibrary() {
+    await errorHandler("Failed to update fixture library", async () => {
+        let data;
+        try {
+            data = await fixtureLibrary.downloadFromOfl();
+        } catch (err) {
+            console.error(err);
+            data = await fixtureLibrary.downloadSelfHosted();
+        }
+        await fixtureLibrary.applyOflData(data);
+    });
 }
 
 function addToUniverse() {

src/stage/fixtures/dmx/fixtureLibrary.ts

@@ -1,8 +1,6 @@
 import { ref } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
-import { loadAsync } from "jszip";
-import axios from "axios";
 import { Fixture, OFLManufacturers } from "./open-fixture";
 
 export interface Manufacturer {
@@ -14,41 +12,71 @@ export const useFixtureLibrary = defineStore("fixtureLibrary", () => {
     const fixtures = useLocalStorage<Manufacturer[]>("fixtureLibrary", []);
     const updating = ref(false);
 
-    async function updateFixtures() {
-        const response = await axios.get("https://open-fixture-library.org/download.ofl", {
-            responseType: "blob",
-        });
-        const zip = await loadAsync(response.data);
+    async function downloadFromOfl(): Promise<Blob> {
+        try {
+            updating.value = true;
+            const axios = (await import("axios")).default;
+            const response = await axios.get("https://open-fixture-library.org/download.ofl", {
+                responseType: "blob",
+            });
+            return response.data;
+        } finally {
+            updating.value = false;
+        }
+    }
 
-        const manufacturerFile = zip.file("manufacturers.json");
-        if (!manufacturerFile) {
-            throw new Error("Invalid file format - could not find manufacturers.json");
+    async function downloadSelfHosted(): Promise<Blob> {
+        try {
+            updating.value = true;
+            const axios = (await import("axios")).default;
+            const response = await axios.get("/ofl_export_ofl.zip", {
+                responseType: "blob",
+            });
+            return response.data;
+        } finally {
+            updating.value = false;
         }
+    }
+
+    async function applyOflData(data: Blob) {
+        try {
+            updating.value = true;
+            const { loadAsync } = await import("jszip");
 
-        const updatedFixtures: Manufacturer[] = [];
-        const manufacturers: OFLManufacturers = JSON.parse(await manufacturerFile.async("string"));
-        for (const [k, v] of Object.entries(manufacturers)) {
-            if (k === "$schema") {
-                continue;
+            const zip = await loadAsync(data);
+
+            const manufacturerFile = zip.file("manufacturers.json");
+            if (!manufacturerFile) {
+                throw new Error("Invalid file format - could not find manufacturers.json");
             }
 
-            const fixturesOfManufacturer: Fixture[] = [];
-            for (const file of zip.file(RegExp(`${k}/.*\\.json$`))) {
-                if (file.dir) {
+            const updatedFixtures: Manufacturer[] = [];
+            const manufacturers: OFLManufacturers = JSON.parse(await manufacturerFile.async("string"));
+            for (const [k, v] of Object.entries(manufacturers)) {
+                if (k === "$schema") {
                     continue;
                 }
-                const fixture = JSON.parse(await file.async("string"));
-                fixturesOfManufacturer.push(fixture);
+
+                const fixturesOfManufacturer: Fixture[] = [];
+                for (const file of zip.file(RegExp(`${k}/.*\\.json$`))) {
+                    if (file.dir) {
+                        continue;
+                    }
+                    const fixture = JSON.parse(await file.async("string"));
+                    fixturesOfManufacturer.push(fixture);
+                }
+
+                updatedFixtures.push({
+                    name: v.name,
+                    fixtures: fixturesOfManufacturer,
+                });
             }
 
-            updatedFixtures.push({
-                name: v.name,
-                fixtures: fixturesOfManufacturer,
-            });
+            fixtures.value = updatedFixtures;
+        } finally {
+            updating.value = false;
         }
-
-        fixtures.value = updatedFixtures;
     }
 
-    return { fixtures, updating, updateFixtures };
+    return { fixtures, updating, downloadFromOfl, downloadSelfHosted, applyOflData };
 });