Kaynak Algılama

Browser runtime, ilk başlatma geçişi sırasında DOM'da bulunan başlangıç LentyStyle kaynaklarını algılar ve derler. Bu model initial-only çalışır: runtime ilk güvenilir source setini kaydeder ve sonradan eklenen node'ları otomatik source olarak kabul etmez.

Desteklenen iki kaynak türü vardır:

<link rel="stylesheet" href="...luis" data-luis>
<style data-luis>

Auto-Init Akışı

Core runtime bundle yüklendiğinde:

Core script kaynağı ve varsa data-luis-run ipuçları yakalanır
Browser ortamındaysa auto-init devreye girer
Belge hâlâ yükleniyorsa işlem DOMContentLoaded sonrasına bırakılır; değilse hemen başlar
Runtime, başlangıç link[data-luis] ve style[data-luis] kaynaklarını tarar
Güvenlik politikası ve data-luis option'ları okunur, ardından kaynaklar compile edilir

<link rel="stylesheet" href="./styles.luis" data-luis>
<script src="/assets/lentystyle.min.js"></script>

Kaynak Türleri

`<link>` Tabanlı

Runtime yalnızca şu koşulları sağlayan <link> kaynaklarını işler:

.luis uzantılı olmalı
rel="stylesheet" taşımalı
data-luis marker'ı içermeli
runtime source URL policy kontrolünden geçmeli

<!-- Sadece marker ile -->
<link rel="stylesheet" href="./styles.luis" data-luis>

<!-- Option'larla -->
<link rel="stylesheet" href="./styles.luis" data-luis="debug,performance">

Derleme tamamlandığında üretilen <style> tag'i kaynak <link> node'unun hemen arkasına eklenir. İlk keşif sırasında href snapshot'ı alınır; boot sonrasında href değiştirmek aynı source'u yeni bir hedefe çevirmiş olmaz.

Inline `<style>` Tabanlı

data-luis attribute'u taşıyan <style> bloğu, içindeki inline içerikten compile edilir.

<style data-luis>
  --primary: #2060ff;

  .btn {
    background: var(--primary);
    color: #fff;
  }
</style>

Bu kullanımda href yoktur; source doğrudan blok içeriğidir. Derleme tamamlandığında üretilen <style> tag'i kaynak bloğun hemen arkasına eklenir. İlk keşif sırasında inline metin snapshot'ı alınır; sonradan text içeriğini değiştirmek otomatik rebuild başlatmaz.

URL Güvenlik Politikası

Runtime, link tabanlı source URL'lerini compile etmeden önce güvenlik politikasına göre denetler.

Varsayılan davranış:

initial .luis source URL'leri için same-origin zorunludur
javascript:, vbscript:, data: ve blob: scheme'leri bloklanır
boş veya parse edilemeyen URL'ler reddedilir
runtime browser tarafında .luis @import hedeflerini fetch etmez

Örnek:

<!-- kabul edilir: same-origin -->
<link rel="stylesheet" href="/styles/app.luis" data-luis>

<!-- reddedilir: tehlikeli scheme -->
<link rel="stylesheet" href="javascript:alert(1)" data-luis>

<!-- reddedilir: varsayılan same-origin politikası -->
<link rel="stylesheet" href="https://cdn.example.com/app.luis" data-luis>

Cross-origin initial .luis source açmak istiyorsanız explicit runtime policy gerekir:

<script>
  window.__LentyStyleSecurityPolicy = {
    allowCrossOriginLuisSources: true,
  };
</script>

`data-luis` değerlerini kullanım

data-luis attribute'u virgülle ayrılmış değerleri kabul eder.

<!-- Yalnızca marker -->
<link rel="stylesheet" href="./styles.luis" data-luis>
<link rel="stylesheet" href="./styles.luis" data-luis="">

<!-- Tek token -->
<link rel="stylesheet" href="./styles.luis" data-luis="debug">
<link rel="stylesheet" href="./styles.luis" data-luis="lazy">

<!-- Birden fazla token -->
<link rel="stylesheet" href="./styles.luis" data-luis="debug,performance">
<link rel="stylesheet" href="./styles.luis" data-luis="lazy,performance">

<!-- Negation token'ları -->
<link rel="stylesheet" href="./styles.luis" data-luis="!worker">
<link rel="stylesheet" href="./styles.luis" data-luis="map,!debug">

Desteklenen değerlerin tam listesi:

debug
performance
map
lazy
worker
!debug
!performance
!map
!lazy
!worker

Desteklenmeyen token'lar yok sayılır.

Seçenekler ve Varsayılanlar

Seçenek	Varsayılan	Açıklama
`debug`	`false`	Warning ve info loglarını açar
`performance`	`false`	Derleme süre loglarını açar ve style yazımında hız odaklı yolu etkinleştirebilir
`map`	`false`	CSS text + source-map footer üretir
`lazy`	`false`	Observed selector'ları viewport-aware moda alır
`worker`	`auto`	Compile thread seçimini belirler

Post-Boot Davranış

Runtime initial-only çalışır. İlk güvenilir compile çevrimi tamamlandıktan sonra source kaydı dondurulur.

Bu nedenle:

boot sonrasında yeni link[data-luis] veya style[data-luis] eklemek otomatik compile başlatmaz
mevcut source üzerindeki href, rel, data-luis veya inline text değişikliği otomatik rebuild tetiklemez
runtime .luis @import loading yapmaz

Ne zaman `compileFromDom({ force: true })` gerekir

Boot sonrasında kaynak değişikliklerini runtime'ın otomatik izlemesini beklemiyorsanız ama aynı başlangıç source seti üzerinde yeniden compile çalıştırmak istiyorsanız compileFromDom({ force: true }) çağırmalısınız.

Bu çağrı şu durumlarda anlamlıdır:

aynı source üzerinde data-luis option'larını değiştirdiyseniz
aynı source üzerinde data-luis-manifest değerini değiştirdiyseniz
ilk compile başarısız olduysa ve aynı başlangıç source seti için açık bir yeniden deneme istiyorsanız
runtime'ı bir debug paneli veya kullanıcı aksiyonu ile elle tekrar çalıştırmak istiyorsanız

Örnek kullanım:

<link rel="stylesheet" href="/styles/site.luis" data-luis="debug">
<script src="/runtime/lentystyle.min.js"></script>

<script type="module">
  import { compileFromDom } from '@lentystyle/core/runtime'

  const rerunButton = document.getElementById('rerun-lentystyle')
  rerunButton?.addEventListener('click', () => {
    void compileFromDom({ force: true })
  })
</script>

<button id="rerun-lentystyle" type="button">
  LentyStyle'i yeniden derle
</button>