using mhchem with Framework

First of all, thank you for all the brilliant work your team is doing. I have been a fan (and user) since d3 and then the start of Observable. Framework is again amazing work, and I am enjoying using it.

For my question, I am creating biomedical educational material that involves some chemistry equations. When using Observable, following Mike’s mhchem example, the following worked perfectly:

tex = {
  const [katex, style] = await Promise.all([
  document.head.append(html`<link rel="stylesheet" href="${style}">`);
  await require.alias({katex})("katex@0.12.0/dist/contrib/mhchem.min.js");
  return function tex() {
    var root = document.createElement("div");
    katex.render(String.raw.apply(String, arguments), root, {trust: true});
    return root.removeChild(root.firstChild);

How would I get this working in Framework, so I could do something like:

${tex`\ce{CO2 + H2O <-> H2CO3 <-> HCO3- + H+}`}

for example.

Thanks for any help on this.

This appears to work:

import tex from "npm:@observablehq/tex";
import "npm:katex/contrib/mhchem/mhchem.js/+esm";

(You want to import tex explicitly in this case to ensure that mhchem is loaded and registered before tex expressions are evaluated.)

Excellent - that works. Thank you!