feat(create-app): add 'svelte' and 'svelte-ts' options (#2537)

GrygrFlzr · web-flow · commit e441f23e187e · 2021-03-16T10:15:38.000-04:00
diff --git a/packages/create-app/README.md b/packages/create-app/README.md
@@ -43,6 +43,8 @@ Currently supported template presets include:
 - `preact-ts`
 - `lit-element`
 - `lit-element-ts`
+- `svelte`
+- `svelte-ts`
 
 ## Community Templates
 
diff --git a/packages/create-app/index.js b/packages/create-app/index.js
@@ -11,6 +11,7 @@ const {
   cyan,
   magenta,
   lightRed,
+  red,
   stripColors
 } = require('kolorist')
 
@@ -25,7 +26,9 @@ const TEMPLATES = [
   magenta('preact'),
   magenta('preact-ts'),
   lightRed('lit-element'),
-  lightRed('lit-element-ts')
+  lightRed('lit-element-ts'),
+  red('svelte'),
+  red('svelte-ts')
 ]
 
 const renameFiles = {
diff --git a/packages/create-app/template-svelte-ts/.vscode/extensions.json b/packages/create-app/template-svelte-ts/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
diff --git a/packages/create-app/template-svelte-ts/README.md b/packages/create-app/template-svelte-ts/README.md
@@ -0,0 +1,11 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
diff --git a/packages/create-app/template-svelte-ts/_gitignore b/packages/create-app/template-svelte-ts/_gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/dist/
+/.vscode/
+.DS_Store
diff --git a/packages/create-app/template-svelte-ts/globals.d.ts b/packages/create-app/template-svelte-ts/globals.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-svelte-ts/index.html b/packages/create-app/template-svelte-ts/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + TS + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/create-app/template-svelte-ts/package.json b/packages/create-app/template-svelte-ts/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "vite-svelte-ts-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@svitejs/vite-plugin-svelte": "^0.11.1",
+    "svelte": "^3.35.0",
+    "svelte-preprocess": "^4.6.9",
+    "typescript": "^4.2.3",
+    "vite": "^2.1.0"
+  }
+}
diff --git a/packages/create-app/template-svelte-ts/public/favicon.ico b/packages/create-app/template-svelte-ts/public/favicon.ico
diff --git a/packages/create-app/template-svelte-ts/src/App.svelte b/packages/create-app/template-svelte-ts/src/App.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import logo from './assets/svelte.png'
+  import Counter from './lib/Counter.svelte'
+</script>
+
+<main>
+  <img src={logo} alt="Svelte Logo" />
+  <h1>Hello Typescript!</h1>
+
+  <Counter id="0" />
+
+  <p>
+    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
+    apps.
+  </p>
+
+  <p>
+    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
+    the officially supported framework, also powered by Vite!
+  </p>
+</main>
+
+<style>
+  :root {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  img {
+    height: 16rem;
+    width: 16rem;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4rem;
+    font-weight: 100;
+    line-height: 1.1;
+    margin: 2rem auto;
+    max-width: 14rem;
+  }
+
+  p {
+    max-width: 14rem;
+    margin: 1rem auto;
+    line-height: 1.35;
+  }
+
+  @media (min-width: 480px) {
+    h1 {
+      max-width: none;
+    }
+
+    p {
+      max-width: none;
+    }
+  }
+</style>
diff --git a/packages/create-app/template-svelte-ts/src/assets/svelte.png b/packages/create-app/template-svelte-ts/src/assets/svelte.png
diff --git a/packages/create-app/template-svelte-ts/src/lib/Counter.svelte b/packages/create-app/template-svelte-ts/src/lib/Counter.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { getStore } from './hmr-stores'
+  export let id: string
+
+  const count = getStore(id, 0)
+  const increment = () => {
+    $count += 1
+  }
+</script>
+
+<button {id} on:click={increment}>
+  Clicks: {$count}
+</button>
+
+<style>
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 1em 2em;
+    color: #ff3e00;
+    background-color: rgba(255, 62, 0, 0.1);
+    border-radius: 2em;
+    border: 2px solid rgba(255, 62, 0, 0);
+    outline: none;
+    width: 200px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  button:focus {
+    border: 2px solid #ff3e00;
+  }
+
+  button:active {
+    background-color: rgba(255, 62, 0, 0.2);
+  }
+</style>
diff --git a/packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts b/packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts
@@ -0,0 +1,21 @@
+// Customized HMR-safe stores
+// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js
+import { writable } from 'svelte/store'
+import type { Writable } from 'svelte/store'
+
+let stores: Record<string, Writable<any>> = {}
+
+export function getStore<T>(id: string, initialValue: T): Writable<T> {
+  return stores[id] || (stores[id] = writable(initialValue))
+}
+
+// preserve the store across HMR updates
+if (import.meta.hot) {
+  if (import.meta.hot.data.stores) {
+    stores = import.meta.hot.data.stores
+  }
+  import.meta.hot.accept()
+  import.meta.hot.dispose(() => {
+    import.meta.hot.data.stores = stores
+  })
+}
diff --git a/packages/create-app/template-svelte-ts/src/main.ts b/packages/create-app/template-svelte-ts/src/main.ts
@@ -0,0 +1,7 @@
+import App from './App.svelte'
+
+const app = new App({
+  target: document.body
+})
+
+export default app
diff --git a/packages/create-app/template-svelte-ts/svelte.config.cjs b/packages/create-app/template-svelte-ts/svelte.config.cjs
@@ -0,0 +1,7 @@
+const sveltePreprocess = require('svelte-preprocess')
+
+module.exports = {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess()
+}
diff --git a/packages/create-app/template-svelte-ts/tsconfig.json b/packages/create-app/template-svelte-ts/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true
+  },
+  /**
+   * Use globals.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["globals.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/packages/create-app/template-svelte-ts/vite.config.js b/packages/create-app/template-svelte-ts/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import svelte from '@svitejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()]
+})
diff --git a/packages/create-app/template-svelte/.vscode/extensions.json b/packages/create-app/template-svelte/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
diff --git a/packages/create-app/template-svelte/README.md b/packages/create-app/template-svelte/README.md
@@ -0,0 +1,11 @@
+# Svelte + Vite
+
+This template should help get you started developing with Svelte in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
diff --git a/packages/create-app/template-svelte/_gitignore b/packages/create-app/template-svelte/_gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/dist/
+/.vscode/
+.DS_Store
diff --git a/packages/create-app/template-svelte/globals.d.ts b/packages/create-app/template-svelte/globals.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/create-app/template-svelte/index.html b/packages/create-app/template-svelte/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/create-app/template-svelte/jsconfig.json b/packages/create-app/template-svelte/jsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use globals.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["globals.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/packages/create-app/template-svelte/package.json b/packages/create-app/template-svelte/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "vite-svelte-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@svitejs/vite-plugin-svelte": "^0.11.1",
+    "svelte": "^3.35.0",
+    "vite": "^2.1.0"
+  }
+}
diff --git a/packages/create-app/template-svelte/public/favicon.ico b/packages/create-app/template-svelte/public/favicon.ico
diff --git a/packages/create-app/template-svelte/src/App.svelte b/packages/create-app/template-svelte/src/App.svelte
diff --git a/packages/create-app/template-svelte/src/assets/svelte.png b/packages/create-app/template-svelte/src/assets/svelte.png
diff --git a/packages/create-app/template-svelte/src/lib/Counter.svelte b/packages/create-app/template-svelte/src/lib/Counter.svelte
diff --git a/packages/create-app/template-svelte/src/lib/hmr-stores.js b/packages/create-app/template-svelte/src/lib/hmr-stores.js
diff --git a/packages/create-app/template-svelte/src/main.js b/packages/create-app/template-svelte/src/main.js
diff --git a/packages/create-app/template-svelte/vite.config.js b/packages/create-app/template-svelte/vite.config.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "recommendations": ["svelte.svelte-vscode"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+/// <reference types="svelte" />`
	`2`	`+/// <reference types="vite/client" />`