[HELP WANTED] Microfrontend/multi-project build setup

[ferferga]

Originally sourced from a review comment in #2001 in regards to some PRs opened by @endrl, @gibahjoe and @noaione

We want to keep everything in @jellyfin-vue/frontend isolated from plugins (like the Skip intro feature @gibahjoe worked on #1887). Ideally we're looking forward to a multi-project (no build flags like in your PR either) with npm workspaces or microfrontend setup. I'm not knowledgeable enough in how to properly architecture all of that and specially microfronteds, so I'm first trying to educate myself. Once I feel confident enough, I might open a discussion to gather some feedback or a PR. But still it's much appreciated (and will allow to be shipped faster) if we get outside contributors' help in the form of RFCs or PRs. The TLDR of the ideal thing would be:

• Vite projects that expand/merges with the "core" configuration (the one we have now) for build changes targeted at specific stuff. Right now 2 comes to my mind:

  • A one targeting Tauri for bundling overrides for Tauri-specific logic, like the download one at feat: add Media Info, Download, and Copy Stream URL to context menu #1962
  • The one with the small set of polyfills (as the one you wanted to add for TVs)

• Microfrontend architecture for features/specific components: That way, the "skip intro" button could be hooked by mounting it inside the video player's DOM and having access to the all the modules exposed by @jellyfin-vue/frontend (the main core)

All the building process should be orchestrated by an interactive CLI configurator (but also allowing headless for CI), which will configure everything for the developer

With the given examples, these are the configurations that come to my mind (& means that their configs will be merged):

• Core Vite project + Core Vue app
• Core Vite project + Core Vue app + Skip intro (microfrontend)
• Tauri Vite project & Core Vite project+ Core Vue app
• Tauri Vite project & Core Vite project+ Core Vue app + Skip intro (microfrontend)
• Polyfilled Vite project & Core Vite project + Core Vue app
• Polyfilled Vite project & Core Vite project + Core Vue app + Skip intro (microfrontend)

Hopefully this clear enough for a vision of what we want to achieve.

Let's keep all the discussions about this in this thread, so they can be located easily at all times. Any help is appreciated! 🙌💗

Additional context

single-spa's documentation is a really good thing to start reading about the possibilities microfrontends could give us for "jellyfin-vue plugins" while keeping the core "on-point" with the core features of server.

[ferferga]

In #2539, the @jellyfin-vue/tauri-runtime package of the monorepo is being created.

That package has a custom Vite config that replaces the current entrypoint of the application, allowing us to inject any code before the frontend is loaded.
For now on, this is good enough for all the cases described here:

• Media segments have been merged into Jellyfin core, so at some point they will be able to skip intros. It's just a matter of adding Media segments support in Vue.
• Polyfills for native Tauri features can be introduced by modifying globalThis or window with the native Tauri's functions in the @jellyfin-vue/tauri-runtime package, as described above.

For these reasons, I'm closing this since it's no longer relevant, at least in the meantime.