Bileşenler

Bileşenler, JSX işaretlemesi oluşturmak için kullanılan yapı taşlarıdır. Her bileşen, PC tipini (senkron bileşenler için) veya APC tipini (asenkron bileşenler için) uygulayan bir fonksiyondur. Bu tür bir fonksiyonun ilk argümanı parametreler, ikincisi ise mevcut PreffX yardımcı programlarıdır.

Uygulama özellikleri:

1. Reaktivite: Reaktif değerler oluşturmak ve izlemek için sinyal sistemini (@preact/signals-core) kullanır. Yalnızca bu tür değerler yeniden oluşturmayı tetikler.

2. Yaşam döngüsü yönetimi: Bileşenin yüklenmesi ve kaldırılması sırasında geri çağırma işlevlerini çalıştırır ve efektleri otomatik olarak kaldırır.

3. PreffX yardımcı programlarını ikinci argüman olarak geçirme: Gerekli her şey parametrelerde gelir, yalnızca türlerin PreffX'ten içe aktarılması gerekir.

4. Asenkron fonksiyonlar için destek: Hem senkron hem de asenkron fonksiyonlarla çalışır, vaatler çözüldüğünde DOM ağacını otomatik olarak yeniden oluşturur.

Temel Uygulama

Sayaçlı bir bileşenin en basit uygulaması şu şekildedir:

import type { PC } from 'preffx';

const MyComponent: PC = (props, { signal, computed }) => {
    const { initialCount = 0 } = props;
    const count = signal(initialCount);
    
    return (
        <div>
            <p>Counter: {count}</p>
            <button onClick={() => count.value++}>Increase</button>
        </div>
    );
};

const App: PC = () => {
    return <MyComponent
        initialCount={5}
    />;
};

Reaktivite

Reaktiviteyi sağlamak için @preact/signals-core üzerine inşa edilmiş fonksiyonlar kullanılır; örneğin:

• signal - durum (state) için reaktif bir sinyal oluşturur,
• computed - bağımlı değerleri hesaplar,
• effect - yan etkileri yönetir.

Bu ve diğer fonksiyonlar, Preact Signals dokümantasyonunda açıklanan davranışları eksiksiz bir şekilde uygular.

Bileşen Bağlamı (Component Context)

Her bir bileşen örneği için, üst bileşenin bağlamını genişleten bir bağlam oluşturulur. Bu, yardımcı araçlar (utilities) aracılığıyla erişilebilen sıradan bir nesnedir:

import type { PC } from 'preffx';

const contextKey = 'ctx-counter';

const AnotherComponent: PC = (props, { context }) => {
    // read context
    const counter = context[contextKey];
    return <span>
        {counter}
    </span>;
};

export const App: PC = (props, { signal, context }) => {
    const counter = signal(0);
    // modify context
    context[contextKey] = counter;
    return <p>
        {valueFromContext}
        <AnotherComponent />
    </p>;
};

Yaşam Döngüsü

Her bileşen, yaşam döngüsü yardımcılarını kullanabilir:

• onMount - bileşen DOM ağacına eklendiğinde (yani öğeleri DOM ağacına dahil edildikten sonra) çağrılır;
• onDestroy - bileşen yok edildiğinde (yani öğeleri DOM ağacından kaldırılmadan önce) çağrılır.

import type { PC } from 'preffx';

export const App: PC = (props, { onMount, onDestroy }) => {
    const { count } = props;

    onMount(() => {
        // some mount logic
    });
    
    onDestroy(() => {
        // some destroy logic
    });
    return <button
        onClick={() => {
            count.value += 1
        }}
    >
        Count is {count}
    </button>
};

ID Oluşturma

id yardımcı aracı, bileşenler içinde kullanılmak üzere benzersiz tanımlayıcılar oluşturmayı sağlar:

import type { PC } from 'preffx';

export const App: PC = (props, { id }) => {
    // get unique id
    const inputId = id();
    return <div>
        <label>
            Password:
            <input
                type="password"
                aria-describedby={inputId}
            />
        </label>
        <p id={inputId}>
            The password should contain at least 18 characters
        </p>
    </div>;
};