Bun React Framework

definePage({
  type: 'static',
  loader: async () => ({
    data: await fetchData()
  }),
  component: ({ data }) => (
    <div>{data.title}</div>
  )
})

// Using clientComponent() wrapper:
export const Counter = 
  clientComponent(() => {
    const [count, setCount] = 0
    return (
      <button onClick={() => 
        setCount(c => c + 1)}>
        {count}
      </button>
    )
  })

// Or using "use client" at top of file:
"use client";
export const Counter = () => { ... }

defineLayout({
  clientNavigation: true,
  component: ({ children }) => (
    <nav>...</nav>
    {children}
  )
})

definePage({
  type: 'static',
  revalidate: 3600, // Revalidate every hour
  loader: async () => ({
    products: await fetchProducts()
  }),
  component: ({ data }) => (
    <div>{data.products.map(...)}</div>
  )
})

// Define route
import { route } from "~/framework/shared/api";
import { z } from "zod";

export const byId = route({
  method: "GET",
  params: z.object({ id: z.string() }),
  response: z.object({ id: z.string(), name: z.string() }),
  handler: ({ params }) => getUser(params.id),
});

// Compose API
import { createAPI } from "~/framework/shared/api";
export const api = createAPI({
  users: { byId, create }
});

import { defineMiddleware } from "~/framework/shared/middleware";

export default defineMiddleware({
  exclude: ["/favicon.ico", "/*.svg"],
  handler: async (request, next) => {
    console.log(`${request.method} ${request.url}`);
    const response = await next();
    // Modify response headers, etc.
    return response;
  },
});