Merge pull request #97 from cypress-io/update-documentation-for-10.0

docs: update readme with 10.0 instructions

Author: jordanpowell88

README.md

@@ -18,27 +18,51 @@ npm install --save-dev @cypress/browserify-preprocessor
 
 ## Usage
 
+### Prior to Cypress 10.0
+
 In your project's [plugins file](https://on.cypress.io/plugins-guide):
 
 ```javascript
-const browserify = require('@cypress/browserify-preprocessor')
+const browserify = require("@cypress/browserify-preprocessor");
 
 module.exports = (on) => {
-  on('file:preprocessor', browserify())
-}
+  on("file:preprocessor", browserify());
+};
+```
+
+### Cypress 10.0 and Beyond
+
+In your project's [cypress config](https://on.cypress.io/plugins-api):
+
+```javascript
+const { defineConfig } = require("cypress");
+const browserify = require("@cypress/browserify-preprocessor");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      on("file:preprocessor", browserify());
+    },
+  },
+  component: {
+    setupNodeEvents(on, config) {
+      on("file:preprocessor", browserify());
+    },
+  },
+});
 ```
 
 ## Options
 
 Pass in options as the second argument to `browserify`:
 
 ```javascript
-module.exports = (on) => {
+{
   const options = {
     // options here
-  }
+  };
 
-  on('file:preprocessor', browserify(options))
+  on("file:preprocessor", browserify(options));
 }
 ```
 
@@ -50,12 +74,10 @@ Object of options passed to [browserify](https://github.com/browserify/browserif
 // example
 browserify({
   browserifyOptions: {
-    extensions: ['.js', '.ts'],
-    plugin: [
-      ['tsify']
-    ]
-  }
-})
+    extensions: [".js", ".ts"],
+    plugin: [["tsify"]],
+  },
+});
 ```
 
 If you pass one of the top-level options in (`extensions`, `transform`, etc), it will override the default. In the above example, browserify will process `.js` and `.ts` files, but not `.jsx` or `.coffee`. If you wish to add to or modify existing options, read about [modifying the default options](#modifying-default-options).
@@ -80,7 +102,7 @@ Source maps are always enabled unless explicitly disabled by specifying `debug:
         ast: false,
         babelrc: false,
         plugins: [
-          '@babel/plugin-transform-modules-commonjs', 
+          '@babel/plugin-transform-modules-commonjs',
           '@babel/plugin-proposal-class-properties',
           '@babel/plugin-proposal-object-rest-spread',
           '@babel/plugin-transform-runtime',
@@ -99,7 +121,7 @@ Source maps are always enabled unless explicitly disabled by specifying `debug:
 }
 ```
 
-*Note*: `cache` and `packageCache` are always set to `{}` and cannot be overridden. Otherwise, file watching would not function correctly.
+_Note_: `cache` and `packageCache` are always set to `{}` and cannot be overridden. Otherwise, file watching would not function correctly.
 
 ### watchifyOptions
 
@@ -109,9 +131,9 @@ Object of options passed to [watchify](https://github.com/browserify/watchify#op
 // example
 browserify({
   watchifyOptions: {
-    delay: 500
-  }
-})
+    delay: 500,
+  },
+});
 ```
 
 **Default**:
@@ -136,12 +158,12 @@ A function that is called with the [browserify instance](https://github.com/brow
 ```javascript
 // example
 browserify({
-  onBundle (bundle) {
-    bundle.external('react')
-    bundle.plugin('some-plugin')
-    bundle.ignore('pg-native')
-  }
-})
+  onBundle(bundle) {
+    bundle.external("react");
+    bundle.plugin("some-plugin");
+    bundle.ignore("pg-native");
+  },
+});
 ```
 
 ### typescript
@@ -150,8 +172,8 @@ When the path to the TypeScript package is given, Cypress will automatically tra
 
 ```javascript
 browserify({
-  typescript: require.resolve('typescript')
-})
+  typescript: require.resolve("typescript"),
+});
 ```
 
 **Default**: `undefined`
@@ -163,13 +185,13 @@ The default options are provided as `browserify.defaultOptions` so they can be m
 If, for example, you want to update the options for the `babelify` transform to turn on `babelrc` loading, you could do the following:
 
 ```javascript
-const browserify = require('@cypress/browserify-preprocessor')
+const browserify = require("@cypress/browserify-preprocessor");
 
-module.exports = (on) => {
-  const options = browserify.defaultOptions
-  options.browserifyOptions.transform[1][1].babelrc = true
+{
+  const options = browserify.defaultOptions;
+  options.browserifyOptions.transform[1][1].babelrc = true;
 
-  on('file:preprocessor', browserify(options))
+  on("file:preprocessor", browserify(options));
 }
 ```