Polyfill

This demonstrates how to setup polyfill for future API’s like Temporal. Do note that this will block rendering until the js is loaded. Another point to consider is to vendor the file instead of relying on a CDN like jsdelivr.

https://npmx.dev/package/temporal-polyfill/v/0.3.1 https://cdn.jsdelivr.net/npm/temporal-polyfill@0.3.1/global.min.js

# Svelte

playground

<script>
	import Polyfill from './Polyfill.svelte'
</script>

<Polyfill src="https://cdn.jsdelivr.net/npm/temporal-polyfill@0.3.1/global.min.js">
	{Temporal.Now.zonedDateTimeISO().toString()}
</Polyfill>

<script>
	const loadScript = (url) => {
		return new Promise((resolve, reject) => {
			const script = document.createElement('script')
			script.src = url
			script.onload = resolve
			script.onerror = reject
			document.head.appendChild(script)
		})
	}

	let { src, children } = $props()
</script>

{#await loadScript(src) then _}
	{@render children?.()}
{/await}