Skip to content

Commit

Permalink
Breaking: Remove custom JS and CSS lazy loading and instead recommend…
Browse files Browse the repository at this point in the history 
… template data-island for everything!
  • Loading branch information
@zachleat
zachleat committed Sep 26, 2022
1 parent 85496c8 commit df050d6
Show file tree
Hide file tree
Showing 8 changed files with 126 additions and 162 deletions.
32 changes: 18 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,20 @@ Place any post-JS content inside of one or more `<template data-island>` element
</is-land>
```

#### Run your own custom JavaScript

Embed a script inside the template to run custom JS when the island’s loading conditions have been satisfied!

```html
<is-land on:visible>
<template data-island>
<script type="module">
console.log("Hydrating!");
</script>
</template>
</is-land>
```

#### Styling

The `ready` attribute is added to the `<is-land>` when the island has been hydrated.
Expand All @@ -119,18 +133,6 @@ is-land[ready] {
</style>
```

#### Run your own custom JavaScript

This code runs when the island’s loading conditions have been satisfied! Note the `type="module/island"`.

```html
<is-land on:visible>
<script type="module/island">
console.log("Hydrating!");
</script>
</is-land>
```

### Framework Support

[Demos and source in the HTML](https://is-land.11ty.dev/) are available for each framework listed here.
Expand Down Expand Up @@ -175,13 +177,15 @@ Use the `autoinit` and `import` attributes together to import a third party libr
Hello from <span v-html="name">pre-JS</span>
</div>

<script type="module/island">
<template data-island>
<script type="module">
import { createApp } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.prod.js";
createApp({
data: () => ({ name: "post-JS" })
}).mount("#vue-app")
</script>
</script>
</template>
</is-land>
```

Expand Down
20 changes: 12 additions & 8 deletions demo-importmaps.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,15 @@ <h2><code>on:visible</code></h2>
<span v-html="count">0</span>
</div>

<script type="module/island">
import { createApp } from "petite-vue";
<template data-island>
<script type="module">
import { createApp } from "petite-vue";

createApp({
count: 0,
}).mount("#petite-vue-app-visible")
</script>
createApp({
count: 0,
}).mount("#petite-vue-app-visible")
</script>
</template>
</is-land>

<h3>Lazy loaded Vue.js</h3>
Expand All @@ -55,13 +57,15 @@ <h3>Lazy loaded Vue.js</h3>
<span v-html="count">0</span>
</div>

<script type="module/island">
<template data-island>
<script type="module">
import { createApp } from "vue";

createApp({
data() {
return { count: 0 };
}
}).mount("#vue-app")
</script>
</script>
</template>
</is-land>
38 changes: 20 additions & 18 deletions demo-lit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h2>Scroll down</h2>

<h2>Client-rendered Lit</h2>

<p>You can use `import="./lit-component.js"` or `&lt;import type="module/island"&gt;`:</p>
<p>You can use `import="./lit-component.js"` or `&lt;template data-island&gt; with &lt;script type="module"&gt;`:</p>

<is-land on:visible import="./lib/lit/lit-component-client.js">
This is a lit component:
Expand All @@ -20,23 +20,25 @@ <h2>Client-rendered Lit</h2>
<is-land on:visible id="lit-test">
This is a lit component: <lit-other-web-component class="demo-component" name="World">Fallback content!</lit-other-web-component>

<script type="module/island">
import {html, css, LitElement} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";

customElements.define('lit-other-web-component', class extends LitElement {
// encapsulated styles!
static styles = css`p { color: blue; margin: 0; }`;

static properties = {
name: {type: String},
};

render() {
this.classList.add("test-c-finish");
return html`<p>Hello, ${this.name || "Stranger"}!</p>`;
}
});
</script>
<template data-island>
<script type="module">
import {html, css, LitElement} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";

customElements.define('lit-other-web-component', class extends LitElement {
// encapsulated styles!
static styles = css`p { color: blue; margin: 0; }`;

static properties = {
name: {type: String},
};

render() {
this.classList.add("test-c-finish");
return html`<p>Hello, ${this.name || "Stranger"}!</p>`;
}
});
</script>
</template>
</is-land>

<h2>Server-rendered Lit (SSR)</h2>
Expand Down
40 changes: 23 additions & 17 deletions demo-preact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,31 @@ <h2>Client-rendered Preact</h2>
<is-land on:visible>
<div id="preact-app"></div>

<script type="module/island">
import { html, render } from 'https://unpkg.com/htm/preact/index.mjs?module'
<template data-island>
<script type="module">
import { html, render } from 'https://unpkg.com/htm/preact/index.mjs?module'

function App (props) {
return html`<p><strong>Hello ${props.name}!</strong></p>`;
}
function App (props) {
return html`<p><strong>Hello ${props.name}!</strong></p>`;
}

render(html`<${App} name="from Preact" />`, document.getElementById("preact-app"));
</script>
render(html`<${App} name="from Preact" />`, document.getElementById("preact-app"));
</script>
</template>
</is-land>

{% assign componentHydration = "./lib/preact/preact-component.js" | preact %}
<is-land on:visible>
<div id="preact-app-client"></div>

<script type="module/island">
import { render } from 'https://unpkg.com/htm/preact/index.mjs?module';
import Counter from '{{ componentHydration.clientJsUrl }}';
<template data-island>
<script type="module">
import { render } from 'https://unpkg.com/htm/preact/index.mjs?module';
import Counter from '{{ componentHydration.clientJsUrl }}';

render(Counter(), document.getElementById("preact-app-client"));
</script>
render(Counter(), document.getElementById("preact-app-client"));
</script>
</template>
</is-land>

<h2>Server-rendered Preact (SSR)</h2>
Expand All @@ -56,10 +60,12 @@ <h3>With Hydration</h3>
<is-land on:visible>
<div id="preact-app-ssr">{{ componentHydration.html }}</div>

<script type="module/island">
import { render } from 'https://unpkg.com/htm/preact/index.mjs?module';
import Counter from '{{ componentHydration.clientJsUrl }}';
<template data-island>
<script type="module">
import { render } from 'https://unpkg.com/htm/preact/index.mjs?module';
import Counter from '{{ componentHydration.clientJsUrl }}';

render(Counter(), document.getElementById("preact-app-ssr"));
</script>
render(Counter(), document.getElementById("preact-app-ssr"));
</script>
</template>
</is-land>
32 changes: 18 additions & 14 deletions demo-svelte.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,20 @@ <h2>Client-rendered Svelte</h2>

<is-land on:visible>
<div id="svelte-app-client"></div>
<script type="module/island">
import App from '{{ component.clientJsUrl }}';

new App({
target: document.getElementById("svelte-app-client"),

// prop override
props: {
name: "milky way galaxy"
},
});
</script>
<template data-island>
<script type="module">
import App from '{{ component.clientJsUrl }}';

new App({
target: document.getElementById("svelte-app-client"),

// prop override
props: {
name: "milky way galaxy"
},
});
</script>
</template>
</is-land>

{% comment %}
Expand Down Expand Up @@ -77,7 +79,8 @@ <h3>With Hydration</h3>

<div id="svelte-app-ssr">{{ component.html }}</div>

<script type="module/island">
<template data-island>
<script type="module">
import App from '{{ component.clientJsUrl }}';

new App({
Expand All @@ -86,5 +89,6 @@ <h3>With Hydration</h3>
// SSR must have hydrate: true
hydrate: true
});
</script>
</script>
</template>
</is-land>
33 changes: 19 additions & 14 deletions demo-vue.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,15 @@ <h3>Client-rendered petite-vue</h3>
</template>
</div>

<!-- when using eagerly loaded islands (no loading conditions), use `type="module"` instead of `type="module/island"` so the preload scanner can find it-->
<script type="module/island">
import { createApp } from "https://unpkg.com/[email protected]/dist/petite-vue.es.js";
<template data-island>
<script type="module">
import { createApp } from "https://unpkg.com/[email protected]/dist/petite-vue.es.js";

createApp({
count: 0,
}).mount("#petite-vue-app")
</script>
createApp({
count: 0,
}).mount("#petite-vue-app")
</script>
</template>
</is-land>

<h3>Client-rendered Vue.js</h3>
Expand All @@ -56,13 +57,15 @@ <h3>Client-rendered Vue.js</h3>
</template>
</div>

<script type="module/island">
<template data-island>
<script type="module">
import { createApp } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.prod.js";

createApp({
data: () => ({ count: 0 })
}).mount("#vue-app")
</script>
</script>
</template>
</is-land>

<h3>Works with &lt;details&gt;</h3>
Expand Down Expand Up @@ -231,10 +234,12 @@ <h3>With Hydration</h3>
{% assign component = "./lib/vue/vue-component.js" | vue %}
<div id="vue-app-ssr">{{ component.html }}</div>

<script type="module/island">
import { createSSRApp } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.prod.js";
import app from "{{ component.clientJsUrl }}";
<template data-island>
<script type="module">
import { createSSRApp } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.prod.js";
import app from "{{ component.clientJsUrl }}";

createSSRApp(app).mount("#vue-app-ssr");
</script>
createSSRApp(app).mount("#vue-app-ssr");
</script>
</template>
</is-land>
22 changes: 12 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,14 +318,16 @@ <h2>Custom Lazy Asset Loading</h2>
<button type="button">Hydrate the island</button>
</form>

<p>Loading <code>&lt;script type="module/island"&gt;</code>, <code>&lt;style media="style/island"&gt;</code>, <code>&lt;link rel="stylesheet" media="style/island"&gt;</code> when conditions are met. The text will turn red when the inline CSS loads and bold when the external stylesheet loads.</p>

<script type="module/island">
console.log( "Inline JS executed." );
</script>
<script type="module/island" src="./lib/js-file.js"></script>
<style media="style/island" data-media="(min-width: 1px)">
#script-style-loading { color: red; }
</style>
<link rel="stylesheet" media="style/island" data-media="(min-width: 1px)" href="./lib/css-file.css">
<p>Nest any inline <code>&lt;script&gt;</code>, <code>&lt;script src&gt;</code>, <code>&lt;style&gt;</code>, <code>&lt;link rel="stylesheet"&gt;</code> inside a <code>&lt;template data-island&gt;</code> to execute when conditions are met. The text will turn red when the inline CSS loads and bold when the external stylesheet loads.</p>

<template data-island>
<script type="module">
console.log( "Inline JS executed." );
</script>
<script type="module" src="./lib/js-file.js"></script>
<style>
#script-style-loading { color: red; }
</style>
<link rel="stylesheet" href="./lib/css-file.css">
</template>
</is-land>
Loading

0 comments on commit df050d6

Please sign in to comment.