diff options
Diffstat (limited to 'examples/fast-build/src')
4 files changed, 25 insertions, 0 deletions
diff --git a/examples/fast-build/src/components/ExternalHoisted.astro b/examples/fast-build/src/components/ExternalHoisted.astro new file mode 100644 index 000000000..a9e7d2ae2 --- /dev/null +++ b/examples/fast-build/src/components/ExternalHoisted.astro @@ -0,0 +1,2 @@ +<div id="external-hoist"></div> +<script type="module" hoist src="/src/scripts/external-hoist"></script> diff --git a/examples/fast-build/src/components/InlineHoisted.astro b/examples/fast-build/src/components/InlineHoisted.astro new file mode 100644 index 000000000..ba6c0ab4d --- /dev/null +++ b/examples/fast-build/src/components/InlineHoisted.astro @@ -0,0 +1,13 @@ +<script type="module" hoist> + import { h, render } from 'preact'; + + + const mount = document.querySelector('#inline-hoist'); + + function App() { + return h('strong', null, 'Hello again'); + } + + render(h(App), mount); +</script> +<div id="inline-hoist"></div> diff --git a/examples/fast-build/src/pages/index.astro b/examples/fast-build/src/pages/index.astro index 9d4555b79..ef0136b27 100644 --- a/examples/fast-build/src/pages/index.astro +++ b/examples/fast-build/src/pages/index.astro @@ -4,6 +4,8 @@ import grayscaleUrl from '../images/random.jpg?grayscale=true'; import Greeting from '../components/Greeting.vue'; import Counter from '../components/Counter.vue'; import { Code } from 'astro/components'; +import InlineHoisted from '../components/InlineHoisted.astro'; +import ExternalHoisted from '../components/ExternalHoisted.astro'; --- <html> @@ -44,5 +46,11 @@ import { Code } from 'astro/components'; <h1>Hydrated component</h1> <Counter client:idle /> </section> + + <section> + <h1>Hoisted scripts</h1> + <InlineHoisted /> + <ExternalHoisted /> + </section> </body> </html> diff --git a/examples/fast-build/src/scripts/external-hoist.ts b/examples/fast-build/src/scripts/external-hoist.ts new file mode 100644 index 000000000..ff7ee0bcf --- /dev/null +++ b/examples/fast-build/src/scripts/external-hoist.ts @@ -0,0 +1,2 @@ +const el = document.querySelector('#external-hoist'); +el.textContent = `This was loaded externally`; |