From 15ea1c873cdbfe39fe4c2c8c6d349c258c5e5fae Mon Sep 17 00:00:00 2001
From: kj <kj@begin.com>
Date: Tue, 20 Feb 2024 17:00:56 -0800
Subject: [PATCH 1/3] Updates docs to have users install the bundles plugin
 before using.

---
 app/docs/md/patterns/browser-modules.md | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/docs/md/patterns/browser-modules.md b/app/docs/md/patterns/browser-modules.md
index 754b5ca0..0140b4b1 100644
--- a/app/docs/md/patterns/browser-modules.md
+++ b/app/docs/md/patterns/browser-modules.md
@@ -1,7 +1,23 @@
 ---
-title: Browser Modules
+title: Building for the browser
 ---
 
+## The `@bundles` plugin
+
+For most of your browser needs you can use Enhance's built-in [browser pattern](/docs/conventions/browser) but at times you may have a component that has special imports like `css-in-js` that requires the abilities of ESBuild. In these situations you can use [plugin-bundles](https://github.com/architect/plugin-bundles) to make your component available to the browser.
+
+### Install
+
+`npm i npm i @architect/plugin-bundles`
+
+Add to your `.arc file`
+
+```arc
+@bundles
+autocomplete '/utils/autocomplete.mjs'
+```
+
+
 ### Basic Example
 
 If you have written a bit of JS for your app that has an external dependency, you'll likely want to bundle your script with its dependency.

From f110786a1f02bdf3a1030b35e50ee3d88971258b Mon Sep 17 00:00:00 2001
From: kj <kj@begin.com>
Date: Tue, 20 Feb 2024 17:03:53 -0800
Subject: [PATCH 2/3] Updates sidebar and file name.

---
 .../{browser-modules.md => building-for-the-browser.md}       | 0
 app/docs/nav-data.mjs                                         | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename app/docs/md/patterns/{browser-modules.md => building-for-the-browser.md} (100%)

diff --git a/app/docs/md/patterns/browser-modules.md b/app/docs/md/patterns/building-for-the-browser.md
similarity index 100%
rename from app/docs/md/patterns/browser-modules.md
rename to app/docs/md/patterns/building-for-the-browser.md
diff --git a/app/docs/nav-data.mjs b/app/docs/nav-data.mjs
index 40317e98..1c6f927b 100644
--- a/app/docs/nav-data.mjs
+++ b/app/docs/nav-data.mjs
@@ -130,7 +130,7 @@ export const data = [
     slug: 'patterns',
     items: [
       'progressive-enhancement',
-      'browser-modules',
+      'building-for-the-browser',
       'form-validation',
       {
         slug: 'testing',
@@ -262,6 +262,6 @@ function parseItems(items, root, activePath) {
   return parsedItems
 }
 
-export default function (docsRoute, activePath) {
+export default function(docsRoute, activePath) {
   return parseItems(data, docsRoute, activePath)
 }

From 10eeb6fce3185e68203db01e81b65fecaacedbb0 Mon Sep 17 00:00:00 2001
From: kj <kj@begin.com>
Date: Tue, 20 Feb 2024 21:03:43 -0800
Subject: [PATCH 3/3] Updates docs to add the plugin to arc file.

---
 app/docs/md/patterns/building-for-the-browser.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/docs/md/patterns/building-for-the-browser.md b/app/docs/md/patterns/building-for-the-browser.md
index 0140b4b1..4afb9c9c 100644
--- a/app/docs/md/patterns/building-for-the-browser.md
+++ b/app/docs/md/patterns/building-for-the-browser.md
@@ -8,11 +8,14 @@ For most of your browser needs you can use Enhance's built-in [browser pattern](
 
 ### Install
 
-`npm i npm i @architect/plugin-bundles`
+`npm i @architect/plugin-bundles`
 
-Add to your `.arc file`
+Add the plugin and the components you want to bundle to your `.arc file`
 
 ```arc
+@plugins 
+architect/plugin-bundles
+
 @bundles
 autocomplete '/utils/autocomplete.mjs'
 ```