Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify lazy loading instructions #28

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Clarify lazy loading instructions #28

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 31 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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/[email protected]/dist/petite-vue.es.js" v-scope="{ name: 'post-JS' }">
Expand All @@ -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)
Expand Down