forked from 11ty/is-land
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-svelte.html
94 lines (70 loc) · 2.53 KB
/
demo-svelte.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
---
layout: layout.html
title: Svelte Islands
showPageCss: true
---
<h1><a href="/">is-land</a> using <img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fsvelte.dev%2F/"
alt="IndieWeb avatar for https://svelte.dev/"
width="28"
height="28"
decoding="async"
loading="lazy"> Svelte</h1>
<p>Note that Svelte requires a compiler for both client and server rendering, in this case provided by Eleventy.</p>
<h2>Scroll down</h2>
<hr style="height: 100vh">
<h2>Client-rendered Svelte</h2>
{% assign component = "./lib/svelte/my-component-js-only.svelte" | svelte %}
<p>Using autoinit:</p>
<is-land on:visible autoinit="svelte" import="{{ component.clientJsUrl }}"></is-land>
<p>Using script:</p>
<is-land on:visible>
<div id="svelte-app-client"></div>
<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 %}
<p>Super advanced use case documented for complete-ness: server-rendered, island-toggled Svelte.</p>
{% assign component = "./lib/svelte/my-component-html-only.svelte" | svelte: page.url %}
<is-land on:visible>
<template data-island>{{ component.html }}</template>
</is-land>
{% endcomment %}
<h2>Server-rendered Svelte (SSR)</h2>
<h3>No hydration, HTML only</h3>
<p>Without hydration, the island is unnecessary.</p>
<div class="demo-component">
<!-- Component CSS is added to the <head> in layout.html -->
{% assign component = "./lib/svelte/my-component-html-only.svelte" | svelte: page.url %}
{{ component.html }}
</div>
<h3>With Hydration</h3>
{% assign component = "./lib/svelte/my-component.svelte" | svelte: page.url %}
<!-- Component CSS is added to the <head> in layout.html, we don’t need duplicated CSS littered throughout every use of the component -->
<is-land on:visible autoinit="svelte-ssr" import="{{ component.clientJsUrl }}">
{{ component.html }}
</is-land>
<is-land on:visible>
<!-- Component CSS is added to the <head> in layout.html, we don’t need duplicated CSS littered throughout every use of the component -->
{% comment %}<style>{{ component.css }}</style>{% endcomment %}
<div id="svelte-app-ssr">{{ component.html }}</div>
<template data-island>
<script type="module">
import App from '{{ component.clientJsUrl }}';
new App({
target: document.getElementById("svelte-app-ssr"),
// SSR must have hydrate: true
hydrate: true
});
</script>
</template>
</is-land>