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

Merged
merged 2 commits into from
Feb 5, 2025
Merged

Clarify lazy loading instructions #28

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f78bf2
Clarify lazy loading instructions
dave-kennedy Nov 7, 2024
91d282c
Copy tweaks
zachleat Feb 5, 2025
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
26 changes: 16 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,10 @@ When using with web components it must be the first custom element defined (via

```html
<script type="module">
import "/is-land.js";
import "/is-land.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 +143,25 @@ 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
### Framework Component Support

The following examples require `is-land-autoinit.js` to be loaded (in addition to `is-land.js`):

[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`).
```html
<script type="module" src="/is-land.js"></script>
<script type="module" src="/is-land-autoinit.js"></script>
```

#### `autoinit`
Available attributes (with `is-land-autoinit.js`):

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).
- `import`: load a third party library or component code file during initialization.
- `autoinit`: initialize a framework type, one of: `petite-vue`, `vue`, `preact`, `svelte`, or `svelte-ssr`.

```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 +174,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