Merge pull request #2071 from sveltejs/gh-2067

.html -> .svelte
sveltejs · Feb 9, 2019 · 1f5c043 · 1f5c043
2 parents da11d75 + e6ed8ef
commit 1f5c043
Show file tree

Hide file tree

Showing 1,256 changed files with 467 additions and 470 deletions.
diff --git a/register.js b/register.js
@@ -3,7 +3,7 @@ const path = require('path');
 const { compile } = require('./compiler.js');
 
 let compileOptions = {
-	extensions: ['.html']
+	extensions: ['.svelte', '.html']
 };
 
 function capitalise(name) {
@@ -43,6 +43,7 @@ function registerExtension(extension) {
 	};
 }
 
+registerExtension('.svelte');
 registerExtension('.html');
 
 module.exports = register;
diff --git a/site/content/examples/7guis-circles/App.html → ...content/examples/7guis-circles/App.svelte b/site/content/examples/7guis-circles/App.html → ...content/examples/7guis-circles/App.svelte
diff --git a/site/content/examples/7guis-counter/App.html → ...content/examples/7guis-counter/App.svelte b/site/content/examples/7guis-counter/App.html → ...content/examples/7guis-counter/App.svelte
diff --git a/site/content/examples/7guis-crud/App.html → site/content/examples/7guis-crud/App.svelte b/site/content/examples/7guis-crud/App.html → site/content/examples/7guis-crud/App.svelte
diff --git a/...ent/examples/7guis-flight-booker/App.html → ...t/examples/7guis-flight-booker/App.svelte b/...ent/examples/7guis-flight-booker/App.html → ...t/examples/7guis-flight-booker/App.svelte
diff --git a/...ntent/examples/7guis-temperature/App.html → ...ent/examples/7guis-temperature/App.svelte b/...ntent/examples/7guis-temperature/App.html → ...ent/examples/7guis-temperature/App.svelte
diff --git a/site/content/examples/7guis-timer/App.html → site/content/examples/7guis-timer/App.svelte b/site/content/examples/7guis-timer/App.html → site/content/examples/7guis-timer/App.svelte
diff --git a/site/content/examples/await-block/App.html → site/content/examples/await-block/App.svelte b/site/content/examples/await-block/App.html → site/content/examples/await-block/App.svelte
diff --git a/site/content/examples/bar-chart/App.html → site/content/examples/bar-chart/App.svelte b/site/content/examples/bar-chart/App.html → site/content/examples/bar-chart/App.svelte
diff --git a/...les/binding-input-checkbox-group/App.html → ...s/binding-input-checkbox-group/App.svelte b/...les/binding-input-checkbox-group/App.html → ...s/binding-input-checkbox-group/App.svelte
diff --git a/.../examples/binding-input-checkbox/App.html → ...xamples/binding-input-checkbox/App.svelte b/.../examples/binding-input-checkbox/App.html → ...xamples/binding-input-checkbox/App.svelte
diff --git a/...t/examples/binding-input-numeric/App.html → ...examples/binding-input-numeric/App.svelte b/...t/examples/binding-input-numeric/App.html → ...examples/binding-input-numeric/App.svelte
diff --git a/...ent/examples/binding-input-radio/App.html → ...t/examples/binding-input-radio/App.svelte b/...ent/examples/binding-input-radio/App.html → ...t/examples/binding-input-radio/App.svelte
diff --git a/...tent/examples/binding-input-text/App.html → ...nt/examples/binding-input-text/App.svelte b/...tent/examples/binding-input-text/App.html → ...nt/examples/binding-input-text/App.svelte
diff --git a/.../examples/binding-media-elements/App.html → ...xamples/binding-media-elements/App.svelte b/.../examples/binding-media-elements/App.html → ...xamples/binding-media-elements/App.svelte
diff --git a/...ontent/examples/binding-textarea/App.html → ...tent/examples/binding-textarea/App.svelte b/...ontent/examples/binding-textarea/App.html → ...tent/examples/binding-textarea/App.svelte
diff --git a/site/content/examples/each-blocks/App.html → site/content/examples/each-blocks/App.svelte b/site/content/examples/each-blocks/App.html → site/content/examples/each-blocks/App.svelte
diff --git a/site/content/examples/hacker-news/App.html → site/content/examples/hacker-news/App.svelte b/site/content/examples/hacker-news/App.html → 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;

