viz.js
viz.js copied to clipboard
aduh95
help: small demo page
I try to make a simple web page that : loads viz.js, put some dot in a textarea, have a button to render the diagram and put the result in a div.
I've tried
<html>
<body>
<textarea id="dot">digraph{ A -> B; }</textarea>
<p>let's diag</p>
<div id="diag"></div>
</body>
</html>
<script type="module" src="main.cdn.js"></script>
<script>
input = document.getElementById("dot").value;
dot2svg(input)
.then((svgString) => {
console.log(svgString);
})
.catch((error) => {
console.error(error);
});
</script>
main.cdn.js is basically what is proposed in the README.
I've tried many ways (declare my code as a module, use export, etc.).
But I always end up with Uncaught ReferenceError: dot2svg is not defined.
Can someone please a small demo page ?
dot2svg is a example function created for the README, it's not part of the API. Here's how it could look like in your case:
<!DOCTYPE html>
<html>
<head>
<script type="module">
import Viz from "https://unpkg.com/@aduh95/viz.js";
const locateFile = (fileName) =>
"https://unpkg.com/@aduh95/viz.js/dist/" + fileName;
const onmessage = async function (event) {
if (this.messageHandler === undefined) {
// Lazy loading actual handler
const { default: init, onmessage } = await import(
Module.locateFile("render.browser.js")
);
// Removing default MessageEvent handler
removeEventListener("message", onmessage);
await init(Module);
this.messageHandler = onmessage;
}
return this.messageHandler(event);
};
const vizOptions = {
workerURL: URL.createObjectURL(
new Blob(
[
"const Module = { locateFile:",
locateFile.toString(),
"};",
"onmessage=",
onmessage.toString(),
],
{ type: "application/javascript" }
)
),
};
let viz;
const input = document.getElementById("dot");
const output = document.getElementById("diag");
function update() {
output.innerHTML = "Loading...";
viz ??= new Viz(vizOptions);
return viz
.renderString(input.value)
.then((svgString) => {
output.innerHTML = svgString;
})
.catch((error) => {
console.error(error);
output.innerHTML = 'An error occurred';
});
}
input.addEventListener("input", update);
update().then(() => {
input.disabled = false;
input.focus();
});
</script>
</head>
<body>
<textarea id="dot" disabled>digraph{ A -> B; }</textarea>
<p>let's diag</p>
<output id="diag"></output>
</body>
</html>
Hi, Thanks a lot for your help
The proposal looks good. I think I was close to that at some point. And I got the same result as the given code : Error: Dynamic module import is disabled or not supported in this context 8f26951b-d836-424f-8db3-07530717c700:6:20.
Searching the web for that error gave me not hint.
I've tried with HTTPS and a fresh blocker-free browser profile. But same error :cry:
I can see this error as well when I try to open this file directly, using a local webserver does fix the error (try python -m http.server or php -S localhost:8080). It's great that web browsers are improving the security, but in this case it's annoying they don't give an easy way to bypass that security check 😬
Since I'm also using a webserver (python -m http.server) and an HTTPS reverse proxy and get the error. I made another test : changing the webbrowser. It fails with Firefox bu works with Chromium.
The web does not help much, only old issues that are supposed to be fixed in recent FF...
Ah yes, it looks like that Firefox support for ES modules in Worker is not 100% (https://caniuse.com/mdn-api_worker_worker_ecmascript_modules), which might explain why dynamic imports are disabled in worker scope – or maybe it's a bug in Firefox, not sure. FWIW I've tested that it's working on Safari and Chromium. EDIT: it's indeed a bug related to ESM support, they are aware of it and working to fix it: https://bugzilla.mozilla.org/show_bug.cgi?id=1540913