Merge pull request #195 from enhance-dev/externalize-bundles-plugin

Updates docs to have users install the bundles plugin before using.

app/docs/md/patterns/browser-modules.md → app/docs/md/patterns/building-for-the-browser.md

@@ -1,7 +1,26 @@
 ---
-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 @architect/plugin-bundles`
+
+Add the plugin and the components you want to bundle to your `.arc file`
+
+```arc
+@plugins 
+architect/plugin-bundles
+
+@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.

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)
 }