Externals

Externals adalah nilai yang disediakan aplikasi host Anda untuk DSL: state, fungsi, dan komponen. Di dalam DSL semuanya diakses dengan awalan $. Inilah cara sebuah halaman menjangkau dunia luar — pengguna yang login, helper formatDate, atau komponen ikon dari design system Anda.

Daftarkan saat membuat runtime:

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

const nu = Nu.create({
  externals: {
    states: [
      t.externalState({ name: 'user', init: { name: 'Ada', plan: 'Pro' } }),
    ],
    functions: (nu) => [
      t.externalFunc({ name: 'shout', func: (s) => String(s).toUpperCase() }),
    ],
    components: [
      t.externalComponent({
        name: 'Badge',
        render: Badge, // komponen React
        props: [t.componentProp({ name: 'label' })],
      }),
    ],
  },
});

Memakai externals di DSL

component App() {} => (
  <div>
    <h2>{$shout($user.name)}</h2>
    <p>{"Paket saat ini:"} <$Badge label={$user.plan} /></p>
  </div>
)

Tag komponen eksternal memakai awalan $ dan diresolusi ke komponen React yang Anda berikan sebagai render. Hanya prop yang Anda deklarasikan di props yang diteruskan.

State bersifat read-only bagi DSL

State eksternal di-deep-freeze, jadi ekspresi hanya bisa membaca-nya — tidak pernah bisa mengubah state host. Mencoba menetapkan nilai ke external (mis. $user.name = "x") ditolak oleh evaluator.

Hanya host yang dapat memperbarui state eksternal, dan melakukannya akan me-render ulang setiap view yang membacanya:

nu.externals.updateStateValue('user', { name: 'Grace', plan: 'Team' });

Inilah jembatan untuk mendorong data host secara live (auth, store, hasil query) ke halaman yang sedang berjalan: jaga state eksternal tetap sinkron dengan state aplikasi Anda, dan halaman bereaksi otomatis.

Fungsi eksternal

Fungsi eksternal adalah fungsi host biasa. Ia menerima argumen yang sudah dievaluasi dan nilai kembaliannya mengalir kembali ke ekspresi:

t.externalFunc({ name: 'formatPrice', func: (n) => `$${Number(n).toFixed(2)}` });
// DSL:  <span>{$formatPrice(item.price)}</span>

Bentuk factory functions: (nu) => [...] memberi Anda instance Nu bila sebuah fungsi perlu membaca atau mengubah dokumen.

Komponen eksternal

Komponen eksternal memungkinkan DSL me-render komponen React asli dari basis kode Anda — primitif design system, chart, apa pun. Frame meneruskan prop yang dideklarasikan (dan children) ke komponen Anda:

function Badge({ label }: { label?: string }) {
  return <span className="badge">{label}</span>;
}
// didaftarkan dengan props: [t.componentProp({ name: 'label' })]
// DSL:  <$Badge label={$user.plan} />

Lihat langsung (dengan kontrol host yang memperbarui $user) di halaman Contoh.

Langkah berikutnya

• Runtime & Core API — nu.change, history, frame.
• Ekstensi — plug-in host dengan state-nya sendiri.
• Model Keamanan — alasan state host dibekukan.