Allow visualisation HTML files to reference other files

MiniZinc · Oct 27, 2023 · 5e2b185 · 5e2b185
1 parent 2e7e2b5
commit 5e2b185
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,19 +16,19 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@lezer/generator": "^1.5.0",
-    "@sveltejs/vite-plugin-svelte": "^2.4.5",
+    "@lezer/generator": "^1.5.1",
+    "@sveltejs/vite-plugin-svelte": "^2.4.6",
     "minizinc": "^4.1.1",
-    "sass": "^1.67.0",
-    "svelte": "^4.2.0",
-    "vite": "^4.4.9"
+    "sass": "^1.69.5",
+    "svelte": "^4.2.2",
+    "vite": "^4.5.0"
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.4.6",
     "@codemirror/lang-json": "^6.0.1",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@lezer/highlight": "^1.1.6",
-    "@lezer/lr": "^1.3.10",
+    "@lezer/lr": "^1.3.13",
     "bulma": "^0.9.4",
     "codemirror": "^6.0.1",
     "file-saver": "^2.0.5",

diff --git a/src/lib/Playground.svelte b/src/lib/Playground.svelte
@@ -1313,6 +1313,7 @@
                             >
                                 <Visualisation
                                     bind:this={visualisation}
+                                    {files}
                                     on:solve={(e) => visReSolve(e.detail)}
                                 />
                             </div>

diff --git a/src/lib/Visualisation.svelte b/src/lib/Visualisation.svelte
@@ -15,6 +15,8 @@
 
     const dispatch = createEventDispatcher();
 
+    export let files = [];
+
     let prevFollowLatest = true;
     let followLatest = true;
     let prevSolution = 0;
@@ -30,6 +32,9 @@
     export function reset() {
         for (const vis of visualisations) {
             URL.revokeObjectURL(vis.url);
+            for (const url of vis.extraUrls) {
+                URL.revokeObjectURL(url);
+            }
         }
         prevFollowLatest = true;
         followLatest = true;
@@ -52,15 +57,53 @@
                 '*'
             );
         });
+        const projectFiles = files.reduce(
+            (acc, x) => ({ ...acc, [x.name]: x.state.doc.toString() }),
+            {}
+        );
+        const extraUrls = [];
+        const doc = new DOMParser().parseFromString(html, 'text/html');
+        for (const script of doc.getElementsByTagName('script')) {
+            const src = script.getAttribute('src');
+            if (src === '/minizinc-ide.js') {
+                script.src = connectorURL;
+            } else if (src in projectFiles && src.endsWith('.js')) {
+                const url = URL.createObjectURL(
+                    new Blob([projectFiles[src]], {
+                        type: 'text/javascript; charset=utf-8',
+                    })
+                );
+                script.src = url;
+                extraUrls.push(url);
+            }
+        }
+        for (const link of doc.getElementsByTagName('link')) {
+            const href = link.getAttribute('href');
+            if (href in projectFiles && href.endsWith('.css')) {
+                const url = URL.createObjectURL(
+                    new Blob([projectFiles[href]], {
+                        type: 'text/css; charset=utf-8',
+                    })
+                );
+                link.href = url;
+                extraUrls.push(url);
+            }
+        }
+
+        const contents =
+            new XMLSerializer().serializeToString(doc.doctype) +
+            doc.documentElement.outerHTML;
+        console.log(contents);
         const url = URL.createObjectURL(
-            new Blob([html.replace('/minizinc-ide.js', connectorURL)], {
+            new Blob([contents], {
                 type: 'text/html; charset=utf-8',
             })
         );
         visualisations = [
             ...visualisations,
             {
                 url,
+                extraUrls,
                 makeReady,
                 ready,
                 solutions: [],