├── src
├── pages
│ ├── _404.tsx
│ └── Home
│ │ ├── style.css
│ │ └── index.tsx
├── components
│ ├── Header.tsx
│ └── todo-list.tsx
├── index.tsx
├── models
│ └── todo.ts
├── style.css
└── assets
│ └── preact.svg
├── .gitignore
├── vite.config.ts
├── index.html
├── README.md
├── tsconfig.json
├── package.json
├── public
└── vite.svg
└── pnpm-lock.yaml
/src/pages/_404.tsx:
--------------------------------------------------------------------------------
1 | export function NotFound() {
2 | return (
3 |
4 | 404: Not Found
5 | It's gone :(
6 |
7 | );
8 | }
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import { useLocation } from 'preact-iso';
2 |
3 | export function Header() {
4 | const { url } = useLocation();
5 |
6 | return (
7 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import preact from '@preact/preset-vite';
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [
7 | preact({
8 | prerender: {
9 | enabled: true,
10 | renderTarget: '#app',
11 | additionalPrerenderRoutes: ['/404'],
12 | previewMiddlewareEnabled: true,
13 | previewMiddlewareFallback: '/404',
14 | },
15 | }),
16 | ],
17 | });
18 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Vite + Preact
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # `create-preact`
2 |
3 |
4 | 
5 |
6 |
7 | Get started using Preact and Vite!
8 |
9 | ## Getting Started
10 |
11 | - `pnpm dev` - Starts a dev server at http://localhost:5173/
12 |
13 | - `pnpm build` - Builds for production, emitting to `dist/`. Prerenders all found routes in app to static HTML
14 |
15 | - `pnpm preview` - Starts a server at http://localhost:4173/ to test production build locally
16 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "module": "ESNext",
5 | "moduleResolution": "bundler",
6 | "noEmit": true,
7 | "allowJs": true,
8 | "checkJs": true,
9 |
10 | /* Preact Config */
11 | "jsx": "react-jsx",
12 | "jsxImportSource": "preact",
13 | "skipLibCheck": true,
14 | "paths": {
15 | "react": ["./node_modules/preact/compat/"],
16 | "react-dom": ["./node_modules/preact/compat/"]
17 | }
18 | },
19 | "include": ["node_modules/vite/client.d.ts", "**/*"]
20 | }
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "type": "module",
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "vite build",
7 | "preview": "vite preview"
8 | },
9 | "dependencies": {
10 | "@preact/signals": "^2.2.1",
11 | "preact": "^10.25.3",
12 | "preact-iso": "^2.9.2",
13 | "preact-render-to-string": "^6.5.13"
14 | },
15 | "devDependencies": {
16 | "@preact/preset-vite": "^2.10.2",
17 | "eslint": "^9.30.1",
18 | "eslint-config-preact": "^1.5.0",
19 | "typescript": "^5.8.3",
20 | "vite": "^6.0.4"
21 | },
22 | "eslintConfig": {
23 | "extends": "preact"
24 | }
25 | }
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { LocationProvider, Router, Route, hydrate, prerender as ssr } from 'preact-iso';
2 |
3 | import { Header } from './components/Header.jsx';
4 | import { Home } from './pages/Home/index.jsx';
5 | import { NotFound } from './pages/_404.jsx';
6 | import './style.css';
7 |
8 | export function App() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 |
22 | if (typeof window !== 'undefined') {
23 | hydrate(, document.getElementById('app'));
24 | }
25 |
26 | export async function prerender(data) {
27 | return await ssr();
28 | }
29 |
--------------------------------------------------------------------------------
/src/models/todo.ts:
--------------------------------------------------------------------------------
1 | import { computed, signal, type Signal } from '@preact/signals';
2 |
3 | export type Todo = {
4 | id: number;
5 | text: Signal;
6 | completed: Signal;
7 | toggle: () => void;
8 | };
9 |
10 | export function createTodo(text: string) {
11 | const text2 = signal(text);
12 | const completed = signal(false);
13 |
14 | const toggle = () => {
15 | completed.value = !completed.value;
16 | };
17 |
18 | return {
19 | id: Math.random(),
20 | text: text2,
21 | completed,
22 | toggle,
23 | };
24 | }
25 |
26 | export function createTodoList() {
27 | const list = signal([]);
28 | const completed = computed(() =>
29 | list.value.every((todo) => todo.completed.value),
30 | );
31 |
32 | const add = (todoText) => {
33 | list.value = [...list.value, createTodo(todoText)];
34 | };
35 |
36 | return {
37 | list,
38 | completed,
39 | add,
40 | };
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/Home/style.css:
--------------------------------------------------------------------------------
1 | img {
2 | margin-bottom: 1.5rem;
3 | }
4 |
5 | img:hover {
6 | filter: drop-shadow(0 0 2em #673ab8aa);
7 | }
8 |
9 | .home section {
10 | margin-top: 5rem;
11 | display: grid;
12 | grid-template-columns: repeat(3, 1fr);
13 | column-gap: 1.5rem;
14 | }
15 |
16 | .resource {
17 | padding: 0.75rem 1.5rem;
18 | border-radius: 0.5rem;
19 | text-align: left;
20 | text-decoration: none;
21 | color: #222;
22 | background-color: #f1f1f1;
23 | border: 1px solid transparent;
24 | }
25 |
26 | .resource:hover {
27 | border: 1px solid #000;
28 | box-shadow: 0 25px 50px -12px #673ab888;
29 | }
30 |
31 | @media (max-width: 639px) {
32 | .home section {
33 | margin-top: 5rem;
34 | grid-template-columns: 1fr;
35 | row-gap: 1rem;
36 | }
37 | }
38 |
39 | @media (prefers-color-scheme: dark) {
40 | .resource {
41 | color: #ccc;
42 | background-color: #161616;
43 | }
44 | .resource:hover {
45 | border: 1px solid #bbb;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/pages/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import { computed, signal } from '@preact/signals';
2 | import preactLogo from '../../assets/preact.svg';
3 | import { TodoList } from '../../components/todo-list';
4 | import './style.css';
5 |
6 | const count = signal(0);
7 |
8 | const double = computed(() => {
9 | console.log('called')
10 | return count.value * 2
11 | });
12 |
13 | console.log(count.value);
14 |
15 | export function Home() {
16 | console.log('home rendering');
17 |
18 | return (
19 |
20 |
21 | 
22 |
23 |
Hi chat
24 |
Count: {count}
25 |
Double: {double}
26 |
27 |
30 |
{props.title}
38 | {props.description}
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color: #222;
7 | background-color: #ffffff;
8 |
9 | font-synthesis: none;
10 | text-rendering: optimizeLegibility;
11 | -webkit-font-smoothing: antialiased;
12 | -moz-osx-font-smoothing: grayscale;
13 | -webkit-text-size-adjust: 100%;
14 | }
15 |
16 | body {
17 | margin: 0;
18 | }
19 |
20 | #app {
21 | display: flex;
22 | flex-direction: column;
23 | min-height: 100vh;
24 | }
25 |
26 | header {
27 | display: flex;
28 | justify-content: flex-end;
29 | background-color: #673ab8;
30 | }
31 |
32 | header nav {
33 | display: flex;
34 | }
35 |
36 | header a {
37 | color: #fff;
38 | padding: 0.75rem;
39 | text-decoration: none;
40 | }
41 |
42 | header a.active {
43 | background-color: #0005;
44 | }
45 |
46 | header a:hover {
47 | background-color: #0008;
48 | }
49 |
50 | main {
51 | flex: auto;
52 | display: flex;
53 | align-items: center;
54 | max-width: 1280px;
55 | margin: 0 auto;
56 | text-align: center;
57 | }
58 |
59 | @media (max-width: 639px) {
60 | main {
61 | margin: 2rem;
62 | }
63 | }
64 |
65 | @media (prefers-color-scheme: dark) {
66 | :root {
67 | color: #ccc;
68 | background-color: #1a1a1a;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/todo-list.tsx:
--------------------------------------------------------------------------------
1 | import { useSignal } from '@preact/signals';
2 | import { For, Show } from '@preact/signals/utils';
3 | import { createTodoList, type Todo } from '../models/todo';
4 |
5 | const todos = createTodoList();
6 |
7 | export function TodoList() {
8 | const newTodo = useSignal('');
9 |
10 | const handleAddTodo = () => {
11 | todos.add(newTodo.value);
12 |
13 | newTodo.value = '';
14 | };
15 |
16 | return (
17 |
18 |
19 |
20 |
28 |
29 |
30 | {(todo) => }
31 |
32 |
33 |