Asteroidについて
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を提供したい
- 編集内容を共有できると楽しいかも