Revert "Convert site to SvelteKit"

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": {
-		"mdsvex": "^0.11.0",
+		"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": "^1.26.0",
-		"@sveltejs/adapter-auto": "^2.1.0",
 		"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": "^4.2.2",
+		"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": "^4.5.0"
+		"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/components/Repl/Repl.svelte

@@ -10,7 +10,7 @@
 
   export let workersUrl;
   export let packagesUrl = "https://unpkg.com";
-  export let svelteUrl = `${packagesUrl}/svelte@3`;
+  export let svelteUrl = `${packagesUrl}/svelte`;
   export let orientation = "columns";
   export let relaxed = false;
   export let fixed = false;

packages/site/src/routes/+error.svelte → packages/site/src/routes/_error.svelte

@@ -1,5 +1,8 @@
 <script>
-	import { page } from '$app/stores';
+	export let status;
+	export let error;
+
+	const dev = process.env.NODE_ENV === 'development';
 </script>
 
 <style>
@@ -25,13 +28,13 @@
 </style>
 
 <svelte:head>
-	<title>{$page.status}</title>
+	<title>{status}</title>
 </svelte:head>
 
 <h1>{status}</h1>
 
-{#if $page.error.message}
-	<p class="error">{status}: {$page.error.message}</p>
-{:else}
-	<p class="error">Encountered a {$page.status} error</p>
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
 {/if}

packages/site/src/routes/docs/+page.svelte → packages/site/src/routes/docs.svelte

@@ -1,16 +1,18 @@
 <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';
-	import Cheatsheet from '../../components/Cheatsheet.svx';
+	import docs from './_docs.svtext';
+	import Cheatsheet from '../components/Cheatsheet.svx';
 
 	let root;
 	let scrollY = 0;
 	let width = 1100;
 	let current;
 	let position = '';
 
+	const { page } = stores();
+
 	const nav = [
 		['Install', 'docs#install-it'],
 		[

packages/site/src/routes/playground/+page.svelte → packages/site/src/routes/playground.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte";
-  import Repl from "../../components/Repl/Repl.svelte";
-  import { code_1, code_2, code_3, code_4, code_5 } from "../_source.js";
+  import Repl from "../components/Repl/Repl.svelte";
+  import { code_1, code_2, code_3, code_4, code_5 } from "./_source.js";
 
   let repl;
   let checked = "input";

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);
+	});