Faunder
ENFI
Weblog

Yhden tiedoston Preact-komponentit

Yksi asia, josta olen aina pitänyt Vue:ssa, on sen Single-File Component (SFC) -lähestymistapa. Yhdessä .vue-tiedostossa logiikka, templaatti ja tyylit asuvat rinnakkain. Kaikki, mikä kuuluu komponenttiin, on samassa paikassa — komponentteja on helppo ymmärtää, refaktoroida ja siirtää.

Halusin saman tunteen Preactilla työskennellessäni.

Preact ei määrittele valmiiksi Vue-tyylistä yhden tiedoston formaattia, mutta se on tarpeeksi joustava omiin käytäntöihin. Tämä artikkeli kuvaa omaa tapaani rakentaa yhden tiedoston Preact-komponentteja Vue SFC:istä inspiroituneena — ilman build-vaihetta, kääntäjiä tai framework-tason abstraktioita.

Tavoite

  • Pidä logiikka, markup ja tyylit yhdessä tiedostossa
  • Vältä monimutkaista työkaluketjua tai build-vaihetta
  • Pysy idiomaattisessa Preactissa
  • Tee komponenteista helppolukuisia ja siirrettäviä

Ydinajatus

Yhden tiedoston Preact-komponentti sisältää tavallisen Preact-funktiokomponentin, sen markupin ja tyylit vierekkäin.

Ainoat omat apurit ovat pienet html- ja css-templaattitagit. Sen enempää magiaa ei tarvita.

Minimaalinen esimerkki

// ExampleComponent.ts
import { html, css } from "@faunder/markup"
import { useState } from "preact/hooks"

export function MyComponent() {
  const [count, setCount] = useState(0)

  const view = html`
    <div data-scope="MyComponent">
      <h1>Hello World</h1>
      <p>Count: ${count}</p>
      <button onClick=${() => setCount((c) => c + 1)}>
        Increment
      </button>
    </div>
  `

  const style = css`
    @scope ([data-scope="MyComponent"]) to ([data-scope]) {
      h1 {
        color: var( --primary-600);
      }
    }
  `

  return [view, style]
}

The css Helper

css-apuri on tarkoituksella yksinkertainen. Se on template tag, joka palauttaa raakaa CSS:ää sisältävän <style>-elementin. Pidän nämä pienet apurit Faunder Markupissa, johon on linkki alempana.

There's no runtime, no hashing, and no transformation step. What you write is what ends up in the DOM.

Miksi pidän tästä

  • Kolokaatio — logiikka, markup ja tyylit samassa paikassa
  • Yksinkertaisuus — ei custom build-putkia tai kääntäjiä
  • Ennustettavuus — tavallisia Preact-komponentteja
  • Helppo refaktorointi — siirrä tai poista komponentti yhtenä tiedostona

Tuntuma on lähellä Vue SFC -filosofiaa, mutta toteutus on kokonaan käyttäjätason käytäntöä.

Lopuksi

Preact ei pakota tiettyyn komponenttimuotoon — ja se on vahvuus. Pienillä apureilla ja modernilla CSS:llä saat Vue SFC:ien parhaat puolet Preact-ekosysteemissä.

Ladattavat