scrapbox-bundler
web browserで動くUserScript/UserCSSのbundler tool
UserScriptをbundleするDeno scriptとUserCSSをbundleするDeno scriptのbrowser version
使い方
設定画面で設定してから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 import mapがあるURLを指定する
url を基準とした相対パスを使える external 複数指定する場合は、
external=aaa.css&external=test.png などとする url を基準とした相対パスを使える❌️
output download : ファイルをダウンロードする newtab : 新しいタブで開く self (default): 同じタブで開く2024-07-27 廃止
代わりにbuild後のUIに、downloadやコピーボタンを乗せる
scrapbox-bundlerの今後の設計予定のイメージ図参照
メリット
terminalが不要
いちいちterminalを起動してコマンドを打つ手間を省ける
terminalを使えない環境 (mobile端末とか) でもbundleできる
あらかじめ設定したURLをscrapboxのページに貼り付けておけば、リンクをクリックするだけでbundleしたコードを取得できる
仕様とか
bundle や minify を指定しない場合は、TS→JSの変換を行うだけesbuild-wasmを使う
offlineでも使えるようになる
もっとも、http importで外部からソースを取得するケースがほとんどだろうから、offline対応してもあまりうまみはないのだが
output に応じてUIのradio buttonを切り替える ?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に表示する
bookmarklet生成モード
javascript:(async()=>{})() で囲んだものを出力するそのまま貼り付けられるよう、予めURLエンコーディングしておく
drag & dropで導入できるように、ボタンを設置しておくのもありかも
scrapboxのUserScript専用builderとして再構築すべきか？
それ以外の用途は、もうesm.shが担っている
scrapboxのUserScript作成支援に舵を切ったほうがいいのでは
想定
複数のJSやCSSをbuildし、指定したprojectの指定したpageの指定したcode blockに書き込む
JSR importのmodule解決をサポート
Semantic Versioningを見ていい感じに依存を解決する処理も入れる
UI
URLで生成
今まで通り、client側でbuildさせる
CLIで生成
hot reload的なこともできるようにする
esbuild-wasmの全コードをworker srcにしてしまうのは良くなかったかも
外部かユーザー定義の
fetch を注入することが難しくなる今はbuild.worker.tsでhard codingしている
build処理を@takker/ScrapJupyterから使いたいときに問題となる
バグ
url() に指定した画像やfontデータもbundleしようとしてバグるUserCSSをbundleするDeno scriptでも起きていた現象
うまいこと回避できないかな……
案
external: true として処理するこれでうまくいく
dependencyの階層が深いとUIが処理落ちする
dependency graphだけ、Reactの差分更新ではなく直接DOMを組み立てる方式にする？
一回の
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 と解釈されてしまうdecodeURIComponent()を通すとこうなってしまうみたい
URL parametersに
https://scrapbox.io/api/code/takker/@takker%25FScrapJupyter/mod.ts と与えてもだめ仕様として我慢するしかないか……
実装
開いたHTML上でesbuild-wasmを動かす
一応worker内で動かすか
HTMLファイルや使用するwasmファイル、取得したESModule/CSSなどはServiceWorker経由でCache (DOM)に保存する
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 の中身を取得している関連
まさかの類似ツール
動機が完全に同じ
拡張機能で実現しているのか～
中途半端にサーバーを経由する必要がないからこっちのほうがいいのかもしれない
PRしたくなってきたやばい
#2024-07-27 12:33:24
#2024-07-27 12:15:26
#2024-07-24 17:16:15
#2024-07-09 20:26:15
#2024-07-02 17:20:53
#2023-07-13 08:51:28
#2022-03-26 09:22:01
#2022-03-23 13:08:47
#2022-03-02 07:36:29
#2021-12-11 06:57:30
#2021-12-05 09:23:18
#2021-12-03 09:37:50
#2021-12-02 18:31:43
#2021-11-29 15:01:09
#2021-11-22 09:56:51
#2021-11-12 09:48:45
#2021-11-11 09:37:29
#2021-11-08 23:32:27
#2021-11-03 17:42:45
#2021-10-31 22:10:49