Can't serve more than one webview per vite project

[tjcouch-sil]

Extension developers want to create more than one web view per extension. Because of how Vite bundles dependencies, this is not currently possible.

You can't copy dependencies into each web view separately. It seems Vite has rejected this request multiple times and is probably not going to do it. This means we can't really support multiple webviews per extension with our template right now. We have a few options:

1. Run a separate vite build for each web view (it's getting ridiculous at this point... maybe we should stop trying to do the watchers and just have a normal build step if we do this. Depressing)
2. Change to rollup. I have never used rollup (except nominally when playing with Svelte with a boilerplate) and really am not sure how powerful or easy-to-use it is.
   • Bundling in rollup?
   • Duplicating dependencies in rollup?
3. Change to webpack. I reeeeeeally don't want to do this right now, but maybe I'll have to bite the bullet.
4. Add some way to import extension files in the renderer. Sounds like a whole ton of work with significant complications. How will we make this process synchronous?

Conclusion: use webpack

[tjcouch-sil]

Quickly testing bundled extensions to prove the issue exists in them also proved successful, unfortunately.

I created a second React web view that imports papi-components (already imported in the other React web view), and vite failed to bundle them independently. It generates an import like n=require("../../../index.es-34ca5350.cjs"); in both web views and bundles the shared dependencies in another file.

[irahopkinson]

Err... don't we want it bundled like that and to get it working in WebViews? Otherwise if we have 100 WebViews all using papi-componets it will bundle 100 copies into each WebView, hmm... I guess we think we need it that way for security? Are we sure? Can't a shared component like that we available to all WebViews another way?

[tjcouch-sil]

What happens when you insert a script tag with src?
Could we import script tags as modules somehow in the middle of our require shim?

[tjcouch-sil]

Err... don't we want it bundled like that and to get it working in WebViews? Otherwise if we have 100 WebViews all using papi-componets it will bundle 100 copies into each WebView, hmm... I guess we think we need it that way for security? Are we sure? Can't a shared component like that we available to all WebViews another way?

Particularly with papi-components (or I suppose other libraries we can predict people will use a ton...? Maybe), we can and probably should serve it as external (recorded in #215. However, it's probably a forward-compatible change, so it's not a huge rush). However, there are many complications that would come with serving just any files in the browser. Might need to use a module loader or something, how would we resolve relative paths, etc. Just would be a bit complex. Probably worth thinking about, though!

[tjcouch-sil]

Regarding option 4 about loading modules in webviews:

Looks like synchronously loading modules pretty much absolutely requires using eval. Asynchronously, we could do at least some more, but this is going to be a challenge to get around. We would possible also need to demand that web view providers provide a path from their extension root to the webview file location, which is strange but possible. It would also block the dom since it is synchronous.

[tjcouch-sil]

paranext/paranext-extension-template@ed07cee
Tried rspack and decided against it for now:

• Looks like it doesn't have resolver plugins, which is how we get from web-view files to temp-webpack directory. Maybe we could use compiler plugins, but none of the hooks stand out to me https://www.rspack.dev/api/plugin-api
  • Looks like many hooks are not available, so some webpack plugins probably don't work
  • Alternatively, we could just tell people they have to specify the file path with temp-build in it (can't put .tsx)
• It does not support a function for entry, which is at least ok because it supports async functions. You don't get to create a new webview file and stay up this way, though
• Seems it doesn't create production code that works - the super issue is plaguing it. ES2020 doesn't fix the problem. Maybe we could have some after-build hook to change the comma to a semicolon. Maybe related to swc config https://swc.rs/docs/configuration/swcrc
• Sometimes stops making live changes...? Might be due to running build while running watch or something, but I couldn't reproduce. Might also have been happening with webpack; I don't remember
• Enough problems without benefits other than speed that it's risky
• Very young, though it is receiving a good amount of adoption
• May only be supported by one company that could drop support anytime
• Extension developers may be bringing in existing webpack code, which may be harder to port in if we're using rspack
• Attempted, and the drawpbacks seemed enough to outweigh the benefits for now paranext/paranext-extension-template@ed07cee

[tjcouch-sil]

Fixed the following as part of this work:
paranext/paranext-extension-template#18
paranext/paranext-extension-template#3
paranext/paranext-extension-template#17
#232

[tjcouch-sil]

PRs:
#311
paranext/paranext-extension-template#29