Merge pull request #2071 from sveltejs/gh-2067

.html -> .svelte

Author: Rich-Harris

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;

site/content/examples/7guis-circles/App.html renamed to site/content/examples/7guis-circles/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/7guis-counter/App.html renamed to site/content/examples/7guis-counter/App.svelte

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

site/content/examples/7guis-crud/App.html renamed to site/content/examples/7guis-crud/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/7guis-flight-booker/App.html renamed to site/content/examples/7guis-flight-booker/App.svelte

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

site/content/examples/7guis-temperature/App.html renamed to site/content/examples/7guis-temperature/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/7guis-timer/App.html renamed to site/content/examples/7guis-timer/App.svelte

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

site/content/examples/await-block/App.html renamed to site/content/examples/await-block/App.svelte

@@ -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/content/examples/bar-chart/App.html renamed to site/content/examples/bar-chart/App.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/content/examples/binding-input-checkbox-group/App.html renamed to site/content/examples/binding-input-checkbox-group/App.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/content/examples/binding-input-checkbox/App.html renamed to site/content/examples/binding-input-checkbox/App.svelte

@@ -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/content/examples/binding-input-numeric/App.html renamed to site/content/examples/binding-input-numeric/App.svelte

@@ -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/content/examples/binding-input-radio/App.html renamed to site/content/examples/binding-input-radio/App.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/content/examples/binding-input-text/App.html renamed to site/content/examples/binding-input-text/App.svelte

@@ -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/content/examples/binding-media-elements/App.html renamed to site/content/examples/binding-media-elements/App.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/content/examples/binding-textarea/App.html renamed to site/content/examples/binding-textarea/App.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/content/examples/each-blocks/App.html renamed to site/content/examples/each-blocks/App.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/content/examples/hacker-news/App.html renamed to site/content/examples/hacker-news/App.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/content/examples/hacker-news/Comment.html renamed to site/content/examples/hacker-news/Comment.svelte

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

site/content/examples/hacker-news/Item.html renamed to site/content/examples/hacker-news/Item.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/content/examples/hacker-news/List.html renamed to site/content/examples/hacker-news/List.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/content/examples/hacker-news/Summary.html renamed to site/content/examples/hacker-news/Summary.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/content/examples/hello-world/App.html renamed to site/content/examples/hello-world/App.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/content/examples/homepage-demo-hello-world/App.html renamed to site/content/examples/homepage-demo-hello-world/App.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;
 					});