Revert "Convert site to SvelteKit"

This reverts commit 7131628.

packages/site/.gitignore

@@ -1,4 +1,6 @@
 .DS_Store
-/node_modules
+node_modules
+yarn-error.log
 /cypress/screenshots/
-/.svelte-kit
+/__sapper__/
+dist

packages/site/package.json

@@ -4,18 +4,22 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
+		"dev": "sapper dev --ext '.svelte .svx'",
+		"build:site": "sapper build --legacy --ext '.svelte .svx'",
+		"export": "sapper export --legacy --ext '.svelte .svx'",
+		"start": "node __sapper__/build",
 		"cy:run": "cypress run",
 		"cy:open": "cypress open",
 		"test": "run-p --race dev cy:run",
 		"generate-workers": "rollup -c rollup.workers.js"
 	},
 	"private": "true",
 	"dependencies": {
+		"compression": "^1.7.1",
 		"mdsvex": "^0.7.1-beta.3",
+		"polka": "^0.5.0",
 		"refractor": "^2.10.0",
+		"sirv": "^0.4.0",
 		"yootils": "^0.0.15"
 	},
 	"devDependencies": {
@@ -29,22 +33,20 @@
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^13.0.5",
 		"@rollup/plugin-replace": "^3.0.0",
-		"@sveltejs/kit": "next",
-		"@sveltejs/adapter-auto": "next",
 		"codemirror": "^5.49.2",
 		"npm-run-all": "^4.1.5",
-		"prism-svelte": "^0.5.0",
+		"prism-svelte": "^0.4.4",
 		"rehype-autolink-headings": "^2.0.5",
 		"rehype-slug": "^2.0.3",
 		"remark-syntax-highlight": "^0.1.3",
 		"rollup": "^2.58.0",
 		"rollup-plugin-svelte": "^7.1.0",
 		"rollup-plugin-terser": "^7.0.2",
-		"svelte": "^3.49.0",
+		"sapper": "^0.29.3",
+		"svelte": "^3.7.1",
 		"svelte-json-tree": "^0.0.7",
 		"typeface-catamaran": "^0.0.72",
 		"typeface-roboto": "^0.0.75",
-		"unist-util-visit": "^2.0.1",
-		"vite": "^3.0.4"
+		"unist-util-visit": "^2.0.1"
 	}
 }

packages/site/rollup.config.js

@@ -0,0 +1,150 @@
+import 'prismjs';
+import "prism-svelte";
+import "./prism/svx.js";
+
+
+
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import commonjs from "@rollup/plugin-commonjs";
+import svelte from "rollup-plugin-svelte";
+import babel from "@rollup/plugin-babel";
+import { terser } from "rollup-plugin-terser";
+import config from "sapper/config/rollup.js";
+import pkg from "./package.json";
+
+import slug from "rehype-slug";
+import link from "rehype-autolink-headings";
+
+import { highlight, highlighter } from "./prism/prism.js";
+
+import { extname } from "path";
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+const legacy = !!process.env.SAPPER_LEGACY_BUILD;
+
+import { mdsvex } from "mdsvex";
+
+function mdsvex_transform() {
+	return {
+		async transform(code, id) {
+			if (extname(id) !== ".svtext") return;
+
+			const c = (
+				await mdsvex({
+					highlight: {
+						alias: {
+							ts: "typescript",
+							mdx: "markdown",
+							svelte: "svelte",
+							svx: "svx",
+							mdsvex: "svx",
+							sig: "ts",
+						}
+					},
+					extension: '.svtext',
+					rehypePlugins: [slug, link]
+				}).markup({ content: code, filename: id })
+			).code;
+			return `export default \`${c.replace(/`/g, "\\`").trim()}\`;`;
+		}
+	};
+}
+
+export default {
+	client: {
+		input: config.client.input(),
+		output: config.client.output(),
+		globals: {
+			global: "window"
+		},
+		plugins: [
+			replace({
+				"process.browser": true,
+				"process.env.NODE_ENV": JSON.stringify(mode)
+			}),
+			mdsvex_transform(),
+			svelte({
+				extensions: [".svelte", ".svx"],
+				compilerOptions: {
+					dev,
+					hydratable: true					
+				},
+				emitCss: true,
+				preprocess: mdsvex({ extension: '.svx' })
+			}),
+			resolve({ preferBuiltins: false, browser: true }),
+			commonjs(),
+
+			legacy &&
+				babel({
+					extensions: [".js", ".mjs", ".html", ".svelte"],
+					babelHelpers: "runtime",
+					exclude: ["node_modules/@babel/**"],
+					presets: [
+						[
+							"@babel/preset-env",
+							{
+								targets: "> 0.25%, not dead"
+							}
+						]
+					],
+					plugins: [
+						"@babel/plugin-syntax-dynamic-import",
+						[
+							"@babel/plugin-transform-runtime",
+							{
+								useESModules: true
+							}
+						]
+					]
+				}),
+
+			!dev &&
+				terser({
+					module: true
+				})
+		]
+	},
+
+	server: {
+		input: config.server.input(),
+		output: config.server.output(),
+		plugins: [
+			replace({
+				"process.browser": false,
+				"process.env.NODE_ENV": JSON.stringify(mode)
+			}),
+			mdsvex_transform(),
+			svelte({
+				extensions: [".svelte", ".svx"],
+				compilerOptions: {
+					generate: "ssr",
+					dev					
+				},
+				preprocess: mdsvex({ extension: '.svx' })
+			}),
+			resolve({ browser: true }),
+			commonjs()
+		],
+		external: Object.keys(pkg.dependencies).concat(
+			require("module").builtinModules ||
+				Object.keys(process.binding("natives"))
+		)
+	},
+
+	serviceworker: {
+		input: config.serviceworker.input(),
+		output: config.serviceworker.output(),
+		plugins: [
+			resolve(),
+			replace({
+				"process.browser": true,
+				"process.env.NODE_ENV": JSON.stringify(mode)
+			}),
+			commonjs(),
+			!dev && terser()
+		]
+	}
+};

