Scripts hydration library

Connect script or just insert it inline. type="module" required!

<script type="module">
    import 'filePath/index.js';
</script>

Load directives

load

• Priority: High
• Useful for: Immediately-visible UI elements that need to be interactive as soon as possible. Load after dom ready DOMContentLoaded.

<div data-hydrate="load">
    <h1>Load Demo</h1>
    <template>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/2.5.4/tippy.all.js"
            integrity="sha512-jIIh0z4fzfV4cFju6uTH2QY9Q/UrRd09aa35FKbh759/sl4VyIlA9JMbjM3nSFLNESeiih6pzDlsB4GLd0JZlw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script type="module">
            console.log('I am load script');
        </script>
    </template>
</div>

idle

• Priority: Medium
• Useful for: Lower-priority UI elements that don’t need to be immediately interactive.

Load and hydrate the component JavaScript once the page is done with its initial load and the requestIdleCallback event has fired. If you are in a browser that doesn’t support requestIdleCallback, then the document load event is used.

<div data-hydrate="idle">
    <h1>IDLE Demo</h1>
    <template>
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
        <script type="module">
            console.log('I am idle script');
        </script>
    </template>
</div>

visible

• Priority: Low
• Useful for: Low-priority UI elements that are either far down the page (“below the fold”) or so resource-intensive to load that you would prefer not to load them at all if the user never saw the element.

Load and hydrate the component JavaScript once the component has entered the user’s viewport. This uses an IntersectionObserver internally to keep track of visibility.

Optionally, a value for rootMargin can be passed to the underlying IntersectionObserver. When rootMargin is specified, the component JavaScript will hydrate when a specified margin (in pixels) around the component enters the viewport, rather than the component itself.

<div data-hydrate="visible" data-hydrate-root-margin="200">
    <h1>Visible Demo</h1>
    <template>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script type="module">
            console.log('I am visible script');
        </script>
    </template>
</div>