https://asteroid.spring-raining.now.sh

• 元々自分用にPaper.js勉強用のライブエディタを作ろうとしたが、様々なライブラリを読み込んでより一般的な形で使えるように
• Jupyter NotebookのJavaScript版のようなWebアプリケーション
  • JavaScriptのスニペットとMarkdownを混在して入力することができる
  • 入力したJavaScriptは即座に結果が反映される

JSXのライブコーディングを実現する方法

• react-liveというライブラリを参考に、ライブコーディング機能を用意
  • AsyncFunction のconstructorにより、文字列から実行関数を動的に生成
  • bubleという軽量なトランスパイラでJSXに対応
• ブラウザのES Modulesのimport機能を使って、ESMに対応したライブラリなどを実行時に読み込む機能を追加

MDX（Markdown + JSX）

• 編集内容の保存やエクスポートのフォーマットとしてMDXを採用
  • ipynbはJSON形式で手書きには向かないため、あとから人間が編集できるようなフォーマットがよい
• MDXのアイディア自体はシンプルだが、意外と応用できる点が多い
  • Storybookはとても相性が良さそう
  • むしろJSXは使わなくてもMarkdownのloaderとして利用可能
• 実装にRemarkを採用しているのでparser側の拡張性はかなりあるが、最終的に出力されるJSをカスタマイズすることが少し大変
• どうしても出力先で利用される想定ライブラリがReactに偏っているので、Vue利用時はドキュメントがまだ少ない

今後やりたいこと

• ドキュメントやExamplesを整備してちゃんとリリースしたい
• Asteroidの出力したMDXをスタンドアロンで埋め込み可能なloaderを提供したい
• 編集内容を共有できると楽しいかも

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic