Best technique to lazy load components

[gjcourtney]

I wonder if anyone can offer the best approach to lazy load new components into Alpine.data() as they're required... I'll try to explain:

I'm working on a large application where lots of pages/modals have an Alpine component that's specific to that page/modal. We have a bundle for all of the common/shared components, but I'm looking to improve the way that we deliver the JS for individual components over the wire. At the moment, when the content for a modal loads through an AJAX request, we deliver the HTML and JS (inline) alongside each other, e.g.

<script>function specificComponent() { return { ... } }</script>
<div x-data="specificComponent">...</div>

This works fine, but I'd like to try and lean into loading separate JS files (which would benefit from browser caching), rather than delivering the JS inline. In my head, I should be able to do something like this:

<script src="specificComponent.js"></script>
<div x-data="specificComponent">...</div>

--- specificComponent.js ---
Alpine.data('specificComponent', () => ...)

The problem with this approach is it creates a race where the browser attempts to load specificComponent.js over the network, but most likely won't succeed before Alpine attempts to re-paint the page and discovers the component doesn't exist in Alpine.data().

I feel like there's a lazy loading technique for this scenario I must be missing, but can't work it out... Anyone able to point me in the right direction?

[ekwoka]

Using that same thing, instead of injecting a script tag, you can just dynamic import the file and wait for it to finish and then inject the html

[gjcourtney]

Ok, so I've been playing with this some more and have ended up with something that looks along these lines:

fetch(urlForContent)
	.then(response => response.text())
	.then(response => {
		// create a temporary element so we can query it
		let $responseElement = document.createElement('div')
		$responseElement.innerHTML = response

		// find any scripts to import in the response
		const $scripts = $responseElement.querySelectorAll('script')
		let scriptsToImport = []
		$scripts.forEach($script => {
			if ($script.src.length) {
				// we're going to dynamically import this script in a moment
				scriptsToImport.push($script.src)
				// remove the script from the response
				$script.remove()
			}
		})

		Promise.all(
			scriptsToImport.map(scriptSrc => import(/* webpackIgnore: true */scriptSrc))
		)
		.then((modules) => {
			// now that our JS dependencies have imported, set the content in the DOM
			// at this stage, we can be confident that our Alpine components are in the page
			document.getElementById(targetId).innerHTML = $responseElement.innerHTML
		})
	})

Does that match with what you were suggesting or is there a better way that you know of?

[ekwoka]

Basically, just some improved logic

const html = await fetch(url).then(res => res.text())
// parse to documentFragment
const node = document.createRange().createContextualFragment(html)

// gather and import scripts
const scripts = [...node.querySelectorAll('script')]
await Promise.all(scripts.map(script => import(script.src))

// replace content
document.getElementById(targetId).replaceChildren(node)

You shouldn't need to worry about removing the script tags, since the browser does not evaluate script tags appended in bulk from text.

[tanthammar]

Use Async Alpine in combination with Alpine lazy load assets

https://async-alpine.dev/

https://github.com/tanthammar/alpine-lazy-load-assets