nnuforgeDokumentasi
ENID
Contoh

Rendering React

Paket @nuforge/react me-render pohon View reaktif dari sebuah Frame dengan React. Sebuah Frame memuat pohon View hidup yang dihasilkan dari program Anda, dan paket ini mengikat pohon tersebut ke React sehingga UI diperbarui otomatis saat state reaktif berubah.

Rendering klien

Bungkus aplikasi Anda dengan NuProvider dan render sebuah frame dengan NuFrame:

'use client';

import { NuProvider, NuFrame } from '@nuforge/react';

export function Page({ nu, frame }) {
  return (
    <NuProvider nu={nu}>
      <NuFrame frame={frame} />
    </NuProvider>
  );
}

Ekspor

  • NuProvider — menaruh instance Nu pada konteks React sehingga turunannya dapat menjangkaunya.
  • useNu() — membaca Nu dari konteks. Panggil di dalam komponen yang di-render di bawah sebuah NuProvider.
  • observer(Component) — sebuah higher-order component (gaya mobx-react-lite) yang me-render ulang komponen yang dibungkus setiap kali state reaktif yang dibacanya berubah. NuFrame sendiri adalah sebuah observer, sehingga ia diperbarui secara langsung saat state berubah.
  • NuFrame — me-render pohon View dari sebuah frame.

Pemetaan DOM

Saat pohon View dipetakan ke elemen DOM, nama atribut dinormalisasi ke padanan React-nya:

  • class menjadi className.
  • for menjadi htmlFor.
  • Sebuah binding dua arah (value:={x} di DSL) me-render input terkontrol. Ia mempertahankan prop value dan menambahkan handler onChange yang menulis nilai baru (atau checked) kembali ke state.

Rendering server (RSC / SSR)

Untuk output statis tanpa JS klien, impor dari entry server. NuStatic dan renderView keduanya diekspor dari @nuforge/react/server:

import { Nu } from '@nuforge/core';
import { Parser } from '@nuforge/parser';
import { NuStatic } from '@nuforge/react/server';
import * as t from '@nuforge/types';

// A React Server Component — no client JS for the runtime
export default function Page() {
  const nu = Nu.create();
  nu.load(t.state({ program: Parser.parseProgram(SOURCE) }));
  const frame = nu.createFrame({ component: { name: 'App' } });
  return <NuStatic frame={frame} />;
}

NuStatic dan renderView bersifat murni: keduanya tidak memakai hook, tidak memo, dan tidak membawa banner 'use client'. Hal itu membuat keduanya menghasilkan first paint statis tanpa JavaScript runtime yang dikirim ke browser. Saat Anda butuh interaktivitas, pasangkan output statis dengan NuFrame klien (yang ter-hydrate) agar halaman menjadi hidup setelah first paint.

Ini siap untuk Next.js App Router: entry klien membawa banner 'use client', sementara entry server tetap bebas dari direktif klien sehingga dapat berjalan di dalam React Server Component.

Hooks & helper

Hook praktis memangkas boilerplate saat menyambungkan runtime ke React:

'use client';

import { useNuFromSource, useFrame, NuProvider, NuFrame } from '@nuforge/react';

export function Demo({ source }: { source: string }) {
  const nu = useNuFromSource(source); // parse + load sekali, dibuang saat unmount
  const frame = useFrame(nu, 'App'); // membuat frame, dibuang saat unmount

  return (
    <NuProvider nu={nu}>
      <NuFrame frame={frame} />
    </NuProvider>
  );
}
  • useNuFromSource(source, opts?) — bangun runtime dari DSL dalam satu pemanggilan (membungkus Nu.fromSource).
  • useFrame(nu, component) — membuat dan otomatis membuang frame.
  • useObserved(compute) — primitif granular: re-render hanya saat nilai reaktif yang dibaca di dalam compute berubah, jadi Anda membaca tepat yang dibutuhkan alih-alih membungkus seluruh komponen:
import { useObserved, useNode } from '@nuforge/react';

function TitleField({ id }: { id: string }) {
  const node = useNode(id); // lookup bertipe dari <NuProvider>
  const title = useObserved(() => node?.props.title); // re-render hanya saat title berubah
  return <input value={String(title ?? '')} readOnly />;
}
  • useNode(id) — cari node berdasarkan id dari provider terdekat.

Langkah berikutnya

  • Ekspor Kode — ubah sebuah program menjadi komponen React mandiri tanpa nuforge saat runtime.
  • Memulai — siapkan proyek dan render frame pertama Anda.
EkstensiEkspor Kode