scrapbox-bundler
使い方
設定画面で設定してからbuild
(未実装)
URLを踏むと即buildする
https://scrapbox-bundler.vercel.app?url=:source&bundle&run
(旧URL:https://takker99.github.io/scrapbox-bundler)
e.g.
:urlに含まれている%2Fは/に変換されてしまうので、Scrapboxのタイトルなどで%2Fを使っている場合は更にencodeをかぶせて%252Fに置き換えておくこと
追加options
bundle
コードを1つにまとめる
minify
コードを最小化する
sourcemap
source mapを埋め込む
reload
cacheを無視する
importmap
urlを基準とした相対パスを使える
external
複数指定する場合は、external=aaa.css&external=test.pngなどとする
urlを基準とした相対パスを使える
メリット
terminalが不要
いちいちterminalを起動してコマンドを打つ手間を省ける
terminalを使えない環境 (mobile端末とか) でもbundleできる
あらかじめ設定したURLをscrapboxのページに貼り付けておけば、リンクをクリックするだけでbundleしたコードを取得できる
仕様とか
/icons/done.iconscrapboxのコードブロックやGithubのコードのURLを指定して実行する
bundleやminifyを指定しない場合は、TS→JSの変換を行うだけ
/icons/done.icon各種optionやbundle対象のソースURLはURL parameterから指定できる
/icons/done.iconclient sideでbundleする
/icons/done.iconcache機能つき
offlineでも使えるようになる
もっとも、http importで外部からソースを取得するケースがほとんどだろうから、offline対応してもあまりうまみはないのだが
/icons/done.iconCSS対応
/icons/TODO.iconURL parameteroutputに応じてUIのradio buttonを切り替える
/icons/done.icon?runでページにアクセスしてすぐbundleを開始できる
疑似的なserverless functionとして使える
reloadでESModuleを再読込する
Denoのように、特定のURLだけ再読込できるような仕組みもつけたい
private projectのコードも取得できるようにするつもりだが、方法は考え中
2021-11-03 17:37:22 やめた
実装したいこと
build Log
色を付ける
scroll barをつける
entryPointを使えるか?
URLを入れるとバグるんじゃないかと思ってstdinを代わりに使っているが、もしかしたらいけるかも?
scrapbox json dataの生成処理をworkerに移す
再読込対象のURLを指定できるようにする
javascript:(async()=>{})()で囲んだものを出力する
そのまま貼り付けられるよう、予めURLエンコーディングしておく
drag & dropで導入できるように、ボタンを設置しておくのもありかも
esbuild-wasmの全コードをworker srcにしてしまうのは良くなかったかも
外部かユーザー定義のfetchを注入することが難しくなる
バグ
/icons/done.iconCSS中でurl()に指定した画像やfontデータもbundleしようとしてバグる
うまいこと回避できないかな……
案
/icons/pass.icon画像系はexternal: trueとして処理する
これでうまくいく
templateを再読込できない
実装
一応worker内で動かすか
Frameworkは多分使わない
DOMをそのままいじるだけで十分だと思う
複雑になりそうだったらPreactを導入する
導入した
Server sideでやったほうがいい?
bundleが5秒以内に終わらないとVercelのserverless functionは強制終了するらしい
client sideでbundleするのが無難か。
https://takker99.github.io/scrapbox-bundlerに公開されるみたい?
あー、index.htmlはhttps://takker99.github.io/scrapbox-bundler/index.htmlに配置しないといけないのか……
JSとCSSへのパスを変えるか。
2021-11-11 12:45:54 deploy完了
deploy方法がかなり強引だが……
./index.htmlから./assetsの中身を取得している
関連
まさかの類似ツールtakker.icon
動機が完全に同じ
拡張機能で実現しているのか~
中途半端にサーバーを経由する必要がないからこっちのほうがいいのかもしれない
PRしたくなってきたやばい