hedhop
v1.0.0
Published
A React meta-framework with RSC support, file-based routing, and streaming SSR
Downloads
94
Maintainers
qgaveReadme
Hedhop
A React meta-framework with RSC (React Server Components) support, file-based routing, and streaming SSR.
Features
- RSC Support: First-class support for React Server Components.
- Streaming SSR: Built-in support for streaming server-side rendering.
- File-based Routing: Intuitive routing based on file structure.
- Vite Powered: Leverages the speed and ecosystem of Vite.
Installation
npm install hedhopUsage
Update vite.config.ts
To start using Hedhop, add the plugin to your Vite configuration:
import { defineConfig } from 'vite';
import { hedhop } from 'hedhop/vite';
export default defineConfig({
plugins: [hedhop()],
});Hedhop Configuration
Create a hedhop.config.ts file in your root directory to customize framework behavior:
// hedhop.config.ts
import type { HedhopConfig } from 'hedhop';
const config: HedhopConfig = {
debug: false,
hmr: true,
routing: {
trailingSlash: false,
},
};
export default config;Application Entry Point
Create a src/app.tsx file to define your root layout and router configuration:
// src/app.tsx
import { type ReactNode } from 'react';
import { Head, type RouterConfig } from 'hedhop';
import '@/styles/globals.css';
// 1. Define Routes
const routes = [
{
layout: '@/layouts/app', // Optional nested layout
children: [
{ path: '/', page: '@/pages/home' },
{ path: '/about', page: '@/pages/about' },
{ path: '/users', page: '@/pages/users' },
// Mount external apps/routes
{ path: '/demo', mount: '@/pages/demo' },
]
}
];
// 2. Configure Router
export const router: RouterConfig = {
routes,
notFound: '@/pages/404',
error: '@/pages/500',
debug: true,
};
// 3. Define Root Layout
export const RootLayout = ({ children }: { children: ReactNode }) => {
return (
<html lang="en" suppressHydrationWarning>
<head>
<Head />
</head>
<body suppressHydrationWarning>
<div id="app-root">{children}</div>
</body>
</html>
);
};Folder Structure
Hedhop uses a file-based routing system. Create a src/pages directory:
src/
pages/
index.tsx -> /
about.tsx -> /about
blog/
index.tsx -> /blog/Page Configuration
Pages can export a config object to define metadata like title and description.
// src/pages/home.tsx
import type { PageConfig } from 'hedhop';
const HomePage = () => {
return (
<div>
<h1>Home page</h1>
</div>
);
};
export const config: PageConfig = {
meta: {
title: 'Home - Hedhop Framework',
description: 'Welcome to the Hedhop Framework'
}
};
export default HomePage;Client Components
Server Components are the default. To use client-side features like useState or useEffect, add the "use client" directive.
// src/components/Counter.tsx
"use client";
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}License
MIT © [qgave]