diff --git a/...content/examples/hacker-news/Comment.html → ...ntent/examples/hacker-news/Comment.svelte b/...content/examples/hacker-news/Comment.html → ...ntent/examples/hacker-news/Comment.svelte
diff --git a/site/content/examples/hacker-news/Item.html → .../content/examples/hacker-news/Item.svelte b/site/content/examples/hacker-news/Item.html → .../content/examples/hacker-news/Item.svelte
diff --git a/site/content/examples/hacker-news/List.html → .../content/examples/hacker-news/List.svelte b/site/content/examples/hacker-news/List.html → .../content/examples/hacker-news/List.svelte
diff --git a/...content/examples/hacker-news/Summary.html → ...ntent/examples/hacker-news/Summary.svelte b/...content/examples/hacker-news/Summary.html → ...ntent/examples/hacker-news/Summary.svelte
diff --git a/site/content/examples/hello-world/App.html → site/content/examples/hello-world/App.svelte b/site/content/examples/hello-world/App.html → site/content/examples/hello-world/App.svelte
diff --git a/...amples/homepage-demo-hello-world/App.html → ...ples/homepage-demo-hello-world/App.svelte b/...amples/homepage-demo-hello-world/App.html → ...ples/homepage-demo-hello-world/App.svelte
diff --git a/...xamples/homepage-demo-reactivity/App.html → ...mples/homepage-demo-reactivity/App.svelte b/...xamples/homepage-demo-reactivity/App.html → ...mples/homepage-demo-reactivity/App.svelte
diff --git a/...ples/homepage-demo-scoped-styles/App.html → ...es/homepage-demo-scoped-styles/App.svelte b/...ples/homepage-demo-scoped-styles/App.html → ...es/homepage-demo-scoped-styles/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Foo from './Foo.html';
+	import Foo from './Foo.svelte';
 </script>
 
 <style>

diff --git a/...ples/homepage-demo-scoped-styles/Foo.html → ...es/homepage-demo-scoped-styles/Foo.svelte b/...ples/homepage-demo-scoped-styles/Foo.html → ...es/homepage-demo-scoped-styles/Foo.svelte
diff --git a/...amples/homepage-demo-transitions/App.html → ...ples/homepage-demo-transitions/App.svelte b/...amples/homepage-demo-transitions/App.html → ...ples/homepage-demo-transitions/App.svelte
diff --git a/site/content/examples/if-blocks/App.html → site/content/examples/if-blocks/App.svelte b/site/content/examples/if-blocks/App.html → site/content/examples/if-blocks/App.svelte
diff --git a/site/content/examples/immutable/App.html → site/content/examples/immutable/App.svelte b/site/content/examples/immutable/App.html → 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;
 

diff --git a/...ent/examples/immutable/ImmutableTodo.html → ...t/examples/immutable/ImmutableTodo.svelte b/...ent/examples/immutable/ImmutableTodo.html → ...t/examples/immutable/ImmutableTodo.svelte
diff --git a/...ntent/examples/immutable/MutableTodo.html → ...ent/examples/immutable/MutableTodo.svelte b/...ntent/examples/immutable/MutableTodo.html → ...ent/examples/immutable/MutableTodo.svelte
diff --git a/site/content/examples/line-chart/App.html → site/content/examples/line-chart/App.svelte b/site/content/examples/line-chart/App.html → site/content/examples/line-chart/App.svelte
diff --git a/...content/examples/modal-with-slot/App.html → ...ntent/examples/modal-with-slot/App.svelte b/...content/examples/modal-with-slot/App.html → ...ntent/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>

