Question about file structure in wxt.dev compared to Plasmo

[only-issues]

Hello, I'm new to wxt.dev. Previously, I've been using Plasmo (I'm still satisfied with). After reading through the wxt.dev docs, I noticed that all files seem to be required to be written in a single 'entrypoints' folder, like this:

entrypoints/content1.content.ts
entrypoints/content2.content.ts
... n content scripts
entrypoints/background1.background.ts
entrypoints/background2.background.ts
... n background scripts

I tried to organize the files in separate directories like I did with Plasmo, but it stopped working. After re-reading the docs, it seems that this isn't possible, and both content scripts and background scripts need to be in the same directory?

My questions are:

1. Is it possible to separate these into different directories?
2. If not, what's the reasoning behind this design decision in wxt?
3. Are there any advantages to this approach?

I'd appreciate any insights or explanations about this file structure. Thank you!

[aklinker1]

Is it possible to separate these into different directories?

There are ways to configure the file structure, but I always recommend sticking with a frameworks conventions so other developers familiar with the framework can contribute quickly. The more customized your code is, the harder it is for new developers to contribute.

But if you really want a folder structure like plasmo's...

export default defineConfig({
  srcDir: "src",
  entrypointsDir: ".", // relative to srcDir, so you can do 'src/popup/index.html` like plasmo
});

If not, what's the reasoning behind this design decision in wxt? Are there any advantages to this approach?

WXT was based off Nuxt, and the entrypoints directory is equivalent to the pages/ directory there.

Obviously, full-stack web-apps are not the same as extensions, but parallels can be drawn. In this case, extensions are made up of many different parts, which often need to share the same code. That means having a place outside where entrypoints are defined for shared code to live. In my experience developing extensions, there is very little code that is specific to one entrypoint in extensions, so the entrypoints folder needs to support just that. You can see what I'm talking about in the docs here, where I've put only the relevant code related to the entrypoint inside the extension. If you want to create component and utils folders inside an entrypoint, that's fine too, but I always end up refactoring those file out into shared folders at some point anyways.

So the design of WXT's project structure is there to push you towards my idea of best-practices, while supporting custom file structures (to a degree) for anyone who disagrees.