View on GitHub

quartz-transformer-mmlabc

quartz-transformer-mmlabc

issue 左ペインから自分自身のページを開なおすと五線譜が消えてしまうし、そのときconsoleには何も出力されない（ナビゲーションを検知できていない） #71

issues #71

補足情報

ブレインストーミング

公式

nav

デバッグloggerをTypeScript側に書いて、問題を可視化をする

  // ===== nav デバッグ可視化 =====

  function logNavDebug(where) {
    return function (e) {
      const ce = e

      const abcNodes = document.querySelectorAll('.abc-notation')
      const processed = document.querySelectorAll('[data-mmlabc-processed]')

      console.groupCollapsed('[nav @ ' + where + ']')

      console.log('event:', e)
      console.log('detail:', ce && ce.detail)
      console.log('target:', e.target)
      console.log('currentTarget:', e.currentTarget)

      console.log('abc-notation count:', abcNodes.length)
      console.log('processed count:', processed.length)

      if (abcNodes.length > 0) {
        const el = abcNodes[0]
        console.log('sample abc element:', el)
        console.log(
          'sample processed?',
          el.hasAttribute('data-mmlabc-processed')
        )
      }

      console.groupEnd()
    }
  }

  // capture → bubble → window
  document.addEventListener('nav', logNavDebug('document-capture'), true)
  document.addEventListener('nav', logNavDebug('document'))
  window.addEventListener('nav', logNavDebug('window'))

  // ===== 以上、nav デバッグ可視化 =====

LLMに生成させたもの

結論まとめ

現象

調査で確定した事実

1. DOM 差し替え
2. MutationObserver が反応
3. abcjs による五線譜描画が実行される
4. その後で nav イベントが dispatch される

根本原因

👉 設計として Quartz の SPA ライフサイクルと噛み合っていない

結論

採用する方針（推奨）

document 中央集権 + nav 主導

この構成は：

他の選択肢について

完全に公式コンポーネント方式に寄せる場合

Renderer / Transformer に寄せる場合

補足（ドキュメント化予定の注意点）

まとめ（短く）

いろいろ

事実確認したもの

特に致命的なパターン