Hook problems when using Svelte

[maxchang3]

Thanks for your great work! @lisonge

Here is my problem:

I have a function that hooks EventTarget.prototype.addEventListener to a proxy function, which means I need to do it as fast as possible, also I set run-at to document-start. Before I do that without Svelte, It works well.

However, when I added Svelte to my project, I noticed that the hook action slowed down, possibly due to the extra compilation required by Svelte. Consequently, my hook became ineffective, and it runs after the something.addEventListener has already occurred, instead of before it.

When I run the production script by pnpm build directly, it works well because there is no compile time for users. However, this remains a problem during development. Is there a way to block page loading while compiling?

Any help will be appreciated!

[lisonge]

there is a compilation cache in vite. When the second visit, there should be no need to compile

can you show me example vite project ?

---

or maybe you can use dynamic import

// main.ts
do_hook();
import(`./App.svelte`);

[maxchang3]

import(`./App.svelte`);

dynamic import is the key, it works!

While attempting to create a minimal reproducible example, I found that the unexpected running order of my hook on development is a common occurrence even without Svelte, despite setting run-at to document-start. So Svelte is not the major cause.

The previous situation worked well may due to the large number of JavaScript scripts loaded by the site, which allowed the hook runs first. (The user script is for bilibili.com. and it's weird that it works well without any changing for now... )

Here is the MRE: https://github.com/MaxChang3/vite-plugin-monkey-hook-example.

I create a proxy hook the get value from a wheel event:

...
const evtWrapper: EventListener = (e) => {
    const proxy = new Proxy(e, {
        get: (obj, prop) => 'hook!'
    })
    return Reflect.apply(evt, thisArg, [proxy])
}
...
export const hook = () => {
    console.log('starting hook')
    EventTarget.prototype.addEventListener = new Proxy(orgin, { apply: applyHandler })
}

the test site website/index.html:

...
<script>
    console.log('starting addEventListener')
    console.log(document.addEventListener)
    document.addEventListener('wheel', (e) => {
        console.log(e.deltaY)
    })
</script>
...

The result is here:

1. Dev:
   
2. Production:
   

[lisonge]

you can use chrome-remote-interface delay script execution time

cd vite-plugin-monkey-hook-example
pnpm dev
# open chrome install it and close chrome

change main.ts

import "./app.css"
import { hook } from "./hook"
import App from "./App.svelte"

hook()

await new Promise((res) => setTimeout(res, 1200))
// wait document.body !=null

const app = new App({
    target: (() => {
        const app = document.createElement("div")
        document.body.append(app)
        return app
    })(),
})

export default app

startup preview server

cd vite-plugin-monkey-hook-example
# pnpm add http-server -g
http-server -p 5500

startup chrome

chrome --remote-debugging-port=9222

then use test-hook-network

cd test-hook-network
pnpm start

[maxchang3]

Thanks, that's a great idea! I really appreciate your help! 🙏🏻🥳