Requesting guidance on minimizing asset size in JupyterLab

Created by: dlqqq

cc @fcollonval @jtpio @krassowski

Hello! I'm a contributor to JupyterLab and the author of this PR to upgrade JupyterLab's math renderer to use MathJax 3. For context, I am not the original author of the MathJax 3 extension; development was tracked in the jupyter-renderers repository up until now. I am, however, owning the migration and integration of the MathJax 3 extension into the JupyterLab core repository.

The original authors left some fairly opaque lines of code that appear to be remnants of an old MathJax 3 release. This is how the MathDocument object is being initialized (dynamic imports were added by me to improve initial load time):

protected async _ensureInitialized() {
  if (this._initialized) {
    return;
  }

  await import('mathjax-full/js/input/tex/require/RequireConfiguration');
  const { mathjax } = await import('mathjax-full/js/mathjax');
  const { CHTML } = await import('mathjax-full/js/output/chtml');
  const { TeX } = await import('mathjax-full/js/input/tex');
  const { TeXFont } = await import('mathjax-full/js/output/chtml/fonts/tex');
  const { AllPackages } = await import(
    'mathjax-full/js/input/tex/AllPackages'
  );
  const { SafeHandler } = await import('mathjax-full/js/ui/safe/SafeHandler');
  const { HTMLHandler } = await import(
    'mathjax-full/js/handlers/html/HTMLHandler'
  );
  const { browserAdaptor } = await import(
    'mathjax-full/js/adaptors/browserAdaptor'
  );

  mathjax.handlers.register(SafeHandler(new HTMLHandler(browserAdaptor())));

  class EmptyFont extends TeXFont {
    defaultFonts = {};
  }

  const chtml = new CHTML({
    // Override dynamically generated fonts in favor of our font css
    font: new EmptyFont()
  });

  const tex = new TeX({
    packages: AllPackages.concat('require'),
    inlineMath: [
      ['$', '$'],
      ['\\(', '\\)']
    ],
    displayMath: [
      ['$$', '$$'],
      ['\\[', '\\]']
    ],
    processEscapes: true,
    processEnvironments: true
  });

  this._mathDocument = mathjax.document(window.document, {
    InputJax: tex,
    OutputJax: chtml
  });
  this._initialized = true;
}

(the full file is viewable at the path packages/mathjax-extension/src/index.ts in the linked PR)

I have two questions:

1. Can we receive guidance on what the SafeHandler, CHTML, and TeX objects actually are, and whether it's necessary to instantiate these objects and pass them to mathjax.document() and mathjax.handlers.register? The imports that they depend on have a significant impact on the asset size. I have searched the official documentation, and it seems much of the library interface this code is using is undocumented. If these are not necessary, could you recommend an alternative that minimizes the size of the assets being dynamically imported?

2. Is it possible to use the mathjax package instead of mathjax-full while preserving type safety? It seems that the latest version of the mathjax NPM package doesn't provide any type declarations. Is this intentional?