リアルタイム版ScrapCalc
ページを書き換えるたびに再計算が走る
計算結果は右端に表示するようにした
top-level awaitを有効にした
まさかの
fetch が可能
2021-08-02 14:57:43 表示結果を少しだけ見やすくした
実装したいこと
実行時エラーの表示
throttleで間引く
[% JSON.stringify(await (await fetch("/api/pages/villagepump?limit=2")).json(), null, 2)] のような式が書き込まれたページで編集すると、文字が変更されるたびにネットワーク通信が発生してしまう……そもそもScrapCalcでAPI叩くなよ
a = 100
b = 200
a + b
(()=>{const c = 100; return a+b+c})()
Date()
JSON.stringify(scrapbox.Page.lines.length)
JSON.stringify(await (await fetch("/api/pages/villagepump?limit=2")).json(), null, 2)
script.jsscrapbox.on('lines:changed', update);
update(); // 初期化
function update() {
const code = `(async () => {${strict()}})();`;
//console.log(code);
const sneaky = Function(code);
sneaky();
}
const code = \ (async () => {${strict()}})();\ ; top level awaitできなくてだるいなーと思ってたので助かる
盲点だった
それはよかったです
でもtop level awaitって何に使うんだろう？
ScrapJupyterとかでさっとawaitしたいとき
thenでかくのeditorじゃないとだるい
やろうとおもったけどglobalスコープじゃなくなっちゃうからセルをまたいだ変数が使えなくなってしまう、、、ショボーン
window.d = 100と毎回書くか、scriptの方で自動的に
window. を使うかのどちらかでしょうね window.jupyterStorage のような適当なglobal変数を生やして、そこに入れるようにするのも手Firefoxだと
eval() がstrict modeになっているぽかったので、Page MenuからScrapCalcを動かすにある回避策を用いたscript.jsfunction strict(){
// 一旦リセット
document.querySelectorAll('span[data-id="scrapExec-calculated"]')
.forEach(span => span.remove());
const commands = [...document.querySelectorAll('.deco-\\%')]
.map((expr, index) => {
// 全角 ［ を半角 [ にする
let text = expr.innerText.replace(/［/g,'[').replace(/］/g,']');
// 記法がむき出しになっていた場合の処理
if (expr.closest('div.line').classList.contains('cursor-line')) {
text = text.slice(3, -1);
}
// decodeできるときだけdecodeする
try {
text = decodeURI(text);
} catch(e) {
if (!(e instanceof URIError)) throw e;
}
const id = expr.closest('div.line')?.id;
return `document.getElementById('${id}')?.insertAdjacentHTML?.(`
+ "'beforeend', "
+ `\`<span data-id="scrapExec-calculated" style="position:absolute;top:0;right:0;font-style:italic;font-weight:bold;word-wrap:break-word;white-space:break-spaces;max-width:30vw;">`
+ "${" + text + "}"
+ "</span>`"
+ ");";
});
return commands.join("\n");
}