nnuforgeDokumentasi
ENID
Contoh

Runtime & Core API

Runtime nuforge berada di @nuforge/core. Objek pusatnya adalah Nu — objek ini memiliki dokumen, menggerakkan reaktivitas, dan menyediakan API transaksional yang dapat di-undo untuk memutasi dan mengamati sebuah halaman. Halaman ini membahas lifecycle, mutasi dan riwayat, listener perubahan, pencarian node, serta anggota runtime lainnya.

Lifecycle

Anda membuat runtime dengan Nu.create(), memuat dokumen ke dalamnya, lalu membuat frame. Sebuah frame merender satu instance komponen, dan frame.view adalah pohon View reaktif yang dirender oleh host.

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

const nu = Nu.create();
nu.load(t.state({ program: Parser.parseProgram(SOURCE) }));

const frame = nu.createFrame({ component: { name: 'App' } });
frame.view; // the reactive View tree

Sebuah frame merender satu instance komponen, dan frame.view bersifat reaktif — baca di dalam konteks reaktif dan ia akan dijalankan ulang setiap kali state yang mendasarinya berubah. Anda dapat mencari frame kembali dengan nu.getFrame(id) dan membongkarnya dengan nu.removeFrame(frame).

Mutasi & riwayat

Setiap perubahan melewati nu.change. Sebuah perubahan berjalan sebagai satu transaksi: penulisan di dalam callback diterapkan bersama-sama dan dicatat sebagai satu langkah yang dapat di-undo.

const app = nu.state.program.components[0];
nu.change(() => {
  app.template.props.title = t.literal({ value: 'Hello' });
});

nu.undo();
nu.redo();
nu.canUndo();
nu.canRedo();

Riwayat bersifat granular: runtime hanya mencatat penulisan tingkat-field yang dilakukan sebuah perubahan, bukan snapshot penuh dari dokumen. Hal itu membuat undo dan redo murah baik dalam waktu maupun memori — meng-undo sebuah perubahan memutar ulang kebalikan dari persis penulisan tersebut, sehingga biayanya berskala dengan seberapa banyak yang Anda sentuh, bukan dengan seberapa besar dokumennya. Gunakan nu.canUndo() dan nu.canRedo() untuk mengatur elemen UI.

Mendengarkan perubahan

Ada dua langganan yang saling melengkapi. nu.listenToChangeset memberi Anda diff struktural per perubahan — node mana yang ditambahkan atau dibuang — sedangkan nu.listenToMutations memberi Anda penulisan tingkat-field secara individual.

nu.listenToChangeset((changeset) => {
  // { added, disposed, source } — structural diff per change
});

nu.listenToMutations((entries) => {
  // field-level writes — { target, key, before, after, ... }
});

Gunakan aliran changeset untuk merespons editan struktural (sebuah node muncul atau dihapus), dan aliran mutasi ketika Anda membutuhkan before/after yang presisi dari setiap field yang ditulis.

Mencari node

Runtime mengindeks setiap node berdasarkan id, sehingga Anda dapat me-resolve node, menelusuri ke parent, dan menemukan lokasi sumber.

nu.getNodeFromId(id);
nu.getParentNode(node);
nu.getNodeLocation(node);

getNodeFromId me-resolve sebuah id menjadi node hidupnya, getParentNode mengembalikan parent node tersebut di dalam pohon, dan getNodeLocation mengembalikan letak node di dalam sumber.

Anggota lainnya

Beberapa anggota lain melengkapi runtime:

  • nu.program — program yang dimuat.
  • nu.resolver — me-resolve nama dan binding.
  • nu.externals — nilai dan fungsi yang disediakan host (lihat Externals).
  • nu.getExtension(definition) — mengakses ekstensi yang terdaftar (lihat Extensions).
  • nu.volatile — state non-serialized yang berada di luar dokumen.
  • nu.evaluateExpression(...) — mengevaluasi ekspresi terhadap state runtime.
  • nu.watch(cb) — menjalankan callback secara reaktif.
  • nu.toJSON() — menserialisasi dokumen saat ini.
  • nu.dispose() — membongkar runtime.

Nu.create(opts?) menerima objek opsi berbentuk { externals, extensions } untuk mendaftarkan externals dan extensions host di awal.

Langkah berikutnya

  • Externals — menyediakan nilai dan fungsi host ke runtime.
  • Extensions — melampirkan state plug-in ke runtime Nu.
  • React — merender frame di host React.
Bahasa DSLExternals