update site, including REPL, to use .svelte

site/content/examples/hacker-news/App.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
-	import List from './List.html';
-	import Item from './Item.html';
+	import List from './List.svelte';
+	import Item from './Item.svelte';
 
 	let item;
 	let page;

site/content/examples/homepage-demo-scoped-styles/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Foo from './Foo.html';
+	import Foo from './Foo.svelte';
 </script>
 
 <style>

site/content/examples/immutable/App.svelte

@@ -1,8 +1,8 @@
 <svelte:options immutable/>
 
 <script>
-	import ImmutableTodo from './ImmutableTodo.html';
-	import MutableTodo from './MutableTodo.html';
+	import ImmutableTodo from './ImmutableTodo.svelte';
+	import MutableTodo from './MutableTodo.svelte';
 
 	export let todos;
 

site/content/examples/modal-with-slot/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Modal from './Modal.html';
+	import Modal from './Modal.svelte';
 
 	export let showModal;
 </script>

site/content/examples/nested-components/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Nested from './Nested.html';
+	import Nested from './Nested.svelte';
 </script>
 
 <p>This is a top-level element.</p>

site/content/examples/scatterplot/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Scatterplot from './Scatterplot.html';
+	import Scatterplot from './Scatterplot.svelte';
 
 	export let a;
 	export let b;

site/package-lock.json

@@ -4255,9 +4255,9 @@
       }
     },
     "sapper": {
-      "version": "0.26.0-alpha.5",
-      "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.5.tgz",
-      "integrity": "sha512-BpPfj4XzwHzRiY02haE0f/gxl7+p48CKrSsHYrsrkOgtVjjQ6VSuYIYZdgWlXHUeLEQQxxPVEQ+O+oPVtNJxGg==",
+      "version": "0.26.0-alpha.7",
+      "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.7.tgz",
+      "integrity": "sha512-r89JjBMGv5f5641yklK6qwwJ2ZMRUQiOX7EaWRpBEW66UHFHPXXygSvYsa+Se9LbLF626NDh2EDbCPyjIaMSvw==",
       "dev": true,
       "requires": {
         "html-minifier": "^3.5.21",

site/package.json

@@ -52,7 +52,7 @@
     "rollup-plugin-replace": "^2.1.0",
     "rollup-plugin-svelte": "^5.0.1",
     "rollup-plugin-terser": "^4.0.4",
-    "sapper": "^0.26.0-alpha.5",
+    "sapper": "^0.26.0-alpha.7",
     "svelte": "^3.0.0-beta.3"
   }
 }

site/src/components/TopNav.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
-	import Icon from './Icon.html';
-	import Logo from './Logo.html';
+	import Icon from './Icon.svelte';
+	import Logo from './Logo.svelte';
 
 	export let segment;
 

site/src/routes/_layout.svelte

@@ -1,6 +1,6 @@
 <script>
-	import InlineSvg from '../components/InlineSvg.html';
-	import Nav from '../components/TopNav.html';
+	import InlineSvg from '../components/InlineSvg.svelte';
+	import Nav from '../components/TopNav.svelte';
 
 	export let child;
 	export let path;

site/src/routes/api/examples/[slug].js

