├── media
    └── demo.gif
├── templates
    ├── config
    │   ├── router
    │   │   ├── pages
    │   │   │   ├── _404.jsx
    │   │   │   └── Home
    │   │   │   │   ├── style.css
    │   │   │   │   └── index.jsx
    │   │   ├── components
    │   │   │   └── Header.jsx
    │   │   ├── index.jsx
    │   │   └── style.css
    │   ├── prerender
    │   │   ├── vite.config.js
    │   │   ├── README.md
    │   │   └── src
    │   │   │   └── index.jsx
    │   └── prerender-router
    │   │   ├── vite.config.js
    │   │   ├── README.md
    │   │   └── src
    │   │       └── index.jsx
    └── base
    │   ├── vite.config.js
    │   ├── package.json
    │   ├── _gitignore
    │   ├── index.html
    │   ├── README.md
    │   ├── jsconfig.json
    │   ├── src
    │       ├── index.jsx
    │       ├── assets
    │       │   └── preact.svg
    │       └── style.css
    │   └── public
    │       └── vite.svg
├── jsconfig.json
├── .editorconfig
├── README.md
├── .gitignore
├── package.json
├── LICENSE
└── src
    └── index.js


/media/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/preactjs/create-preact/HEAD/media/demo.gif


--------------------------------------------------------------------------------
/templates/config/router/pages/_404.jsx:
--------------------------------------------------------------------------------
1 | export function NotFound() {
2 | 	return (
3 | 		<section>
4 | 			<h1>404: Not Found</h1>
5 | 			<p>It's gone :(</p>
6 | 		</section>
7 | 	);
8 | }
9 | 


--------------------------------------------------------------------------------
/templates/base/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import preact from '@preact/preset-vite';
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | 	plugins: [preact()],
7 | });
8 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"target": "ESNext",
 4 | 		"module": "ESNext",
 5 | 		"moduleResolution": "NodeNext",
 6 | 		"allowJs": true,
 7 | 		"checkJs": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"noEmit": true,
10 | 		"jsx": "react-jsx",
11 | 		"jsxImportSource": "preact"
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/templates/config/prerender/vite.config.js:
--------------------------------------------------------------------------------
 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 | 			},
12 | 		}),
13 | 	],
14 | });
15 | 


