Compare commits

...

9 Commits

Author SHA1 Message Date
GitHub Actions 16d8240406 chore(release): wxt v0.19.2 2024-07-28 15:49:52 +00:00
Aaron 24cd01dd31 fix: Don't default to dev mode for production builds when using vite-node loader (#877) 2024-07-28 10:45:32 -05:00
Aaron fb22beadb8 fix: Remove unused top-level functions and variables when loading entrypoints with the vite-node loader (#875) 2024-07-28 09:27:29 -05:00
Aaron Klinker fa85177648 docs(modules): Adjust wording 2024-07-27 17:04:36 -05:00
Aaron Klinker ed07a49dd2 docs: Update README and homepage features with WXT modules 2024-07-27 16:57:33 -05:00
Aaron 09c9de0a60 docs: Fix environment variable reference (#870) 2024-07-27 16:15:28 -05:00
Aaron 523296b29a chore(deps): Upgrade all dependencies (#869) 2024-07-27 16:07:50 -05:00
Aaron Klinker ef67ef47aa chore: Update template package names 2024-07-27 15:37:48 -05:00
Aaron Klinker cb5eb68d62 Fix changelog 2024-07-27 15:11:27 -05:00
28 changed files with 5480 additions and 4302 deletions
+1 -1
View File
@@ -59,10 +59,10 @@ Or see the [installation guide](https://wxt.dev/guide/installation.html) to get
- 🦾 Auto-imports
- 🤖 Automated publishing
- 🎨 Frontend framework agnostic: works with Vue, React, Svelte, etc
- 📦 Modular architecture with [WXT modules](https://wxt.dev/guide/go-further/reusable-modules.html#overview)
- 🖍️ Quickly bootstrap a new project
- 📏 Bundle analysis
- ⬇️ Download and bundle remote URL imports
- 📦 Modular architecture with [modules](https://wxt.dev/guide/go-further/reusable-modules.html#overview)
## Contributors
+3 -3
View File
@@ -53,9 +53,9 @@ declare module 'wxt/sandbox' {
}
export default defineAppConfig({
bugReportingDisabled: process.env.VITE_BUG_REPORTING_DISABLED === 'true',
apiKey: process.env.VITE_API_KEY,
bugReportingDisabled: import.meta.env.VITE_BUG_REPORTING_DISABLED === 'true',
apiKey: import.meta.env.VITE_API_KEY,
});
```
> You don't have to do this, you can use `process.env.VITE_*` anywhere in your runtime code, but putting them here consolidates them to one place and defines what variables are expected.
> You don't have to do this, you can use `import.meta.env.VITE_*` anywhere in your runtime code, but putting them here consolidates them to one place and defines what variables are expected.
+4 -4
View File
@@ -25,12 +25,12 @@ There are two ways to add a module to your project:
});
```
2. **NPM package**: By convention, any package on NPM that starts with `@wxt-dev/module-*` or `wxt-module-*` can be installed and included in your project:
2. **NPM package**: Find WXT modules on NPM and include them in your project:
```ts
// wxt.config.ts
export default defineConfig({
// Add the module to your project
modules: ['wxt-module-example'],
modules: ['@wxt-dev/auto-icons'],
});
```
@@ -99,9 +99,9 @@ export default defineConfig({
### Actually Doing Something
The first argument of the setup function, `wxt`, provides full access to the current build's context. You can access the resolved configuration via `wxt.config`, or setup hooks to manipulate the build at different steps of the build process.
The first argument of the setup function, `wxt`, provides full access to the current build's context. You can access the resolved configuration via `wxt.config`, or setup hooks to manipulate the build at different steps of the build process with `wxt.hooks`.
Here's an example that shows you how to update the `outDir` based on the build mode. It does a good job showing how to access config, set up a hook, and do something when the hook is called.
Here's an example that updates the `outDir` based on the build mode. It's a very simple example of how to access config and setup a hook.
```ts
export default defineWxtModule((wxt) => {
+5
View File
@@ -53,6 +53,11 @@ features:
details: Works with any front-end framework with a Vite plugin.
link: /guide/key-concepts/frontend-frameworks
linkText: Add a framework
- icon: 📦
title: Modular Architecture
details: Reuse build-time and runtime-code across multiple extensions.
link: /guide/go-further/reusable-modules
linkText: Read docs
- icon: 🖍️
title: Bootstrap a New Project
details: Get started quickly with several awesome project templates.
+7 -8
View File
@@ -2,10 +2,9 @@
"private": true,
"type": "module",
"engines": {
"node": ">=18.20.3",
"pnpm": "^8.6.3"
"node": ">=18.20.3"
},
"packageManager": "pnpm@8.15.9",
"packageManager": "pnpm@9.6.0",
"scripts": {
"check": "check && pnpm -r --sequential run check",
"test": "pnpm -r --sequential run test run",
@@ -21,7 +20,7 @@
"@aklinker1/buildc": "^1.0.11",
"@aklinker1/check": "^1.3.1",
"@types/fs-extra": "^11.0.4",
"@vitest/coverage-v8": "^2.0.0",
"@vitest/coverage-v8": "^2.0.4",
"changelogen": "^0.5.5",
"consola": "^3.2.3",
"dependency-graph": "^1.0.0",
@@ -37,12 +36,12 @@
"typedoc": "^0.25.4",
"typedoc-plugin-markdown": "4.0.0-next.23",
"typedoc-vitepress-theme": "1.0.0-next.3",
"typescript": "^5.5.3",
"typescript": "^5.5.4",
"vitepress": "^1.3.1",
"vitest-mock-extended": "^1.3.2",
"vue": "^3.4.33",
"vitest-mock-extended": "^2.0.0",
"vue": "^3.4.34",
"wxt": "workspace:*",
"yaml": "^2.4.5"
"yaml": "^2.5.0"
},
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged"
+2 -2
View File
@@ -15,7 +15,7 @@
],
"scripts": {
"build": "buildc -- unbuild",
"check": "buildc --deps-only -- check"
"check": "pnpm build && check"
},
"peerDependencies": {
"wxt": ">=0.19.0"
@@ -23,7 +23,7 @@
"devDependencies": {
"@aklinker1/check": "^1.3.1",
"publint": "^0.2.9",
"typescript": "^5.5.3",
"typescript": "^5.5.4",
"unbuild": "^2.0.0",
"wxt": "workspace:*"
},
-1
View File
@@ -9,7 +9,6 @@ export default defineWxtModule<ReactModuleOptions>({
const { vite } = options ?? {};
addViteConfig(wxt, () => ({
// @ts-expect-error: Vite version conflicts
plugins: [react(vite)],
}));
+2 -2
View File
@@ -22,7 +22,7 @@
],
"scripts": {
"dev": "wxt",
"check": "buildc --deps-only -- check",
"check": "pnpm build && check",
"build": "buildc -- unbuild",
"prepare": "buildc --deps-only -- wxt prepare"
},
@@ -39,7 +39,7 @@
"publint": "^0.2.9",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"typescript": "^5.5.3",
"typescript": "^5.5.4",
"unbuild": "^2.0.0",
"wxt": "workspace:*"
}
-1
View File
@@ -9,7 +9,6 @@ export default defineWxtModule<SolidModuleOptions>({
const { vite } = options ?? {};
addViteConfig(wxt, () => ({
// @ts-expect-error: Vite version mismatch
plugins: [solid(vite)],
build: {
target: 'esnext',
+3 -3
View File
@@ -22,7 +22,7 @@
],
"scripts": {
"dev": "wxt",
"check": "buildc --deps-only -- check",
"check": "pnpm build && check",
"build": "buildc -- unbuild",
"prepare": "buildc --deps-only -- wxt prepare"
},
@@ -35,8 +35,8 @@
"devDependencies": {
"@aklinker1/check": "^1.3.1",
"publint": "^0.2.9",
"solid-js": "^1.8.18",
"typescript": "^5.5.3",
"solid-js": "^1.8.19",
"typescript": "^5.5.4",
"unbuild": "^2.0.0",
"wxt": "workspace:*"
}
+2 -2
View File
@@ -22,7 +22,7 @@
],
"scripts": {
"build": "buildc -- unbuild",
"check": "buildc --deps-only -- check"
"check": "pnpm build && check"
},
"peerDependencies": {
"wxt": ">=0.18.6"
@@ -33,7 +33,7 @@
"devDependencies": {
"@aklinker1/check": "^1.3.1",
"publint": "^0.2.9",
"typescript": "^5.5.3",
"typescript": "^5.5.4",
"unbuild": "^2.0.0",
"wxt": "workspace:*"
}
-1
View File
@@ -14,7 +14,6 @@ export default defineWxtModule<SvelteModuleOptions>({
addViteConfig(wxt, () => ({
plugins: [
// @ts-expect-error: Vite version mismatch
svelte({
// Using a svelte.config.js file causes a segmentation fault when importing the file
configFile: false,
+3 -3
View File
@@ -22,18 +22,18 @@
],
"scripts": {
"build": "buildc -- unbuild",
"check": "buildc --deps-only -- check"
"check": "pnpm build && check"
},
"peerDependencies": {
"wxt": ">=0.18.6"
},
"dependencies": {
"@vitejs/plugin-vue": "^5.0.5"
"@vitejs/plugin-vue": "^5.1.1"
},
"devDependencies": {
"@aklinker1/check": "^1.3.1",
"publint": "^0.2.9",
"typescript": "^5.5.3",
"typescript": "^5.5.4",
"unbuild": "^2.0.0",
"wxt": "workspace:*"
}
+3 -3
View File
@@ -21,13 +21,13 @@
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/chrome": "^0.0.268",
"@types/chrome": "^0.0.269",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@wxt-dev/auto-icons": "workspace:*",
"sass": "^1.77.8",
"typescript": "^5.5.3",
"vitest": "^2.0.3",
"typescript": "^5.5.4",
"vitest": "^2.0.4",
"vitest-plugin-random-seed": "^1.1.0",
"wxt": "workspace:*"
},
+1 -4
View File
@@ -6,8 +6,5 @@ export default defineProject({
mockReset: true,
restoreMocks: true,
},
plugins: [
// @ts-expect-error: Vite version mismatch
WxtVitest(),
],
plugins: [WxtVitest()],
});
+21
View File
@@ -1,5 +1,22 @@
# Changelog
## v0.19.2
[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.1...wxt-v0.19.2)
### 🩹 Fixes
- Remove unused top-level functions and variables when loading entrypoints with the `vite-node` loader ([#875](https://github.com/wxt-dev/wxt/pull/875))
- Don't default to dev mode for production builds when using `vite-node` loader ([#877](https://github.com/wxt-dev/wxt/pull/877))
### 📖 Documentation
- Update README and homepage features with WXT modules ([ed07a49](https://github.com/wxt-dev/wxt/commit/ed07a49))
### 🏡 Chore
- **deps:** Upgrade all dependencies ([#869](https://github.com/wxt-dev/wxt/pull/869))
## v0.19.1
[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.0...wxt-v0.19.1)
@@ -8,6 +25,10 @@
- Auto Icons Module ([#851](https://github.com/wxt-dev/wxt/pull/851))
### 🔥 Performance
- Tree-shake unrelated code inside `vite-node` entrypoint loader ([#867](https://github.com/wxt-dev/wxt/pull/867))
### 🩹 Fixes
- Define web globals when importing entrypoints ([#865](https://github.com/wxt-dev/wxt/pull/865))
+1
View File
@@ -59,6 +59,7 @@ Or see the [installation guide](https://wxt.dev/guide/installation.html) to get
- 🦾 Auto-imports
- 🤖 Automated publishing
- 🎨 Frontend framework agnostic: works with Vue, React, Svelte, etc
- 📦 Modular architecture with [WXT modules](https://wxt.dev/guide/go-further/reusable-modules.html#overview)
- 🖍️ Quickly bootstrap a new project
- 📏 Bundle analysis
- ⬇️ Download and bundle remote URL imports
+9 -9
View File
@@ -1,7 +1,7 @@
{
"name": "wxt",
"type": "module",
"version": "0.19.1",
"version": "0.19.2",
"description": "Next gen framework for developing web extensions",
"repository": {
"type": "git",
@@ -72,7 +72,7 @@
"scripts": {
"wxt": "tsx src/cli/index.ts",
"build": "buildc -- unbuild",
"check": "buildc --deps-only -- run-s -c check:*",
"check": "pnpm build && run-s -c check:*",
"check:default": "check",
"check:tsc-virtual": "tsc --noEmit -p src/virtual",
"test": "buildc --deps-only -- vitest",
@@ -116,20 +116,20 @@
"picocolors": "^1.0.1",
"prompts": "^2.4.2",
"publish-browser-extension": "^2.1.3",
"unimport": "^3.9.0",
"vite": "^5.3.4",
"vite-node": "^2.0.0",
"unimport": "^3.9.1",
"vite": "^5.3.5",
"vite-node": "^2.0.4",
"web-ext-run": "^0.2.1",
"webextension-polyfill": "^0.12.0"
},
"devDependencies": {
"@aklinker1/check": "^1.3.1",
"@faker-js/faker": "^8.4.1",
"@types/chrome": "^0.0.268",
"@types/chrome": "^0.0.269",
"@types/fs-extra": "^11.0.4",
"@types/lodash.merge": "^4.6.9",
"@types/natural-compare": "^1.4.3",
"@types/node": "^20.14.11",
"@types/node": "^20.14.12",
"@types/normalize-path": "^3.0.2",
"@types/prompts": "^2.4.9",
"execa": "^9.3.0",
@@ -139,9 +139,9 @@
"p-map": "^7.0.2",
"publint": "^0.2.9",
"tsx": "4.15.7",
"typescript": "^5.5.3",
"typescript": "^5.5.4",
"unbuild": "^2.0.0",
"vitest": "^2.0.3",
"vitest": "^2.0.4",
"vitest-plugin-random-seed": "^1.1.0"
},
"peerDependencies": {
@@ -1,34 +1,41 @@
lockfileVersion: '6.0'
lockfileVersion: '9.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
mime-types:
specifier: 2.1.35
version: 2.1.35
importers:
devDependencies:
flatten:
specifier: 1.0.3
version: 1.0.3
.:
dependencies:
mime-types:
specifier: 2.1.35
version: 2.1.35
devDependencies:
flatten:
specifier: 1.0.3
version: 1.0.3
packages:
/flatten@1.0.3:
flatten@1.0.3:
resolution: {integrity: sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==}
deprecated: flatten is deprecated in favor of utility frameworks such as lodash.
dev: true
/mime-db@1.52.0:
mime-db@1.52.0:
resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
engines: {node: '>= 0.6'}
dev: false
/mime-types@2.1.35:
mime-types@2.1.35:
resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
engines: {node: '>= 0.6'}
snapshots:
flatten@1.0.3: {}
mime-db@1.52.0: {}
mime-types@2.1.35:
dependencies:
mime-db: 1.52.0
dev: false
@@ -88,5 +88,54 @@ export default defineBackground();`;
expect(actual).toEqual(expected);
});
it("should remove any functions delcared outside the main function that aren't used", () => {
const input = `
function getMatches() {
return ["*://*/*"]
}
function unused1() {}
function unused2() {
unused1();
}
export default defineContentScript({
matches: getMatches(),
main: () => {},
})
`;
const expected = `function getMatches() {
return ["*://*/*"]
}
export default defineContentScript({
matches: getMatches()
})`;
const actual = removeMainFunctionCode(input).code;
expect(actual).toEqual(expected);
});
it("should remove any variables delcared outside the main function that aren't used", () => {
const input = `
const unused1 = "a", matches = ["*://*/*"];
let unused2 = unused1 + "b";
export default defineContentScript({
matches,
main: () => {}
})
`;
const expected = `const matches = ["*://*/*"];
export default defineContentScript({
matches
})`;
const actual = removeMainFunctionCode(input).code;
expect(actual).toEqual(expected);
});
});
});
+85 -16
View File
@@ -3,7 +3,8 @@ import { ProxifiedModule, parseModule } from 'magicast';
/**
* Removes any code used at runtime related to an entrypoint's main function.
* 1. Removes or clears out `main` function from returned object
* 2. Removes unused imports
* 2. Removes any unused functions/variables outside the definition that aren't being called/used
* 3. Removes unused imports
* 3. Removes value-less, side-effect only imports (like `import "./styles.css"` or `import "webextension-polyfill"`)
*/
export function removeMainFunctionCode(code: string): {
@@ -12,7 +13,15 @@ export function removeMainFunctionCode(code: string): {
} {
const mod = parseModule(code);
emptyMainFunction(mod);
removeUnusedImports(mod);
let removedCount = 0;
let depth = 0;
const maxDepth = 10;
do {
removedCount = 0;
removedCount += removeUnusedTopLevelVariables(mod);
removedCount += removeUnusedTopLevelFunctions(mod);
removedCount += removeUnusedImports(mod);
} while (removedCount > 0 && depth++ <= maxDepth);
removeSideEffectImports(mod);
return mod.generate();
}
@@ -35,32 +44,92 @@ function emptyMainFunction(mod: ProxifiedModule): void {
}
}
function removeUnusedTopLevelVariables(mod: ProxifiedModule): number {
const simpleAst = getSimpleAstJson(mod.$ast);
const usedMap = findUsedIdentifiers(simpleAst);
let deletedCount = 0;
const ast = mod.$ast as any;
for (let i = ast.body.length - 1; i >= 0; i--) {
if (ast.body[i].type === 'VariableDeclaration') {
for (let j = ast.body[i].declarations.length - 1; j >= 0; j--) {
if (!usedMap.get(ast.body[i].declarations[j].id.name)) {
ast.body[i].declarations.splice(j, 1);
deletedCount++;
}
}
if (ast.body[i].declarations.length === 0) {
ast.body.splice(i, 1);
}
}
}
return deletedCount;
}
function removeUnusedTopLevelFunctions(mod: ProxifiedModule): number {
const simpleAst = getSimpleAstJson(mod.$ast);
const usedMap = findUsedIdentifiers(simpleAst);
let deletedCount = 0;
const ast = mod.$ast as any;
for (let i = ast.body.length - 1; i >= 0; i--) {
if (
ast.body[i].type === 'FunctionDeclaration' &&
!usedMap.get(ast.body[i].id.name)
) {
ast.body.splice(i, 1);
deletedCount++;
}
}
return deletedCount;
}
function removeUnusedImports(mod: ProxifiedModule): number {
const simpleAst = getSimpleAstJson(mod.$ast);
const usedMap = findUsedIdentifiers(simpleAst);
const importSymbols = Object.keys(mod.imports);
let deletedCount = 0;
importSymbols.forEach((name) => {
if (usedMap.get(name)) return;
delete mod.imports[name];
deletedCount++;
});
return deletedCount;
}
// TODO: Do a more complex declaration analysis where shadowed variables are detected and ignored.
// Right now, this code assumes there are no shadowed variables.
function removeUnusedImports(mod: ProxifiedModule): void {
const importSymbols = Object.keys(mod.imports);
const usedMap = new Map(importSymbols.map((sym) => [sym, false]));
const queue: any[] = [getSimpleAstJson(mod.$ast)];
function findUsedIdentifiers(simpleAst: any) {
const usedMap = new Map<string, boolean>();
const queue: any[] = [simpleAst];
for (const item of queue) {
if (!item) {
continue;
} else if (Array.isArray(item)) {
queue.push(...item);
} else if (item.type === 'ImportDeclaration') {
// Exclude looking for identifiers in import statements
// Don't look inside imports, identifiers are only used for declaration
continue;
} else if (item.type === 'Identifier') {
// Only track import usages
if (usedMap.has(item.name)) usedMap.set(item.name, true);
usedMap.set(item.name, true);
} else if (typeof item === 'object') {
queue.push(Object.values(item));
const filterFns: Record<string, (entry: [string, any]) => boolean> = {
// Ignore the function declaration's name
FunctionDeclaration: ([key]) => key !== 'id',
// Ignore object property names
ObjectProperty: ([key]) => key !== 'key',
// Ignore variable declaration's name
VariableDeclarator: ([key]) => key !== 'id',
};
queue.push(
Object.entries(item)
.filter(filterFns[item.type] ?? (() => true))
.map(([_, value]) => value),
);
}
}
for (const [name, used] of usedMap.entries()) {
if (!used) delete mod.imports[name];
}
return usedMap;
}
function deleteImportAst(
+4
View File
@@ -27,6 +27,10 @@ export async function registerWxt(
inlineConfig: InlineConfig = {},
getServer?: (config: ResolvedConfig) => Promise<WxtDevServer>,
): Promise<void> {
// Default NODE_ENV environment variable before other packages, like vite, do it
// See https://github.com/wxt-dev/wxt/issues/873#issuecomment-2254555523
process.env.NODE_ENV ??= command === 'serve' ? 'development' : 'production';
const hooks = createHooks<WxtHooks>();
const config = await resolveConfig(inlineConfig, command);
const server = await getServer?.(config);
+5236 -4207
View File
File diff suppressed because it is too large Load Diff
+3 -3
View File
@@ -1,5 +1,5 @@
{
"name": "wxt-starter",
"name": "wxt-react-starter",
"description": "manifest.json description",
"private": true,
"version": "0.0.0",
@@ -22,7 +22,7 @@
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@wxt-dev/module-react": "^1.1.0",
"typescript": "^5.5.3",
"wxt": "^0.18.15"
"typescript": "^5.5.4",
"wxt": "^0.19.1"
}
}
+4 -4
View File
@@ -1,5 +1,5 @@
{
"name": "wxt-starter",
"name": "wxt-solid-starter",
"description": "manifest.json description",
"private": true,
"version": "0.0.0",
@@ -15,11 +15,11 @@
"postinstall": "wxt prepare"
},
"dependencies": {
"solid-js": "^1.8.18"
"solid-js": "^1.8.19"
},
"devDependencies": {
"@wxt-dev/module-solid": "^1.1.1",
"typescript": "^5.5.3",
"wxt": "^0.18.15"
"typescript": "^5.5.4",
"wxt": "^0.19.1"
}
}
+3 -3
View File
@@ -1,5 +1,5 @@
{
"name": "wxt-starter",
"name": "wxt-svelte-starter",
"description": "manifest.json description",
"private": true,
"version": "0.0.0",
@@ -19,7 +19,7 @@
"svelte": "^4.2.18",
"svelte-check": "^3.8.4",
"tslib": "^2.6.3",
"typescript": "^5.5.3",
"wxt": "^0.18.15"
"typescript": "^5.5.4",
"wxt": "^0.19.1"
}
}
+2 -2
View File
@@ -15,7 +15,7 @@
"postinstall": "wxt prepare"
},
"devDependencies": {
"typescript": "^5.5.3",
"wxt": "^0.18.15"
"typescript": "^5.5.4",
"wxt": "^0.19.1"
}
}
+5 -5
View File
@@ -1,5 +1,5 @@
{
"name": "wxt-starter",
"name": "wxt-vue-starter",
"description": "manifest.json description",
"private": true,
"version": "0.0.0",
@@ -15,12 +15,12 @@
"postinstall": "wxt prepare"
},
"dependencies": {
"vue": "^3.4.33"
"vue": "^3.4.34"
},
"devDependencies": {
"@wxt-dev/module-vue": "^1.0.0",
"typescript": "^5.5.3",
"vue-tsc": "^2.0.26",
"wxt": "^0.18.15"
"typescript": "^5.5.4",
"vue-tsc": "^2.0.29",
"wxt": "^0.19.1"
}
}