https://kofi.sexy/blog/modern-spas
Well, creating that ideal setup was easier than I expected. My first key discovery was the <script type=importmap> element. Import maps let you write JavaScript modules that depend on named packages without using a bundler. The end result is a SPA that feels modern and standard, but without the need for a compilation step:
Well, creating that ideal setup was easier than I expected. My first key discovery was the <script type=importmap> element. Import maps let you write JavaScript modules that depend on named packages without using a bundler. The end result is a SPA that feels modern and standard, but without the need for a compilation step:
JavaScript:
<!DOCTYPE html>
<script type=importmap>
{
"imports": {
"solid-js": "/node_modules/solid-js/dist/solid.js",
"solid-js/html": "/node_modules/solid-js/html/dist/html.js",
"solid-js/web": "/node_modules/solid-js/web/dist/web.js"
}
}
</script>
<script type=module>
// standard import declarations thanks to the import map above
import html from 'solid-js/html'
import { render } from 'solid-js/web'
const HelloWorld = () => {
// tagged template literals feel close enough to JSX (the defacto standard)
return html`<div>Hello World!</div>`
}
render(HelloWorld, document.getElementById('app'))
</script>
<main id=app></main>