🌊 upstream: update to the way TypeScript is employed in the official Svelte template

support type checking during development and before a production build
update all the colors and styles to match the Tailwind UI color palette
remove all `@ts-ignore`s because they're no longer needed! (include a typing declaration for `@sapper`)
support TypeScript 4 (beta) easily

Author: babichjacob

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "svelte.svelte-vscode"
+    ]
+}

.vscode/settings.json

@@ -10,4 +10,5 @@
     },
     "eslint.format.enable": true,
     "eslint.lintTask.enable": true,
+    "typescript.tsdk": "node_modules/typescript/lib",
 }

index.js

@@ -1,3 +1,5 @@
+// Set up Cloud Functions for Firebase
+
 const { https: { onRequest } } = require("firebase-functions");
 
 const { createSapperAndApolloServer } = require("./__sapper__/build/server/server"); // eslint-disable-line import/no-unresolved

package-lock.json

@@ -21,63 +21,66 @@
 		"url": "https://github.com/babichjacob/sapper-firebase-typescript-graphql-tailwindcss-actions-template.git"
 	},
 	"license": "MIT",
-	"version": "2020.07.22",
+	"version": "2020.08.05",
 	"scripts": {
 		"eslint": "eslint",
 		"eslint:fix": "eslint --fix ./*.js ./src/*.ts ./src/components/**/*.svelte ./src/graphql/**/*.ts ./src/routes/**/*.svelte ./src/routes/**/*.ts",
+		"validate": "svelte-check --ignore src/node_modules/@sapper",
+		"validate:dev": "svelte-check --ignore src/node_modules/@sapper --watch",
 		"firebase": "firebase",
 		"firebase:deploy": "firebase deploy",
 		"firebase:deploy:hosting": "firebase deploy --only hosting",
 		"firebase:deploy:functions": "firebase deploy --only functions",
+		"sapper:dev": "sapper dev",
 		"sapper:build": "cross-env NODE_ENV=production sapper build --legacy",
 		"sapper:export": "cross-env NODE_ENV=production sapper export --legacy",
 		"static:rmdir": "rimraf - __sapper__/export",
 		"static:mkdir": "mkdirp __sapper__/export",
 		"static:cp": "ncp static __sapper__/export",
 		"static:404:cp": "ncp __sapper__/export/404/index.html __sapper__/export/404.html",
 		"static:404:rmdir": "rimraf - __sapper__/export/404",
-		"dev": "cross-env ROLLUP_WATCH=true sapper dev",
-		"prod": "run-s sapper:build static:rmdir static:mkdir static:cp",
+		"dev": "run-p validate:dev sapper:dev",
+		"prod": "run-s validate sapper:build static:rmdir static:mkdir static:cp",
 		"start": "node __sapper__/build",
 		"deploy": "run-s prod firebase:deploy",
-		"export": "run-s sapper:export static:404:cp static:404:rmdir",
+		"export": "run-s validate sapper:export static:404:cp static:404:rmdir",
 		"deploy:export": "run-s export firebase:deploy:hosting"
 	},
 	"dependencies": {
 		"compression": "^1.7.4",
 		"express": "^4.17.1",
 		"firebase-admin": "^9.0.0",
-		"firebase-functions": "^3.8.0",
+		"firebase-functions": "^3.9.0",
 		"firebase-tools": "^8.6.0",
 		"node-fetch": "^2.6.0",
-		"sirv": "^1.0.1"
+		"sirv": "^1.0.5"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.10.5",
+		"@babel/core": "^7.11.1",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/plugin-transform-runtime": "^7.10.5",
-		"@babel/preset-env": "^7.10.4",
-		"@babel/runtime": "^7.10.5",
+		"@babel/plugin-transform-runtime": "^7.11.0",
+		"@babel/preset-env": "^7.11.0",
+		"@babel/runtime": "^7.11.1",
 		"@fullhuman/postcss-purgecss": "^2.3.0",
 		"@rollup/plugin-babel": "^5.1.0",
 		"@rollup/plugin-commonjs": "^14.0.0",
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^8.4.0",
 		"@rollup/plugin-replace": "^2.3.3",
-		"@rollup/plugin-typescript": ">=5.0.2",
+		"@rollup/plugin-typescript": "^5.0.2",
 		"@tailwindcss/custom-forms": "^0.2.1",
-		"@tailwindcss/ui": "^0.4.0",
+		"@tailwindcss/ui": "^0.5.0",
 		"@types/compression": "^1.7.0",
 		"@types/express": "^4.17.7",
 		"@types/node-fetch": "^2.5.7",
-		"@typescript-eslint/eslint-plugin": "^3.7.0",
-		"@typescript-eslint/parser": "^3.7.0",
-		"apollo-server-express": "^2.16.0",
+		"@typescript-eslint/eslint-plugin": "^3.8.0",
+		"@typescript-eslint/parser": "^3.8.0",
+		"apollo-server-express": "^2.16.1",
 		"bufferutil": "^4.0.1",
 		"class-validator": "^0.12.2",
 		"cross-env": "^7.0.2",
 		"cssnano": "^4.1.10",
-		"eslint": "^7.5.0",
+		"eslint": "^7.6.0",
 		"eslint-config-airbnb-base": "^14.2.0",
 		"eslint-plugin-import": "^2.22.0",
 		"eslint-plugin-svelte3": "^2.7.3",
@@ -91,13 +94,14 @@
 		"postcss-preset-env": "^6.7.0",
 		"reflect-metadata": "^0.1.13",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.22.2",
+		"rollup": "^2.23.0",
 		"rollup-plugin-svelte": "^5.2.3",
 		"rollup-plugin-terser": "^6.1.0",
 		"sapper": "^0.27.16",
 		"svelte": "^3.24.0",
-		"svelte-preprocess": "^4.0.8",
-		"tailwindcss": "^1.5.2",
+		"svelte-check": "^1.0.6",
+		"svelte-preprocess": "^4.0.10",
+		"tailwindcss": "^1.6.2",
 		"tslib": "^2.0.0",
 		"type-graphql": "^1.0.0-rc.3",
 		"typescript": "^3.9.7",

package.json

@@ -7,11 +7,12 @@ import svelte from "rollup-plugin-svelte";
 import babel from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
 import config from "sapper/config/rollup";
+import sveltePreprocess from "svelte-preprocess";
 import pkg from "./package.json";
-import { preprocess as sveltePreprocessConfig } from "./svelte.config";
+import postcss from "./postcss.config";
 
 const preprocess = [
-	sveltePreprocessConfig,
+	sveltePreprocess({ postcss }),
 	// You could have more preprocessors, like MDsveX
 ];
 
@@ -30,7 +31,7 @@ const onwarn = (warning, _onwarn) => (warning.code === "CIRCULAR_DEPENDENCY" &&
 export default {
 	client: {
 		input: config.client.input().replace(/\.js$/, ".ts"),
-		output: { ...config.client.output(), sourcemap },
+		output: config.client.output(),
 		plugins: [
 			replace({
 				"process.browser": true,
@@ -47,7 +48,7 @@ export default {
 				dedupe: ["svelte"],
 			}),
 			commonjs(),
-			typescript(),
+			typescript({ sourceMap: !!sourcemap }),
 			json(),
 
 			legacy && babel({
@@ -94,7 +95,7 @@ export default {
 				dedupe: ["svelte"],
 			}),
 			commonjs(),
-			typescript(),
+			typescript({ sourceMap: !!sourcemap }),
 			json(),
 		],
 		external: Object.keys(pkg.dependencies).concat(
@@ -115,7 +116,7 @@ export default {
 				"process.env.NODE_ENV": JSON.stringify(mode),
 			}),
 			commonjs(),
-			typescript(),
+			typescript({ sourceMap: !!sourcemap }),
 			!dev && terser(),
 		],
 

rollup.config.js

@@ -1,4 +1,3 @@
-// @ts-ignore -- generated package
 import * as sapper from "@sapper/app"; // eslint-disable-line import/no-unresolved
 
 sapper.start({

src/client.ts

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
 	export let title: string;
 	export let paragraph: string;
 </script>

src/components/ExampleComponent.svelte

@@ -1,7 +1,6 @@
-<!-- https://firebase.google.com/docs/hosting/full-config#404 -->
-
-<script lang="typescript">
+<script lang="ts">
 	import ErrorPage from "./_error.svelte";
 </script>
 
-<ErrorPage status={404} error={{ message: "Not found" }} />
+<!-- https://firebase.google.com/docs/hosting/full-config#404 -->
+<ErrorPage status={404} error={{ name: "Error", message: 'Not found' }} />

src/routes/404.svelte

@@ -1,16 +1,16 @@
-<script lang="typescript">
-	export let status: number;
-	export let error: Error;
+<script lang="ts">
+  export let status: number;
+  export let error: Error;
 
-	const mode = process.env.NODE_ENV;
-	const dev = mode === "development";
+  const mode = process.env.NODE_ENV;
+  const dev = mode === "development";
 </script>
 
 <section class="flex flex-1 flex-col items-center justify-center">
-	<h1 class="text-red-700 text-2xl">{error.message}</h1>
-	<h2 class="mt-1 text-red-700 text-lg">{status}</h2>
+  <h1 class="text-red-700 text-2xl">{error.message}</h1>
+  <h2 class="mt-1 text-red-700 text-lg">{status}</h2>
 </section>
 
 {#if dev && error.stack}
-	<pre>{error.stack}</pre>
+  <pre>{error.stack}</pre>
 {/if}

src/routes/_error.svelte

@@ -1,4 +1,4 @@
-<script lang="typescript">
+<script lang="ts">
 	import { stores } from "@sapper/app";
 
 	// You may not want to use `segment`, but it is passed for the time being and will

src/routes/_layout.svelte

@@ -1,4 +1,4 @@
-import { Request as ExpressRequest, Response as ExpressResponse } from "express";
+import type { Request as ExpressRequest, Response as ExpressResponse } from "express";
 
 export const get = async (req: ExpressRequest, res: ExpressResponse): Promise<void> => {
 	res.end("you made a get request");

src/routes/example.ts

@@ -1,23 +1,25 @@
-<script lang="typescript">
-	import ExampleComponent from "../components/ExampleComponent.svelte";
+<script lang="ts">
+  import ExampleComponent from "../components/ExampleComponent.svelte";
 </script>
 
 <style lang="postcss">
-	.centerer {
-		@apply flex-1 flex flex-col items-center justify-center;
-	}
+  .centerer {
+    @apply flex-1 flex flex-col items-center justify-center;
+  }
 </style>
 
-<div class:centerer={true}> <!-- Here's how you could extract conditional class groups with @apply -->
-	<ExampleComponent
-		title="🌐 Opinionated Sapper project base"
-		paragraph="This is an example route and component to make sure everything's working." />
+<div class:centerer={true}>
+  <!-- Here's how you could extract conditional class groups with @apply -->
+  <ExampleComponent
+    title="🌐 Opinionated Sapper project base"
+    paragraph="This is an example route and component to make sure everything's
+    working." />
 
-	<a
-		class="mt-10 p-3 rounded-lg shadow-md text-pink-800 bg-pink-200
-		transition duration-200 ease-in-out hover:bg-pink-300 focus:bg-pink-300
-		focus:outline-none focus:shadow-outline"
-		href="/graphql">
-		Check out the GraphQL playground!
-	</a>
+  <a
+    class="mt-10 p-3 rounded-lg shadow-md text-pink-800 bg-pink-200 transition
+    duration-200 ease-in-out hover:bg-pink-300 focus:bg-pink-300
+    focus:outline-none focus:shadow-outline"
+    href="/graphql">
+    Check out the GraphQL playground!
+  </a>
 </div>

src/routes/index.svelte

@@ -1,14 +1,12 @@
-// @ts-ignore -- generated package
 import * as sapper from "@sapper/server"; // eslint-disable-line import/no-unresolved
 import compression from "compression";
 import express, { Express } from "express";
 import sirv from "sirv";
 import { createApolloServer } from "./graphql";
 
 const PORT = process.env.PORT; // eslint-disable-line prefer-destructuring
-// @ts-ignore -- creates a warning after `rollup-plugin-replace` (set up in `rollup.config.js`)
-// replaces `process.env.NODE_ENV` with `"production"` during `prod`
-const dev = process.env.NODE_ENV === "development";
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
 
 const main = require.main === module || require.main?.filename.match(/__sapper__\/build\/index.js$/);
 

src/server.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-restricted-globals,@typescript-eslint/no-explicit-any */
-// @ts-ignore -- generated package
 import { timestamp, files, shell } from "@sapper/service-worker";
 
 const ASSETS = `cache${timestamp}`;

src/service-worker.ts

@@ -2,22 +2,33 @@
 	"compilerOptions": {
 		"lib": [
 			"DOM",
-			"ES2016",
+			"ES2017",
 			"WebWorker"
 		],
-		"target": "ES2016",
+		"target": "es2017",
 		"allowSyntheticDefaultImports": true,
-		"experimentalDecorators": true,
 		"emitDecoratorMetadata": true,
+		"experimentalDecorators": true,
+		"importsNotUsedAsValues": "error",
+		"isolatedModules": true,
 		"moduleResolution": "node",
-		"skipLibCheck": true,
-		"strict": true
+		"sourceMap": true,
+		"strict": true,
+		"types": [
+			"svelte",
+			"@sapper"
+		],
+		"typeRoots": [
+			"types"
+		],
 	},
 	"include": [
 		"src/**/*",
 		"src/node_modules/**/*"
 	],
 	"exclude": [
-		"node_modules"
-	]
+		"node_modules/*",
+		"__sapper__/*",
+		"static/*"
+	],
 }

static/screenshot-1.png

@@ -0,0 +1,45 @@
+// Source: https://github.com/sveltejs/sapper/issues/760#issuecomment-504230103
+declare module "@sapper/app"
+declare module "@sapper/server"
+declare module "@sapper/service-worker"
+
+declare module "@sapper/app" {
+	interface Redirect {
+		statusCode: number
+		location: string
+	}
+
+	function goto(href: string, opts: { replaceState: boolean }): Promise<unknown>
+	function prefetch(href: string): Promise<{ redirect?: Redirect; data?: unknown }>
+	function prefetchRoutes(pathnames: string[]): Promise<unknown>
+	function start(opts: { target: Node }): Promise<unknown>
+	const stores: () => unknown;
+
+	export {
+		goto, prefetch, prefetchRoutes, start, stores,
+	};
+}
+
+declare module "@sapper/server" {
+	import { RequestHandler } from "express";
+
+	interface MiddlewareOptions {
+		session?: (req: Express.Request, res: Express.Response) => unknown
+		ignore?: unknown
+	}
+
+	function middleware(opts: MiddlewareOptions): RequestHandler
+
+	export { middleware };
+}
+
+declare module "@sapper/service-worker" {
+	const timestamp: number;
+	const files: string[];
+	const shell: string[];
+	const routes: { pattern: RegExp }[];
+
+	export {
+		timestamp, files, files as assets, shell, routes,
+	};
+}