From 12b660cff7a981061eaaeca860d365a62ead6946 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Sun, 8 Nov 2020 20:25:17 -0500
Subject: [PATCH 1/4] Update the readme to recommend package exports

---
 README.md | 59 +++++++++++++++++++++++++++++++++----------------------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 7b8161c2..1797ca41 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,7 @@
   "name": "foo",                   // your package name
   "source": "src/foo.js",          // your source code
   "main": "dist/foo.js",           // where to generate the CommonJS/Node bundle
+  "exports": "dist/foo.modern.js", // path to the modern output (see below)
   "module": "dist/foo.module.js",  // where to generate the ESM bundle
   "unpkg": "dist/foo.umd.js",      // where to generate the UMD bundle (also aliased as "umd:main")
   "scripts": {
@@ -58,14 +59,14 @@ Microbundle produces <code title="ECMAScript Modules (import / export)">esm</cod
 
 ## 🤖 Modern Mode <a name="modern"></a>
 
-In addition to the above formats, Microbundle also outputs a `modern` bundle specially designed to work in _all modern browsers_. This bundle preserves most modern JS features when compiling your code, but ensures the result runs in 90% of web browsers without needing to be transpiled. Specifically, it uses [preset-modules](https://github.com/babel/preset-modules) to target the set of browsers that support `<script type="module">` - that allows syntax like async/await, tagged templates, arrow functions, destructured and rest parameters, etc. The result is generally smaller and faster to execute than the `esm` bundle:
+In addition to the above formats, Microbundle also outputs a `modern` bundle specially designed to work in _all modern browsers_. This bundle preserves most modern JS features when compiling your code, but ensures the result runs in 95% of web browsers without needing to be transpiled. Specifically, it uses [preset-modules](https://github.com/babel/preset-modules) to target the set of browsers that support `<script type="module">` - that allows syntax like async/await, tagged templates, arrow functions, destructured and rest parameters, etc. The result is generally smaller and faster to execute than the `esm` bundle:
 
 ```js
 // Our source, "src/make-dom.js":
 export default async function makeDom(tag, props, children) {
-	let el = document.createElement(tag);
-	el.append(...(await children));
-	return Object.assign(el, props);
+  let el = document.createElement(tag);
+  el.append(...(await children));
+  return Object.assign(el, props);
 }
 ```
 
@@ -80,9 +81,9 @@ Compiling the above using Microbundle produces the following `modern` and `esm`
 
 ```js
 export default async function(e, t, a) {
-	let n = document.createElement(e);
-	n.append(...(await a));
-	return Object.assign(n, t);
+  let n = document.createElement(e);
+  n.append(...(await a));
+  return Object.assign(n, t);
 }
 ```
 
@@ -90,35 +91,45 @@ export default async function(e, t, a) {
 
 ```js
 export default function(e, t, r) {
-	try {
-		var n = document.createElement(e);
-		return Promise.resolve(r).then(function(e) {
-			n.append.apply(n, e);
-			return Object.assign(n, t);
-		});
-	} catch (e) {
-		return Promise.reject(e);
-	}
+  try {
+    var n = document.createElement(e);
+    return Promise.resolve(r).then(function(e) {
+      n.append.apply(n, e);
+      return Object.assign(n, t);
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 }
 ```
 
 </td></tbody></table>
 
-This is enabled by default - all you have to do is add the field to your `package.json`.
-
-<details><summary>💁‍♂️ <em>How to point to modern code in a package.json is <a href="https://twitter.com/_developit/status/1263174528974364675">being discussed</a>. You might use the "module" field.</em></summary>
+**This is enabled by default.** All you have to do is add an `"exports"` field to your `package.json`:
 
-```js
+```jsonc
 {
-  "main": "dist/foo.umd.js",              // legacy UMD bundle (for Node & CDN use)
-  "module": "dist/foo.modern.module.js",  // modern ES2017 bundle
+  "main": "dist/foo.umd.js",        // legacy UMD output (for Node & CDN use)
+  "module": "dist/foo.module.js",   // legacy ES Modules output (for bundlers)
+  "exports": "dist/foo.modern.js",  // modern ES2017 output
   "scripts": {
-    "build": "microbundle src/foo.js -f modern,umd"
+    "build": "microbundle src/foo.js"
   }
 }
 ```
 
-</details>
+The `"exports"` field can be an object where keys are your package's "entry modules":
+
+```jsonc
+{
+  "name": "foo",
+  "exports": {
+    ".": "dist/foo.modern.js",       // import "foo" (the default)
+    "./lite": "dist/lite.modern.js", // import "foo/lite"
+    "./full": "dist/full.modern.js"  // import "foo"
+  }
+}
+```
 
 ## 📦 Usage & Configuration <a name="usage"></a>
 

From 9021dfb2bb876e9cfc160c1f8814e7c6285f94db Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Sun, 8 Nov 2020 20:31:27 -0500
Subject: [PATCH 2/4] Update README.md

---
 README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 1797ca41..298df4d6 100644
--- a/README.md
+++ b/README.md
@@ -74,15 +74,15 @@ Compiling the above using Microbundle produces the following `modern` and `esm`
 
 <table>
 <thead><tr>
-  <th align="left"><code>make-dom.modern.js</code> <sup>(123b)</sup></th>
-  <th align="left"><code>make-dom.module.js</code> <sup>(166b)</sup></th>
+  <th align="left"><code>make-dom.modern.js</code> <sup>(117b)</sup></th>
+  <th align="left"><code>make-dom.module.js</code> <sup>(194b)</sup></th>
 </tr></thead>
 <tbody><tr valign="top"><td>
 
 ```js
 export default async function(e, t, a) {
   let n = document.createElement(e);
-  n.append(...(await a));
+  n.append(...await a);
   return Object.assign(n, t);
 }
 ```
@@ -94,8 +94,8 @@ export default function(e, t, r) {
   try {
     var n = document.createElement(e);
     return Promise.resolve(r).then(function(e) {
-      n.append.apply(n, e);
-      return Object.assign(n, t);
+      return n.append.apply(n, e),
+        Object.assign(n, t);
     });
   } catch (e) {
     return Promise.reject(e);

From d5b9fc68d1d3290b449491c7ffdd988598a04427 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Sun, 8 Nov 2020 20:34:15 -0500
Subject: [PATCH 3/4] Update README.md

---
 README.md | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 298df4d6..46b1cd5e 100644
--- a/README.md
+++ b/README.md
@@ -109,24 +109,27 @@ export default function(e, t, r) {
 
 ```jsonc
 {
-  "main": "dist/foo.umd.js",        // legacy UMD output (for Node & CDN use)
-  "module": "dist/foo.module.js",   // legacy ES Modules output (for bundlers)
-  "exports": "dist/foo.modern.js",  // modern ES2017 output
+  "main": "./dist/foo.umd.js",       // legacy UMD output (for Node & CDN use)
+  "module": "./dist/foo.module.js",  // legacy ES Modules output (for bundlers)
+  "exports": "./dist/foo.modern.js", // modern ES2017 output
   "scripts": {
     "build": "microbundle src/foo.js"
   }
 }
 ```
 
-The `"exports"` field can be an object where keys are your package's "entry modules":
+The `"exports"` field can also be an object for packages with multiple entry modules:
 
 ```jsonc
 {
   "name": "foo",
   "exports": {
-    ".": "dist/foo.modern.js",       // import "foo" (the default)
-    "./lite": "dist/lite.modern.js", // import "foo/lite"
-    "./full": "dist/full.modern.js"  // import "foo"
+    ".": "./dist/foo.modern.js",       // import "foo" (the default)
+    "./lite": "./dist/lite.modern.js", // import "foo/lite"
+    "./full": "./dist/full.modern.js"  // import "foo"
+  },
+  "scripts": {
+    "build": "microbundle src/*.js"    // build foo.js, lite.js and full.js
   }
 }
 ```

From ef001d6a15428c0707e1684fac31c9367fabf0cc Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Sun, 8 Nov 2020 20:34:33 -0500
Subject: [PATCH 4/4] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 46b1cd5e..2dfe65d0 100644
--- a/README.md
+++ b/README.md
@@ -65,7 +65,7 @@ In addition to the above formats, Microbundle also outputs a `modern` bundle spe
 // Our source, "src/make-dom.js":
 export default async function makeDom(tag, props, children) {
   let el = document.createElement(tag);
-  el.append(...(await children));
+  el.append(...await children);
   return Object.assign(el, props);
 }
 ```