Latte SFC – Single File Components

evromalarkey

Hraju si s myšlenkou zda by v Latte bylo možné použít SFC jako např. ve Vue, Svelte nebo Astru.

Dneska když už lze načítat javascript pomocí esm a importmap https://caniuse.com/import-maps, a css lze psát strukturovaně a zanořovat https://caniuse.com/css-nesting, tak vlastně není skoro potřeba žádný bundler.

Obrovskou výhodu v SFC má https://astro.build, a stránky tvořené přes tento framework jsou neuvěřitelně rychlé a dosahují nejlepšího skóre v PageSpeed. Právě proto že js a css se generuje u jednotlivých SFC komponent do <head> a na stránce jsou vykreslené pouze css a js komponent z té stránky.

Něco podobného by šlo aplikovat i v latte, a umožnilo by to např. takto

<style>
  .s-example {
	.s_body {
		color: red;
	}
  }
</style>

<script type="module">
    import { Stimulus, Controller } from '/js/stimulus.js'

    Stimulus.register('s-section', class extends Controller {
        connect() {
			console.log('connected')
        }
    })
</script>

<div class="s-section" data-controller="s-section">
    <div class="s_body"></div>
</div>

/js/stimulus.js

import { Application, Controller } from 'https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/+esm'

const Stimulus = new Application(document.documentElement)

Stimulus.start()

export { Stimulus, Controller }

Nevýhodu to má v tom že pokud je na stránce víc stejných komponent tak by se <style> a <script> duplikoval, což nechceme. Ideální by bylo aby se obojí injectovalo do <head> a bez duplicit. Napadlo mě to dělat přes n:block, ale to se mi nepodařilo takto použít aby to fungovalo takto komponentově. Takže nemám ponětí jak něčeho podobného v latte dosáhnout.

Každopádně kdyby tohle bylo v latte možné tak by to byl super způsob jak psát moderní js a css komponentově a docílit tak mnohem lepší rychlosti rendrování stránek na frontendu podobně jako Astro. Např. dát na style n:asset který by unikátně vykreslil tag v <head>.

Co si o tom myslíte?

Editoval evromalarkey (21. 9. 2023 14:17)