Stuff made by (takker):
-
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
.
- I don’t understand
- Ah, I think I got it.
waitPointerEnter
returns a Promise.- The function that resolves that Promise is held by the
res
state ofusePromiseSettledAnytimes
. - And that
res
state is assigned tohandlePointerEnter
. - 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 tohandlePointerEnter
, it becomesPromise.resolve(event)
. - The argument of
Promise.resolve
can be assigned withconst x = await Promise()
. - I see (blu3mo).
- If you pass the
- 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 afterevent = await waitPointerEnter();
is ignored. - If you simply use
addEventListener("pointerenter", async (e) => {/*...*/})
, the next callback may start executing before the previous callback finishes.
- Any
- But I wonder if there is a need for such a guarantee in this program…
- I see 🙏 (blu3mo).
- Only one loop is executed at a time.
- It’s a strange implementation.
- Refer to these for more information (takker):
- I can’t find the code that is called by
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).