--------------------------------------------------------------------------------
/templates/base/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": "^10.26.9"
11 | 	},
12 | 	"devDependencies": {
13 | 		"@preact/preset-vite": "^2.10.2",
14 | 		"vite": "^7.0.4"
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/templates/base/_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 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = tab
 5 | end_of_line = lf
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [{.*rc,*.yml}]
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | [*.md]
15 | trim_trailing_whitespace = false
16 | 
17 | [test/fixtures/**/*.expected.*]
18 | trim_trailing_whitespace = false
19 | insert_final_newline = false
20 | 


--------------------------------------------------------------------------------
/templates/config/router/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import { useLocation } from 'preact-iso';
 2 | 
 3 | export function Header() {
 4 | 	const { url } = useLocation();
 5 | 
 6 | 	return (
 7 | 		<header>
 8 | 			<nav>
 9 | 				<a href="/" class={url == '/' && 'active'}>
10 | 					Home
11 | 				</a>
12 | 				<a href="/404" class={url == '/404' && 'active'}>
13 | 					404
14 | 				</a>
15 | 			</nav>
16 | 		</header>
17 | 	);
18 | }
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # create-preact
 2 | 
 3 | Create a Vite-powered Preact app in seconds
 4 | 
 5 | <p align="center">
 6 |   <img src="https://github.com/preactjs/create-preact/blob/master/media/demo.gif?raw=true">
 7 | </p>
 8 | 
 9 | ## Usage
10 | 
11 | ```sh
12 | $ npm init preact
13 | 
14 | $ yarn create preact
15 | 
16 | $ pnpm create preact
17 | 
18 | $ bun create preact
19 | ```
20 | 
21 | ## License
22 | 
23 | [MIT](https://github.com/preactjs/create-preact/blob/master/LICENSE)
24 | 


--------------------------------------------------------------------------------
/templates/base/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 		<meta name="color-scheme" content="light dark" />
 8 | 		<title>Vite + Preact</title>
 9 | 	</head>
10 | 	<body>
11 | 		<div id="app"></div>
12 | 		<script type="module" src="/src/index.jsx"></script>
13 | 	</body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/templates/config/prerender-router/vite.config.js:
--------------------------------------------------------------------------------
 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 | 


--------------------------------------------------------------------------------
/.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 | .vim
26 | 
27 | # Local Netlify folder
28 | .netlify
29 | 
30 | ./templates/**/package-lock.json
31 | ./templates/**/yarn.lock
32 | 


--------------------------------------------------------------------------------
/templates/base/README.md:
--------------------------------------------------------------------------------
 1 | # `create-preact`
 2 | 
 3 | <h2 align="center">
 4 |   <img height="256" width="256" src="./src/assets/preact.svg">
 5 | </h2>
 6 | 
 7 | <h3 align="center">Get started using Preact and Vite!</h3>
 8 | 
 9 | ## Getting Started
10 | 
11 | -   `npm run dev` - Starts a dev server at http://localhost:5173/
12 | 
13 | -   `npm run build` - Builds for production, emitting to `dist/`
14 | 
15 | -   `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally
16 | 


--------------------------------------------------------------------------------
/templates/config/prerender/README.md:
--------------------------------------------------------------------------------
 1 | # `create-preact`
 2 | 
 3 | <h2 align="center">
 4 |   <img height="256" width="256" src="./src/assets/preact.svg">
 5 | </h2>
 6 | 
 7 | <h3 align="center">Get started using Preact and Vite!</h3>
 8 | 
 9 | ## Getting Started
10 | 
11 | -   `npm run dev` - Starts a dev server at http://localhost:5173/
12 | 
13 | -   `npm run build` - Builds for production, emitting to `dist/`. Prerenders app to static HTML
14 | 
15 | -   `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally
16 | 


--------------------------------------------------------------------------------
/templates/config/prerender-router/README.md:
--------------------------------------------------------------------------------
 1 | # `create-preact`
 2 | 
 3 | <h2 align="center">
 4 |   <img height="256" width="256" src="./src/assets/preact.svg">
 5 | </h2>
 6 | 
 7 | <h3 align="center">Get started using Preact and Vite!</h3>
 8 | 
 9 | ## Getting Started
10 | 
11 | -   `npm run dev` - Starts a dev server at http://localhost:5173/
12 | 
13 | -   `npm run build` - Builds for production, emitting to `dist/`. Prerenders all found routes in app to static HTML
14 | 
15 | -   `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally
16 | 


--------------------------------------------------------------------------------
/templates/base/jsconfig.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 | 			"react-dom/*": ["./node_modules/preact/compat/*"]
18 | 		}
19 | 	},
20 | 	"include": ["node_modules/vite/client.d.ts", "**/*"]
21 | }
22 | 


--------------------------------------------------------------------------------
/templates/config/router/index.jsx:
--------------------------------------------------------------------------------
 1 | import { render } from 'preact';
 2 | import { LocationProvider, Router, Route } from 'preact-iso';
 3 | 
 4 | import { Header } from './components/Header.jsx';
 5 | import { Home } from './pages/Home/index.jsx';
 6 | import { NotFound } from './pages/_404.jsx';
 7 | import './style.css';
 8 | 
 9 | export function App() {
10 | 	return (
11 | 		<LocationProvider>
12 | 			<Header />
13 | 			<main>
14 | 				<Router>
15 | 					<Route path="/" component={Home} />
16 | 					<Route default component={NotFound} />
17 | 				</Router>
18 | 			</main>
19 | 		</LocationProvider>
20 | 	);
21 | }
22 | 
23 | render(<App />, document.getElementById('app'));
24 | 


--------------------------------------------------------------------------------
/templates/config/prerender-router/src/index.jsx:
--------------------------------------------------------------------------------
 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 | 		<LocationProvider>
11 | 			<Header />
12 | 			<main>
13 | 				<Router>
14 | 					<Route path="/" component={Home} />
15 | 					<Route default component={NotFound} />
16 | 				</Router>
17 | 			</main>
18 | 		</LocationProvider>
19 | 	);
20 | }
21 | 
22 | if (typeof window !== 'undefined') {
23 | 	hydrate(<App />, document.getElementById('app'));
24 | }
25 | 
26 | export async function prerender(data) {
27 | 	return await ssr(<App {...data} />);
28 | }
29 | 


--------------------------------------------------------------------------------
/templates/config/router/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "create-preact",
 3 | 	"version": "0.5.3",
 4 | 	"description": "Create a Vite-powered Preact app in seconds",
 5 | 	"type": "module",
 6 | 	"bin": {
 7 | 		"create-preact": "src/index.js"
 8 | 	},
 9 | 	"scripts": {
10 | 		"format": "prettier --write --ignore-path .gitignore ."
11 | 	},
12 | 	"authors": "The Preact Authors (https://preactjs.com)",
13 | 	"license": "MIT",
14 | 	"repository": {
15 | 		"type": "git",
16 | 		"url": "git+https://github.com/preactjs/create-preact.git"
17 | 	},
18 | 	"files": [
19 | 		"src",
20 | 		"templates",
21 | 		"LICENSE",
22 | 		"package.json",
23 | 		"README.md"
24 | 	],
25 | 	"dependencies": {
26 | 		"@clack/prompts": "^0.9.0",
27 | 		"kolorist": "^1.8.0",
28 | 		"tinyexec": "^0.3.1"
29 | 	},
30 | 	"devDependencies": {
31 | 		"@types/node": "^20.2.3",
32 | 		"preact": "^10.15.0",
33 | 		"prettier": "^2.6.2",
34 | 		"prettier-config-rschristian": "^0.1.1",
35 | 		"typescript": "^5.0.0"
36 | 	},
37 | 	"prettier": "prettier-config-rschristian"
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 The Preact Authors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/templates/config/router/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 | 


--------------------------------------------------------------------------------
/templates/config/router/pages/Home/index.jsx:
--------------------------------------------------------------------------------
 1 | import preactLogo from '../../assets/preact.svg';
 2 | import './style.css';
 3 | 
 4 | export function Home() {
 5 | 	return (
 6 | 		<div class="home">
 7 | 			<a href="https://preactjs.com" target="_blank">
 8 | 				<img src={preactLogo} alt="Preact logo" height="160" width="160" />
 9 | 			</a>
10 | 			<h1>Get Started building Vite-powered Preact Apps </h1>
11 | 			<section>
12 | 				<Resource
13 | 					title="Learn Preact"
14 | 					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
15 | 					href="https://preactjs.com/tutorial"
16 | 				/>
17 | 				<Resource
18 | 					title="Differences to React"
19 | 					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
20 | 					href="https://preactjs.com/guide/v10/differences-to-react"
21 | 				/>
22 | 				<Resource
23 | 					title="Learn Vite"
24 | 					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
25 | 					href="https://vitejs.dev"
26 | 				/>
27 | 			</section>
28 | 		</div>
29 | 	);
30 | }
31 | 
32 | function Resource(props) {
33 | 	return (
34 | 		<a href={props.href} target="_blank" class="resource">
35 | 			<h2>{props.title}</h2>
36 | 			<p>{props.description}</p>
37 | 		</a>
38 | 	);
39 | }
40 | 


--------------------------------------------------------------------------------
/templates/base/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import { render } from 'preact';
 2 | 
 3 | import preactLogo from './assets/preact.svg';
 4 | import './style.css';
 5 | 
 6 | export function App() {
 7 | 	return (
 8 | 		<div>
 9 | 			<a href="https://preactjs.com" target="_blank">
10 | 				<img src={preactLogo} alt="Preact logo" height="160" width="160" />
11 | 			</a>
12 | 			<h1>Get Started building Vite-powered Preact Apps </h1>
13 | 			<section>
14 | 				<Resource
15 | 					title="Learn Preact"
16 | 					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
17 | 					href="https://preactjs.com/tutorial"
18 | 				/>
19 | 				<Resource
20 | 					title="Differences to React"
21 | 					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
22 | 					href="https://preactjs.com/guide/v10/differences-to-react"
23 | 				/>
24 | 				<Resource
25 | 					title="Learn Vite"
26 | 					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
27 | 					href="https://vitejs.dev"
28 | 				/>
29 | 			</section>
30 | 		</div>
31 | 	);
32 | }
33 | 
34 | function Resource(props) {
35 | 	return (
36 | 		<a href={props.href} target="_blank" class="resource">
37 | 			<h2>{props.title}</h2>
38 | 			<p>{props.description}</p>
39 | 		</a>
40 | 	);
41 | }
42 | 
43 | render(<App />, document.getElementById('app'));
44 | 


--------------------------------------------------------------------------------
/templates/base/src/assets/preact.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296">
2 | 	<path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path>
3 | 	<path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path>
4 | 	<path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path>
5 | 	<path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/templates/base/public/vite.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257">
 2 |     <defs>
 3 |         <linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%">
 4 |             <stop offset="0%" stop-color="#41D1FF"></stop>
 5 |             <stop offset="100%" stop-color="#BD34FE"></stop>
 6 |         </linearGradient>
 7 |         <linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%">
 8 |             <stop offset="0%" stop-color="#FFEA83"></stop>
 9 |             <stop offset="8.333%" stop-color="#FFDD35"></stop>
10 |             <stop offset="100%" stop-color="#FFA800"></stop>
11 |         </linearGradient>
12 |     </defs>
13 |     <path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path>
14 |     <path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/templates/config/prerender/src/index.jsx:
--------------------------------------------------------------------------------
 1 | import { hydrate, prerender as ssr } from 'preact-iso';
 2 | 
 3 | import preactLogo from './assets/preact.svg';
 4 | import './style.css';
 5 | 
 6 | export function App() {
 7 | 	return (
 8 | 		<div>
 9 | 			<a href="https://preactjs.com" target="_blank">
10 | 				<img src={preactLogo} alt="Preact logo" height="160" width="160" />
11 | 			</a>
12 | 			<h1>Get Started building Vite-powered Preact Apps </h1>
13 | 			<section>
14 | 				<Resource
15 | 					title="Learn Preact"
16 | 					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
17 | 					href="https://preactjs.com/tutorial"
18 | 				/>
19 | 				<Resource
20 | 					title="Differences to React"
21 | 					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
22 | 					href="https://preactjs.com/guide/v10/differences-to-react"
23 | 				/>
24 | 				<Resource
25 | 					title="Learn Vite"
26 | 					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
27 | 					href="https://vitejs.dev"
28 | 				/>
29 | 			</section>
30 | 		</div>
31 | 	);
32 | }
33 | 
34 | function Resource(props) {
35 | 	return (
36 | 		<a href={props.href} target="_blank" class="resource">
37 | 			<h2>{props.title}</h2>
38 | 			<p>{props.description}</p>
39 | 		</a>
40 | 	);
41 | }
42 | 
43 | if (typeof window !== 'undefined') {
44 | 	hydrate(<App />, document.getElementById('app'));
45 | }
46 | 
47 | export async function prerender(data) {
48 | 	return await ssr(<App {...data} />);
49 | }
50 | 


--------------------------------------------------------------------------------
/templates/base/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 | 	display: flex;
19 | 	align-items: center;
20 | 	min-height: 100vh;
21 | }
22 | 
23 | #app {
24 | 	max-width: 1280px;
25 | 	margin: 0 auto;
26 | 	text-align: center;
27 | }
28 | 
29 | img {
30 | 	margin-bottom: 1.5rem;
31 | }
32 | 
33 | img:hover {
34 | 	filter: drop-shadow(0 0 2em #673ab8aa);
35 | }
36 | 
37 | section {
38 | 	margin-top: 5rem;
39 | 	display: grid;
40 | 	grid-template-columns: repeat(3, 1fr);
41 | 	column-gap: 1.5rem;
42 | }
43 | 
44 | .resource {
45 | 	padding: 0.75rem 1.5rem;
46 | 	border-radius: 0.5rem;
47 | 	text-align: left;
48 | 	text-decoration: none;
49 | 	color: #222;
50 | 	background-color: #f1f1f1;
51 | 	border: 1px solid transparent;
52 | }
53 | 
54 | .resource:hover {
55 | 	border: 1px solid #000;
56 | 	box-shadow: 0 25px 50px -12px #673ab888;
57 | }
58 | 
59 | @media (max-width: 639px) {
60 | 	#app {
61 | 		margin: 2rem;
62 | 	}
63 | 	section {
64 | 		margin-top: 5rem;
65 | 		grid-template-columns: 1fr;
66 | 		row-gap: 1rem;
67 | 	}
68 | }
69 | 
70 | @media (prefers-color-scheme: dark) {
71 | 	:root {
72 | 		color: #ccc;
73 | 		background-color: #1a1a1a;
74 | 	}
75 | 	.resource {
76 | 		color: #ccc;
77 | 		background-color: #161616;
78 | 	}
79 | 	.resource:hover {
80 | 		border: 1px solid #bbb;
81 | 	}
82 | }
83 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | import { promises as fs, existsSync } from 'node:fs';
  3 | import { dirname, resolve } from 'node:path';
  4 | import { fileURLToPath } from 'node:url';
  5 | import * as prompts from '@clack/prompts';
  6 | import { x } from 'tinyexec';
  7 | import * as kl from 'kolorist';
  8 | 
  9 | const s = prompts.spinner();
 10 | const brandColor = /** @type {const} */ ([174, 128, 255]);
 11 | 
 12 | (async function createPreact() {
 13 | 	const args = process.argv.slice(2);
 14 | 
 15 | 	// Silences the 'Getting Started' info, mainly
 16 | 	// for use in other initializers that may wrap this
 17 | 	// one but provide their own scripts/instructions.
 18 | 	const skipHint = args.includes('--skip-hints');
 19 | 	const argDir = args.find((arg) => !arg.startsWith('--'));
 20 | 	const packageManager = getPkgManager();
 21 | 
 22 | 	prompts.intro(
 23 | 		kl.trueColor(...brandColor)(
 24 | 			'Preact - Fast 3kB alternative to React with the same modern API',
 25 | 		),
 26 | 	);
 27 | 
 28 | 	const { dir, language, useRouter, usePrerender, useESLint } = await prompts.group(
 29 | 		{
 30 | 			dir: () =>
 31 | 				argDir
 32 | 					? Promise.resolve(argDir)
 33 | 					: prompts.text({
 34 | 							message: 'Project directory:',
 35 | 							placeholder: 'my-preact-app',
 36 | 							validate(value) {
 37 | 								if (value.length == 0) {
 38 | 									return 'Directory name is required!';
 39 | 								} else if (existsSync(value)) {
 40 | 									return 'Refusing to overwrite existing directory or file! Please provide a non-clashing name.';
 41 | 								}
 42 | 							},
 43 | 					  }),
 44 | 			language: () =>
 45 | 				prompts.select({
 46 | 					message: 'Project language:',
 47 | 					initialValue: 'js',
 48 | 					options: [
 49 | 						{ value: 'js', label: 'JavaScript' },
 50 | 						{ value: 'ts', label: 'TypeScript' },
 51 | 					],
 52 | 				}),
 53 | 			useRouter: () =>
 54 | 				prompts.confirm({
 55 | 					message: 'Use router?',
 56 | 					initialValue: false,
 57 | 				}),
 58 | 			usePrerender: () =>
 59 | 				prompts.confirm({
 60 | 					message: 'Prerender app (SSG)?',
 61 | 					initialValue: false,
 62 | 				}),
 63 | 			useESLint: () =>
 64 | 				prompts.confirm({
 65 | 					message: 'Use ESLint?',
 66 | 					initialValue: false,
 67 | 				}),
 68 | 		},
 69 | 		{
 70 | 			onCancel: () => {
 71 | 				prompts.cancel(kl.yellow('Cancelled'));
 72 | 				process.exit(0);
 73 | 			},
 74 | 		},
 75 | 	);
 76 | 	const targetDir = resolve(process.cwd(), dir);
 77 | 	const useTS = language === 'ts';
 78 | 	/** @type {ConfigOptions} */
 79 | 	const opts = { packageManager, useTS, useRouter, usePrerender, useESLint };
 80 | 
 81 | 	await useSpinner(
 82 | 		'Setting up your project directory...',
 83 | 		() => scaffold(targetDir, opts),
 84 | 		'Set up project directory',
 85 | 	);
 86 | 
 87 | 	await useSpinner(
 88 | 		'Installing project dependencies...',
 89 | 		() => installDeps(targetDir, opts),
 90 | 		'Installed project dependencies',
 91 | 	);
 92 | 
 93 | 	if (!skipHint) {
 94 | 		const gettingStarted = `
 95 | 			${kl.dim('$')} ${kl.lightBlue(`cd ${dir}`)}
 96 | 			${kl.dim('$')} ${kl.lightBlue(`${packageManager == 'npm' ? 'npm run' : packageManager} dev`)}
 97 | 		`;
 98 | 		prompts.note(gettingStarted.trim().replace(/^\t\t\t/gm, ''), 'Getting Started');
 99 | 	}
100 | 
101 | 	prompts.outro(kl.green(`You're all set!`));
102 | })();
103 | 
104 | /**
105 |  * @param {string} startMessage
106 |  * @param {() => Promise<void>} fn
107 |  * @param {string} finishMessage
108 |  */
109 | async function useSpinner(startMessage, fn, finishMessage) {
110 | 	s.start(startMessage);
111 | 	await fn();
112 | 	s.stop(kl.green(finishMessage));
113 | }
114 | 
115 | /**
116 |  * @typedef {Object} ConfigOptions
117 |  * @property {'yarn' | 'pnpm' | 'npm' | 'bun'} packageManager
118 |  * @property {boolean} useTS
119 |  * @property {boolean} useRouter
120 |  * @property {boolean} usePrerender
121 |  * @property {boolean} useESLint
122 |  */
123 | 
124 | /**
125 |  * Copy template files to user's chosen directory
126 |  *
127 |  * @param {string} to
128 |  * @param {ConfigOptions} opts
129 |  */
130 | async function scaffold(to, opts) {
131 | 	await fs.mkdir(to, { recursive: true });
132 | 
133 | 	const __dirname = dirname(fileURLToPath(import.meta.url));
134 | 	await templateDir(resolve(__dirname, '../templates', 'base'), to, opts);
135 | 
136 | 	if (opts.useRouter) {
137 | 		await templateDir(
138 | 			resolve(__dirname, '../templates', 'config', 'router'),
139 | 			resolve(to, 'src'),
140 | 			opts,
141 | 		);
142 | 	}
143 | 
144 | 	if (opts.usePrerender) {
145 | 		await templateDir(
146 | 			resolve(
147 | 				__dirname,
148 | 				'../templates',
149 | 				'config',
150 | 				opts.useRouter ? 'prerender-router' : 'prerender',
151 | 			),
152 | 			to,
153 | 			opts,
154 | 		);
155 | 
156 | 		const htmlPath = resolve(to, 'index.html');
157 | 		const html = (await fs.readFile(htmlPath, 'utf-8')).replace('<script', '<script prerender');
158 | 		await fs.writeFile(htmlPath, html);
159 | 	}
160 | 
161 | 	if (opts.useTS) {
162 | 		await fs.rename(resolve(to, 'jsconfig.json'), resolve(to, 'tsconfig.json'));
163 | 
164 | 		const htmlPath = resolve(to, 'index.html');
165 | 		const html = (await fs.readFile(htmlPath, 'utf-8')).replace('index.jsx', 'index.tsx');
166 | 		await fs.writeFile(htmlPath, html);
167 | 	}
168 | 
169 | 	if (opts.useESLint) {
170 | 		const pkgPath = resolve(to, 'package.json');
171 | 		const pkg = JSON.parse(await fs.readFile(pkgPath, 'utf-8'));
172 | 		pkg.eslintConfig = {
173 | 			extends: 'preact',
174 | 		};
175 | 		await fs.writeFile(pkgPath, JSON.stringify(pkg, null, '\t'));
176 | 	}
177 | }
178 | 
179 | /**
180 |  * Recursive fs copy, swiped from `create-wmr`:
181 |  * https://github.com/preactjs/wmr/blob/3c5672ecd2f958c8eaf372d33c084dc69228ae3f/packages/create-wmr/src/index.js#L108-L124
182 |  *
183 |  * @param {string} from
184 |  * @param {string} to
185 |  * @param {ConfigOptions} opts
186 |  */
187 | async function templateDir(from, to, opts) {
188 | 	const files = await fs.readdir(from);
189 | 	const results = await Promise.all(
190 | 		files.map(async (f) => {
191 | 			if (f == '.' || f == '..') return;
192 | 			const filename = resolve(from, f);
193 | 			if ((await fs.stat(filename)).isDirectory()) {
194 | 				await fs.mkdir(resolve(to, f), { recursive: true });
195 | 				return templateDir(filename, resolve(to, f), opts);
196 | 			}
197 | 			if (opts.useTS && /\.jsx?$/.test(f)) f = f.replace('.js', '.ts');
198 | 			if (opts.packageManager !== 'npm' && f === 'README.md') {
199 | 				return await fs.writeFile(
200 | 					resolve(to, f),
201 | 					(await fs.readFile(filename, 'utf-8')).replace(/npm run/g, opts.packageManager),
202 | 				);
203 | 			}
204 | 			// Publishing to npm renames the .gitignore to .npmignore
205 | 			// https://github.com/npm/npm/issues/7252#issuecomment-253339460
206 | 			if (f === '_gitignore') f = '.gitignore';
207 | 			await fs.copyFile(filename, resolve(to, f));
208 | 		}),
209 | 	);
210 | 	return results.flat(99);
211 | }
212 | 
213 | /**
214 |  * @param {string} to
215 |  * @param {ConfigOptions} opts
216 |  */
217 | async function installDeps(to, opts) {
218 | 	const dependencies = [];
219 | 	const devDependencies = [];
220 | 
221 | 	const installOpts = {
222 | 		packageManager: opts.packageManager,
223 | 		to,
224 | 	};
225 | 
226 | 	if (opts.useTS) devDependencies.push('typescript');
227 | 	if (opts.useRouter) dependencies.push('preact-iso');
228 | 	if (opts.usePrerender) dependencies.push('preact-iso', 'preact-render-to-string');
229 | 	if (opts.useESLint) devDependencies.push('eslint', 'eslint-config-preact');
230 | 
231 | 	await installPackages(dependencies, { ...installOpts });
232 | 	devDependencies.length &&
233 | 		(await installPackages(devDependencies, { ...installOpts, dev: true }));
234 | }
235 | 
236 | /**
237 |  * @param {string[]} pkgs
238 |  * @param {{ packageManager: 'yarn' | 'pnpm' | 'npm' | 'bun', to: string, dev?: boolean }} opts
239 |  */
240 | function installPackages(pkgs, opts) {
241 | 	return x(
242 | 		opts.packageManager,
243 | 		[
244 | 			// `yarn add` will fail if nothing is provided
245 | 			opts.packageManager === 'yarn' ? (pkgs.length ? 'add' : '') : 'install',
246 | 			opts.dev ? '-D' : '',
247 | 			...pkgs,
248 | 		].filter(Boolean),
249 | 		{
250 | 			nodeOptions: {
251 | 				stdio: 'ignore',
252 | 				cwd: opts.to,
253 | 			},
254 | 		},
255 | 	);
256 | }
257 | 
258 | /**
259 |  * @returns {'yarn' | 'pnpm' | 'npm' | 'bun'}
260 |  */
261 | function getPkgManager() {
262 | 	const userAgent = process.env.npm_config_user_agent || '';
263 | 	if (userAgent.startsWith('yarn')) return 'yarn';
264 | 	if (userAgent.startsWith('pnpm')) return 'pnpm';
265 | 	if (!!process.versions.bun) return 'bun';
266 | 	return 'npm';
267 | }
268 | 


--------------------------------------------------------------------------------