Use jupyterlab/mathjax-extension for typesetting.

Author: Alan

examples/web1/webpack.config.js

@@ -10,6 +10,9 @@ module.exports = {
     path: path.resolve(__dirname, 'built'),
   },
   module: {
-    rules: [{ test: /\.css$/i, use: ['style-loader', 'css-loader'] }],
+    rules: [
+      { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
+      { test: /\.svg$/, type: 'asset/resource' },
+    ],
   },
 };

packages/controls/package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^6.0.11",
+    "@jupyterlab/mathjax-extension": "^4.4.9",
     "@lumino/algorithm": "^1 || ^2",
     "@lumino/domutils": "^1 || ^2",
     "@lumino/messaging": "^1 || ^2",
@@ -53,7 +54,6 @@
     "@types/d3-format": "^3.0.1",
     "@types/expect.js": "^0.3.29",
     "@types/jquery": "^3.5.16",
-    "@types/mathjax": "^0.0.37",
     "@types/mocha": "^9.0.0",
     "@types/node": "^17.0.2",
     "chai": "^4.0.0",

packages/controls/src/utils.ts

@@ -1,12 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-
+import { MathJaxTypesetter } from '@jupyterlab/mathjax-extension';
 export { uuid, resolvePromisesDict } from '@jupyter-widgets/base';
 
