From 67d6b83992dd60970ed7036f9d36a53c728d7de6 Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Thu, 25 Aug 2022 01:30:01 -0500
Subject: [PATCH] docs: Changeset and README

---
 .changeset/wild-lizards-raise.md | 18 +++++++++++++
 README.md                        | 43 +-------------------------------
 2 files changed, 19 insertions(+), 42 deletions(-)
 create mode 100644 .changeset/wild-lizards-raise.md

diff --git a/.changeset/wild-lizards-raise.md b/.changeset/wild-lizards-raise.md
new file mode 100644
index 000000000..25086ee96
--- /dev/null
+++ b/.changeset/wild-lizards-raise.md
@@ -0,0 +1,18 @@
+---
+'preact-cli': major
+---
+
+Removes support for automatic async routes via `@preact/async-loader`.
+
+Instead of magic directories, users can use `preact-iso`'s `lazy()` to split routes & components as they wish from anywhere.
+
+This should be a lot more powerful and transparent compared to the previous setup.
+
+```js
+// before
+import Home from './routes/home';
+
+// after
+import { lazy } from 'preact-iso';
+const Home = lazy(() => import('./routes/home.js'));
+```
diff --git a/README.md b/README.md
index 510e08376..842634088 100644
--- a/README.md
+++ b/README.md
@@ -30,8 +30,7 @@
 ### Features
 
 - **100/100 Lighthouse score**, right out of the box ([proof])
-- Fully **automatic code splitting** for routes _(see [Route-Based Code Splitting](#route-based-code-splitting))_
-- Transparently code-split any component with an [`async!`] prefix
+- Transparently code-split any component with a [`lazy()`] import
 - Auto-generated [Service Workers] for offline caching powered by [Workbox]
 - [PRPL] pattern support for efficient loading
 - Zero-configuration pre-rendering / server-side rendering hydration
@@ -358,45 +357,6 @@ export default (config, env, helpers, options) => {
 };
 ```
 
-### Route-Based Code Splitting
-
-"Route" components are automatically code-splitted at build time to create smaller bundles and avoid loading more code than is needed by each page. This works by intercepting imports for route components with an [async loader](https://github.com/preactjs/preact-cli/tree/master/packages/async-loader), which returns a lightweight wrapper component that handles code splitting seamlessly.
-
-Automatic code splitting is applied to all JavaScript and TypeScript files in the following locations:
-
-<table>
-<thead><tr><th>Pattern</th><th>Examples</th></tr></thead>
-<tbody>
-<tr><td>
-<pre>src/<b>routes</b>/<kbd>NAME</kbd></pre>
-</td><td>
-<code>src/routes/home.js</code><br>
-<code>src/routes/about/index.tsx</code>
-</td></tr>
-<tr><td>
-<pre>src/components/<b>routes</b>/<kbd>NAME</kbd></pre>
-</td><td>
-<code>src/components/routes/profile.ts</code><br>
-<code>src/components/routes/profile/index.js</code>
-</td></tr>
-<tr><td>
-<pre>src/components/<b>async</b>/<kbd>NAME</kbd></pre>
-</td><td>
-<code>src/components/async/profile.ts</code><br>
-<code>src/components/async/profile/index.js</code>
-</td></tr>
-</tbody></table>
-
-> **Note**:
-> Automatic code splitting **only** supports default exports, not named exports:
->
-> ```diff
-> - import { Profile } from './routes/profile';
-> + import Profile from './routes/profile';
-> ```
->
-> This is an intentional limitation that ensures effective code splitting. For components that need named exports, place them in a directory that doesn't trigger automatic code splitting. You can then manually code-split the default export by re-exporting it from `routes/` or importing it with the `"async!"` prefix.
-
 [promise]: https://npm.im/promise-polyfill
 [fetch]: https://github.com/developit/unfetch
 [preact]: https://github.com/preactjs/preact
@@ -423,7 +383,6 @@ Automatic code splitting is applied to all JavaScript and TypeScript files in th
 [preact cli preset]: https://github.com/preactjs/preact-cli/blob/master/packages/cli/lib/lib/babel-config.js
 [service workers]: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
 [customize babel]: https://github.com/preactjs/preact-cli/wiki/Config-Recipes#customising-babel-options-using-loader-helpers
-[`async!`]: https://github.com/preactjs/preact-cli/blob/1.4.1/examples/full/src/components/app.js#L7
 [sass]: https://sass-lang.com
 [less]: http://lesscss.org
 [defineplugin]: https://github.com/preactjs/preact-cli/wiki/Config-Recipes#use-environment-variables-in-your-application