Enhancement for `reload`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 10.5k
- Forks
- 564
- PR merge metrics
- No merged PRs in 30d
Description
Feature Request
Currently, the reload function does too little, it only reloads the Inline-Config, nothing more. But the configuration is not all defined in the Inline-Config, they may be configured in different modules.
It is not ideal to re-run the whole life cycle when a reload occurs, but the modules are not even aware that a reload has occurred, which leads to the modules not being able to respond to the reload as they should.
Edit: Somewhat similar to #939
wxt = {
config,
hooks,
hook: hooks.hook.bind(hooks),
get logger() {
return config.logger;
},
async reloadConfig() {
wxt.config = await resolveConfig(inlineConfig, command);
},
pm,
builder,
server
};
For example, the i18n module requires the default-locale configuration. However, when reloading, if default-locale is not configured through Inline-Config, there will be no default-locale configuration in the reloaded configuration, and it will fail in the prepare:types phase.
Summary:
- Modules are not aware of reloading and cannot respond to reloading
What are the alternatives?
My idea is to add a series of hooks about reload (reload:before and others) so that the module can know that a reload is happening and respond correctly when the reload occurs to avoid some problems brought by HMR.
In this way, no need to rerun the entire life cycle, only the pre-defined functions need to be executed.
await reloadConfig();
wxt.hooks.CallHook("reload:before",()=>{});
......
wxt.hooks.CallHook("reload:done",()=>{});
The following is my temporary solution, reconfigured in a relatively early hook.However, this is not a proper or legitimate solution.
The reason I configure the manifest in a separate module is that when a manifest entry is configured that is not supported by the browser, warnings will be given, and I don't want those warnings.
import process from "node:process";
import { defineWxtModule } from "wxt/modules";
const permissions = {
common: ["downloads", "downloads.open", "storage"],
chrome: ["background", "downloads.shelf", "downloads.ui", "offscreen"],
firefox: []
};
export default defineWxtModule(wxt => {
const { browser } = wxt.config;
const configure = () => {
wxt.config.manifest = {
"name": "__MSG_extension_name__",
"description": "__MSG_extension_description__",
"default_locale": "en",
"version": process.env.npm_package_version,
"permissions": [
...permissions.common,
...permissions[browser as keyof typeof permissions]
].filter(Boolean),
...(browser === "chrome" && {
"minimum_chrome_version": "88"
}),
...(browser === "firefox" && {
"browser_specific_settings": {
"gecko": {
"id": "download-manager@breadgrocery.github.com",
"strict_min_version": "109.0"
}
}
}),
...wxt.config.manifest
};
};
configure();
wxt.hooks.hook("prepare:types", configure);
});
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reload function and the resolveConfig flow shown in the issue, then compare the related discussion in #939. Trace how module configuration, the i18n module, and the prepare:types hook behave during reload. Done means modules are informed of reloads and configuration from separate modules remains available without rerunning the entire lifecycle.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- build-system, devtools
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100