@@ -19,7 +19,7 @@ function createExample(slug) {
 	const components = files
 		.map(file => {
 			const ext = path.extname(file);
-			if (ext !== '.html' && ext !== '.js') return null;
+			if (ext !== '.svelte' && ext !== '.js') return null;
 
 			const source = fs.readFileSync(`content/examples/${slug}/${file}`, 'utf-8');
 
@@ -31,10 +31,10 @@ function createExample(slug) {
 		})
 		.filter(Boolean)
 		.sort((a, b) => {
-			if (a.name === 'App' && a.type === 'html') return -1;
-			if (b.name === 'App' && b.type === 'html') return 1;
+			if (a.name === 'App' && a.type === 'svelte') return -1;
+			if (b.name === 'App' && b.type === 'svelte') return 1;
 
-			if (a.type !== b.type) return a.type === 'html' ? -1 : 1;
+			if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
 
 			return a.name < b.name ? -1 : 1;
 		});

site/src/routes/gist/[id].js

@@ -5,7 +5,7 @@ export async function get(req, res) {
 	const { id } = req.params;
 
 	const headers = {};
-	const user = req.session.passport && req.session.passport.user;
+	const user = req.session && req.session.passport && req.session.passport.user;
 	if (user) {
 		headers.Authorization = `token ${user.token}`;
 	}
@@ -34,7 +34,7 @@ export async function get(req, res) {
 }
 
 export async function patch(req, res) {
-	const user = req.session.passport && req.session.passport.user;
+	const user = req.session && req.session.passport && req.session.passport.user;
 
 	if (!user) {
 		res.writeHead(403, {

site/src/routes/guide/_GuideContents.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { onMount, afterUpdate } from 'svelte';
-	import Icon from '../../components/Icon.html';
+	import Icon from '../../components/Icon.svelte';
 
 	export let sections = [];
 	export let active_section = null;

site/src/routes/guide/_sections.js

@@ -113,7 +113,7 @@ export default function() {
 
 				if (meta) {
 					source = lines.slice(1).join('\n');
-					const filename = meta.filename || (lang === 'html' && 'App.html');
+					const filename = meta.filename || (lang === 'html' && 'App.svelte');
 					if (filename) {
 						prefix = `<span class='filename'>${prefix} ${filename}</span>`;
 						className += ' named';

site/src/routes/guide/index.svelte

@@ -7,8 +7,8 @@
 
 <script>
 	import { onMount, afterUpdate } from 'svelte';
-	import GuideContents from './_GuideContents.html';
-	import Icon from '../../components/Icon.html';
+	import GuideContents from './_GuideContents.svelte';
+	import Icon from '../../components/Icon.svelte';
 
 	export let sections;
 	let active_section;

site/src/routes/index.svelte

@@ -1,6 +1,6 @@
 <script>
-	import Icon from '../components/Icon.html';
-	import Logo from '../components/Logo.html';
+	import Icon from '../components/Icon.svelte';
+	import Logo from '../components/Logo.svelte';
 	import contributors from './_contributors.js';
 
 	let sy = 0;

site/src/routes/repl/_components/AppControls/index.svelte

@@ -1,8 +1,8 @@
 <script>
 	import * as fleece from 'golden-fleece';
 	import { createEventDispatcher } from 'svelte';
-	import UserMenu from './UserMenu.html';
-	import Icon from '../../../../components/Icon.html';
+	import UserMenu from './UserMenu.svelte';
+	import Icon from '../../../../components/Icon.svelte';
 	import * as doNotZip from 'do-not-zip';
 	import downloadBlob from '../../_utils/downloadBlob.js';
 	import { user } from '../../../../user.js';
@@ -115,7 +115,7 @@
 			// null out any deleted files
 			const set = new Set(components.map(m => `${m.name}.${m.type}`));
 			Object.keys(gist.files).forEach(file => {
-				if (/\.(html|js)$/.test(file)) {
+				if (/\.(svelte|html|js)$/.test(file)) {
 					if (!set.has(file)) files[file] = null;
 				}
 			});
@@ -126,7 +126,7 @@
 					throw new Error(`GitHub does not allow saving gists with empty files - ${file}`);
 				}
 
-				if (!gist.files[files] || module.source !== gist.files[file].content) {
+				if (!gist.files[file] || module.source !== gist.files[file].content) {
 					files[file] = { content: module.source };
 				}
 			});
@@ -189,7 +189,7 @@
 
 		files.push(...components.map(component => ({ path: `src/${component.name}.${component.type}`, data: component.source })));
 		files.push({
-			path: `src/main.js`, data: `import App from './App.html';
+			path: `src/main.js`, data: `import App from './App.svelte';
 
 var app = new App({
 	target: document.body,

site/src/routes/repl/_components/Input/ComponentSelector.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import Icon from '../../../../components/Icon.html';
+	import Icon from '../../../../components/Icon.svelte';
 	import { enter } from '../events.js';
 
 	const dispatch = createEventDispatcher();
@@ -25,7 +25,7 @@
 	}
 
 	function closeEdit() {
-		const match = /(.+)\.(html|js)$/.exec($selected_store.name);
+		const match = /(.+)\.(svelte|js)$/.exec($selected_store.name);
 		$selected_store.name = match ? match[1] : $selected_store.name;
 		if (match && match[2]) $selected_store.type = match[2];
 		editing = null;
@@ -49,7 +49,7 @@
 	function addNew() {
 		const component = {
 			name: uid++ ? `Component${uid}` : 'Component1',
-			type: 'html',
+			type: 'svelte',
 			source: ''
 		};
 
@@ -181,7 +181,7 @@
 			>
 				{#if component.name == 'App'}
 					<div class="uneditable">
-						App.html
+						App.svelte
 					</div>
 				{:else}
 					{#if component === editing}

site/src/routes/repl/_components/Input/ModuleEditor.svelte

@@ -1,5 +1,5 @@
 <script>
-	import CodeMirror from '../CodeMirror.html';
+	import CodeMirror from '../CodeMirror.svelte';
 
 	export let component;
 	export let error;

site/src/routes/repl/_components/Input/index.svelte

@@ -1,6 +1,6 @@
 <script>
-	import ComponentSelector from './ComponentSelector.html';
-	import ModuleEditor from './ModuleEditor.html';
+	import ComponentSelector from './ComponentSelector.svelte';
+	import ModuleEditor from './ModuleEditor.svelte';
 
 	export let component_store;
 	export let selected_store;

site/src/routes/repl/_components/Output/PropEditor.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
 	import * as fleece from 'golden-fleece';
-	import CodeMirror from '../CodeMirror.html';
+	import CodeMirror from '../CodeMirror.svelte';
 
 	const dispatch = createEventDispatcher();
 

site/src/routes/repl/_components/Output/index.svelte

@@ -1,9 +1,9 @@
 <script>
-	import SplitPane from '../SplitPane.html';
-	import Viewer from './Viewer.html';
-	import CompilerOptions from './CompilerOptions.html';
-	import PropEditor from './PropEditor.html';
-	import CodeMirror from '../CodeMirror.html';
+	import SplitPane from '../SplitPane.svelte';
+	import Viewer from './Viewer.svelte';
+	import CompilerOptions from './CompilerOptions.svelte';
+	import PropEditor from './PropEditor.svelte';
+	import CodeMirror from '../CodeMirror.svelte';
 
 	export let bundle;
 	export let js;

site/src/routes/repl/_components/Repl.svelte

@@ -2,11 +2,11 @@
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 	import * as fleece from 'golden-fleece';
-	import SplitPane from './SplitPane.html';
-	import CodeMirror from './CodeMirror.html';
-	import Input from './Input/index.html';
-	import Output from './Output/index.html';
-	import InputOutputToggle from './InputOutputToggle.html';
+	import SplitPane from './SplitPane.svelte';
+	import CodeMirror from './CodeMirror.svelte';
+	import Input from './Input/index.svelte';
+	import Output from './Output/index.svelte';
+	import InputOutputToggle from './InputOutputToggle.svelte';
 
 	export let version = 'beta'; // TODO change this to latest when the time comes
 	export let app;
@@ -100,7 +100,7 @@
 		const selected = $selected_store;
 
 		if (selected.name === 'App') {
-			// App.html can't be removed
+			// App.svelte can't be removed
 			selected.source = '';
 			// $selected_store.set(selected);
 		} else {
@@ -118,13 +118,13 @@
 	}
 
 	function compile(component, options) {
-		if (component.type === 'html') {
+		if (component.type === 'svelte') {
 			workers.compiler.postMessage({
 				type: 'compile',
 				source: component.source,
 				options: Object.assign({
 					name: component.name,
-					filename: `${component.name}.html`
+					filename: `${component.name}.svelte`
 				}, options),
 				entry: component === $component_store[0]
 			});
@@ -154,7 +154,7 @@
 	}
 
 	function navigate(filename) {
-		const name = filename.replace(/\.html$/, '');
+		const name = filename.replace(/\.svelte$/, '');
 
 		console.error(`TODO navigate`);
 

site/src/routes/repl/embed.svelte

@@ -11,7 +11,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import * as fleece from 'golden-fleece';
-	import Repl from './_components/Repl.html';
+	import Repl from './_components/Repl.svelte';
 
 	export let version, gist, demo;
 
@@ -57,12 +57,12 @@
 							source
 						};
 					})
-					.filter(x => x.type === 'html' || x.type === 'js')
+					.filter(x => x.type === 'svelte' || x.type === 'js')
 					.sort((a, b) => {
-						if (a.name === 'App' && a.type === 'html') return -1;
-						if (b.name === 'App' && b.type === 'html') return 1;
+						if (a.name === 'App' && a.type === 'svelte') return -1;
+						if (b.name === 'App' && b.type === 'svelte') return 1;
 
-						if (a.type !== b.type) return a.type === 'html' ? -1 : 1;
+						if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
 
 						return a.name < b.name ? -1 : 1;
 					});

site/src/routes/repl/index.svelte

@@ -12,8 +12,8 @@
 	import { onMount } from 'svelte';
 	import { locate } from 'locate-character';
 	import * as fleece from 'golden-fleece';
-	import AppControls from './_components/AppControls/index.html';
-	import Repl from './_components/Repl.html';
+	import AppControls from './_components/AppControls/index.svelte';
+	import Repl from './_components/Repl.svelte';
 	import examples from '../../../content/examples/manifest.json';
 
 	export let version, demo, gist_id;
@@ -80,18 +80,21 @@
 							values = tryParseData(source) || {};
 						}
 
+						let type = file.slice(dot + 1);
+						if (type === 'html') type = 'svelte';
+
 						return {
 							name: file.slice(0, dot),
-							type: file.slice(dot + 1),
+							type,
 							source
 						};
 					})
-					.filter(x => x.type === 'html' || x.type === 'js')
+					.filter(x => x.type === 'svelte' || x.type === 'js')
 					.sort((a, b) => {
-						if (a.name === 'App' && a.type === 'html') return -1;
-						if (b.name === 'App' && b.type === 'html') return 1;
+						if (a.name === 'App' && a.type === 'svelte') return -1;
+						if (b.name === 'App' && b.type === 'svelte') return 1;
 
-						if (a.type !== b.type) return a.type === 'html' ? -1 : 1;
+						if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
 
 						return a.name < b.name ? -1 : 1;
 					});

site/static/workers/bundler.js

@@ -69,7 +69,7 @@ async function getBundle(mode, cache, lookup) {
 
 	try {
 		bundle = await rollup.rollup({
-			input: './App.html',
+			input: './App.svelte',
 			external: id => {
 				if (id[0] === '.') return false;
 				if (is_svelte_module(id)) return false;
@@ -86,6 +86,8 @@ async function getBundle(mode, cache, lookup) {
 						return new URL(`${importee}.mjs`, importer).href;
 					}
 
+					if (importee.endsWith('.html')) importee = importee.replace(/\.html$/, '.svelte');
+
 					if (importee in lookup) return importee;
 				},
 				load(id) {
@@ -93,15 +95,15 @@ async function getBundle(mode, cache, lookup) {
 					if (id in lookup) return lookup[id].source;
 				},
 				transform(code, id) {
-					if (!/\.html$/.test(id)) return null;
+					if (!/\.svelte$/.test(id)) return null;
 
-					const name = id.replace(/^\.\//, '').replace(/\.html$/, '');
+					const name = id.replace(/^\.\//, '').replace(/\.svelte$/, '');
 
 					const { js, css, stats } = svelte.compile(code, Object.assign({
 						generate: mode,
 						format: 'esm',
 						name: name,
-						filename: name + '.html',
+						filename: name + '.svelte',
 						onwarn: warning => {
 							console.warn(warning.message);
 							console.log(warning.frame);