import { useState } from 'react';

export function Head() {
  return <title>Reactus</title>;
}

export default function HomePage({ title }: { title: string }) {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>{title}</h1>
      <p>Rendered by Reactus.</p>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </main>
  );
}

import { createServer } from 'node:http';
import { dev } from 'reactus';

async function develop() {
  const engine = dev({
    cwd: process.cwd(),
    basePath: '/',
    clientRoute: '/client'
  });

  const server = createServer(async (req, res) => {
    await engine.http(req, res);
    if (res.headersSent) return;

    if (req.url === '/') {
      res.setHeader('Content-Type', 'text/html');
      res.end(await engine.render('@/pages/home', { title: 'Hello Reactus' }));
      return;
    }

    res.statusCode = 404;
    res.end('404 Not Found');
  });

  server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
  });
}

develop().catch((error) => {
  console.error(error);
  process.exit(1);
});