Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

help: small demo page #26

Open
setop opened this issue Jul 13, 2022 · 6 comments
Open

help: small demo page #26

setop opened this issue Jul 13, 2022 · 6 comments

Comments

@setop
Copy link

setop commented Jul 13, 2022

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 ?
@aduh95
Copy link
Owner

aduh95 commented Jul 14, 2022 •
edited
Loading

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>

@setop
Copy link
Author

setop commented Jul 14, 2022 •
edited
Loading

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 😢

@aduh95
Copy link
Owner

aduh95 commented Jul 14, 2022

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 😬

@setop
Copy link
Author

setop commented Jul 15, 2022

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...

@aduh95
Copy link
Owner

aduh95 commented Jul 15, 2022 •
edited
Loading

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

@setop
Copy link
Author

setop commented Jul 15, 2022 •
edited
Loading

Thank you very much for the investigation. I'll eagerly wait for the resolution of this bug on Firefox.

In the meantime, I've written a snippet working with the last non WASM version of viz.js (2.1.2).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@setop @aduh95