Svelte kit transition

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2019
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -5,6 +5,10 @@ yarn-error.log
 /cypress/screenshots/
 /__sapper__/
 
+/.svelte
+/build
+/functions
+
 #amplify
 amplify/\#current-cloud-backend
 amplify/.config/local-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+.svelte/**
+static/**
+build/**
+node_modules/**

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

package.json

@@ -2,56 +2,45 @@
   "name": "michalvankodev",
   "description": "My personal website with blog",
   "version": "0.0.1",
+  "type": "module",
   "scripts": {
-    "dev": "sapper dev",
-    "prebuild": "node src/",
-    "build": "sapper build --legacy",
-    "export": "sapper export",
-    "start": "node __sapper__/build",
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build --verbose",
+    "export": "svelte-kit build",
+    "preview": "svelte-kit preview",
+    "start": "svelte-kit start",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
-    "test": "run-p --race dev cy:run"
+    "test": "run-p --race dev cy:run",
+    "lint": "prettier --check . && eslint --ignore-path .gitignore .",
+    "format": "prettier --write ."
   },
   "dependencies": {
-    "@rollup/plugin-typescript": "^8.0.0",
-    "@types/node": "^14.14.10",
-    "classnames": "^2.2.6",
-    "compression": "^1.7.4",
-    "date-fns": "^2.16.1",
-    "feed": "^4.2.1",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.21.1",
+    "feed": "^4.2.2",
     "front-matter": "^4.0.2",
-    "marked": "^1.2.5",
-    "polka": "^0.5.2",
-    "ramda": "^0.27.1",
-    "sirv": "^1.0.7"
+    "marked": "^2.0.3",
+    "ramda": "^0.27.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/runtime": "^7.12.5",
-    "@rollup/plugin-typescript": "^8.0.0",
+    "@sveltejs/adapter-static": "^1.0.0-next.4",
+    "@sveltejs/kit": "^1.0.0-next.85",
     "@tsconfig/svelte": "^1.0.10",
-    "@types/classnames": "^2.2.11",
-    "@types/ramda": "^0.27.32",
-    "autoprefixer": "^10.0.4",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.1.10",
-    "rollup": "^2.34.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-svg": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "sapper": "^0.28.10",
-    "svelte": "^3.30.1",
-    "svelte-check": "^1.1.17",
-    "svelte-preprocess": "^4.6.1",
-    "ts-node": "^9.1.1",
-    "tslib": "^2.0.3",
-    "typescript": "^4.1.2"
+    "@types/classnames": "^2.3.1",
+    "@types/node": "^14.14.41",
+    "@types/ramda": "^0.27.40",
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-svelte3": "^3.1.0",
+    "prettier": "~2.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
+    "svelte": "^3.37.0",
+    "svelte-preprocess": "^4.7.2",
+    "tslib": "^2.2.0",
+    "typescript": "^4.2.4",
+    "vite": "^2.2.1"
   }
 }

prettier.config.js

@@ -1,7 +0,0 @@
-// prettier.config.js or .prettierrc.js
-module.exports = {
-  trailingComma: 'es5',
-  tabWidth: 2,
-  semi: false,
-  singleQuote: true,
-}

src/app.html

@@ -11,35 +11,20 @@
     <link rel="alternate" type="application/rss+xml" title="RSS feed for latest posts" href="https://michalvanko.dev/feed.xml" />
     <link rel="alternate" title="JSON feed for latest posts" type="application/json" href="https://michalvanko.dev/feed.json" />
 
-    %sapper.base%
-
-    <link rel="stylesheet" href="global.css" />
-    <link rel="stylesheet" href="print.css" media="print" />
-    <link rel="stylesheet" href="fonts.css" />
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/print.css" media="print" />
+    <link rel="stylesheet" href="/fonts.css" />
     <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i&display=swap&subset=latin-ext" rel="stylesheet">  -->
-    <link rel="manifest" href="manifest.json" />
-
-    <link rel="icon" type="image/svg+xml" href="m-svgfavicon-192x192.svg" />
-    <link rel="icon" type="image/png" href="m-svgfavicon-192x192.png" />
-
-    <!-- Sapper generates a <style> tag containing critical CSS
-	     for the current page. CSS for the rest of the app is
-	     lazily loaded when it precaches secondary pages -->
-    %sapper.styles%
+    <link rel="manifest" href="/manifest.json" />
 
+    <link rel="icon" type="image/svg+xml" href="/m-svgfavicon-192x192.svg" />
+    <link rel="icon" type="image/png" href="/m-svgfavicon-192x192.png" />
     <!-- This contains the contents of the <svelte:head> component, if
 	     the current page has one -->
-    %sapper.head%
+    %svelte.head%
 
-    <!-- Sapper creates a <script> tag containing `app/client.js`
-	     and anything else it needs to hydrate the app and
-	     initialise the router -->
-    %sapper.scripts%
   </head>
   <body>
-    <!-- The application will be rendered inside this element,
-	     because `app/client.js` references it -->
-    <div id="sapper">%sapper.html%</div>
-
+    %svelte.body%
   </body>
 </html>

src/client.ts

@@ -1,5 +0,0 @@
-import * as sapper from '@sapper/app';
-
-sapper.start({
-	target: document.querySelector('#sapper')
-});

src/components/Nav.svelte

@@ -60,7 +60,7 @@
   <section class="nav-main">
     <ul>
       <li>
-        <a class={classNames({ selected: segment === undefined })} href=".">
+        <a class={classNames({ selected: segment === undefined })} href="/">
           Introduction
         </a>
       </li>

src/components/blog/article-footer.svelte

@@ -43,7 +43,7 @@
       <ul class="tags-list">
         {#each post.tags as tag}
           <li>
-            <a href="blog?tag={tag}">{tag}</a>
+            <a href="/blog?tag={tag}">{tag}</a>
           </li>
         {/each}
       </ul>

src/global.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

src/routes/$layout.svelte

@@ -1,11 +1,11 @@
 <script context="module" lang="typescript">
   import { take } from 'ramda'
 
-  export function preload({ params, query }) {
-    return this.fetch(`blog.json`)
+  export function load({ fetch }) {
+    return fetch(`/blog.json`)
       .then((r) => r.json())
       .then((posts) => {
-        return { latestPosts: take(5, posts) }
+        return { props: { latestPosts: take(5, posts) }}
       })
   }
 </script>

src/routes/_error.svelte

@@ -1,41 +0,0 @@
-<script lang="typescript">
-  export let status
-  export let error
-
-  const dev = process.env.NODE_ENV === 'development'
-</script>
-
-<style>
-  h1,
-  p {
-    margin: 0 auto;
-  }
-
-  h1 {
-    font-size: 2.8em;
-    font-weight: 700;
-    margin: 0 0 0.5em 0;
-  }
-
-  p {
-    margin: 1em auto;
-  }
-
-  @media (min-width: 480px) {
-    h1 {
-      font-size: 4em;
-    }
-  }
-</style>
-
-<svelte:head>
-  <title>{status}</title>
-</svelte:head>
-
-<h1>{status}</h1>
-
-<p>{error.message}</p>
-
-{#if dev && error.stack}
-  <pre>{error.stack}</pre>
-{/if}

src/routes/blog/[slug].json.ts

@@ -8,23 +8,25 @@ export interface SinglePost {
   body: string
 }
 
-export async function get(req, res, next) {
+export async function get({ params }) {
   // the `slug` parameter is available because
   // this file is called [slug].json.js
-  const { slug } = req.params
+  const { slug } = params
 
   let postSource: string
   try {
     postSource = await promisify(readFile)(`_posts/blog/${slug}.md`, 'utf-8')
   } catch (e) {
     if (e.code === 'ENOENT') {
-      res.statusCode = 404
-      res.end('Post not found \n' + e.toString())
-      return
+      return {
+        status: 404,
+        body: 'Post not found \n' + e.toString(),
+      }
+    }
+    return {
+      status: 500,
+      body: 'Error loading post source file. \n' + e.toString(),
     }
-    res.statusCode = 500
-    res.end('Error loading post source file. \n' + e.toString())
-    return
   }
 
   const parsedPost = fm<PostAttributes>(postSource)
@@ -34,6 +36,7 @@ export async function get(req, res, next) {
     body: parsedPost.body,
   })
 
-  res.setHeader('Content-Type', 'application/json')
-  res.end(JSON.stringify(response))
+  return {
+    body: response,
+  }
 }

src/routes/blog/[slug].svelte

@@ -1,25 +1,37 @@
-<script context="module">
-  export async function preload({ params, query }) {
-    const res = await this.fetch(`blog/${params.slug}.json`)
+<script context="module" lang="typescript">
+  /**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+  export async function load({ fetch, page: { params }}) {
+    try {
+      const res = await fetch(`${params.slug}.json`)
       const data = await res.json()
   
-    if (res.status === 200) {
-      return { post: data }
-    } else {
-      this.error(res.status, data.message)
+      if (res.ok) {
+        return { props: { post: data }}
+      } 
+      return {
+        status: res.status,
+        error: new Error(`Could not load ${params.slug} post`)
+      }
+    } catch(e) {
+      return {
+        status: 500,
+        error: e
+      }
     }
   }
 </script>
 
-<script>
+<script lang="typescript">
   import { onMount } from 'svelte'
   import ArticleFooter from '../../components/blog/article-footer.svelte'
-  import Prism from '../../../static/prism.js'
+  // import Prism from '../../../static/prism.js'
 
   export let post
 
   onMount(() => {
-    Prism.highlightAll()
+    // Prism.highlightAll()
   })
 </script>
 
@@ -44,7 +56,6 @@
 		so we have to use the :global(...) modifier to target
 		all elements inside .content
 	*/
