Runnable Examples

Runnable Examples

These examples use current public APIs. They are intentionally small.

Counter

import { createApp, define, signal } from '@effuse/core';

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

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

Capability With A Local Alias

import { createApp, define, defineLayer } from '@effuse/core';

const ThemeLayer = defineLayer({
  name: 'platformTheme',
  services: {
    theme: () => ({ mode: 'dark' as const }),
  },
});

const App = define({
  name: 'App',
  layers: { theme: ThemeLayer } as const,
  script({ layers }) {
    return { mode: layers.theme.service('theme').mode };
  },
  template: ({ mode }) => <p>Theme: {mode}</p>,
});

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

Hook With A Capability

const useTheme = defineHook({
  name: 'useTheme',
  layers: { theme: ThemeLayer } as const,
  setup({ layers }) {
    return layers.theme.service('theme');
  },
});

Grouped Dynamic Route

const routes = defineRoutes([
  {
    path: '/(catalog)/products/[id]',
    name: 'product',
    component: ProductPage,
    meta: { surface: 'catalog' },
  },
] as const);

The browser URL is /products/42; the normalized route retains the catalog group and exposes params.id.

Layer API And Action

const TodoLayer = defineLayer({
  name: 'todos',
  services: {
    todos: () => ({ find: (id: string) => ({ id, title: 'Ship Effuse' }) }),
  },
  server: {
    api: {
      '/api/todos/[id]': ({ params, services }) =>
        services.todos.find(params.id),
    },
    actions: {
      refresh: ({ services }) => services.todos.find('1'),
    },
  },
});

Manifest Client

const manifest = createLayerServerManifest([TodoLayer]);
const client = createLayerServerManifestClient(manifest);

await client.route('/api/todos/[id]', {
  method: 'GET',
  params: { id: '42' },
});

await client.action('todos', 'refresh', undefined);

Validation Checklist

For a repository checkout:

pnpm --filter @effuse/core typecheck
pnpm --filter @effuse/core test
pnpm --filter @effuse/router exec vitest run
bun run check:app:bun

Related

• Getting Started
• Server Manifests And Clients