nnuforgeDokumentasi
ENID
Contoh

Memulai

nuforge adalah runtime reaktif yang cepat, aman, dan fine-grained untuk membangun page builder visual no-code. Anda mendeskripsikan halaman dalam DSL kecil; nuforge mem-parse-nya menjadi AST reaktif, me-render-nya dengan React, dan dapat mengekspornya menjadi komponen React yang rapi.

Instalasi

Ada dua pilihan. Satu instalasi — paket umbrella nuforge memberi Anda semua lewat subpath:

npm install nuforge        # atau: pnpm add nuforge / bun add nuforge / yarn add nuforge

import { Nu, Parser, t } from 'nuforge';
import { NuProvider, NuFrame } from 'nuforge/react';
import { createEditor } from 'nuforge/editor';
import { toReact, toHtml, toVue } from 'nuforge/codegen';

Atau tetap granular — pasang hanya paket @nuforge/* yang Anda butuhkan (bundle terkecil, graph paling eksplisit):

npm install @nuforge/core @nuforge/parser @nuforge/types @nuforge/react

import { Nu } from '@nuforge/core';
import { NuFrame } from '@nuforge/react';

Add-on opsional (terpisah agar dependensi beratnya hanya ditarik saat diperlukan):

  • @nuforge/codegen — ekspor halaman ke React / HTML / Vue (juga di nuforge/codegen).
  • @nuforge/editor — SDK untuk membangun editor halaman visual Anda sendiri (juga di nuforge/editor).
  • @nuforge/react-code-editor — editor DSL CodeMirror (autocomplete + lint).
  • @nuforge/collaboration — sinkronisasi real-time via Loro CRDT.
  • @nuforge/mcp — server Model Context Protocol untuk asisten AI.

Persyaratan: React 18 atau 19. Paket bersifat ESM-first dan menyertakan build ESM + CJS sekaligus dengan deklarasi tipe. Di Next.js, tambahkan nuforge (atau paket @nuforge/*) ke transpilePackages.

Mulai cepat

Sebuah halaman adalah runtime Nu yang dimuat dengan program ter-parse, lalu di-render oleh <NuFrame>.

'use client';

import { Nu } from '@nuforge/core';
import { Parser } from '@nuforge/parser';
import { NuFrame, NuProvider } from '@nuforge/react';
import * as t from '@nuforge/types';
import { useState } from 'react';

const SOURCE = `component App() {
  val count = 0;
} => (
  <div>
    <h1>{"Counter"}</h1>
    <button onClick={() => count = count + 1}>{count}</button>
  </div>
)`;

export function Page() {
  const [{ nu, frame }] = useState(() => {
    const nu = Nu.create();
    nu.load(t.state({ program: Parser.parseProgram(SOURCE) }));
    return { nu, frame: nu.createFrame({ component: { name: 'App' } }) };
  });

  return (
    <NuProvider nu={nu}>
      <NuFrame frame={frame} />
    </NuProvider>
  );
}

Menekan tombol memperbarui state reaktif dan hanya me-render ulang bagian yang bergantung padanya. Lihat contoh langsung untuk @each, @if, dan two-way binding.

Ekspor ke React

Ubah halaman apa pun menjadi komponen React mandiri — tanpa nuforge saat runtime:

import { toReact } from '@nuforge/codegen';

const tsx = toReact(nu.state.program);
// → import { useState } from 'react';
//   export function App() { ... }

Itu saja yang Anda butuhkan untuk memulai.

PengantarBahasa DSL