Getting Started

Getting Started

Status: Current development setup. Effuse remains experimental.

Requirements

• Node.js >=22.14.0
• pnpm 10.32.1
• TypeScript with JSX configured for @effuse/core

pnpm add @effuse/core @effuse/router
pnpm add -D @effuse/cli typescript

Application

// src/App.tsx
import { define, signal } from '@effuse/core';

export const App = define({
  name: 'App',
  script() {
    const count = signal(0);
    return { count, increment: () => count.value++ };
  },
  template: ({ count, increment }) => (
    <button onClick={increment}>Count: {count}</button>
  ),
});

// src/main.ts
import { createApp } from '@effuse/core';
import { App } from './App';

await createApp(App).mount('#app');

Application With Routing And Layers

import { createApp } from '@effuse/core';
import { installRouter } from '@effuse/router';
import { App } from './App';
import { router } from './router';
import { AuthLayer, ThemeLayer } from './layers';

installRouter(router);

const app = await createApp(App).useLayers([AuthLayer, ThemeLayer]);
await app.mount('#app');

useLayers is asynchronous because layer setup may be asynchronous. Register the complete graph before mounting. Component and hook layer declarations are checked bindings; they are not runtime registration calls.

Router

import { createRouter, createWebHistory, defineRoutes } from '@effuse/router';
import { HomePage } from './pages/HomePage';
import { UserPage } from './pages/UserPage';

const routes = defineRoutes([
  { path: '/', name: 'home', component: HomePage },
  { path: '/users/[id]', name: 'user', component: UserPage },
] as const);

export const router = createRouter({
  history: createWebHistory(),
  routes,
});

Render the current route with <RouterView /> in the root component.

Repository Commands

pnpm typecheck
pnpm lint
pnpm test
pnpm build
bun run check:app:bun

The repository pins its supported Node and pnpm versions. Use the package manager declared in package.json; do not regenerate the lockfile with npm.

Next Reading

• Define And Components
• Layers And Capabilities
• Routing, SSR, And Server APIs
• Runnable Examples