Sayfa yazmak

Sayfa uzantısıyla biten her dosya bir sayfadır. Varsayılan uzantılar: .ht.js, .html.js ve TypeScript / JSX türevleri (.ht.ts, .ht.tsx, …).

Çıktı <html> ile başlıyorsa sitelo başına otomatik olarak <!DOCTYPE html> ekler. Biçimlendirme için ht.js (javascript-to-html) tercih edin — şablon motoru ya da React çalışma zamanı olmadan, dize döndüren etiket fonksiyonları.

1. HTML döndüren bir fonksiyon

export default ({ params, data, dev }) => `
  <html>
    <body><h1>Merhaba</h1></body>
  </html>
`

import { html, body, h1 } from 'javascript-to-html'

export default ({ params, data, dev }) =>
  html(
    body(h1('Merhaba'))
  )

export default function Page({ params, data, dev }) {
  return (
    <html>
      <body><h1>Merhaba</h1></body>
    </html>
  )
}

JSX dosyaları *.ht.jsx / *.ht.tsx kullanır ve react + react-dom kurulu olmasını gerektirir. Aşağıdaki JSX kısıtlamaları bölümüne bakın — sitelo, JSX’i derleme sırasında statik HTML’e çevirir; tarayıcıda bir React uygulaması değildir.

2. Düz bir dize

export default `<html><body><h1>Bundan daha statiği yok</h1></body></html>`

3. Yapılandırılmış bir modül

render, data ve generateStaticParams işlevlerini bir arada tutun:

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) => `<html><body><h1>${data.title}</h1></body></html>`,
}

import { html, body, h1 } from 'javascript-to-html'

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) =>
    html(
      body(h1(data.title))
    ),
}

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) => (
    <html>
      <body><h1>{data.title}</h1></body>
    </html>
  ),
}

JSX kısıtlamaları

sitelo, tanıdık JSX sözdizimini yazabilmeniz için .ht.jsx / .ht.tsx sayfalarını react-dom/server ile işleyebilir. Bu bir yazım kolaylığıdır — React uygulaması değil.

React tarayıcı için tasarlandı: bağlanan, hidrasyona uğrayan ve olaylara yanıt veren bir bileşen ağacı. sitelo bu çalışma zamanını sayfalarınızla birlikte hiç göndermez. Derleme sırasında JSX’inizi bir HTML dizesine işler, dosyayı yazar ve durur. İstemci tarafında React paketi, hidrasyon ya da tarayıcıda bekleyen sanal DOM yoktur.

Bu nedenle:

• Olay işleyicileri (onClick, onChange, …) bitmiş sitede hiçbir şey yapmaz — dinleyen kimse yoktur. Geliştirme sunucusu bunları bulursa uyarır.
• Kancalar (useState, useEffect, …) yayımlanan sayfanın parçası değildir. Derleme işlemesi sırasında bir kez çalışabilirler; tarayıcıda durum tutmazlar.
• Yalnızca tarayıcıda bulunan API’ler (window, document) sayfa derleme sırasında işlenirken kullanılamaz.
• dangerouslySetInnerHTML HTML dizeleri enjekte etmek için çalışır; etkileşim yine de ayrı bir istemci <script> etiketi gerektirir.

Tıklamalar, formlar ve diğer istemci davranışları için varlık hattı üzerinden normal bir betik bağlayın ya da istek anında HTML için sunucu adaları kullanın. JSX sözdizimine ihtiyacınız yoksa ht.js ya da şablon dizelerini tercih edin — React kurulumu yok ve model “derleme sırasında HTML” ile örtüşüyor.

İşleme bağlamı

Her sayfa fonksiyonu tek bir argüman alır:

params

Bu sayfanın rota parametreleri (Record<string, string | string[]>).

data

data() fonksiyonunuzun döndürdüğü her şey.

page

Rota üst verisi (routePath, relativePath, …).

dev

Geliştirme sunucusunda true, derleme sırasında false.