New 'Hello World' page

.changeset/chilly-meals-hug.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Adding new 'hello world' templates - skeleton and default variants -. Applying it to the CLI as well

packages/create-svelte/cli/index.js

@@ -44,7 +44,18 @@ async function main() {
 		mkdirp(target);
 	}
 
-	const cwd = path.join(__dirname, 'template');
+	const { value: project_template } = await prompts({
+		type: 'select',
+		name: 'value',
+		message: 'Which app Svelte template do you want to use?',
+		choices: [
+			{ title: 'Default App (Counter + Route)', value: 'default' },
+			{ title: 'Skeleton App', value: 'skeleton' }
+		]
+	});
+
+	const project_template_dir = project_template === 'default' ? 'template' : 'template-skeleton';
+	const cwd = path.join(__dirname, project_template_dir);
 	const gitignore = parser.compile(gitignore_contents);
 
 	const files = glob('**/*', { cwd }).filter(gitignore.accepts);
@@ -74,7 +85,7 @@ async function main() {
 
 	console.log(bold(green('✔ Copied project files')));
 
-	await prompt_modifications(target);
+	await prompt_modifications(target, project_template);
 
 	console.log(
 		'\nWant to add other parts to your code base? ' +
@@ -102,14 +113,14 @@ async function main() {
  *
  * @param {string} target
  */
-async function prompt_modifications(target) {
+async function prompt_modifications(target, project_template) {
 	const ts_response = await prompts({
 		type: 'confirm',
 		name: 'value',
 		message: 'Use TypeScript in components?',
 		initial: false
 	});
-	await add_typescript(target, ts_response.value);
+	await add_typescript(target, ts_response.value, project_template);
 
 	const css_response = await prompts({
 		type: 'select',
@@ -121,7 +132,7 @@ async function prompt_modifications(target) {
 			{ title: 'SCSS', value: 'scss' }
 		]
 	});
-	await add_css(target, css_response.value);
+	await add_css(target, css_response.value, project_template);
 
 	const eslint_response = await prompts({
 		type: 'confirm',

packages/create-svelte/cli/modifications/add_css.js

@@ -6,13 +6,60 @@ import {
 	update_package_json_dev_deps
 } from './utils';
 
+/**
+ * Get the file modifications required in order to add support to CSS/LESS/SCSS
+ *
+ * @param {string} template
+ * @param {string} which
+ */
+const get_css_modifications_by_template = (template, which) => {
+	if (!template || !which) return [];
+
+	const modifications = {
+		common: [
+			{
+				file: 'src/routes/$layout.svelte',
+				changes: [['../app.css', `../app.${which}`]]
+			},
+			{
+				file: 'src/routes/index.svelte',
+				changes: [['<style>', `<style lang="${which}">`]]
+			}
+		],
+		skeleton: [],
+		default: [
+			{
+				file: 'src/lib/Counter.svelte',
+				changes: [['<style>', `<style lang="${which}">`]]
+			},
+			{
+				file: 'src/routes/$layout.svelte',
+				changes: [['<style>', `<style lang="${which}">`]]
+			},
+			{
+				file: 'src/lib/DarkModeToggle.svelte',
+				changes: [['<style>', `<style lang="${which}">`]]
+			},
+			{
+				file: 'src/lib/HeaderNavigation.svelte',
+				changes: [['<style>', `<style lang="${which}">`]]
+			}
+		]
+	};
+
+	return [
+		...modifications.common,
+		...(template === 'default' ? modifications.default : modifications.skeleton)
+	];
+};
+
 /**
  * Add chosen CSS language to the project.
  *
  * @param {string} cwd
  * @param {'css' | 'scss' | 'less'} which
  */
-export default async function add_css(cwd, which) {
+export default async function add_css(cwd, which, project_template) {
 	if (which === 'css') {
 		copy_from_template_additions(cwd, ['src', 'app.css']);
 		console.log('You can add support for CSS preprocessors like SCSS/Less/PostCSS later.');
@@ -22,9 +69,12 @@ export default async function add_css(cwd, which) {
 			'svelte-preprocess': '^4.0.0'
 		});
 		copy_from_template_additions(cwd, ['src', 'app.less']);
-		update_component(cwd, 'src/routes/$layout.svelte', [['../app.css', '../app.less']]);
-		update_component(cwd, 'src/lib/Counter.svelte', [['<style>', '<style lang="less">']]);
-		update_component(cwd, 'src/routes/index.svelte', [['<style>', '<style lang="less">']]);
+
+		const modification_list = get_css_modifications_by_template(project_template, which);
+		modification_list.forEach((modification) => {
+			update_component(cwd, modification.file, modification.changes);
+		});
+
 		add_svelte_preprocess_to_config(cwd);
 		console.log(
 			bold(
@@ -40,9 +90,12 @@ export default async function add_css(cwd, which) {
 			'svelte-preprocess': '^4.0.0'
 		});
 		copy_from_template_additions(cwd, ['src', 'app.scss']);
-		update_component(cwd, 'src/routes/$layout.svelte', [['../app.css', '../app.scss']]);
-		update_component(cwd, 'src/lib/Counter.svelte', [['<style>', '<style lang="scss">']]);
-		update_component(cwd, 'src/routes/index.svelte', [['<style>', '<style lang="scss">']]);
+
+		const modification_list = get_css_modifications_by_template(project_template, which);
+		modification_list.forEach((modification) => {
+			update_component(cwd, modification.file, modification.changes);
+		});
+
 		add_svelte_preprocess_to_config(cwd);
 		console.log(
 			bold(

packages/create-svelte/cli/modifications/add_typescript.js

@@ -8,24 +8,77 @@ import {
 	update_package_json_dev_deps
 } from './utils';
 
+/**
+ * Get the file modifications required in order to add support to TypeScript
+ *
+ * @param {string} template
+ */
+const get_ts_modifications_by_template = (template) => {
+	if (!template) return [];
+
+	const modifications = {
+		common: [
+			{
+				file: 'src/routes/index.svelte',
+				changes: [['<script>', '<script lang="ts">']]
+			},
+			{
+				file: 'src/routes/$layout.svelte',
+				changes: [['<script>', '<script lang="ts">']]
+			}
+		],
+		skeleton: [],
+		default: [
+			{
+				file: 'src/lib/Counter.svelte',
+				changes: [
+					['<script>', '<script lang="ts">'],
+					[
+						'let action = { operation: undefined };',
+						"let action: { operation?: 'ADD' | 'REMOVE' } = { operation: undefined };"
+					],
+					[
+						'const counterTransition = (_, { duration }) => {',
+						'const counterTransition = (_, { duration }: { duration: number}) => {'
+					]
+				]
+			},
+			{
+				file: 'src/lib/DarkModeToggle.svelte',
+				changes: [['<script>', '<script lang="ts">']]
+			},
+			{
+				file: 'src/lib/HeaderNavigation.svelte',
+				changes: [['<script>', '<script lang="ts">']]
+			}
+		]
+	};
+
+	return [
+		...modifications.common,
+		...(template === 'default' ? modifications.default : modifications.skeleton)
+	];
+};
+
 /**
  * Add TypeScript if user wants it.
  *
  * @param {string} cwd
  * @param {boolean} yes
  */
-export default async function add_typescript(cwd, yes) {
+export default async function add_typescript(cwd, yes, project_template) {
 	if (yes) {
 		update_package_json_dev_deps(cwd, {
 			typescript: '^4.0.0',
 			tslib: '^2.0.0',
 			'svelte-preprocess': '^4.0.0'
 		});
-		update_component(cwd, 'src/lib/Counter.svelte', [
-			['<script>', '<script lang="ts">'],
-			['const increment = () => {', 'const increment = (): void => {']
-		]);
-		update_component(cwd, 'src/routes/index.svelte', [['<script>', '<script lang="ts">']]);
+
+		const modification_list = get_ts_modifications_by_template(project_template);
+		modification_list.forEach((modification) => {
+			update_component(cwd, modification.file, modification.changes);
+		});
+
 		add_svelte_preprocess_to_config(cwd);
 		add_tsconfig(cwd);
 

packages/create-svelte/package.json

@@ -15,7 +15,7 @@
 	"scripts": {
 		"dev": "rollup -cw",
 		"build": "node scripts/update-versions && rollup -c",
-		"lint": "eslint --ignore-path .gitignore --ignore-pattern template/ \"**/*.{ts,js,svelte}\" && npm run check-format",
+		"lint": "eslint --ignore-path .gitignore --ignore-pattern template/ \"**/*.{ts,js,svelte}\" --ignore-pattern template-skeleton/ \"**/*.{ts,js,svelte}\" && npm run check-format",
 		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",
 		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
 		"prepublishOnly": "npm run build"

packages/create-svelte/template-additions/src/app.css

@@ -1,4 +1,80 @@
 :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);
+}
+
+[data-theme='dark'] {
+	--primary-color: #1f272e;
+	--secondary-color: #2e3a44;
+	--tertiary-color: #393d45;
+	--accent-color: #ff3e00;
+	--heading-color: #ffffff;
+	--text-color: #ffffff;
+	--secondary-text-color: #676778;
+	--background-without-opacity: rgba(255, 255, 255, 0.2);
+}
+
+body {
+	margin: 0;
+	min-height: 100vh;
+	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;
+	}
 }