MathJaxをデバッグしてJavaScriptの理解を深める ページ2

VScodeで簡易WebServerの元でデバッグに戻る。

概要

　MathJaxをデバッグしてJavaScriptの理解を深めるの続きです。

[1] [2] [3]

t.defaultReady

　

e.MathJax.config.startup.ready() { t.defaultReady d() }

　d()は以下のような関数です。

function d() {
  var e, r;
  t.input && t.output && m();
  var n = t.output ? t.output.name.toLowerCase() : "";
  try {
    for(var i = o(t.input), s = i.next(); !s.done; s = i.next()) {
      var a = s.value,
        l = a.name.toLowerCase();
      g(l, a), 
      b(l, a), 
      t.output && y(l, n, a)
    }
  } catch(t) {
    e = {
      error: t
    }
  } finally {
    try {
      s && !s.done && (r = i.return) && r.call(i)
    } finally {
      if(e) throw e.error
    }
  }
}

　n = 'chtml'(CHTML) で l = 'tex'(TeX) → 'mathml'(MathML)という値。a は input の値。 output 系の l を使った g や b という関数。 output、input両方の l n を使った y という関数を実行する。いずれも a の input 値 を引数にしている。

　g はこんな関数。

function g(r, n) {
  var o = e.MathJax._.core.MathItem.STATE;

  e.MathJax[r + "2mml"] = function(e, r) {
    return void 0 === r && (r = {}), 
           r.end = o.CONVERT, 
           r.format = n.name, /* TeX → MathML */
           h(t.document.convert(e, r))
  }, 
  e.MathJax[r + "2mmlPromise"] = function(e, r) {
    return void 0 === r && (r = {}), 
           r.end = o.CONVERT, 
           r.format = n.name, /* TeX → MathML */ 
           l.handleRetriesFor((function() {
             return h(t.document.convert(e, r))
           }))
  }
}

　で、e.MathJax._.core.MathItem.STATE は、以下のような値。 o に取り込まれます。第一引数 r は Input の 'tex'、第二引数 n は Input 系のオブジェクト n.name は 'TeX' のような値です。

{
  UNPROCESSED: 0,
  FINDMATH: 10,
  COMPILED: 20,
  CONVERT: 100,
  METRICS: 110,
  RERENDER: 125,
  TYPESET: 150,
  INSERTED: 200,
  LAST: 10000,
  CONTEXT_MENU: 170,
  ASSISTIVEMML: 153,
}

　e.MathJax['tex2mml'] と e.MathJax['tex2mmlPromise'] に 関数を格納するのがこの g 関数の役割のようです。o.CONVERT: 100 が r.end に格納される部分がありますが、どのように使われるのかは、この時点ではあまりわかりません。

　次に b が呼ばれます。以下のような関数。

b(t, r) {
  e.MathJax[t + "Reset"] = function() {
    for(var t = [], e = 0; e < arguments.length; e++) 
      t[e] = arguments[e];
    return r.reset.apply(r, s([], i(t), !1))
  }
}

　e.MathJax['texReset'] に関数を格納するのがこの b 関数の役割です。格納した関数がどのように使われるかは、やはりこの時点ではわかりません。 引数の t と 取り込んだ関数の t は別物です。呼び出した時の引数を順次格納していくのに使われているようです。Reset とつくくらいですから、きっと呼び出されたら初期の表示状態にもどるんでしょう。おそらく。

　や、でも、やっぱり関数名が1文字だったり変数名が1文字なのは、理解に苦しむ。何がしたいのか、まったく全貌が見えてこない。リセットする関数が b で変換する関数っぽいのが g とな。何も想像できない。これメンテナンスできる人いるの？ってぐらいすごい。でも更新されてたりするってことはわかってる人いるんだろうな。難しい。この世界にこのプログラムを読み解ける人がいるってことが信じられない。スーパープログラマ中のスーパーだな。この優秀な頭脳が世界にはいくつも存在していて、回ってるのか。恐るべし。

　続いて y です。以下のような関数です。r が tex、n が r が chtml

y(r, n, o) {
  var i = r + "2" + n; /* tex2chtml */
  e.MathJax[i] = function(e, r) { /* e.MathJax['tex2chtml'] */
    return void 0 === r && (r = {}), 
           r.format = o.name, /* TeX → MathML */
           t.document.convert(e, r)
  }, 
  e.MathJax[i + "Promise"] = function(e, r) { /* e.MathJax['tex2chtmlPromise'] */
    return void 0 === r && (r = {}), 
           r.format = o.name, /* TeX → MathML */
           l.handleRetriesFor((function() {
             return t.document.convert(e, r)
           }))
  }, 
  e.MathJax[n + "Stylesheet"] = function() { /* e.MathJax['tex2chtmlStylesheet'] */
    return t.output.styleSheet(t.document)
  }, 
  "getMetricsFor" in t.output && (e.MathJax.getMetricsFor = function(e, r) {
    return t.output.getMetricsFor(e, r)
  })
}

