search

11ty / is-land

A new performance-focused way to add interactive client-side components to your web site.
https://is-land.11ty.dev/
MIT License
526 stars 17 forks source link

Document how this works with Vite #6

Closed SteveALee closed 1 year ago

SteveALee commented 2 years ago

I can't quite grock how this interacts with the project bundler and guess others might also wonder.

A specific question is if the framework code is dynamically loaded how does it get bundled so is only loaded for the first hydrated component. Or is this somehting all bundler can support?

To be honest, right now I just care about vite_js (ie rollup) :)

zachleat commented 1 year ago

I tested these 3 methods and they all work fine with Vite (and with the Eleventy Vite plugin v4.0.0)!

<!-- direct reference to node modules -->
<script type="module" src="./node_modules/@11ty/is-land/is-land.js"></script>

<!-- bare specifier -->
<script type="module">
import "@11ty/is-land";
</script>

<script type="module" src="./external-file.js"></script>
<!-- where external-file.js declares `import "@11ty/is-land";` -->

I would warn that this did not work in Vite (nor in Eleventy Vite):

<script type="module" src="@11ty/is-land"></script>