diff --git a/...ntent/examples/modal-with-slot/Modal.html → ...ent/examples/modal-with-slot/Modal.svelte b/...ntent/examples/modal-with-slot/Modal.html → ...ent/examples/modal-with-slot/Modal.svelte
diff --git a/site/content/examples/motion-spring/App.html → ...content/examples/motion-spring/App.svelte b/site/content/examples/motion-spring/App.html → ...content/examples/motion-spring/App.svelte
diff --git a/...ntent/examples/nested-components/App.html → ...ent/examples/nested-components/App.svelte b/...ntent/examples/nested-components/App.html → ...ent/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>

diff --git a/...nt/examples/nested-components/Nested.html → .../examples/nested-components/Nested.svelte b/...nt/examples/nested-components/Nested.html → .../examples/nested-components/Nested.svelte
diff --git a/site/content/examples/parallax/App.html → site/content/examples/parallax/App.svelte b/site/content/examples/parallax/App.html → site/content/examples/parallax/App.svelte
diff --git a/site/content/examples/scatterplot/App.html → site/content/examples/scatterplot/App.svelte b/site/content/examples/scatterplot/App.html → 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;

diff --git a/...ent/examples/scatterplot/Scatterplot.html → ...t/examples/scatterplot/Scatterplot.svelte b/...ent/examples/scatterplot/Scatterplot.html → ...t/examples/scatterplot/Scatterplot.svelte
diff --git a/site/content/examples/scoped-styles/App.html → ...content/examples/scoped-styles/App.svelte b/site/content/examples/scoped-styles/App.html → ...content/examples/scoped-styles/App.svelte
diff --git a/...content/examples/self-references/App.html → ...ntent/examples/self-references/App.svelte b/...content/examples/self-references/App.html → ...ntent/examples/self-references/App.svelte
diff --git a/site/content/examples/svg-clock/App.html → site/content/examples/svg-clock/App.svelte b/site/content/examples/svg-clock/App.html → site/content/examples/svg-clock/App.svelte
diff --git a/...tent/examples/transitions-custom/App.html → ...nt/examples/transitions-custom/App.svelte b/...tent/examples/transitions-custom/App.html → ...nt/examples/transitions-custom/App.svelte
diff --git a/...ontent/examples/transitions-fade/App.html → ...tent/examples/transitions-fade/App.svelte b/...ontent/examples/transitions-fade/App.html → ...tent/examples/transitions-fade/App.svelte
diff --git a/...content/examples/transitions-fly/App.html → ...ntent/examples/transitions-fly/App.svelte b/...content/examples/transitions-fly/App.html → ...ntent/examples/transitions-fly/App.svelte
diff --git a/...tent/examples/transitions-in-out/App.html → ...nt/examples/transitions-in-out/App.svelte b/...tent/examples/transitions-in-out/App.html → ...nt/examples/transitions-in-out/App.svelte
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/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"
   }
 }
diff --git a/site/src/components/Icon.html → site/src/components/Icon.svelte b/site/src/components/Icon.html → site/src/components/Icon.svelte
diff --git a/site/src/components/InlineSvg.html → site/src/components/InlineSvg.svelte b/site/src/components/InlineSvg.html → site/src/components/InlineSvg.svelte
diff --git a/site/src/components/Logo.html → site/src/components/Logo.svelte b/site/src/components/Logo.html → site/src/components/Logo.svelte
diff --git a/site/src/components/TopNav.html → site/src/components/TopNav.svelte b/site/src/components/TopNav.html → 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;
 

diff --git a/site/src/routes/_error.html → site/src/routes/_error.svelte b/site/src/routes/_error.html → site/src/routes/_error.svelte
diff --git a/site/src/routes/_layout.html → site/src/routes/_layout.svelte b/site/src/routes/_layout.html → 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;

