New hello world

.changeset/itchy-beers-burn.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Adding new Hello World templates (default with enhanced style and skeleton) to create-svelte

packages/create-svelte/cli/index.js

@@ -37,6 +37,15 @@ async function main() {
 	}
 
 	const options = /** @type {import('./types').Options} */ (await prompts([
+		{
+			type: 'select',
+			name: 'template',
+			message: 'Which app Svelte template?',
+			choices: [
+				{ title: 'Default App (Counter + Route)', value: 'default' },
+				{ title: 'Skeleton App', value: 'skeleton' }
+			]
+		},
 		{
 			type: 'confirm',
 			name: 'typescript',
@@ -59,7 +68,7 @@ async function main() {
 
 	const name = path.basename(path.resolve(cwd));
 
-	write_template_files(`default-${options.typescript ? 'ts' : 'js'}`, name, cwd);
+	write_template_files(`${options.template}-${options.typescript ? 'ts' : 'js'}`, name, cwd);
 	write_common_files(cwd, options);
 
 	console.log(bold(green('✔ Copied project files')));

packages/create-svelte/cli/types.d.ts

@@ -1,4 +1,5 @@
 export type Options = {
+	template: 'default' | 'skeleton';
 	typescript: boolean;
 	prettier: boolean;
 	eslint: boolean;

packages/create-svelte/package.json

@@ -12,6 +12,7 @@
 		"prompts": "^2.4.0",
 		"rollup": "^2.41.1",
 		"sucrase": "^3.18.1",
+		"svelte-preprocess": "^4.7.0",
 		"tiny-glob": "^0.2.8"
 	},
 	"scripts": {

packages/create-svelte/scripts/build-templates.js

@@ -125,29 +125,31 @@ async function generate_templates() {
 	}
 }
 
-async function generate_common() {
+async function generate_shared() {
 	const cwd = path.resolve('shared');
 
 	const files = glob('**/*', { cwd, filesOnly: true, dot: true })
 		.map((file) => {
-			const [conditions, ...rest] = file.split('/');
-
+			const contents = fs.readFileSync(path.join(cwd, file), 'utf8');
 			const include = [];
 			const exclude = [];
 
-			const pattern = /([+-])([a-z]+)/g;
-			let match;
-			while ((match = pattern.exec(conditions))) {
-				const set = match[1] === '+' ? include : exclude;
-				set.push(match[2]);
+			let name = file;
+
+			if (file.startsWith('+') || file.startsWith('-')) {
+				const [conditions, ...rest] = file.split('/');
+
+				const pattern = /([+-])([a-z]+)/g;
+				let match;
+				while ((match = pattern.exec(conditions))) {
+					const set = match[1] === '+' ? include : exclude;
+					set.push(match[2]);
+				}
+
+				name = rest.join('/');
 			}
 
-			return {
-				name: rest.join('/'),
-				include,
-				exclude,
-				contents: fs.readFileSync(path.join(cwd, file), 'utf8')
-			};
+			return { name, include, exclude, contents };
 		})
 		.sort((a, b) => a.include.length + a.exclude.length - (b.include.length + b.exclude.length));
 
@@ -156,7 +158,7 @@ async function generate_common() {
 
 async function main() {
 	await generate_templates();
-	await generate_common();
+	await generate_shared();
 }
 
 main();

packages/create-svelte/templates/default/README.md → packages/create-svelte/shared/README.md

@@ -35,6 +35,7 @@ By default, `npm run build` will generate a Node app that you can run with `node
 
 - [@sveltejs/adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node)
 - [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static)
+- [@sveltejs/adapter-cloudflare-workers](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare-workers)
 - [@sveltejs/adapter-netlify](https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify)
 - [@sveltejs/adapter-vercel](https://github.com/sveltejs/kit/tree/master/packages/adapter-vercel)
 - ...more soon

packages/create-svelte/templates/default/.gitignore

@@ -2,4 +2,4 @@
 node_modules
 /.svelte
 /build
-/functions
+/functions

packages/create-svelte/templates/default/src/app.css

@@ -1,4 +1,79 @@
 :root {
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-		'Open Sans', 'Helvetica Neue', sans-serif;
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+}
+
+:root[data-theme='dark'] {
+	--primary-color: #1f272e;
+	--secondary-color: #2e3a44;
+	--tertiary-color: #393d45;
+	--heading-color: #ffffff;
+	--text-color: #ffffff;
+	--secondary-text-color: #676778;
+	--background-without-opacity: rgba(255, 255, 255, 0.2);
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-color: var(--primary-color);
+	background: linear-gradient(
+		180deg,
+		var(--primary-color) 0%,
+		var(--secondary-color) 10.45%,
+		var(--tertiary-color) 41.35%
+	);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	text-align: center;
+	color: var(--heading-color);
+}
+
+h1 {
+	font-size: 2rem;
+	margin-bottom: 0;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+@media (min-width: 480px) {
+	h1 {
+		font-size: 3rem;
+	}
 }

packages/create-svelte/templates/default/src/app.html

@@ -4,6 +4,21 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		<script>
+			try {
+				if (!('theme' in localStorage)) {
+					localStorage.theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+						? 'dark'
+						: 'light';
+				}
+
+				document.querySelector('html').dataset.theme = localStorage.theme;
+			} catch (e) {
+				console.error(e);
+			}
+		</script>
+
 		%svelte.head%
 	</head>
 	<body>

packages/create-svelte/templates/default/src/lib/Counter/index.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { spring } from 'svelte/motion';
+
+	let count = 0;
+
+	const displayed_count = spring();
+	$: displayed_count.set(count);
+	$: offset = modulo($displayed_count, 1);
+
+	function modulo(n: number, m: number) {
+		// handle negative numbers
+		return ((n % m) + m) % m;
+	}
+</script>
+
+<div class="counter">
+	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+		<svg role="img" aria-label="Minus" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5"></path>
+		</svg>
+	</button>
+
+	<div class="counter-viewport">
+		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
+			<strong style="top: -100%">{Math.floor($displayed_count + 1)}</strong>
+			<strong>{Math.floor($displayed_count)}</strong>
+		</div>
+	</div>
+
+	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+		<!-- <img src={plus} alt="Plus icon"> -->
+		<svg role="img" aria-label="Plus" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1"></path>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.counter {
+		display: flex;
+		border-top: 1px solid rgba(0,0,0,0.1);
+		border-bottom: 1px solid rgba(0,0,0,0.1);
+		margin: 1rem 0;
+	}
+
+	:global([data-theme="dark"]) .counter {
+		border-color: rgba(255,255,255,0.1);
+	}
+
+	.counter button.disabled {
+		opacity: 0.3;
+	}
+
+	.counter button {
+		width: 2em;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background-color: transparent;
+		color: var(--text-color);
+		font-size: 2rem;
+	}
+
+	.counter button:hover {
+		background-color: var(--secondary-color);
+	}
+
+	svg {
+		width: 25%;
+		height: 25%;
+	}
+
+	path {
+		vector-effect: non-scaling-stroke;
+		stroke-width: 2px;
+		stroke: var(--text-color);
+	}
+
+	.counter-viewport {
+		width: 8em;
+		height: 4em;
+		overflow: hidden;
+		text-align: center;
+		position: relative;
+	}
+
+	.counter-viewport strong {
+		position: absolute;
+		display: block;
+		width: 100%;
+		height: 100%;
+		font-weight: 400;
+		color: var(--accent-color);
+		font-size: 4rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.counter-digits {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+</style>