-
   .content :global(pre) {
     background-color: #f9f9f9;
     box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);

src/routes/blog/index.json.ts

@@ -1,10 +1,10 @@
 import { getBlogListing } from './_content'
 
-export async function get(req, res) {
-  const { tag } = req.query
+export async function get({ query }) {
+  const { tag } = query
   const filteredContents = await getBlogListing(tag)
-  res.writeHead(200, {
-    'Content-Type': 'application/json',
-  })
-  res.end(JSON.stringify(filteredContents))
+  return {
+    status: 200,
+    body: filteredContents,
+  }
 }

src/routes/blog/index.svelte

@@ -1,15 +1,18 @@
 <script context="module" lang="typescript">
-  export function preload({ params, query }) {
+  /**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+  export function load({ fetch, page: { params, query }}) {
     const blogQuery = query
       ? '?' +
         Object.entries(query)
           .map(q => q.join('='))
           .join('&')
       : ''
-    return this.fetch(`blog.json${blogQuery}`)
+    return fetch(`blog.json${blogQuery}`)
       .then(r => r.json())
       .then(posts => {
-        return { posts, query }
+        return {props: { posts, query }}
       })
   }
 </script>

src/routes/feed/index.json.ts

@@ -1,10 +1,10 @@
 import { getFeed } from './_feed'
 
-export async function get(req, res) {
+export async function get() {
   const feed = await getFeed()
 
-  res.writeHead(200, {
-    'Content-Type': 'application/json',
-  })
-  res.end(feed.json1())
+  return {
+    status: 200,
+    body: feed.json1(),
+  }
 }

src/routes/feed/index.xml.ts

@@ -3,8 +3,11 @@ import { getFeed } from './_feed'
 export async function get(req, res) {
   const feed = await getFeed()
 
-  res.writeHead(200, {
+  return {
+    status: 200,
+    headers: {
       'Content-Type': 'application/xml',
-  })
-  res.end(feed.rss2())
+    },
+    body: feed.rss2(),
+  }
 }

src/routes/index.svelte

@@ -1,9 +1,3 @@
-<script context="module">
-  // export async function preload() {
-  //   return this.redirect(302, 'portfolio')
-  // }
-</script>
-
 <svelte:head>
   <title>Introduction @michalvankodev</title>
 </svelte:head>

src/routes/portfolio/index.json.ts

@@ -22,14 +22,15 @@ export interface PortfolioAttributes {
   education: RecordAttributes[]
 }
 
-export async function get(req, res, next) {
+export async function get() {
   let pageSource: string
   try {
     pageSource = await promisify(readFile)('_pages/portfolio.md', 'utf-8')
   } catch (e) {
-    res.statusCode = 500
-    res.end('Error loading portfolio source file. \n' + e.toString())
-    return
+    return {
+      status: 500,
+      body: 'Error loading portfolio source file. \n' + e.toString(),
+    }
   }
 
   const parsed = fm<PortfolioAttributes>(pageSource)
@@ -52,6 +53,8 @@ export async function get(req, res, next) {
     education,
   }
 
-  res.setHeader('Content-Type', 'application/json')
-  res.end(JSON.stringify(response))
+  return {
+    status: 200,
+    body: response,
+  }
 }

src/routes/portfolio/index.svelte

@@ -1,11 +1,16 @@
 <script context="module">
-  export async function preload() {
-    const res = await this.fetch('portfolio.json')
+  /**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+  export async function load({ fetch }) {
+    const res = await fetch('portfolio.json')
     const content = await res.json()
     return {
+      props: {
         content,
       }
     }
+  }
 </script>
 
 <script>

src/server.ts

@@ -1,17 +0,0 @@
-import sirv from 'sirv'
-import polka from 'polka'
-import compression from 'compression'
-import * as sapper from '@sapper/server'
-
-const { PORT, NODE_ENV } = process.env
-const dev = NODE_ENV === 'development'
-
-polka() // You can also use Express
-  .use(
-    compression({ threshold: 0 }),
-    sirv('static', { dev }),
-    sapper.middleware()
-  )
-  .listen(PORT, (err) => {
-    if (err) console.log('error', err)
-  })

src/service-worker.js

@@ -1,10 +1,10 @@
-import { timestamp, files, shell } from '@sapper/service-worker'
+import { timestamp, files, build } from '$service-worker'
 
 const ASSETS = `cache${timestamp}`
 
 // `shell` is an array of all the files generated by the bundler,
 // `files` is an array of everything in the `static` directory
-const to_cache = shell.concat(files)
+const to_cache = build.concat(files)
 const staticAssets = new Set(to_cache)
 
 self.addEventListener('install', (event) => {

svelte.config.cjs

@@ -0,0 +1,18 @@
+const adapterStatic = require('@sveltejs/adapter-static')
+const sveltePreprocess = require('svelte-preprocess')
+
+const mode = process.env.NODE_ENV
+const dev = mode === 'development'
+
+/** @type {import('@sveltejs/kit').Config} */
+module.exports = {
+  kit: {
+    adapter: adapterStatic(),
+  },
+  preprocess: sveltePreprocess({
+    sourceMap: dev,
+    defaults: {
+      script: 'typescript',
+    },
+  }),
+}

tsconfig.json

@@ -1,10 +1,30 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "include": ["src/**/*", "src/node_modules"],
-  "exclude": ["node_modules/*", "__sapper__/*", "static/*"],
 	"compilerOptions": {
-    "types": ["svelte", "node", "@sapper"],
-    "typeRoots": ["typings"],
-    "target": "ES2017"
+		"moduleResolution": "node",
+		"module": "es2020",
+		"lib": ["es2020"],
+		"target": "es2019",
+		/**
+			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,
+		"resolveJsonModule": 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": ".",
+		"allowJs": true,
+		"checkJs": true,
+		"paths": {
+			"$lib/*": ["src/lib/*"]
 		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
 }

typings/@sapper/index.d.ts

@@ -1,41 +0,0 @@
-declare module '@sapper/app' {
-  interface Redirect {
-    statusCode: number
-    location: string
-  }
-
-  function goto(
-    href: string,
-    opts: { replaceState: boolean; noscroll: 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 }
-}