NoEgo Framework

Svelte 5 Integration

Forge uses Svelte 5's runes for reactive state management. Runes are special functions that begin with $ and provide a more explicit way to declare reactivity.

Core Runes

$state - Declare reactive state variables
$derived - Create computed values that update automatically
$props - Declare component properties
$effect - Run side effects when dependencies change

component.svelte

<script lang="ts">
  // $state - reactive state declaration
  let count = $state(0);
  let user = $state({ name: 'Alice', email: 'alice@example.com' });

  // $derived - computed values that update automatically
  let doubled = $derived(count * 2);
  let greeting = $derived(`Hello, ${user.name}!`);

  // $props - declare component properties
  let { title, onSave }: { title: string; onSave: () => void } = $props();

  // $effect - side effects that run when dependencies change
  $effect(() => {
    console.log(`Count changed to: ${count}`);
    document.title = `Count: ${count}`;
  });

  function increment() {
    count++;
  }
</script>

<h1>{title}</h1>
<p>Count: {count} (doubled: {doubled})</p>
<button onclick={increment}>Increment</button>

SSR/CSR Modes

Server-Side Rendering (SSR)

By default, Forge renders pages on the server and sends fully-formed HTML to the client. This ensures fast initial loads and SEO-friendly content.

api.yaml

// ui/openapi/api.yaml
paths:
  /dashboard:
    get:
      summary: Dashboard page
      x-view: pages/dashboard.svelte
      x-layout:
        - layout/app_layout.svelte

# The page component receives server-rendered HTML
# that hydrates on the client for interactivity

Client-Side Rendering (CSR)

For dynamic navigation without full page reloads, use the navigate() function. The page will render entirely on the client.

navigation.ts

// For client-side only rendering, use the navigate() function
import { navigate } from '@noego/forge/client';

// This bypasses SSR and renders entirely on the client
function goToSettings() {
  navigate('/settings');
}

// Or use standard anchor tags for full SSR page loads
// <a href="/settings">Settings</a>

Split Serve Mode (Development)

During development, Forge uses a split architecture: the server handles SSR while Vite provides hot module replacement for instant feedback.

app.ts

// In development, Forge uses split serve mode:
// - Server handles SSR and API routes
// - Vite dev server handles HMR and asset bundling

// Configure in your app entry point:
import { createApp } from '@noego/app';
import { ForgePlugin } from '@noego/forge';

const app = createApp();
app.use(ForgePlugin, {
  dev: process.env.NODE_ENV === 'development',
  componentDir: './ui',
  stitchConfig: './ui/stitch.yaml'
});

Forge Overview Pages