From 5f78bf2a417526729adbca23b8cfc92c86b9c18b Mon Sep 17 00:00:00 2001
From: Dave Kennedy <dave-kennedy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 20:09:25 -0700
Subject: [PATCH] Clarify lazy loading instructions

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

diff --git a/README.md b/README.md
index 2f9af7a..9a613b1 100644
--- a/README.md
+++ b/README.md
@@ -47,20 +47,26 @@ npm install @11ty/is-land
 
 Add `is-land.js` to your primary bundle. It can be deferred and/or loaded asynchronously.
 
+When using the `autoinit` and/or `import` attributes to lazy load assets, `is-land-autoinit.js` is also required.
+
 When using with web components it must be the first custom element defined (via `customElements.define`) on the page. Choose your style:
 
 ```html
 <script type="module" src="/is-land.js"></script>
+
+<!-- Optional, needed for lazy loading -->
+<script type="module" src="/is-land-autoinit.js"></script>
 ```
 
 ```html
 <script type="module">
-import "/is-land.js";
+  import "/is-land.js";
+
+  // Optional, needed for lazy loading
+  import "/is-land-autoinit.js";
 </script>
 ```
 
-The framework `autoinit` examples shown below now require a separate `is-land-autoinit.js` file too.
-
 ## Usage
 
 ```html
@@ -145,19 +151,32 @@ You can also use the `ready` attribute for styling, added to the `<is-land>` whe
 
 ```html
 <style>
-is-land[ready] {
-  background-color: lightgreen;
-}
+  is-land[ready] {
+    background-color: lightgreen;
+  }
 </style>
 ```
 
-### Framework Support
+### Lazy Asset Loading
+
+The following examples require `is-land-autoinit.js` to be sourced in addition to `is-land.js`:
+
+```html
+<script type="module" src="/is-land.js"></script>
+<script type="module" src="/is-land-autoinit.js"></script>
+```
 
-[Demos and source in the HTML](https://is-land.11ty.dev/) are available for each framework listed here. These examples require the `is-land-autoinit.js` JavaScript file (in addition to `is-land.js`).
+Use the `import` attribute to load a third party library or component code on initialization:
 
-#### `autoinit`
+```html
+<is-land on:visible import="./lib/vanilla-web-component.js">
+  <vanilla-web-component>
+    Put your pre-JS fallback content in your web component.
+  </vanilla-web-component>
+</is-land>
+```
 
-Use the `autoinit` and `import` attributes together to import a third party library (or component code). `autoinit` can be one of `petite-vue`, `vue`, `preact`, or `svelte`. It is recommended to use a self-hosted framework library (future Eleventy integrations will automate this for you).
+The `autoinit` attribute is used to initialize a third party framework. It can be one of `petite-vue`, `vue`, `preact`, `svelte`, or `svelte-ssr`. It is recommended to use a self-hosted framework library (future Eleventy integrations will automate this for you).
 
 ```html
 <is-land on:visible autoinit="petite-vue" import="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js" v-scope="{ name: 'post-JS' }">
@@ -170,6 +189,8 @@ Use the `autoinit` and `import` attributes together to import a third party libr
 </is-land>
 ```
 
+[Demos and source in the HTML](https://is-land.11ty.dev/) are available for each framework listed here.
+
 #### Petite Vue
 
 * Small library (8K)