pikasu
v0.1.3
Published
Micro framework for preact
Readme
Pikasu
Micro framework for preact, which enables partial hydrating
Installation
npm i pikasu preactyarn add pikasu preactpnpm add pikasu preactUsage
// file: pikasu.config.ts
import { defineConfig } from 'pikasu'
export default defineConfig({
// ...
})npm run pikasu
node dist/server/entry.mjs after building to launch the server
Overview
The pages/ directory acting like routes:
pages/index.tsx -> /pages/some/path.tsx -> /some/pathpages/foo/index.tsx -> /foopages/_path/excluded.tsx -> <none>routes/(group)/foo.tsx -> /foopages/[group]-[page]/[[id]].tsx -> /:group-:page/:id?pages/bar/[...path].tsx -> /bar/**:path
import type { PageContext } from 'pikasu'
export default function Page(ctx: PageContext) {
const { foo, bar } = ctx.params
}All components are static by default. To make the component dynamic, add the client-load attribute:
return (
// props will be JSON.stringify'ed, so only primitive values allows
<DynamicComponent client-load foo="bar" />
)The output of page will send to client as is, so define layout with html structure:
// file: layouts/DefaultLayout.tsx
import type { PropsWithChildren } from 'preact/compat'
export default function DefaultLayout({ children }: PropsWithChildren) {
return (
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website</title>
</head>
<body>
<main>{children}</main>
</body>
</html>
)
}// file: pages/index.tsx
import DefaultLayout from '~/layouts/DefaultLayout.tsx'
export default function MainPage() {
return (
<DefaultLayout>
<p>Hello world!</p>
</DefaultLayout>
)
}Pages can also be async:
export default async function Page() {
const data = await fetchSomeData()
// doing somewhat with data
return <Layout>...</Layout>
}