Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract entrypoint options improvements #506

Open
1 of 4 tasks
aklinker1 opened this issue Feb 29, 2024 · 5 comments
Open
1 of 4 tasks

Extract entrypoint options improvements #506

aklinker1 opened this issue Feb 29, 2024 · 5 comments
Labels
Milestone

Comments

@aklinker1
Copy link
Collaborator

aklinker1 commented Feb 29, 2024

This is an issue for addressing several issues with how entrypoints are imported to get their options.

Will add to this list if other issues come up.

@aklinker1
Copy link
Collaborator Author

aklinker1 commented May 4, 2024

Alright, I have a proof of concept using Vite's runtime API to load entrypoints: #585

  • Supports custom transformations via vite plugins
  • Lets you import variables or use import.meta.glob

So this should cover all the issues people have reported.

HOWEVER... it appears the vite runtime can't import CSS modules, which is kinda important. I've asked a question about it in the vite discord, so we'll se if I get a useful response. https://discord.com/channels/804011606160703521/1236142702785990677/1236142702785990677

@aklinker1
Copy link
Collaborator Author

Alright, it was an issue on my side. Just needed to start the vite server lol. So it's working now.

I need to clean up my changes before opening a real PR. Probably won't get to it this weekend... we'll see. But I got everything working :)

@aklinker1
Copy link
Collaborator Author

aklinker1 commented May 4, 2024

Last problem to address... Module side effects.

Say you're using storage item in your content script:

// utils/storage.ts
export const isXyzEnabled = storage.defineItem(...);
// entrypoints/content.ts
import { isXyzEnabled } from '~/utils/storage';

export default defineContentScript({
  // ...
  async main() {
    console.log(await isXyzEnabled.getValue());
  }
});

In this example, storage.defineItem actually includes side effects, like checking if the storage item needs migrated. Should a side effect like this run? I don't think so, and I can't think of reason a side effect like this should ever run. That is, unless it's related to an imported variable used in the options.

So I have a decision to make. When importing entrypoints during the build to get their config, do I...

  1. delete the main function and remove unused imports to prevent side-effects from running? or
  2. Leave everything as is and let all side-effects run

I think... I'm gonna go with option 1, and remove the main function. For performance reasons (importing less code as project grows) as well as avoiding weird edge cases around the node environment these files are loaded into (similar to what I'm currently doing with jiti).

So I have to decide the best way to do that. Removing the main function should be simple... Use magicast or regex. To remove unused imports after that... I'm not sure how to do that. Regex again? Or use magicast to get the imports, and find/replace if they're used. Probably that. I'll just use magicast for everything if possible.

@aklinker1
Copy link
Collaborator Author

Playing around a bit, removing unused imports isn't a simple task lol. Instead, I'm just going to remove main function via magicast, then let vite tree-shake out the modules? Not sure how the runtime API handles this... Might need to come back in the future and remove imports properly.

@aklinker1
Copy link
Collaborator Author

aklinker1 commented May 4, 2024

Released v0.18.0 with an experimental flag to enable this feature. If you use PNPM, for some reason it requires setting shamefully-hoist=true... And there are a couple of other problems when ran outside this monorepo... So this isn't quite ready for use yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant