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

.gitignore

@@ -5,4 +5,5 @@ package-lock.json
 yarn.lock
 /examples/**/.svelte
 /examples/**/build
-/packages/create-svelte/template/CHANGELOG.md
+/packages/create-svelte/template/CHANGELOG.md
+.env

packages/create-svelte/.gitignore

@@ -2,4 +2,7 @@
 /dist
 
 # re-enable this once we're out of prerelease
-/cli/versions.js
+/cli/versions.js
+
+/templates/*/.svelte
+/templates/*/build

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 Svelte app 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

@@ -74,7 +74,7 @@ async function generate_templates() {
 				// tool for the job because it just removes the types; Prettier then
 				// tidies up the end result
 				const contents = file.contents.replace(
-					/<script([^>]+)>([\s\S]+)<\/script>/g,
+					/<script([^>]+)>([\s\S]+?)<\/script>/g,
 					(m, attrs, typescript) => {
 						// Sucrase assumes 'unused' imports (which _are_ used, but only
 						// in the markup) are type imports, and strips them. This step
@@ -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/package.json

@@ -9,8 +9,13 @@
 	"devDependencies": {
 		"@sveltejs/adapter-node": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
+		"cookie": "^0.4.1",
+		"dotenv": "^8.2.0",
 		"svelte": "^3.29.0",
 		"vite": "^2.1.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.2.2"
+	}
 }

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

@@ -1,4 +1,102 @@
+@import '@fontsource/fira-mono';
+
 :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;
+	--font-mono: 'Fira Mono', monospace;
+	--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);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+}
+
+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;
+	color: var(--heading-color);
+}
+
+p {
+	line-height: 1.35;
+}
+
+a {
+	color: var(--accent-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	margin-bottom: 0 0 1em 0;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(0, 0, 0, 0.05);
+	border-radius: 3px;
+	box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.05);
+	padding: 0.5em;
+	overflow-x: auto;
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+@media (min-width: 480px) {
+	h1 {
+		font-size: 2rem;
+	}
 }

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

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
 		%svelte.head%
 	</head>
 	<body>

packages/create-svelte/templates/default/src/hooks.ts

@@ -0,0 +1,18 @@
+import cookie from 'cookie';
+import type { GetContext, Handle } from '@sveltejs/kit';
+
+export const getContext: GetContext = (request) => {
+	const cookies = cookie.parse(request.headers.cookie || '');
+
+	return {
+		userid: cookies.userid
+	};
+};
+
+// TODO https://github.com/sveltejs/kit/issues/1046
+export const handle: Handle = ({ request, render }) => {
+	return render({
+		...request,
+		method: request.query.get('_method') || request.method
+	});
+};