New Js Example: Top level await implementation for modern Browsers

filoscoder commented 1 year ago

I've been struggling to get running the javascript example on the documentation.

As it is well known, since ES2022, we can use top level await in javascript modules.

I can confirm that below example works.

✅ Tested on PDF generation HTML template with Puppeteer, run in NodeJS application.

<head>
  <!-- ...other files and HTML tags... -->
  <!-- Load the RDKit JS file -->
  <script src="https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js"></script>

  <!-- Instantiate the WASM module. The inline script below could live elsewhere inside your application code. -->
  <script type="module">
      const RDKitModule = await initRDKitModule(); // <-- Top level await

      const smiles = "CC(=O)Oc1ccccc1C(=O)O";
      const mol = RDKitModule.get_mol(smiles);
      const svg = mol.get_svg();
      console.log(svg);
  </script>
  <!-- ...your application code goes here... -->
</head>

Conclusion

After all, I got the proposed js example working. I just moved all my javascript code inside the .then statement.

Yeap, it works, but looks very messy and decreases readability. Since most of the users are running modern browsers and my team works only with >=ES6, I really wanted that juicy syntactic sugar 🍭

I suggest adding the above example in the docs?

what do you say @MichelML

MichelML commented 11 months ago

@filoscoder this is great, definitely we should add examples with async/await soon

filoscoder commented 11 months ago

@filoscoder this is great, definitely we should add examples with async/await soon

That's good to know, hope this example helps future users :)

rdkit / rdkit-js