diff --git a/site/src/routes/about.html → site/src/routes/about.svelte b/site/src/routes/about.html → site/src/routes/about.svelte
diff --git a/site/src/routes/api/examples/[slug].js b/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;
 		});

diff --git a/site/src/routes/blog/[slug].html → site/src/routes/blog/[slug].svelte b/site/src/routes/blog/[slug].html → site/src/routes/blog/[slug].svelte
diff --git a/site/src/routes/blog/index.html → site/src/routes/blog/index.svelte b/site/src/routes/blog/index.html → site/src/routes/blog/index.svelte
diff --git a/site/src/routes/gist/[id].js b/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, {

diff --git a/site/src/routes/guide/_GuideContents.html → site/src/routes/guide/_GuideContents.svelte b/site/src/routes/guide/_GuideContents.html → 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;

diff --git a/site/src/routes/guide/_sections.js b/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';

diff --git a/site/src/routes/guide/index.html → site/src/routes/guide/index.svelte b/site/src/routes/guide/index.html → 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;

diff --git a/site/src/routes/index.html → site/src/routes/index.svelte b/site/src/routes/index.html → 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;

diff --git a/...epl/_components/AppControls/UserMenu.html → ...l/_components/AppControls/UserMenu.svelte b/...epl/_components/AppControls/UserMenu.html → ...l/_components/AppControls/UserMenu.svelte
diff --git a/...s/repl/_components/AppControls/index.html → ...repl/_components/AppControls/index.svelte b/...s/repl/_components/AppControls/index.html → ...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,

diff --git a/...c/routes/repl/_components/CodeMirror.html → ...routes/repl/_components/CodeMirror.svelte b/...c/routes/repl/_components/CodeMirror.html → ...routes/repl/_components/CodeMirror.svelte
diff --git a/.../_components/Input/ComponentSelector.html → ...components/Input/ComponentSelector.svelte b/.../_components/Input/ComponentSelector.html → ...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}

diff --git a/.../repl/_components/Input/ModuleEditor.html → ...epl/_components/Input/ModuleEditor.svelte b/.../repl/_components/Input/ModuleEditor.html → ...epl/_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;

diff --git a/.../routes/repl/_components/Input/index.html → ...outes/repl/_components/Input/index.svelte b/.../routes/repl/_components/Input/index.html → ...outes/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;

diff --git a/...s/repl/_components/InputOutputToggle.html → ...repl/_components/InputOutputToggle.svelte b/...s/repl/_components/InputOutputToggle.html → ...repl/_components/InputOutputToggle.svelte
diff --git a/...l/_components/Output/CompilerOptions.html → ..._components/Output/CompilerOptions.svelte b/...l/_components/Output/CompilerOptions.html → ..._components/Output/CompilerOptions.svelte
diff --git a/...s/repl/_components/Output/PropEditor.html → ...repl/_components/Output/PropEditor.svelte b/...s/repl/_components/Output/PropEditor.html → ...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();
 

diff --git a/...outes/repl/_components/Output/Viewer.html → ...tes/repl/_components/Output/Viewer.svelte b/...outes/repl/_components/Output/Viewer.html → ...tes/repl/_components/Output/Viewer.svelte
diff --git a/...routes/repl/_components/Output/index.html → ...utes/repl/_components/Output/index.svelte b/...routes/repl/_components/Output/index.html → ...utes/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;

diff --git a/site/src/routes/repl/_components/Repl.html → site/src/routes/repl/_components/Repl.svelte b/site/src/routes/repl/_components/Repl.html → 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`);
 

diff --git a/...rc/routes/repl/_components/SplitPane.html → .../routes/repl/_components/SplitPane.svelte b/...rc/routes/repl/_components/SplitPane.html → .../routes/repl/_components/SplitPane.svelte
diff --git a/site/src/routes/repl/embed.html → site/src/routes/repl/embed.svelte b/site/src/routes/repl/embed.html → 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;
 					});