ScrapBubble

Stuff made by (takker):

• /programming-notes/[email protected]

• Based on [@daiiz/daiiz]‘s ScrapScript

• 

• Combines displaying links in speech bubbles and showing the content of a page on link hover.

  • You can hover over the links to see pages further ahead.
  • And you can also navigate to links in other projects.
    • In version 0.2.0, the ability to navigate to projects is restricted by a whitelist (takker)

---

Now that I understand the overview of React, I think I’ll revisit the code and update it to the latest version.

• I want to have it installed after understanding it.

• By the way, React is slightly different in terms of type definitions (takker)

  • Instead of React, I’m using Preact.
  • Other than the type definitions, they are almost the same.

• GitHub - takker99/ScrapBubble: Show n-hop link destination pages beyond projects

  • It turned out to be bigger than I thought lol.
  • I stopped creating a hierarchical structure with directories, and this is what happened (takker).
  • I mostly write one function per file, so the file size shouldn’t be that big.
    • I see (blu3mo).

• How does it even capture events like hover in Scrapbox?

  • I can’t find the code that is called by handlePointerEnter.
    • I don’t understand usePromiseSettledAnytimes.
  • Ah, I think I got it.
    • waitPointerEnter returns a Promise.
    • The function that resolves that Promise is held by the res state of usePromiseSettledAnytimes.
    • And that res state is assigned to handlePointerEnter.
    • So,
      • handlePointerEnter is called.
      • -> The Promise waitPointerEnter is resolved.
      • -> The processing that was stopped by await waitPointerEnter resumes.
    • That’s how it works.
    • And then, if the loop that is stopped by waitPointerEnter keeps running,
    • why can event = await waitPointerEnter(); be done?
      • If you pass the event as an argument to handlePointerEnter, it becomes Promise.resolve(event).
      • The argument of Promise.resolve can be assigned with const x = await Promise().
      • I see (blu3mo).
  • I understand the mechanism (blu3mo).
    • It’s a strange implementation.
      • Why does it respond to events by releasing the loop?
      • Why use Promises?
    • There is almost no benefit to this implementation in this case (takker).
      • So why did I do this? It’s just because I was impressed by [/miyamonz/async awaitで何かを待つような処理を同期的に書く](https://scrapbox.io/miyamonz/async awaitで何かを待つような処理を同期的に書く) and wanted to imitate it…
      • There is one small advantage though.
        • Only one loop is executed at a time.
          • Any pointerenter that comes while processing the loop after event = await waitPointerEnter(); is ignored.
          • If you simply use addEventListener("pointerenter", async (e) => {/*...*/}), the next callback may start executing before the previous callback finishes.
        • But I wonder if there is a need for such a guarantee in this program…
        • I see 🙏 (blu3mo).
  • Refer to these for more information (takker):
    • /takker/async-awaitでeventを同期的に書いてみる
    • /takker/getPromiseSettledAnytimes

---

A tool that does so much with a UserScript..!

• Is it correct to understand that it’s running something like React with a UserScript?

  • Yes, exactly (takker).
  • I’m using the lightweight version of React, Preact, in the UserScript.
    • In the original ScrapBubble, I had to implement these things myself and it was tough.
  • Are you reimplementing all the elements of Scrapbox (such as code blocks, Gyazo display, and video display) from scratch?
    • Yes, I am (takker).
    • It’s not that difficult because I can easily build the UI with something like JSX.
      • Adjusting the CSS might be a bit troublesome though.

• I’m a bit scared that the code base is open for anyone to join /programming-notes.- If you copy and paste the [/takker/UserScriptをbundleするDeno script](https://scrapbox.io/takker/UserScriptをbundleするDeno script) into your own project, you won’t have any malicious code mixed in from that point on (takker).

  • If there was any code mixed in before that… there’s nothing you can do about it.
  • I see! (blu3mo)
    • (It’s amazing, they’ve thought of everything)

• For now, I don’t feel the need to use it on my smartphone/iPad, so I installed it on my main PC with TamperMonkey.

  • I modified it to work with any project (excluding my own project).