diff --git a/.changeset/chilly-meals-hug.md b/.changeset/chilly-meals-hug.md
new file mode 100644
index 000000000000..19b6a10f47fd
--- /dev/null
+++ b/.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
diff --git a/examples/svelte-kit-demo/.gitignore b/examples/svelte-kit-demo/.gitignore
deleted file mode 100644
index 9a7b33b97ced..000000000000
--- a/examples/svelte-kit-demo/.gitignore
+++ /dev/null
@@ -1,6 +0,0 @@
-.DS_Store
-/node_modules
-/build
-/.svelte
-/.vercel_build_output
-/workers-site
\ No newline at end of file
diff --git a/examples/svelte-kit-demo/README.md b/examples/svelte-kit-demo/README.md
deleted file mode 100644
index 1adcebcf25f0..000000000000
--- a/examples/svelte-kit-demo/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# svelte-kit-demo
-
-This is a simple app to demonstrate a few different features of SvelteKit, and to ensure that the various adapters are working correctly.
-
-## Deployments
-
-### Vercel
-
-- URL: https://kit-zeta.vercel.app/
-- Info: https://vercel.com/sveltejs/kit
-- Build command: `npm run build:vercel`
-
-### Cloudflare Workers
-
-- URL: https://svelte-kit-demo.halfnelson.workers.dev
-- Build command: `npm run build:cloudflare-workers`
-- Deploy Command: `wrangler publish`
diff --git a/examples/svelte-kit-demo/package.json b/examples/svelte-kit-demo/package.json
deleted file mode 100644
index 7c4662e029f7..000000000000
--- a/examples/svelte-kit-demo/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "name": "svelte-kit-demo",
- "version": "1.0.0",
- "private": true,
- "type": "module",
- "scripts": {
- "dev": "svelte-kit dev",
- "build": "svelte-kit build",
- "start": "svelte-kit start",
- "build:vercel": "ADAPTER=@sveltejs/adapter-vercel OPTIONS={} npm run build",
- "build:cloudflare-workers": "ADAPTER=@sveltejs/adapter-cloudflare-workers OPTIONS={} npm run build"
- },
- "devDependencies": {
- "@sveltejs/adapter-node": "workspace:*",
- "@sveltejs/adapter-static": "workspace:*",
- "@sveltejs/adapter-vercel": "workspace:*",
- "@sveltejs/adapter-cloudflare-workers": "workspace:*",
- "@sveltejs/kit": "workspace:*",
- "svelte": "^3.35.0"
- }
-}
diff --git a/examples/svelte-kit-demo/src/app.html b/examples/svelte-kit-demo/src/app.html
deleted file mode 100644
index 4b89e97a1e21..000000000000
--- a/examples/svelte-kit-demo/src/app.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
- %svelte.body%
-
-
\ No newline at end of file
diff --git a/examples/svelte-kit-demo/src/hooks/index.js b/examples/svelte-kit-demo/src/hooks/index.js
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/examples/svelte-kit-demo/src/lib/Nav.svelte b/examples/svelte-kit-demo/src/lib/Nav.svelte
deleted file mode 100644
index 5085704f6e3d..000000000000
--- a/examples/svelte-kit-demo/src/lib/Nav.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
- home
- about
- blog
-
-
-
\ No newline at end of file
diff --git a/examples/svelte-kit-demo/src/routes/$layout.svelte b/examples/svelte-kit-demo/src/routes/$layout.svelte
deleted file mode 100644
index aec614890cde..000000000000
--- a/examples/svelte-kit-demo/src/routes/$layout.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/examples/svelte-kit-demo/src/routes/about/index.svelte b/examples/svelte-kit-demo/src/routes/about/index.svelte
deleted file mode 100644
index a0947fb0d68b..000000000000
--- a/examples/svelte-kit-demo/src/routes/about/index.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
- About
-
-
-about
-this is the about page
-prerendering: {prerendering}
diff --git a/examples/svelte-kit-demo/src/routes/blog/[slug].json.ts b/examples/svelte-kit-demo/src/routes/blog/[slug].json.ts
deleted file mode 100644
index ede72a0bce1f..000000000000
--- a/examples/svelte-kit-demo/src/routes/blog/[slug].json.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import posts from './_posts';
-
-export function get({ params }) {
- if (params.slug in posts) {
- return {
- body: posts[params.slug]
- };
- }
-
- return {
- status: 404
- };
-}
\ No newline at end of file
diff --git a/examples/svelte-kit-demo/src/routes/blog/[slug].svelte b/examples/svelte-kit-demo/src/routes/blog/[slug].svelte
deleted file mode 100644
index 19c8997cfcda..000000000000
--- a/examples/svelte-kit-demo/src/routes/blog/[slug].svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
- {post.title}
-
-
-{post.title}
-
- {@html post.body}
-
diff --git a/examples/svelte-kit-demo/src/routes/blog/_posts.ts b/examples/svelte-kit-demo/src/routes/blog/_posts.ts
deleted file mode 100644
index f56fa5c92ec7..000000000000
--- a/examples/svelte-kit-demo/src/routes/blog/_posts.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default {
- 'first-post': {
- title: 'First post!',
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt arcu elit, sit amet efficitur dolor bibendum quis. Ut et risus urna. Fusce eget luctus tellus. In hac habitasse platea dictumst. Sed vestibulum mauris a turpis lacinia, in elementum lectus cursus. Nulla eleifend ligula eros, id interdum ligula tincidunt ut. Curabitur ac rutrum dolor, vel commodo elit.
'
- },
- 'second-post': {
- title: 'Second post!',
- body: 'Vestibulum ipsum dolor, dignissim ut sapien a, sollicitudin consequat dui. Pellentesque libero quam, euismod ac nunc nec, commodo facilisis leo. Ut pretium, metus et commodo tincidunt, urna magna scelerisque est, rhoncus dapibus velit sem id quam. Ut sed felis felis. Phasellus justo ipsum, interdum vel erat sed, rhoncus eleifend nunc. Phasellus nulla libero, interdum ac ultricies vitae, maximus nec risus. Cras hendrerit sed lectus id ullamcorper.
'
- },
- 'third-post': {
- title: 'Third post!',
- body: 'Fusce vitae tincidunt libero. Pellentesque nec efficitur velit. Nunc sit amet efficitur tellus. Etiam velit dui, commodo volutpat condimentum non, venenatis consequat neque. Phasellus lacinia quis felis eu tristique. Sed et tellus mi. Aliquam congue ex vitae elit fermentum, sed elementum lectus euismod. Nam vel rhoncus dui. Nunc vulputate maximus est vitae sodales. Aenean rhoncus at nisl efficitur ultricies. Donec id lectus et leo dignissim mattis. Cras nisi quam, mattis sed felis in, tempor ullamcorper felis.
'
- }
-}
\ No newline at end of file
diff --git a/examples/svelte-kit-demo/src/routes/blog/index.json.ts b/examples/svelte-kit-demo/src/routes/blog/index.json.ts
deleted file mode 100644
index dd78388b8003..000000000000
--- a/examples/svelte-kit-demo/src/routes/blog/index.json.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import posts from './_posts';
-
-export function get() {
- return {
- body: Object.keys(posts).map(slug => ({
- slug,
- ...posts[slug]
- }))
- };
-}
\ No newline at end of file
diff --git a/examples/svelte-kit-demo/src/routes/blog/index.svelte b/examples/svelte-kit-demo/src/routes/blog/index.svelte
deleted file mode 100644
index c70fb34817c2..000000000000
--- a/examples/svelte-kit-demo/src/routes/blog/index.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
- Blog
-
-
-blog
-
-
-
-
diff --git a/examples/svelte-kit-demo/src/routes/index.svelte b/examples/svelte-kit-demo/src/routes/index.svelte
deleted file mode 100644
index df2be805b8b6..000000000000
--- a/examples/svelte-kit-demo/src/routes/index.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
- Home
-
-
-Home
-
-This is an example of using Vite for SSR.
-
-
-
diff --git a/examples/svelte-kit-demo/static/robots.txt b/examples/svelte-kit-demo/static/robots.txt
deleted file mode 100644
index e9e57dc4d41b..000000000000
--- a/examples/svelte-kit-demo/static/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/examples/svelte-kit-demo/svelte.config.cjs b/examples/svelte-kit-demo/svelte.config.cjs
deleted file mode 100644
index dba8b49e8ba9..000000000000
--- a/examples/svelte-kit-demo/svelte.config.cjs
+++ /dev/null
@@ -1,9 +0,0 @@
-const adapter = require(process.env.ADAPTER || '@sveltejs/adapter-node');
-const options = JSON.stringify(process.env.OPTIONS || '{}');
-
-module.exports = {
- kit: {
- adapter: adapter(options),
- target: '#svelte'
- }
-};
diff --git a/examples/svelte-kit-demo/wrangler.toml b/examples/svelte-kit-demo/wrangler.toml
deleted file mode 100644
index 9d503e52ed07..000000000000
--- a/examples/svelte-kit-demo/wrangler.toml
+++ /dev/null
@@ -1,10 +0,0 @@
-name = "svelte-kit-demo"
-type = "webpack"
-account_id = "f60df21486a4f0e5dbd85493882f1d53"
-workers_dev = true
-route = ""
-zone_id = ""
-
-[site]
-bucket = "./build"
-entry-point = "./workers-site"
\ No newline at end of file
diff --git a/packages/create-svelte/cli/index.js b/packages/create-svelte/cli/index.js
index f17d7e881cac..9b458f400d8a 100644
--- a/packages/create-svelte/cli/index.js
+++ b/packages/create-svelte/cli/index.js
@@ -7,8 +7,8 @@ import path from 'path';
import prompts from 'prompts/lib/index';
import glob from 'tiny-glob/sync.js';
import gitignore_contents from '../template/.gitignore';
-import add_css from './modifications/add_css';
import add_typescript from './modifications/add_typescript';
+import add_skeleton_template from './modifications/add_skeleton_template';
// import versions from './versions';
import { version } from '../package.json';
import add_prettier from './modifications/add_prettier';
@@ -76,10 +76,12 @@ async function main() {
await prompt_modifications(target);
+ console.log('\n✧ Want to add other parts to your codebase?');
+
console.log(
- '\nWant to add other parts to your code base? ' +
- 'Visit https://github.com/svelte-add/svelte-adders, a community project of commands ' +
- 'to add particular functionality to Svelte projects\n'
+ `\nVisit ${bold(
+ cyan('https://github.com/sveltejs/integrations')
+ )} and see all the add-on possibilities to your Svelte project.\n`
);
console.log('\nNext steps:');
@@ -103,25 +105,25 @@ async function main() {
* @param {string} target
*/
async function prompt_modifications(target) {
+ const template_response = 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 is_skeleton_template = template_response.value === 'skeleton';
+ await add_skeleton_template(target, is_skeleton_template);
+
const ts_response = await prompts({
type: 'confirm',
name: 'value',
message: 'Use TypeScript in components?',
initial: false
});
- await add_typescript(target, ts_response.value);
-
- const css_response = await prompts({
- type: 'select',
- name: 'value',
- message: 'What do you want to use for writing Styles in Svelte components?',
- choices: [
- { title: 'CSS', value: 'css' },
- { title: 'Less', value: 'less' },
- { title: 'SCSS', value: 'scss' }
- ]
- });
- await add_css(target, css_response.value);
+ await add_typescript(target, ts_response.value, is_skeleton_template);
const eslint_response = await prompts({
type: 'confirm',
diff --git a/packages/create-svelte/cli/modifications/add_css.js b/packages/create-svelte/cli/modifications/add_css.js
deleted file mode 100644
index 0fabe673f275..000000000000
--- a/packages/create-svelte/cli/modifications/add_css.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { bold, green } from 'kleur/colors';
-import {
- add_svelte_preprocess_to_config,
- copy_from_template_additions,
- update_component,
- update_package_json_dev_deps
-} from './utils';
-
-/**
- * Add chosen CSS language to the project.
- *
- * @param {string} cwd
- * @param {'css' | 'scss' | 'less'} which
- */
-export default async function add_css(cwd, which) {
- 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.');
- } else if (which === 'less') {
- update_package_json_dev_deps(cwd, {
- less: '^3.0.0',
- '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', [['
diff --git a/packages/create-svelte/template-additions/template-skeleton/index.svelte b/packages/create-svelte/template-additions/template-skeleton/index.svelte
new file mode 100644
index 000000000000..b4d378a0f395
--- /dev/null
+++ b/packages/create-svelte/template-additions/template-skeleton/index.svelte
@@ -0,0 +1,33 @@
+
+ Home
+
+
+
+ To my brand new
+
+ Here’s where you’ll edit your content.src/routes/index.svelte
+
+
+
+
diff --git a/packages/create-svelte/template/.gitignore b/packages/create-svelte/template/.gitignore
index 77b1ebd8489d..e7002107841e 100644
--- a/packages/create-svelte/template/.gitignore
+++ b/packages/create-svelte/template/.gitignore
@@ -2,4 +2,4 @@
node_modules
/.svelte
/build
-/functions
\ No newline at end of file
+/functions
diff --git a/packages/create-svelte/template/src/app.css b/packages/create-svelte/template/src/app.css
new file mode 100644
index 000000000000..62ff713cb4cf
--- /dev/null
+++ b/packages/create-svelte/template/src/app.css
@@ -0,0 +1,80 @@
+:root {
+ 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;
+ --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;
+ }
+}
diff --git a/packages/create-svelte/template/src/lib/Counter.svelte b/packages/create-svelte/template/src/lib/Counter.svelte
index 986b6f0d10d2..4bc0810d8d65 100644
--- a/packages/create-svelte/template/src/lib/Counter.svelte
+++ b/packages/create-svelte/template/src/lib/Counter.svelte
@@ -1,36 +1,143 @@
-
- Clicks: {count}
-
+
+ {#key action}
+
+
{count + 1}
+ {count}
+ {count - 1}
+
+ {/key}
+
Counts so far
+
+
+
(action.operation = 'REMOVE')}
+ aria-label="Decrease the counter by one"
+ >
+
+
+
+
{count}
+
(action.operation = 'ADD')} aria-label="Increase the counter by one">
+
+
+
+
+ {#if isDarkMode}
+
+
+
diff --git a/packages/create-svelte/template/src/lib/HeaderNavigation.svelte b/packages/create-svelte/template/src/lib/HeaderNavigation.svelte
new file mode 100644
index 000000000000..4b1ab2070049
--- /dev/null
+++ b/packages/create-svelte/template/src/lib/HeaderNavigation.svelte
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/create-svelte/template/src/routes/$layout.svelte b/packages/create-svelte/template/src/routes/$layout.svelte
index 2e511e004988..d19b5858d45f 100644
--- a/packages/create-svelte/template/src/routes/$layout.svelte
+++ b/packages/create-svelte/template/src/routes/$layout.svelte
@@ -1,5 +1,49 @@
-
+
+
+
+
+
diff --git a/packages/create-svelte/template/src/routes/about.svelte b/packages/create-svelte/template/src/routes/about.svelte
new file mode 100644
index 000000000000..b80973e7bec3
--- /dev/null
+++ b/packages/create-svelte/template/src/routes/about.svelte
@@ -0,0 +1,5 @@
+
+ About
+
+
+About page
diff --git a/packages/create-svelte/template/src/routes/blog.svelte b/packages/create-svelte/template/src/routes/blog.svelte
new file mode 100644
index 000000000000..efdbae740e9c
--- /dev/null
+++ b/packages/create-svelte/template/src/routes/blog.svelte
@@ -0,0 +1,5 @@
+
+ Blog
+
+
+Blog page
diff --git a/packages/create-svelte/template/src/routes/index.svelte b/packages/create-svelte/template/src/routes/index.svelte
index b2ccc7177ca4..602b1aed8329 100644
--- a/packages/create-svelte/template/src/routes/index.svelte
+++ b/packages/create-svelte/template/src/routes/index.svelte
@@ -1,49 +1,47 @@
- Hello world!
+ Home
-
- Hello world!
+
+ To my brand new
+
+ Here’s where you’ll edit your content.src/routes/index.svelte
+
Visit svelte.dev to learn how to build Svelte apps.
-
+
diff --git a/packages/create-svelte/template/src/stores.js b/packages/create-svelte/template/src/stores.js
new file mode 100644
index 000000000000..644ccd5b84da
--- /dev/null
+++ b/packages/create-svelte/template/src/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const isDarkModeStore = writable(false);
diff --git a/packages/create-svelte/template/static/menu-background-light.svg b/packages/create-svelte/template/static/menu-background-light.svg
new file mode 100644
index 000000000000..aa85993d53d6
--- /dev/null
+++ b/packages/create-svelte/template/static/menu-background-light.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/packages/create-svelte/template/static/menu-background.svg b/packages/create-svelte/template/static/menu-background.svg
new file mode 100644
index 000000000000..a00ed389b3e4
--- /dev/null
+++ b/packages/create-svelte/template/static/menu-background.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/packages/create-svelte/template/static/moon-icon.svg b/packages/create-svelte/template/static/moon-icon.svg
new file mode 100644
index 000000000000..bef5f46ec1e9
--- /dev/null
+++ b/packages/create-svelte/template/static/moon-icon.svg
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/packages/create-svelte/template/static/sun-icon.svg b/packages/create-svelte/template/static/sun-icon.svg
new file mode 100644
index 000000000000..b9e43b794018
--- /dev/null
+++ b/packages/create-svelte/template/static/sun-icon.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/packages/create-svelte/template/static/svelte-logo.png b/packages/create-svelte/template/static/svelte-logo.png
new file mode 100644
index 000000000000..e43d769e6cc2
Binary files /dev/null and b/packages/create-svelte/template/static/svelte-logo.png differ
diff --git a/packages/create-svelte/template/static/svelte-welcome-light.png b/packages/create-svelte/template/static/svelte-welcome-light.png
new file mode 100644
index 000000000000..5545d6367a3d
Binary files /dev/null and b/packages/create-svelte/template/static/svelte-welcome-light.png differ
diff --git a/packages/create-svelte/template/static/svelte-welcome.png b/packages/create-svelte/template/static/svelte-welcome.png
new file mode 100644
index 000000000000..83d9553b0a6c
Binary files /dev/null and b/packages/create-svelte/template/static/svelte-welcome.png differ
-
-
diff --git a/examples/svelte-kit-demo/static/favicon.ico b/examples/svelte-kit-demo/static/favicon.ico
deleted file mode 100644
index d75d248ef0b1..000000000000
Binary files a/examples/svelte-kit-demo/static/favicon.ico and /dev/null differ
diff --git a/examples/svelte-kit-demo/static/logo.svg b/examples/svelte-kit-demo/static/logo.svg
deleted file mode 100644
index c051f1a34d4d..000000000000
--- a/examples/svelte-kit-demo/static/logo.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/examples/svelte-kit-demo/static/robots.txt b/examples/svelte-kit-demo/static/robots.txt
deleted file mode 100644
index e9e57dc4d41b..000000000000
--- a/examples/svelte-kit-demo/static/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/examples/svelte-kit-demo/svelte.config.cjs b/examples/svelte-kit-demo/svelte.config.cjs
deleted file mode 100644
index dba8b49e8ba9..000000000000
--- a/examples/svelte-kit-demo/svelte.config.cjs
+++ /dev/null
@@ -1,9 +0,0 @@
-const adapter = require(process.env.ADAPTER || '@sveltejs/adapter-node');
-const options = JSON.stringify(process.env.OPTIONS || '{}');
-
-module.exports = {
- kit: {
- adapter: adapter(options),
- target: '#svelte'
- }
-};
diff --git a/examples/svelte-kit-demo/wrangler.toml b/examples/svelte-kit-demo/wrangler.toml
deleted file mode 100644
index 9d503e52ed07..000000000000
--- a/examples/svelte-kit-demo/wrangler.toml
+++ /dev/null
@@ -1,10 +0,0 @@
-name = "svelte-kit-demo"
-type = "webpack"
-account_id = "f60df21486a4f0e5dbd85493882f1d53"
-workers_dev = true
-route = ""
-zone_id = ""
-
-[site]
-bucket = "./build"
-entry-point = "./workers-site"
\ No newline at end of file
diff --git a/packages/create-svelte/cli/index.js b/packages/create-svelte/cli/index.js
index f17d7e881cac..9b458f400d8a 100644
--- a/packages/create-svelte/cli/index.js
+++ b/packages/create-svelte/cli/index.js
@@ -7,8 +7,8 @@ import path from 'path';
import prompts from 'prompts/lib/index';
import glob from 'tiny-glob/sync.js';
import gitignore_contents from '../template/.gitignore';
-import add_css from './modifications/add_css';
import add_typescript from './modifications/add_typescript';
+import add_skeleton_template from './modifications/add_skeleton_template';
// import versions from './versions';
import { version } from '../package.json';
import add_prettier from './modifications/add_prettier';
@@ -76,10 +76,12 @@ async function main() {
await prompt_modifications(target);
+ console.log('\n✧ Want to add other parts to your codebase?');
+
console.log(
- '\nWant to add other parts to your code base? ' +
- 'Visit https://github.com/svelte-add/svelte-adders, a community project of commands ' +
- 'to add particular functionality to Svelte projects\n'
+ `\nVisit ${bold(
+ cyan('https://github.com/sveltejs/integrations')
+ )} and see all the add-on possibilities to your Svelte project.\n`
);
console.log('\nNext steps:');
@@ -103,25 +105,25 @@ async function main() {
* @param {string} target
*/
async function prompt_modifications(target) {
+ const template_response = 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 is_skeleton_template = template_response.value === 'skeleton';
+ await add_skeleton_template(target, is_skeleton_template);
+
const ts_response = await prompts({
type: 'confirm',
name: 'value',
message: 'Use TypeScript in components?',
initial: false
});
- await add_typescript(target, ts_response.value);
-
- const css_response = await prompts({
- type: 'select',
- name: 'value',
- message: 'What do you want to use for writing Styles in Svelte components?',
- choices: [
- { title: 'CSS', value: 'css' },
- { title: 'Less', value: 'less' },
- { title: 'SCSS', value: 'scss' }
- ]
- });
- await add_css(target, css_response.value);
+ await add_typescript(target, ts_response.value, is_skeleton_template);
const eslint_response = await prompts({
type: 'confirm',
diff --git a/packages/create-svelte/cli/modifications/add_css.js b/packages/create-svelte/cli/modifications/add_css.js
deleted file mode 100644
index 0fabe673f275..000000000000
--- a/packages/create-svelte/cli/modifications/add_css.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { bold, green } from 'kleur/colors';
-import {
- add_svelte_preprocess_to_config,
- copy_from_template_additions,
- update_component,
- update_package_json_dev_deps
-} from './utils';
-
-/**
- * Add chosen CSS language to the project.
- *
- * @param {string} cwd
- * @param {'css' | 'scss' | 'less'} which
- */
-export default async function add_css(cwd, which) {
- 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.');
- } else if (which === 'less') {
- update_package_json_dev_deps(cwd, {
- less: '^3.0.0',
- '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', [['
diff --git a/packages/create-svelte/template-additions/template-skeleton/index.svelte b/packages/create-svelte/template-additions/template-skeleton/index.svelte
new file mode 100644
index 000000000000..b4d378a0f395
--- /dev/null
+++ b/packages/create-svelte/template-additions/template-skeleton/index.svelte
@@ -0,0 +1,33 @@
+
+