ScrapBubble

Last updated Dec 16, 2022 Edit Source

が作ってるやつ

• /programming-notes/ScrapBubble@0.2.0

• さんのScrapScriptがベース

• 

• リンクを吹き出し表示する + リンクホバーでページの内容を表示する、を組み合わせたもの

  • 表示されているページのリンクをホバーでさらに先のページまで見れる
  • しかも他プロジェクトのリンクにも飛べる
    • 0.2.0では飛べるプロジェクトをホワイトリスト方式で制限しました

• Reactの概要を理解したので、改めてコード読んだ上で最新版を導入しようかな
  • 理解した上で導入しておきたい
  • ちなみにReactとは型定義が若干異なります
    • ReactではなくPreactを使っている
    • 型定義以外はほぼ一緒です
• GitHub - takker99/ScrapBubble: Show n-hop link destination pages beyond projects
  • 思ったよりでかかったw
  • directoryで階層構造を作るのをやめたらこうなった
  • だいたい1ファイル1関数で書いているので、ファイルサイズはそんなに大きくないはずです
    • なるほど
• そもそもScrapboxのhoverとかのイベントをどう拾ってるんだ?
  • handlePointerEnterで呼ばれるコードが見つからない
    • usePromiseSettledAnytimesが理解できないな
  • あ〜、わかったかも
    • waitPointerEnterはPromiseを返す
    • そのPromiseをresolveさせる関数は、usePromiseSettledAnytimesのresstateが持つ
    • その上で、そのresstateはhandlePointerEnterに代入される
    • だから、
      • handlePointerEnterを呼ぶ
      • -> waitPointerEnterというPromiseがresolveされる
      • -> await waitPointerEnterで止められてた処理が再開する
    • ってことか
    • そんでもって、waitPointerEnterでせきとめられるループがずっと回っていると
    • なぜevent = await waitPointerEnter();ができる?
      • handlePointerEnterの引数にeventを持たせておけば、Promise.resolve(event)ということになる
      • Promise.resolveの引数はconst x = await Promise()で代入できる
      • なるほど〜〜
  • 仕組みは理解
    • 不思議な実装だな
      • ループのせき止めを解除する形でEventに反応するのはなぜ?
      • Promiseを挟むのはなぜ?
    • 今回このような実装をするメリットはほとんど有りません
      • じゃあなんでこんな事したかと言うと、[/miyamonz/async awaitで何かを待つような処理を同期的に書く]( https://scrapbox.io/miyamonz/async awaitで何かを待つような処理を同期的に書く)に感銘を受けて真似っこしたくなっただけ……
      • 一応一点だけ利点っぽいものがあります
        • ループが一度に一つしか実行されない
          • event = await waitPointerEnter();以降のループを処理している間にきたpointerenterは全て無視される
          • 普通にaddEventListener("pointerenter", async (e) => {/*...*/})としてしまうと、以前のcallbackが実行し終わる前に次のcallbackが実行し始めるかもしれない
        • ただこのprogramでこんな保証を取る必要があるかというと疑問だったりする……
        • なるほど🙏
  • このあたりを参照
    • /takker/async-awaitでeventを同期的に書いてみる
    • /takker/getPromiseSettledAnytimes

• UserScriptでそこまでやるか..!というツール

  • ReactみたいなのをUserScriptで動かしているという理解でいいのかな
    • ですです
    • 軽量版ReactのPreactをUserScriptにぶちこんでいます
      • 無印のScrapBubbleの方は、この辺も自力で実装してて辛かった
  • Scrapboxの各要素（コードブロックとかGyazo表示とか動画表示とか）を全部自力で再実装している..?
    • 自力ですね
    • JSXっぽいやつで簡単にUIを構築できるのでそんなに難しいことじゃないです
      • CSSの調節がちょっと面倒かも

• コードベースが自由参加できる /programming-notesなのが怖いなーという気持ち

  • [/takker/UserScriptをbundleするDeno script]( https://scrapbox.io/takker/UserScriptをbundleするDeno script)でまとめて自分のprojectにコピペすれば、それ以降悪意のあるコードが混入することはありません
    • それ以前に混入してたら……どうしようもない
    • なるほど!!
      • （至れり尽くせり、すごい）

• 今の所特にスマホ/iPadで使いたいとは感じていないので、TamperMonkeyでメインPCに導入した

  • どんなプロジェクトでも動くように改変した（自分のプロジェクト除外判定を省いた）