Skip to content

Commit dd2da4d

Browse files
JoviDeCroockJoviDeCroock
authored
chore(templates): add SSG template (#1)
* ssg template * todos * fixes * use appType * ignore error
1 parent f5d4cce commit dd2da4d

File tree

18 files changed

+395
-47
lines changed

18 files changed

+395
-47
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,6 @@ dist-ssr
2626

2727
# Local Netlify folder
2828
.netlify
29+
30+
./templates/**/package-lock.json
31+
./templates/**/yarn.lock

‎src/index.js‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const brandColor = /** @type {const} */ ([174, 128, 255]);
2222
kl.trueColor(...brandColor)('Preact - Fast 3kB alternative to React with the same modern API')
2323
);
2424

25-
const { dir, language, useRouter, useESLint } = await prompts.group(
25+
const { dir, language, useRouter, useESLint, appType } = await prompts.group(
2626
{
2727
dir: () =>
2828
prompts.text({
@@ -36,6 +36,14 @@ const brandColor = /** @type {const} */ ([174, 128, 255]);
3636
}
3737
},
3838
}),
39+
appType : () => prompts.select({
40+
message: 'Project Type:',
41+
initialValue: 'spa',
42+
options: [
43+
{ value: 'spa', label: 'Single Page Application (only client-side)' },
44+
{ value: 'ssg', label: 'Static Site Generation (prerenders pages)' },
45+
],
46+
}),
3947
language: () =>
4048
prompts.select({
4149
message: 'Project language:',
@@ -45,11 +53,11 @@ const brandColor = /** @type {const} */ ([174, 128, 255]);
4553
{ value: 'ts', label: 'TypeScript' },
4654
],
4755
}),
48-
useRouter: () =>
56+
useRouter: ({ results }) => results.appType === 'spa' ?
4957
prompts.confirm({
5058
message: 'Use router?',
5159
initialValue: false,
52-
}),
60+
}) : Promise.resolve(false),
5361
useESLint: () =>
5462
prompts.confirm({
5563
message: 'Use ESLint?',
@@ -68,13 +76,13 @@ const brandColor = /** @type {const} */ ([174, 128, 255]);
6876

6977
await useSpinner(
7078
'Setting up your project directory...',
71-
() => scaffold(targetDir, { useTS, useRouter, useESLint }),
79+
() => scaffold(targetDir, { useTS, useRouter, useESLint, appType }),
7280
'Set up project directory'
7381
);
7482

7583
await useSpinner(
7684
'Installing project dependencies...',
77-
() => installDeps(targetDir, packageManager, { useTS, useRouter, useESLint }),
85+
() => installDeps(targetDir, packageManager, { useTS, useRouter, useESLint, appType }),
7886
'Installed project dependencies'
7987
);
8088

@@ -103,8 +111,9 @@ async function useSpinner(startMessage, fn, finishMessage) {
103111
/**
104112
* @typedef {Object} ConfigOptions
105113
* @property {boolean} useTS
106-
* @property {boolean} useRouter
114+
* @property {unknown} useRouter
107115
* @property {boolean} useESLint
116+
* @property {string} appType
108117
*/
109118

110119
/**
@@ -117,7 +126,11 @@ async function scaffold(to, opts) {
117126
await fs.mkdir(to, { recursive: true });
118127

119128
const __dirname = dirname(fileURLToPath(import.meta.url));
120-
await templateDir(resolve(__dirname, '../templates', 'base'), to, opts.useTS);
129+
if (opts.appType === 'spa') {
130+
await templateDir(resolve(__dirname, '../templates', 'base'), to, opts.useTS);
131+
} else {
132+
await templateDir(resolve(__dirname, '../templates', 'ssr'), to, opts.useTS);
133+
}
121134

122135
if (opts.useRouter) {
123136
await templateDir(

‎templates/ssr/_gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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?

‎templates/ssr/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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+
<title>Vite + Preact</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/index.jsx"></script>
12+
</body>
13+
</html>

‎templates/ssr/jsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"module": "ESNext",
5+
"moduleResolution": "bundler",
6+
"noEmit": true,
7+
"allowJs": true,
8+
"checkJs": true,
9+
"jsx": "react-jsx",
10+
"jsxImportSource": "preact"
11+
},
12+
"include": ["node_modules/vite/client.d.ts", "**/*"]
13+
}

‎templates/ssr/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "example",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite build && vite preview"
9+
},
10+
"dependencies": {
11+
"preact": "^10.16.0",
12+
"preact-render-to-string": "^6.2.0"
13+
},
14+
"devDependencies": {
15+
"@preact/preset-vite": "^2.5.0",
16+
"vite": "^4.3.2",
17+
"vite-plugin-ssr": "^0.4.133"
18+
}
19+
}

‎templates/ssr/pages/assets/preact.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎templates/ssr/pages/index.page.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import preactLogo from './assets/preact.svg';
2+
import { useState } from 'preact/hooks'
3+
import viteLogo from '/vite.svg';
4+
5+
export function Page() {
6+
const [count, setCount] = useState(0);
7+
8+
return (
9+
<>
10+
<div>
11+
<a href="https://vitejs.dev" target="_blank">
12+
<img src={viteLogo} class="logo" alt="Vite logo" />
13+
</a>
14+
<a href="https://preactjs.com" target="_blank">
15+
<img src={preactLogo} class="logo preact" alt="Preact logo" />
16+
</a>
17+
</div>
18+
<h1>Vite + Preact</h1>
19+
<div class="card">
20+
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
21+
<p>
22+
Edit <code>src/app.jsx</code> and save to test HMR
23+
</p>
24+
</div>
25+
<p class="read-the-docs">Click on the Vite and Preact logos to learn more</p>
26+
</>
27+
);
28+
}

‎templates/ssr/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎templates/ssr/renderer/PageShell.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { PageContextProvider } from './usePageContext'
2+
3+
export { PageShell }
4+
5+
function PageShell({ pageContext, children }) {
6+
return (
7+
<PageContextProvider pageContext={pageContext}>
8+
<main>{children}</main>
9+
</PageContextProvider>
10+
)
11+
}

0 commit comments

Comments
 (0)