How to keep a custom folder structure with wxt and still bundle all files into .output?

[roechsli]

I am trying to understand how I can keep my custom folder structure while npm run zip the repository.

From what I understand, only very specific name and path matching files will make it into the .output directory.

what I expect

I would expect:

• a custom folder structure to be supported during bundling.
  • I.e.: I should be able to keep my folder structure without accommodating for an expected structure by wxt
  • or at the very least, be able to tell which files should be bundled into the .output dir (Note: I assume this is possible, but I haven't found a solution).
• more information on which files actually get bundled into the .output dir here (or in the parent section Directory Structure

Sample folder structure

 <root>/
  ├ assets/
  │   ├ style.css  
  │   └ ...
  ├ components/ 
  │   └ ...
  ├ custom-directory/  <--------------- some files that I use according to my own needs
  └ entrypoints/
      ├ custom-sub-directory/  <--------------- some files & subfolders that I use according to my own needs
      ├ popup/ ...
      ├ [some files here] / ...
      └ options/ ...
...

what I know

• This explains how entrypoints/[some-file.ts] will be picked up during zipping
• This superficially explains the folder structure within wxt
• This about entrypoints
• This line mentions that entrypoints are grabbed up until the first ., / or \\
  • Correct me if I am wrong, but I assume that it is intended to have nested files supported, right?

what I have tried

In my test-cases of the image above, only the files directly placed into any of the expected⁽¹⁾ folders will be bundled into the .output directory.

⁽¹⁾ Folders that are expected are: options, popup, components, etc.

[roechsli]

I guess I found my answer:
The nested files are considered for the bundle, but they will all be bundled into the output files.

Then the question would be: Which files will be excluded and which ones will be included?

Will only the files be excluded that either have

• defineUnlisted, or
• are tree-shaken

export default defineUnlistedScript(() => {
  // Executed when script is loaded
  console.log("this will be ignored by the bundler");
});

[aklinker1]

The files that will be used as inputs are:

• entrypoints/<name>.<ext>
• entrypoints/<name>/index.<ext>

No other files will be used and inputs/entrypoints to the bundle.

The entrypoints folder is meant to be a flat simple directory with only files related to entrypoints in it. If you have components, put them in the top level components folder, not inside the entrypoints folder. If you have utilities, put them in the top level utils folder, not the entrypoints folder.

Here's an example of the most things I would recommend putting inside the entrypoints folder:

https://wxt.dev/guide/key-concepts/frontend-frameworks.html#multiple-apps