ScrapRun

コードブロックなんでも実行script

特徴

コードブロックを隠してpreviewerのみだす

コードブロックにカーソルが侵入したときのみ、コードブロックを表示する

https://gyazo.com/1d50ee6927f7939fb04de9297dc5783d

コードブロックの処理方法は外部から指定する

大抵のことはできるはず

既定で用意してあるprevewer

SVG

https://gyazo.com/64ff48f5c85f737963013d08cf3e1896

PlantUML

https://gyazo.com/464f96d9b30f97fdf6e10380fbecd210

GLSL

https://gyazo.com/f3cfdb5aa4e4ddf2d7f1a9b933c35eb8

使い方

installation

簡単な方法

code:js

import { 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 },

]});

それ以外

ただし、コードのコピペは事実上不可能です

本コードはクソデカwasmバイナリをbase64エンコーディングして無理やり取り込んであるので、数百KBもの大きさがあります

しかもその殆どが1行に詰め込まれているので、scrapboxに貼ると行折返しの計算でbrowserが固まります

configuration

詳しくはソースコードの型定義を参照

code:2.js

import { 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 },

]});

プリセットの実装状況

非同期周りはちょっと怪しいかも

TS→bundleして実行

preview方法を選べるようにする

✅TeX→hot reloadつきpreview

✅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を作ることもできる

着想

コードブロックの監視とUIは全く同じなので、基幹部分を共通化させ、コードブロックの処理方法だけカスタマイズできるようにすればいいと思い立った

実装したいこと

✅読み込み中表示は2秒経過後に表示することにする

✅読み込み中表示のかわりに、ログを流す

そっちのほうが進捗がわかりやすい

現状だと行が消えるので、行の付近をクリックしても編集状態に移行できない

行の高さの合計とpreviewerの高さに食い違いがあるとき困らないか？

ページ遷移時に前ページのpreviewが消えずに残ってしまっていた

コード実行をpreviewerの一つとして提供する

code:mod.ts

code:worker.ts

prototypes