feat(storage): Support storage items in batch functions (#990)

Co-authored-by: Aaron <[email protected]>

docs/storage.md

@@ -55,7 +55,7 @@ For a full list of methods available, see the [API reference](/api/reference/wxt
 
 ## Watchers
 
-To listen for storage changes, use the `storage.watch` function. It lets you setup a listener for a single key:
+To listen for storage changes, use the `storage.watch` function. It lets you set up a listener for a single key:
 
 ```ts
 const unwatch = storage.watch<number>('local:counter', (newCount, oldCount) => {
@@ -100,7 +100,7 @@ You can remove all metadata associated with a key, or just specific properties:
 // Remove all properties
 await storage.removeMeta('local:preference');
 
-// Remove one property
+// Remove only the "lastModified" property
 await storage.removeMeta('local:preference', 'lastModified');
 
 // Remove multiple properties
@@ -225,13 +225,13 @@ export const ignoredWebsites = storage.defineItem<IgnoredWebsiteV3[]>( // [!code
 Internally, this uses a metadata property called `v` to track the value's current version.
 :::
 
-In this case, we thought that the ignored website list might change in the future, and were able to setup a versioned storage item from the start.
+In this case, we thought that the ignored website list might change in the future, and were able to set up a versioned storage item from the start.
 
-Realistically, you won't know a item needs versioned until you need to change it's schema. Thankfully, it's simple to add versioning to an unversioned storage item.
+Realistically, you won't know an item needs versioning until you need to change its schema. Thankfully, it's simple to add versioning to an unversioned storage item.
 
 When a previous version isn't found, WXT assumes the version was `1`. That means you just need to set `version: 2` and add a migration for `2`, and it will just work!
 
-Lets look at the same ignored websites example from before, but start with an unversioned item this time:
+Let's look at the same ignored websites example from before, but start with an unversioned item this time:
 
 :::code-group
 
@@ -275,13 +275,13 @@ export const ignoredWebsites = storage.defineItem<IgnoredWebsiteV2[]>( // [!code
 
 ### Running Migrations
 
-As soon as `storage.defineItem` is called, WXT checks if migrations need to be ran, and if so, runs them. Calls to get or update the storage item's value or metadata (`getValue`, `setValue`, `removeValue`, `getMeta`, etc) will automatically wait for the migration process to finish before actually reading or writing values.
+As soon as `storage.defineItem` is called, WXT checks if migrations need to be run, and if so, runs them. Calls to get or update the storage item's value or metadata (`getValue`, `setValue`, `removeValue`, `getMeta`, etc.) will automatically wait for the migration process to finish before actually reading or writing values.
 
 ### Default Values
 
 With `storage.defineItem`, there are multiple ways of defining default values:
 
-1. `fallback` - Return this value from `getValue` instead of `null` if the value is missing.
+1. **`fallback`** - Return this value from `getValue` instead of `null` if the value is missing.
 
    This option is great for providing default values for settings:
 
@@ -294,7 +294,7 @@ With `storage.defineItem`, there are multiple ways of defining default values:
    });
    ```
 
-2. `init` - Initialize and save a value in storage if it is not already saved.
+2. **`init`** - Initialize and save a value in storage if it is not already saved.
 
    This is great for values that need to be initialized or set once:
 
@@ -308,3 +308,26 @@ With `storage.defineItem`, there are multiple ways of defining default values:
    ```
 
    The value is initialized in storage immediately.
+
+## Bulk Operations
+
+When getting or setting multiple values in storage, you can perform bulk operations to improve performance by reducing the number of individual storage calls. The `storage` API provides several methods for performing bulk operations:
+
+- **`getItems`** - Get multiple values at once.
+- **`getMetas`** - Get metadata for multiple items at once.
+- **`setItems`** - Set multiple values at once.
+- **`setMetas`** - Set metadata for multiple items at once.
+- **`removeItems`** - Remove multiple values (and optionally metadata) at once.
+
+All these APIs support both string keys and defined storage items:
+
+```ts
+const userId = storage.defineItem('local:userId');
+
+await storage.setItems([
+  { key: 'local:installDate', value: Date.now() },
+  { item: userId, value: generateUserId() },
+]);
+```
+
+Refer to the [API Reference](/api/reference/wxt/storage/interfaces/WxtStorage) for types and examples of how to use all the bulk APIs.

packages/wxt/e2e/tests/__snapshots__/auto-imports.test.ts.snap

@@ -8,6 +8,7 @@ exports[`Auto Imports > eslintrc > "enabled: 8" should output a JSON config file
     "ContentScriptContext": true,
     "InvalidMatchPattern": true,
     "MatchPattern": true,
+    "MigrationError": true,
     "browser": true,
     "createIframeUi": true,
     "createIntegratedUi": true,
@@ -34,6 +35,7 @@ const globals = {
   "ContentScriptContext": true,
   "InvalidMatchPattern": true,
   "MatchPattern": true,
+  "MigrationError": true,
   "browser": true,
   "createIframeUi": true,
   "createIntegratedUi": true,
@@ -68,6 +70,7 @@ exports[`Auto Imports > eslintrc > "enabled: true" should output a JSON config f
     "ContentScriptContext": true,
     "InvalidMatchPattern": true,
     "MatchPattern": true,
+    "MigrationError": true,
     "browser": true,
     "createIframeUi": true,
     "createIntegratedUi": true,
@@ -95,6 +98,7 @@ exports[`Auto Imports > eslintrc > should allow customizing the output 1`] = `
     "ContentScriptContext": "readonly",
     "InvalidMatchPattern": "readonly",
     "MatchPattern": "readonly",
+    "MigrationError": "readonly",
     "browser": "readonly",
     "createIframeUi": "readonly",
     "createIntegratedUi": "readonly",

packages/wxt/e2e/tests/auto-imports.test.ts

@@ -20,6 +20,7 @@ describe('Auto Imports', () => {
             const ContentScriptContext: typeof import('wxt/client')['ContentScriptContext']
             const InvalidMatchPattern: typeof import('wxt/sandbox')['InvalidMatchPattern']
             const MatchPattern: typeof import('wxt/sandbox')['MatchPattern']
+            const MigrationError: typeof import('wxt/storage')['MigrationError']
             const browser: typeof import('wxt/browser')['browser']
             const createIframeUi: typeof import('wxt/client')['createIframeUi']
             const createIntegratedUi: typeof import('wxt/client')['createIntegratedUi']