@takker/ScrapJupyter
ScrapJupyterの実装
takker99/ScrapJupyter
Installation(easy)
このリンクを押してscrapbox json dataを取得する
code:template(txt)
@takker/ScrapJupyter-min
/takker/@takker/ScrapJupyterのbundle済みconde
scrapbox-bundler @URL@を使って生成されました
使い方
以下を自分のページに書いて下さい(@projectはproject nameに置換)
code:js
import { setup } from "../@takker%2FScrapJupyter-min/mod.js";
// 0.24.0
const WASM_URL = "https://scrapbox.io/files/67344295032adf96d1e4c276.wasm";
const WORKER_URL = "https://scrapbox.io/api/code/@project/@takker%2FScrapJupyter-min/worker.js";
setup(
await WebAssembly.compileStreaming(await fetch(WASM_URL)),
WORKER_URL,
);
code:mod.js
@CODE@
code:worker.js
@https://scrapbox.io/api/code/takker/esbuild-wasm-no-blob/worker.ts@
生成したjsonをimportし、ページの指示に従って設定する
https://scrapbox.io/files/67344295032adf96d1e4c276.wasm は、なるべく自身のaccountにコピーしたものを代わりに使ってくださいtakker.icon
takker.iconのはいつ消しちゃうかわからないので
installation(advanced)
esbuild-wasm-no-blobのworker.tsをbuildし、どこかのコードブロックに貼り付ける
wasmファイルは自分のアカウントでなるべくuploadすること
/takker-dist/esbuild-wasm-no-blobにあるwasmファイルをコピーする
↓をbuildして、自分のページのscript.jsから読み込めるようにする
code:js
import { setup } from "./mod.ts";
// 0.20.1
const WASM_URL = "https://scrapbox.io/files/65eac330d577560024496909.wasm";
/** worker.tsをbuildしたコードを貼り付けたコードブロックのURLを入れる */
const WORKER_URL = "";
setup(
await WebAssembly.compileStreaming(await fetch(WASM_URL)),
WORKER_URL,
);
2024-07-29
18:56:57 ✅️scrapbox-bundlerで複数コードを一度にbuildできるようにしたのにあわせ、worker codeとUI codeを一つのページにまとめるようにURLの設定を変えた
2024-06-30
13:31:43
LoadInfoにloaderを入れる
https://github.com/takker99/ScrapJupyter/pull/41
scrapbox-bundlerで使う際に必要になった
コンソールにツリーでdeno infoと同等のimport graphを表示する
https://github.com/takker99/ScrapJupyter/pull/40
2024-05-07
09:41:44 説明が最新ver.と食い違っていたので修正
2022-01-10
❌esbuild-wasmのversionを上げつつ改造する (@takker/ScrapJupyter)
2021-08-30
19:16:30 flex-flow: columnでボタンの要素を縦に並べるようにした
横に並べると、statusを表示するボタンがeditorと被ってうまくクリックできない
known issues
たくさんコードブロック記法を使っているページを編集するとfreezeする (@takker/ScrapJupyter)
ボタンがtelomereと被って押しにくい (@takker/ScrapJupyter)
⬜import.meta.urlを使えるようにする (ScrapJupyter)
fetchの進行状況を読み取れない
download状況をstatus-bar (scrapbox)辺りに出したい
スクショ撮りたい
|がタイトルに含まれているページだとコードを実行できなくなる?
エラーは出ないのだが、何も実行されない
あとで条件を調べる
✅️tsなど、拡張子なしのコードブロック記法を実行できてない?
dependency graphの出力がバグってる
無限エラーになっている
一旦omitしよう
https://github.com/takker99/ScrapJupyter/pull/51
実装したいこと
@takker/ScrapJupyterのinstallを簡単にする
UI描画にPreactを使う?
書くのは確かに楽になるけど、コードサイズが増えるな……
といっても4KBくらいだから大したことではないか
複数のrootにreactをrenderすることができるならやるかも
Function()で実行するcodeにsource mapをつける
✅esbuildの更新
esbuild-wasm-no-blobを使う
2023-08-16 18:57:33 #8で実装完了
複数のscriptの実行状況を閲覧できるようにする
esbuild.wasmの読込中表示をstatus-bar (scrapbox)に出す
⬜️esbuild.wasmをCache (DOM)にいれておく(@takker/ScrapJupyter)
⬜support import map (@takker/ScrapJupyter)
ScrapJupyterに追加したいこと
ESModulesをcacheする
https://github.com/takker99/ScrapJupyter/pull/31
一度bundleしたコードを使い回す (@takker/ScrapJupyter)
RemoteLoaderをesbuild_deno_loaderに置き換える
Denoをmockで提供すれば、web browserでも動かせるとわかった
esbuild_deno_loaderをweb browserで動かす
あとはonLoaderを提供するpluginだけ自前で書けばいい
source code
workerコードは/takker-dist/esbuild-wasm-no-blobのworker.jsを使う
esbuild-v0.24.0.wasm
code:mod.ts
export * from "https://raw.githubusercontent.com/takker99/ScrapJupyter/v1.7.5/app.ts";
#2024-11-13 15:09:40
#2024-07-29 18:57:39
#2024-07-16 11:29:12
#2024-06-30 13:32:49
#2024-06-13 20:05:14
#2024-05-07 09:42:58
#2024-04-16 12:21:57
#2023-08-16 19:56:52
#2023-01-12 19:41:09
#2022-12-13 09:23:43
#2022-01-24 06:25:27
#2021-01-10
#2022-01-09 21:55:48
#2021-12-31 06:05:19
#2021-11-15 23:20:46
#2021-09-15 21:28:56
#2021-09-14 17:01:12
#2021-09-05 21:29:55
#2021-09-04 15:45:07
#2021-08-30 18:40:12