+const typesetter = new MathJaxTypesetter();
 /**
- * Apply MathJax rendering to an element, and optionally set its text.
- *
- * If MathJax is not available, make no changes.
+ * Apply MathJax rendering to an element, if `text` is provided it will replace element.textContent.
  *
  * Parameters
  * ----------
@@ -17,9 +16,7 @@ export function typeset(element: HTMLElement, text?: string): void {
   if (text !== void 0) {
     element.textContent = text;
   }
-  if ((window as any).MathJax !== void 0) {
-    MathJax!.Hub!.Queue(['Typeset', MathJax.Hub, element]);
-  }
+  typesetter.typeset(element);
 }
 
 /**

packages/controls/src/widget_description.ts

@@ -66,18 +66,7 @@ export class DescriptionView extends DOMWidgetView {
   }
 
   typeset(element: HTMLElement, text?: string): void {
-    this.displayed.then(() => {
-      const widget_manager: any = this.model.widget_manager;
-      const latexTypesetter = widget_manager._rendermime?.latexTypesetter;
-      if (latexTypesetter) {
-        if (text !== void 0) {
-          element.textContent = text;
-        }
-        latexTypesetter.typeset(element);
-      } else {
-        return typeset(element, text);
-      }
-    });
+    this.displayed.then(() => typeset(element, text));
   }
 
   updateDescription(): void {

packages/controls/test/webpack.conf.js

@@ -17,6 +17,7 @@ module.exports = {
         generator: { filename: '[name].[ext]' },
       },
       { test: /\.ipynb$/, type: 'json' },
+      { test: /\.svg$/, type: 'asset/resource' },
     ],
   },
   mode: 'development',

packages/controls/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "lib",
     "rootDir": "src",
-    "types": ["mathjax", "node"]
+    "types": ["node"]
   },
   "include": ["src/**/*"],
   "references": [

yarn.lock

@@ -856,6 +856,7 @@ __metadata:
   resolution: "@jupyter-widgets/controls@workspace:packages/controls"
   dependencies:
     "@jupyter-widgets/base": ^6.0.11
+    "@jupyterlab/mathjax-extension": ^4.4.9
     "@jupyterlab/services": ^6.0.0 || ^7.0.0
     "@lumino/algorithm": ^1 || ^2
     "@lumino/domutils": ^1 || ^2
@@ -866,7 +867,6 @@ __metadata:
     "@types/d3-format": ^3.0.1
     "@types/expect.js": ^0.3.29
     "@types/jquery": ^3.5.16
-    "@types/mathjax": ^0.0.37
     "@types/mocha": ^9.0.0
     "@types/node": ^17.0.2
     chai: ^4.0.0
@@ -1136,7 +1136,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jupyterlab/application@npm:^3.0.0 || ^4.0.0":
+"@jupyterlab/application@npm:^3.0.0 || ^4.0.0, @jupyterlab/application@npm:^4.4.9":
   version: 4.4.9
   resolution: "@jupyterlab/application@npm:4.4.9"
   dependencies:
@@ -1578,6 +1578,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jupyterlab/mathjax-extension@npm:^4.4.9":
+  version: 4.4.9
+  resolution: "@jupyterlab/mathjax-extension@npm:4.4.9"
+  dependencies:
+    "@jupyterlab/application": ^4.4.9
+    "@jupyterlab/rendermime": ^4.4.9
+    "@lumino/coreutils": ^2.2.1
+    mathjax-full: ^3.2.2
+  checksum: 33155cb0cfd9e81e44262ddd19c699cf84d9487c0280df0939611a91463e8cc359475c4f43e3952d2a4d83c830011e133253f23de27f39b154f60e1513b2232d
+  languageName: node
+  linkType: hard
+
 "@jupyterlab/nbformat@npm:^3.0.0 || ^4.0.0, @jupyterlab/nbformat@npm:^3.0.0 || ^4.0.0-alpha.21 || ^4.0.0, @jupyterlab/nbformat@npm:^4.4.9":
   version: 4.4.9
   resolution: "@jupyterlab/nbformat@npm:4.4.9"
@@ -3664,9 +3676,9 @@ __metadata:
   linkType: hard
 
 "@types/emscripten@npm:^1.39.6":
-  version: 1.41.2
-  resolution: "@types/emscripten@npm:1.41.2"
-  checksum: b0321eb7211f23801e886a7fbbd12e105b357eea5bb32ab13617d8cd04946a48a80b34ee7fe075344e76859753af2279969f7a322dda23bfd328bcfdf339a100
+  version: 1.41.4
+  resolution: "@types/emscripten@npm:1.41.4"
+  checksum: e7776acdfe3e95d43ff301eadf8cb21df0eb16395db02e1c4aa1646f01a53e2be5e375935f16123ac4432c5e720db395497a8ef45cf20ef962fa67e3456e556b
   languageName: node
   linkType: hard
 
@@ -3789,13 +3801,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mathjax@npm:^0.0.37":
-  version: 0.0.37
-  resolution: "@types/mathjax@npm:0.0.37"
-  checksum: 8fe8f0dac3271a848dc0070c49ec8604c53abdc0a442308e357f215ed4d68102ed5e57e2f989cde447ebcf929efd2bc64b5a986b159c5cb50963546aa20d1a81
-  languageName: node
-  linkType: hard
-
 "@types/minimatch@npm:*, @types/minimatch@npm:^3.0.3":
   version: 3.0.5
   resolution: "@types/minimatch@npm:3.0.5"
@@ -4569,6 +4574,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xmldom/xmldom@npm:0.9.8":
+  version: 0.9.8
+  resolution: "@xmldom/xmldom@npm:0.9.8"
+  checksum: f8d16ad3c8083312575850fa4f2c13a2b884a37021dbb0146c6b2575bd3ddbf4c900530b49a55a7f62088ecf9809173fd7138985e7e58ddab786578970e09c59
+  languageName: node
+  linkType: hard
+
 "@xtuc/ieee754@npm:^1.2.0":
   version: 1.2.0
   resolution: "@xtuc/ieee754@npm:1.2.0"
@@ -5696,9 +5708,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1, caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000792, caniuse-lite@npm:^1.0.30000805, caniuse-lite@npm:^1.0.30001746":
-  version: 1.0.30001750
-  resolution: "caniuse-lite@npm:1.0.30001750"
-  checksum: 4a50a24ceed75cde8a8cd8b370a8c044463c26cc171eb30d1e738cd55b328c599b6e2602ec79e3e9d3b15d56e3cc980f02dd2f82784f91410544fa49c6d09cad
+  version: 1.0.30001751
+  resolution: "caniuse-lite@npm:1.0.30001751"
+  checksum: d11e25c44e40c21e7b7492a25c9fd60f4c04e94aa265573f7c487666f5e1b5ca3ed09d09560336f959237063616255cb294d415511bb6cf0486eb2cb6a3a4318
   languageName: node
   linkType: hard
 
@@ -6083,6 +6095,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:13.1.0":
+  version: 13.1.0
+  resolution: "commander@npm:13.1.0"
+  checksum: 8ca2fcb33caf2aa06fba3722d7a9440921331d54019dabf906f3603313e7bf334b009b862257b44083ff65d5a3ab19e83ad73af282bd5319f01dc228bdf87ef0
+  languageName: node
+  linkType: hard
+
 "commander@npm:^10.0.1":
   version: 10.0.1
   resolution: "commander@npm:10.0.1"
@@ -7627,6 +7646,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esm@npm:^3.2.25":
+  version: 3.2.25
+  resolution: "esm@npm:3.2.25"
+  checksum: 978aabe2de83541c105605a6d60a26ed8e627ef6bb0a7605fe15a95bbdea6b8348bd045255cb22219c054dd09a81a94823df00843d9e97f42419c92015ce3a64
+  languageName: node
+  linkType: hard
+
 "espree@npm:^9.6.0, espree@npm:^9.6.1":
   version: 9.6.1
   resolution: "espree@npm:9.6.1"
@@ -11108,6 +11134,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mathjax-full@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "mathjax-full@npm:3.2.2"
+  dependencies:
+    esm: ^3.2.25
+    mhchemparser: ^4.1.0
+    mj-context-menu: ^0.6.1
+    speech-rule-engine: ^4.0.6
+  checksum: 6fbccb9338e1fbf686202d924666d79ac9eb658157c1c8102ba018672188978c4cacfb1b6f65adf7d2d51dc79535ff3e32ba86b15e66d3011dda2ab99562d90d
+  languageName: node
+  linkType: hard
+
 "media-typer@npm:0.3.0":
   version: 0.3.0
   resolution: "media-typer@npm:0.3.0"
@@ -11169,6 +11207,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mhchemparser@npm:^4.1.0":
+  version: 4.2.1
+  resolution: "mhchemparser@npm:4.2.1"
+  checksum: 6dd7e3926befc74d26cf7b44b9e5ff7295e142bffc48a60bd225d5a30d525354afb70d23fc4fdb8f46178099ab98a66a57a6131dcb0f410264cfd2b9ad4af4b7
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
@@ -11470,6 +11515,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mj-context-menu@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "mj-context-menu@npm:0.6.1"
+  checksum: 7a036026538662cac9619b760fade98681618c3ddf417cb36eddb7c28a937baf257c56fd0b6318738419e738ba01a00bcb3790b324885fd6edbae03fb0a2c986
+  languageName: node
+  linkType: hard
+
 "mkdirp-infer-owner@npm:^2.0.0":
   version: 2.0.0
   resolution: "mkdirp-infer-owner@npm:2.0.0"
@@ -11773,8 +11825,8 @@ __metadata:
   linkType: hard
 
 "node-gyp@npm:latest":
-  version: 11.4.2
-  resolution: "node-gyp@npm:11.4.2"
+  version: 11.5.0
+  resolution: "node-gyp@npm:11.5.0"
   dependencies:
     env-paths: ^2.2.0
     exponential-backoff: ^3.1.1
@@ -11788,14 +11840,14 @@ __metadata:
     which: ^5.0.0
   bin:
     node-gyp: bin/node-gyp.js
-  checksum: d8041cee7ec60c86fb2961d77c12a2d083a481fb28b08e6d9583153186c0e7766044dc30bdb1f3ac01ddc5763b83caeed3d1ea35787ec4ffd8cc4aeedfc34f2b
+  checksum: 6cc29b9d454d9a684c8fe299668db618875bb4282e37717ca5b79689cc5ce99cd553c70944bb367979f2eba40ad6a50afaf7b12a6b214172edc7377384efa051
   languageName: node
   linkType: hard
 
 "node-releases@npm:^2.0.21":
-  version: 2.0.23
-  resolution: "node-releases@npm:2.0.23"
-  checksum: dc3194ffdf04975f8525a5e175c03f5a95cecd7607b6b0e80d28aaa03900706d920722b5f2ae2e8e28e029e6ae75f0d0f7eae87e8ee2a363c704785e3118f13d
+  version: 2.0.25
+  resolution: "node-releases@npm:2.0.25"
+  checksum: 9a23149cf3f6778e62440b1f26f91927aff06c3606a29996f3d196c7c0f5e31c17c24c324b5ef1f571cebef6b5a8db9adce9c09381ca271bc6422aac91463f75
   languageName: node
   linkType: hard
 
@@ -15037,6 +15089,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"speech-rule-engine@npm:^4.0.6":
+  version: 4.1.2
+  resolution: "speech-rule-engine@npm:4.1.2"
+  dependencies:
+    "@xmldom/xmldom": 0.9.8
+    commander: 13.1.0
+    wicked-good-xpath: 1.3.0
+  bin:
+    sre: bin/sre
+  checksum: 437e70f6f6a08b35d5339467427d6a74eecf6c1f4a74e551b2c18ad2315c1f6a89ecb801d02c49e92b30df709a3a8e08ad75ae1095c0224c2cd0fddf5f982de9
+  languageName: node
+  linkType: hard
+
 "split2@npm:^3.0.0":
   version: 3.2.2
   resolution: "split2@npm:3.2.2"
@@ -16798,6 +16863,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wicked-good-xpath@npm:1.3.0":
+  version: 1.3.0
+  resolution: "wicked-good-xpath@npm:1.3.0"
+  checksum: 1aa84bd57426aa07f95d7eca0b0410e841b8e7a35248c9404fa235eaf6a0932c811a96cbdc763c3df18ab76c7644fd8e807d8f185146154d3fc6baf554dcc7e3
+  languageName: node
+  linkType: hard
+
 "wide-align@npm:^1.1.5":
   version: 1.1.5
   resolution: "wide-align@npm:1.1.5"