packages/site/src/client.js

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

packages/site/src/components/Nav.svelte

@@ -1,7 +1,9 @@
 <script>
-  import { page } from "$app/stores";
+  import { stores } from "@sapper/app";
   import GithubIcon from "./GithubIcon.svelte";
 
+  const { page } = stores();
+
   let w;
   const links = [
     ["/", "mdsvex"],

packages/site/src/components/Repl/Input/ComponentSelector.svelte

@@ -4,7 +4,7 @@
   export let handle_select;
   export let funky;
 
-  let { components, selected, request_focus, rebundle } = getContext("REPL");
+  const { components, selected, request_focus, rebundle } = getContext("REPL");
 
   let editing = null;
 

packages/site/src/routes/__error.svelte → packages/site/src/routes/_error.svelte

@@ -1,8 +1,8 @@
 <script>
-	import { dev } from '$app/env';
-
 	export let status;
 	export let error;
+
+	const dev = process.env.NODE_ENV === 'development';
 </script>
 
 <style>
@@ -33,11 +33,7 @@
 
 <h1>{status}</h1>
 
-{#if error.message}
-	<p class="error">{status}: {error.message}</p>
-{:else}
-	<p class="error">Encountered a {status} error</p>
-{/if}
+<p>{error.message}</p>
 
 {#if dev && error.stack}
 	<pre>{error.stack}</pre>

packages/site/src/routes/docs.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { page } from '$app/stores';
+	import { stores } from '@sapper/app';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import docs from './_docs.svtext';
@@ -11,6 +11,8 @@
 	let current;
 	let position = '';
 
+	const { page } = stores();
+
 	const nav = [
 		['Install', 'docs#install-it'],
 		[

packages/site/src/server.js

@@ -0,0 +1,17 @@
+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);
+	});

packages/site/src/service-worker.js

@@ -0,0 +1,82 @@
+// import { timestamp, files, shell, routes } from '@sapper/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 cached = new Set(to_cache);
+
+// self.addEventListener('install', event => {
+// 	event.waitUntil(
+// 		caches
+// 			.open(ASSETS)
+// 			.then(cache => cache.addAll(to_cache))
+// 			.then(() => {
+// 				self.skipWaiting();
+// 			})
+// 	);
+// });
+
+// self.addEventListener('activate', event => {
+// 	event.waitUntil(
+// 		caches.keys().then(async keys => {
+// 			// delete old caches
+// 			for (const key of keys) {
+// 				if (key !== ASSETS) await caches.delete(key);
+// 			}
+
+// 			self.clients.claim();
+// 		})
+// 	);
+// });
+
+// self.addEventListener('fetch', event => {
+// 	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
+
+// 	const url = new URL(event.request.url);
+
+// 	// don't try to handle e.g. data: URIs
+// 	if (!url.protocol.startsWith('http')) return;
+
+// 	// ignore dev server requests
+// 	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+
+// 	// always serve static files and bundler-generated assets from cache
+// 	if (url.host === self.location.host && cached.has(url.pathname)) {
+// 		event.respondWith(caches.match(event.request));
+// 		return;
+// 	}
+
+// 	// for pages, you might want to serve a shell `service-worker-index.html` file,
+// 	// which Sapper has generated for you. It's not right for every
+// 	// app, but if it's right for yours then uncomment this section
+// 	/*
+// 	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+// 		event.respondWith(caches.match('/service-worker-index.html'));
+// 		return;
+// 	}
+// 	*/
+
+// 	if (event.request.cache === 'only-if-cached') return;
+
+// 	// for everything else, try the network first, falling back to
+// 	// cache if the user is offline. (If the pages never change, you
+// 	// might prefer a cache-first approach to a network-first one.)
+// 	event.respondWith(
+// 		caches
+// 			.open(`offline${timestamp}`)
+// 			.then(async cache => {
+// 				try {
+// 					const response = await fetch(event.request);
+// 					cache.put(event.request, response.clone());
+// 					return response;
+// 				} catch(err) {
+// 					const response = await cache.match(event.request);
+// 					if (response) return response;
+
+// 					throw err;
+// 				}
+// 			})
+// 	);
+// });