ScrapRun
コードブロックなんでも実行script
様々なコードブロック記法を実行できる
特徴
コードブロックを隠してpreviewerのみだす
コードブロックにカーソルが侵入したときのみ、コードブロックを表示する
CSSだけで実装した
:has()をフル活用した
コードブロックの処理方法は外部から指定する
大抵のことはできるはず
既定で用意してあるprevewer
SVG
PlantUML
GLSL
使い方
installation
簡単な方法
↓を自分のscript.jsから読める場所に書き込む
jsimport { setup, previewSVG, previewGLSL, previewPlantUML } from "../../takker-dist/ScrapRun-min/mod.js";
setup({ compilers: [
{ when: /(?:^|\.)svg$/, compile: previewSVG },
{ when: /(?:^|\.)glsl$/, compile: previewGLSL },
{ when: /(?:^|\.)p(?:lant)?uml$/, compile: previewPlantUML },
]});それ以外
例によってscrapbox-bundlerとかでbundleしたりesbuildで直接bundleしたりすればOKです
ただし、コードのコピペは事実上不可能です
本コードはクソデカwasmバイナリをbase64エンコーディングして無理やり取り込んであるので、数百KBもの大きさがあります
しかもその殆どが1行に詰め込まれているので、scrapboxに貼ると行折返しの計算でbrowserが固まります
そのため、scrapbox json dataでscrapboxに取り込む必要があります。
$ deno run -r=https://scrapbox.io -A https://scrapbox.io/api/code/takker/deno_bundleの代替コード/json.ts https://scrapbox.io/api/code/takker/ScrapRun/mod.ts ScrapRun-minこのコマンドを実行すれば、
mod.js を含んだscrapbox json data形式のテキストが手に入りますこれをjson形式で保存してimportすれば、
ScrapRun-min/mod.js からコードを読み込めるようになりますサイズが大きいのは
previewPlantUML だけなので、もしPlantUMLのpreviewが不要であれば、これをimportから削除してtree shakingしていただければコピペできるサイズに収まりますconfiguration
compilers にpreview詳しくはソースコードの型定義を参照
2.jsimport { setup, previewSVG, previewGLSL, previewPlantUML } from "../../takker-dist/ScrapRun-min/mod.js";
setup({ compilers: [
{ when: /(?:^|\.)svg$/, compile: previewSVG },
{ when: /(?:^|\.)glsl$/, compile: previewGLSL },
{ when: /(?:^|\.)p(?:lant)?uml$/, compile: previewPlantUML },
]});プリセットの実装状況
Compile を自分で実装すれば、基本的にどんな機能も実装できる非同期周りはちょっと怪しいかも
ここにはが実装したいと思っているものを載せておく
TS→bundleして実行
これは@takker/ScrapJupyterと同じ
✅SVG→hot reloadつきpreview
preview方法を選べるようにする
これはモチベができたらやる
<svg> を直接埋め込む <img> として読み込む <iframe> にsvg fileとして読み込む✅TeX→hot reloadつきpreview
scrapbox-TikZjaxで詳しく解説
✅PlantUML→hot reloadつきpreview
❌mermaid→hot reloadつきpreview
標準実装されたので不要
HTML→hot reloadつきpreview
これでサクッとweb appを試すことができる
別タブで開いてもいいかも
wandbox→hot reloadつきpreview
wandboxにデータを送って結果を表示する
✅GLSL→hot reloadつきpreview
設計
coreとpluginに分ける
core
コードブロックの抽出
ボタンなどのUIの表示
コードブロックの更新監視
plugin
言語ごとの処理方法
userが独自のpreviewerを作ることもできる
着想
(構想)scrapboxでGLSLをpreviewするUserScriptのUIを考えているときに思いついた
ボタンクリックでコードブロックごとのpreviewの開始/終了を制御しようかと考えていたら、そのUIが@takker/ScrapJupyterとそっくりであることに気づいた
コードブロックの監視とUIは全く同じなので、基幹部分を共通化させ、コードブロックの処理方法だけカスタマイズできるようにすればいいと思い立った
実装したいこと
✅読み込み中表示は2秒経過後に表示することにする
✅読み込み中表示のかわりに、ログを流す
そっちのほうが進捗がわかりやすい
:has()を使わない
行数が多いページで編集したとき、CSS再計算に非常に時間がかかるケースがあった
Cursor.addChangeListener()でcursorの動きを追跡し、コードブロック内にいないときに非表示するようにする
display: none;ではなくvisibility: hidden;にするか？
現状だと行が消えるので、行の付近をクリックしても編集状態に移行できない
visibility: hidden;で当たり判定が復活するならこっちのほうがいいのだが……
行の高さの合計とpreviewerの高さに食い違いがあるとき困らないか？
ScrapboxのMermaid記法previewがどう実装しているか調べる必要あり
✅previewのみdebounceする
ページ遷移時に前ページのpreviewが消えずに残ってしまっていた
@takker/ScrapJupyterと統合する
コード実行をpreviewerの一つとして提供する
mod.tsexport * from "https://raw.githubusercontent.com/takker99/ScrapRun/0.4.1/mod.ts"worker.tsimport "https://raw.githubusercontent.com/takker99/ScrapRun/0.4.1/previewers/TikZ/worker.ts";prototypes
#2024-01-23 11:22:19
#2023-12-17 06:55:00
#2022-02-21 16:22:54
#2022-01-18 02:22:39
#2021-09-08 08:11:31