From 5e2b18554bca0a9b8c4f2178c41aa9a6dd08317b Mon Sep 17 00:00:00 2001 From: Jason N Date: Fri, 27 Oct 2023 11:19:18 +1100 Subject: [PATCH] Allow visualisation HTML files to reference other files --- package-lock.json | 120 +++++++++++++++++------------------ package.json | 12 ++-- src/lib/Playground.svelte | 1 + src/lib/Visualisation.svelte | 45 ++++++++++++- 4 files changed, 111 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index af6f0f4..1220fb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@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", @@ -23,12 +23,12 @@ "thememirror": "^2.0.1" }, "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" } }, "node_modules/@ampproject/remapping": { @@ -613,9 +613,9 @@ } }, "node_modules/@lezer/generator": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@lezer/generator/-/generator-1.5.0.tgz", - "integrity": "sha512-RhZtwyAzsnqC+p6N4ptbBZ/PZR+0OxpYfHdB1OO5jJ6as05H+FXD+KMGXEtDq8LPZfoTuekJaJrXEcOeNrds2g==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@lezer/generator/-/generator-1.5.1.tgz", + "integrity": "sha512-vodJv2JPwsFsiBBHE463yBhvUI9TmhIu5duF/8MH304xNS6FyWH/vTyG61pjhERm5f+VBP94co0eiN+afWcvXw==", "dev": true, "dependencies": { "@lezer/common": "^1.0.2", @@ -662,24 +662,24 @@ } }, "node_modules/@lezer/lr": { - "version": "1.3.10", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.10.tgz", - "integrity": "sha512-BZfVvf7Re5BIwJHlZXbJn9L8lus5EonxQghyn+ih8Wl36XMFBPTXC0KM0IdUtj9w/diPHsKlXVgL+AlX2jYJ0Q==", + "version": "1.3.13", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.13.tgz", + "integrity": "sha512-RLAbau/4uSzKgIKj96mI5WUtG1qtiR0Frn0Ei9zhPj8YOkHM+1Bb8SgdVvmR/aWJCFIzjo2KFnDiRZ75Xf5NdQ==", "dependencies": { "@lezer/common": "^1.0.0" } }, "node_modules/@sveltejs/vite-plugin-svelte": { - "version": "2.4.5", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.5.tgz", - "integrity": "sha512-UJKsFNwhzCVuiZd06jM/psscyNJNDwjQC+qIeb7GBJK9iWeQCcIyfcPWDvbCudfcJggY9jtxJeeaZH7uny93FQ==", + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.6.tgz", + "integrity": "sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==", "dev": true, "dependencies": { - "@sveltejs/vite-plugin-svelte-inspector": "^1.0.3", + "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4", "debug": "^4.3.4", "deepmerge": "^4.3.1", "kleur": "^4.1.5", - "magic-string": "^0.30.2", + "magic-string": "^0.30.3", "svelte-hmr": "^0.15.3", "vitefu": "^0.2.4" }, @@ -692,9 +692,9 @@ } }, "node_modules/@sveltejs/vite-plugin-svelte-inspector": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.3.tgz", - "integrity": "sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz", + "integrity": "sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==", "dev": true, "dependencies": { "debug": "^4.3.4" @@ -1096,9 +1096,9 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/magic-string": { - "version": "0.30.3", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz", - "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==", + "version": "0.30.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", + "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" @@ -1267,9 +1267,9 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "node_modules/sass": { - "version": "1.67.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.67.0.tgz", - "integrity": "sha512-SVrO9ZeX/QQyEGtuZYCVxoeAL5vGlYjJ9p4i4HFuekWl8y/LtJ7tJc10Z+ck1c8xOuoBm2MYzcLfTAffD0pl/A==", + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -1316,9 +1316,9 @@ "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==" }, "node_modules/svelte": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.0.tgz", - "integrity": "sha512-kVsdPjDbLrv74SmLSUzAsBGquMs4MPgWGkGLpH+PjOYnFOziAvENVzgJmyOCV2gntxE32aNm8/sqNKD6LbIpeQ==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.2.tgz", + "integrity": "sha512-My2tytF2e2NnHSpn2M7/3VdXT4JdTglYVUuSuK/mXL2XtulPYbeBfl8Dm1QiaKRn0zoULRnL+EtfZHHP0k4H3A==", "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.1", @@ -1332,7 +1332,7 @@ "estree-walker": "^3.0.3", "is-reference": "^3.0.1", "locate-character": "^3.0.0", - "magic-string": "^0.30.0", + "magic-string": "^0.30.4", "periscopic": "^3.1.0" }, "engines": { @@ -1384,9 +1384,9 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, "node_modules/vite": { - "version": "4.4.9", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", - "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", + "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", "dev": true, "dependencies": { "esbuild": "^0.18.10", @@ -1819,9 +1819,9 @@ } }, "@lezer/generator": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@lezer/generator/-/generator-1.5.0.tgz", - "integrity": "sha512-RhZtwyAzsnqC+p6N4ptbBZ/PZR+0OxpYfHdB1OO5jJ6as05H+FXD+KMGXEtDq8LPZfoTuekJaJrXEcOeNrds2g==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@lezer/generator/-/generator-1.5.1.tgz", + "integrity": "sha512-vodJv2JPwsFsiBBHE463yBhvUI9TmhIu5duF/8MH304xNS6FyWH/vTyG61pjhERm5f+VBP94co0eiN+afWcvXw==", "dev": true, "requires": { "@lezer/common": "^1.0.2", @@ -1865,32 +1865,32 @@ } }, "@lezer/lr": { - "version": "1.3.10", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.10.tgz", - "integrity": "sha512-BZfVvf7Re5BIwJHlZXbJn9L8lus5EonxQghyn+ih8Wl36XMFBPTXC0KM0IdUtj9w/diPHsKlXVgL+AlX2jYJ0Q==", + "version": "1.3.13", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.13.tgz", + "integrity": "sha512-RLAbau/4uSzKgIKj96mI5WUtG1qtiR0Frn0Ei9zhPj8YOkHM+1Bb8SgdVvmR/aWJCFIzjo2KFnDiRZ75Xf5NdQ==", "requires": { "@lezer/common": "^1.0.0" } }, "@sveltejs/vite-plugin-svelte": { - "version": "2.4.5", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.5.tgz", - "integrity": "sha512-UJKsFNwhzCVuiZd06jM/psscyNJNDwjQC+qIeb7GBJK9iWeQCcIyfcPWDvbCudfcJggY9jtxJeeaZH7uny93FQ==", + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.6.tgz", + "integrity": "sha512-zO79p0+DZnXPnF0ltIigWDx/ux7Ni+HRaFOw720Qeivc1azFUrJxTl0OryXVibYNx1hCboGia1NRV3x8RNv4cA==", "dev": true, "requires": { - "@sveltejs/vite-plugin-svelte-inspector": "^1.0.3", + "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4", "debug": "^4.3.4", "deepmerge": "^4.3.1", "kleur": "^4.1.5", - "magic-string": "^0.30.2", + "magic-string": "^0.30.3", "svelte-hmr": "^0.15.3", "vitefu": "^0.2.4" } }, "@sveltejs/vite-plugin-svelte-inspector": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.3.tgz", - "integrity": "sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz", + "integrity": "sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==", "dev": true, "requires": { "debug": "^4.3.4" @@ -2206,9 +2206,9 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "magic-string": { - "version": "0.30.3", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz", - "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==", + "version": "0.30.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", + "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", "dev": true, "requires": { "@jridgewell/sourcemap-codec": "^1.4.15" @@ -2326,9 +2326,9 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "sass": { - "version": "1.67.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.67.0.tgz", - "integrity": "sha512-SVrO9ZeX/QQyEGtuZYCVxoeAL5vGlYjJ9p4i4HFuekWl8y/LtJ7tJc10Z+ck1c8xOuoBm2MYzcLfTAffD0pl/A==", + "version": "1.69.5", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", + "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", "dev": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", @@ -2366,9 +2366,9 @@ "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==" }, "svelte": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.0.tgz", - "integrity": "sha512-kVsdPjDbLrv74SmLSUzAsBGquMs4MPgWGkGLpH+PjOYnFOziAvENVzgJmyOCV2gntxE32aNm8/sqNKD6LbIpeQ==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.2.tgz", + "integrity": "sha512-My2tytF2e2NnHSpn2M7/3VdXT4JdTglYVUuSuK/mXL2XtulPYbeBfl8Dm1QiaKRn0zoULRnL+EtfZHHP0k4H3A==", "dev": true, "requires": { "@ampproject/remapping": "^2.2.1", @@ -2382,7 +2382,7 @@ "estree-walker": "^3.0.3", "is-reference": "^3.0.1", "locate-character": "^3.0.0", - "magic-string": "^0.30.0", + "magic-string": "^0.30.4", "periscopic": "^3.1.0" } }, @@ -2419,9 +2419,9 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, "vite": { - "version": "4.4.9", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", - "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", + "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", "dev": true, "requires": { "esbuild": "^0.18.10", diff --git a/package.json b/package.json index 141468e..d784f9c 100644 --- 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 index e3f65e0..1ccfdb7 100644 --- a/src/lib/Playground.svelte +++ b/src/lib/Playground.svelte @@ -1313,6 +1313,7 @@ > visReSolve(e.detail)} /> diff --git a/src/lib/Visualisation.svelte b/src/lib/Visualisation.svelte index 137c6e3..04acca7 100644 --- 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,8 +57,45 @@ '*' ); }); + 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', }) ); @@ -61,6 +103,7 @@ ...visualisations, { url, + extraUrls, makeReady, ready, solutions: [],