scrapbox-bundler
使い方
設定画面で設定してからbuild
(未実装)
作るモチベがまったくない
使わないコードがずっとソースに載っていて、管理が面倒
使わないコードの型修正なんて不毛
URLを踏むと即buildする
https://scrapbox-bundler.vercel.app?url=:source&bundle
(旧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を基準とした相対パスを使える
❌️output
download: ファイルをダウンロードする
newtab: 新しいタブで開く
self(default): 同じタブで開く
2024-07-27 廃止
代わりにbuild後のUIに、downloadやコピーボタンを乗せる
メリット
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を指定できるようにする
warningsとerrorsをUIに表示する
javascript:(async()=>{})()で囲んだものを出力する
そのまま貼り付けられるよう、予めURLエンコーディングしておく
drag & dropで導入できるように、ボタンを設置しておくのもありかも
scrapboxのUserScript専用builderとして再構築すべきか？
scrapboxのUserScript作成支援に舵を切ったほうがいいのでは
想定
複数のJSやCSSをbuildし、指定したprojectの指定したpageの指定したcode blockに書き込む
UI
URLで生成
今まで通り、client側でbuildさせる
CLIで生成
esbuild-wasmの全コードをworker srcにしてしまうのは良くなかったかも
外部かユーザー定義のfetchを注入することが難しくなる
バグ
/icons/done.iconCSS中でurl()に指定した画像やfontデータもbundleしようとしてバグる
うまいこと回避できないかな……
案
/icons/pass.icon画像系はexternal: trueとして処理する
これでうまくいく
dependencyの階層が深いとUIが処理落ちする
一回のResolveInfo | LoadInfoにつき1回だけDOM更新するだけで済ませられる
元となるobjectをnestして持たせる必要もない
DOM構造を階層構造の情報とみなせばいい
2024-07-27 12:15:11 そもそも実装がおかしい
✅️一旦削除する
.cssが.txtと認識される？
.ts.jsになってしまうのを直す
使っているesbuildのversionを表示する
https://scrapbox.io/api/code/takker/@takker%2FScrapJupyter/mod.tsのような、percent encodingされた/が含まれているURLが、templateに埋め込む段階だとhttps://scrapbox.io/api/code/takker/@takker/ScrapJupyter/mod.tsと解釈されてしまう URL parametersにhttps://scrapbox.io/api/code/takker/@takker%25FScrapJupyter/mod.tsと与えてもだめ
仕様として我慢するしかないか……
実装
一応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したくなってきたやばい