　基本的に関数を定義することが多い関数だったなぁ。何がしたいのかが全くつかめず、テンションダウン。うまいな。作ってる人。おいかけてる人に対してのメッセージを感じる。いなされてるな。サッカーのイメージだ。凄すぎて、ぜんぜんボールが取れない。

e.MathJax.config.startup.ready() { t.defaultReady.then }

　非同期処理の処理順序登録をする。この関数がおわったら、e.CONFIG.pageReady()関数を実行して、うまくいったら、t.promiseResolve()、失敗したら t.promiseReject(e) を実行する。

then((function() {
  return e.CONFIG.pageReady()
})).then((function() {
  return t.promiseResolve()
})).catch((function(e) {
  return t.promiseReject(e)
}))

　

t.getRoot

　ここまで読んで気づいたのだけど小説ってだいたい3500行くらいらしい。5万行。14倍。14冊。おわんねぇ。無理過ぎる。どこかでやめないとな。数式だらけの参考書を14冊読んでるのと同じことやってることになる。

　どこでやめるかは、後で考えるとして、次のような関数です。

t.getRoot = function() {
  var t = "//../../es5";
  if("undefined" != typeof document) {
    var e = document.currentScript || document.getElementById("MathJax-script");
    /* e = "<script id="MathJax-script" async="" src="../es5/tex-mml-chtml.js"></script>" */
    e && (t = e.src.replace(/\/[^\/]*$/, "")) 
    /* e.src = 'file:///C:/MathJax/es5/tex-mml-chtml.js' */
    /* e.src.replace(/\/[^\/]*$/, "") = 'file:///C:/MathJax/es5'
  }
  return t /* 'file:///C:/MathJax/es5' */
}

　 s.combineDefaults 関数の引数部で mathjax: c.getRoot() から呼び出されます。

　

t.checkVersion

　以下のような関数です。

t.checkVersion = function(n, o, i) { /* n = 'core', o = '3.2.2', i = 'core' */
  return t.versions.set(a.Package.resolvePath(n), r),
         !(!e.CONFIG.versionWarnings || o === r) && 
         (console.warn("Component ".concat(n, " uses ").concat(o, " of MathJax; version in use is ").concat(r)), !0)
}

　a.Package.resolevePath('core') = "file:///C:/MathJax/es5/core.js" で、 r = '3.2.2'、e.CONFIG.versionWarnings = true という感じでここでは、 バージョンチェックで、問題なければ、!(!e.CONFIG.versionWarnings || o === r) が false になって、最後の行にあるようなエラー警告が出ない仕組みです。

　最後の方にあるこんな関数から呼ばれます。MathJax.loader && MathJax.loader.checkVersion("core", e.VERSION, "core"), (0, t.combineWithMathJax)({ … }) のところです。

　

t.pathFileters

　次はこんな命令が処理されます。u.FunctionList は MathJax全体にわたって膨大な関数を管理しているオブジェクトです。それを t.pathFilters に格納されます。

t.pathFilters = new u.FunctionList, 
t.pathFilters.add(e.PathFilters.source, 0), 
t.pathFilters.add(e.PathFilters.normalize, 10), 
t.pathFilters.add(e.PathFilters.prefix, 20)

　u.FunctionList は以下のような構造になっています。全部書くとMathjaxのほぼすべてのコードを貼り付けるのと変わらないことになるので、だいたいこんな感じっていうのを示します。

u.FunctionList = 
{ ƒ :
  { prototype: t {constructor: ƒ, execute: ƒ, asyncExecute: ƒ},
    name: 'e',
    Scopes: [ 0 : { t: ƒ},
              1 : { n: ƒ, o: ƒ, i: ƒ, s: ƒ, a: ƒ},
              2 : { __webpack_exports__: ƒ,
                    __webpack_module_cache__: {235: {}, 265: {}, 3282: {} …
                    __webpack_modules__: {50: ƒ, 91: ƒ, 94: ƒ, 95: ƒ, …  
                    __webpack_require__: ƒ __webpack_require__(t){ … },
              },
              3 : { n: ƒ, o: ƒ, i: ƒ, s: ƒ, a: ƒ},
            ]
   }
}
  

　

　

　

　

ページ

• MathJaxをデバッグしてJavaScriptの理解を深める
• MathJaxをデバッグしてJavaScriptの理解を深める ページ3

　

関連情報

　MathJax

　

VScodeで簡易WebServerの元でデバッグに戻る。