Merge pull request #559 from sveltejs/svelte-extension

Use .svelte extension

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.26.0-alpha.5",
+  "version": "0.26.0-alpha.6",
   "description": "Military-grade apps, engineered by Svelte",
   "bin": {
     "sapper": "./sapper"

runtime/internal/layout.svelte

@@ -0,0 +1 @@
+<svelte:component this={child.component} {...child.props}/>

runtime/src/app/app.ts

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store.mjs';
-import Sapper from '@sapper/internal/Sapper.html';
+import Sapper from '@sapper/internal/Sapper.svelte';
 import { stores } from '@sapper/internal/shared';
 import { Root, root_preload, ErrorComponent, ignore, components, routes } from '@sapper/internal/manifest-client';
 import {

runtime/src/server/middleware/get_page_handler.ts

@@ -9,7 +9,7 @@ import { IGNORE } from '../constants';
 import { Manifest, Page, Props, Req, Res } from './types';
 import { build_dir, dev, src_dir } from '@sapper/internal/manifest-server';
 import { stores } from '@sapper/internal/shared';
-import Sapper from '@sapper/internal/Sapper.html';
+import Sapper from '@sapper/internal/Sapper.svelte';
 
 export function get_page_handler(
 	manifest: Manifest,

src/api/utils/copy_runtime.ts

@@ -6,8 +6,9 @@ const runtime = [
 	'app.mjs',
 	'server.mjs',
 	'internal/shared.mjs',
-	'internal/Sapper.html',
+	'internal/Sapper.svelte',
-	'internal/layout.html'
+	'internal/layout.svelte',
+	'internal/error.svelte'
 ].map(file => ({
 	file,
 	source: fs.readFileSync(path.join(__dirname, `../runtime/${file}`), 'utf-8')

src/core/create_manifest_data.ts

@@ -4,6 +4,8 @@ import svelte from 'svelte/compiler';
 import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces';
 import { posixify, reserved_words } from '../utils';
 
+const component_extensions = ['.svelte', '.html']; // TODO make this configurable (to include e.g. .svelte.md?)
+
 export default function create_manifest_data(cwd: string): ManifestData {
 	// TODO remove in a future version
 	if (!fs.existsSync(cwd)) {
@@ -32,11 +34,20 @@ export default function create_manifest_data(cwd: string): ManifestData {
 
 	const default_layout: PageComponent = {
 		default: true,
+		type: 'layout',
 		name: '_default_layout',
 		file: null,
 		has_preload: false
 	};
 
+	const default_error: PageComponent = {
+		default: true,
+		type: 'error',
+		name: '_default_error',
+		file: null,
+		has_preload: false
+	};
+
 	function walk(
 		dir: string,
 		parent_segments: Part[][],
@@ -61,7 +72,7 @@ export default function create_manifest_data(cwd: string): ManifestData {
 
 				const parts = get_parts(segment);
 				const is_index = is_dir ? false : basename.startsWith('index.');
-				const is_page = ext === '.html';
+				const is_page = component_extensions.indexOf(ext) !== -1;
 
 				parts.forEach(part => {
 					if (/\]\[/.test(part.content)) {
@@ -75,6 +86,7 @@ export default function create_manifest_data(cwd: string): ManifestData {
 
 				return {
 					basename,
+					ext,
 					parts,
 					file: posixify(file),
 					is_dir,
@@ -121,12 +133,15 @@ export default function create_manifest_data(cwd: string): ManifestData {
 			params.push(...item.parts.filter(p => p.dynamic).map(p => p.content));
 
 			if (item.is_dir) {
-				const index = path.join(dir, item.basename, '_layout.html');
+				const ext = component_extensions.find((ext: string) => {
+					const index = path.join(dir, item.basename, `_layout${ext}`);
+					return fs.existsSync(index);
+				});
 
-				const component = fs.existsSync(index) && {
+				const component = ext && {
 					name: `${get_slug(item.file)}__layout`,
-					file: `${item.file}/_layout.html`,
+					file: `${item.file}/_layout${ext}`,
-					has_preload: has_preload(`${item.file}/_layout.html`)
+					has_preload: has_preload(`${item.file}/_layout${ext}`)
 				};
 
 				if (component) components.push(component);
@@ -142,7 +157,7 @@ export default function create_manifest_data(cwd: string): ManifestData {
 			}
 
 			else if (item.is_page) {
-				const is_index = item.basename === 'index.html';
+				const is_index = item.basename === `index${item.ext}`;
 
 				const component = {
 					name: get_slug(item.file),
@@ -175,15 +190,24 @@ export default function create_manifest_data(cwd: string): ManifestData {
 		});
 	}
 
-	const root_file = path.join(cwd, '_layout.html');
+	const root_ext = component_extensions.find(ext => fs.existsSync(path.join(cwd, `_layout${ext}`)));
-	const root = fs.existsSync(root_file)
+	const root = root_ext
 		? {
 			name: 'main',
-			file: '_layout.html',
+			file: `_layout${root_ext}`,
-			has_preload: has_preload('_layout.html')
+			has_preload: has_preload(`_layout${root_ext}`)
 		}
 		: default_layout;
 
+	const error_ext = component_extensions.find(ext => fs.existsSync(path.join(cwd, `_error${ext}`)));
+	const error = error_ext
+		? {
+			name: 'error',
+			file: `_error${error_ext}`,
+			has_preload: has_preload(`_error${error_ext}`)
+		}
+		: default_error;
+
 	walk(cwd, [], [], []);
 
 	// check for clashes
@@ -214,6 +238,7 @@ export default function create_manifest_data(cwd: string): ManifestData {
 
 	return {
 		root,
+		error,
 		components,
 		pages,
 		server_routes

src/core/create_manifests.ts

@@ -129,7 +129,7 @@ function generate_client_manifest(
 		// This file is generated by Sapper — do not edit it!
 		export { default as Root } from '${stringify(get_file(path_to_routes, manifest_data.root), false)}';
 		export { preload as root_preload } from '${manifest_data.root.has_preload ? stringify(get_file(path_to_routes, manifest_data.root), false) : './shared'}';
-		export { default as ErrorComponent } from '${stringify(posixify(`${path_to_routes}/_error.html`), false)}';
+		export { default as ErrorComponent } from '${stringify(get_file(path_to_routes, manifest_data.error), false)}';
 
 		export const ignore = [${server_routes_to_ignore.map(route => route.pattern).join(', ')}];
 
@@ -159,7 +159,7 @@ function generate_server_manifest(
 		manifest_data.components.map((component, i) =>
 			`import component_${i}${component.has_preload ? `, { preload as preload_${i} }` : ''} from ${stringify(get_file(path_to_routes, component))};`),
 		`import root${manifest_data.root.has_preload ? `, { preload as root_preload }` : ''} from ${stringify(get_file(path_to_routes, manifest_data.root))};`,
-		`import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};`
+		`import error from ${stringify(get_file(path_to_routes, manifest_data.error))};`
 	);
 
 	const component_lookup: Record<string, number> = {};
@@ -228,15 +228,9 @@ function generate_server_manifest(
 
 		export const dev = ${dev ? 'true' : 'false'};
 	`.replace(/^\t{2}/gm, '').trim();
-
-	return `// This file is generated by Sapper — do not edit it!\n` + template
-		.replace('__BUILD__DIR__', JSON.stringify(build_dir))
-		.replace('__SRC__DIR__', JSON.stringify(src_dir))
-		.replace('__DEV__', dev ? 'true' : 'false')
-		.replace(/const manifest = __MANIFEST__;/, code);
 }
 
 function get_file(path_to_routes: string, component: PageComponent) {
-	if (component.default) return `./layout.html`;
+	if (component.default) return `./${component.type}.svelte`;
 	return posixify(`${path_to_routes}/${component.file}`);
 }

src/interfaces.ts

@@ -27,6 +27,7 @@ export type WritableStore<T> = {
 
 export type PageComponent = {
 	default?: boolean;
+	type?: string;
 	name: string;
 	file: string;
 	has_preload: boolean;
@@ -55,6 +56,7 @@ export type Dirs = {
 
 export type ManifestData = {
 	root: PageComponent;
+	error: PageComponent;
 	components: PageComponent[];
 	pages: Page[];
 	server_routes: ServerRoute[];

test/apps/css/src/routes/bar.svelte

@@ -4,7 +4,7 @@
 	export let Title;
 
 	onMount(() => {
-		import('./_components/Title.html').then(mod => {
+		import('./_components/Title.svelte').then(mod => {
 			Title = mod.default;
 		});
 	});

test/apps/with-sourcemaps-webpack/test.ts

@@ -3,7 +3,7 @@ import * as assert from "assert";
 import * as fs from 'fs';
 import * as path from "path";
 
-describe('with-sourcemaps', function() {
+describe('with-sourcemaps-webpack', function() {
 	this.timeout(10000);
 
 	// hooks

test/apps/with-sourcemaps-webpack/webpack.config.js

@@ -9,13 +9,13 @@ module.exports = {
 		entry: config.client.entry(),
 		output: config.client.output(),
 		resolve: {
-			extensions: ['.mjs', '.js', '.json', '.html'],
+			extensions: ['.mjs', '.js', '.json', '.html', '.svelte'],
 			mainFields: ['svelte', 'module', 'browser', 'main']
 		},
 		module: {
 			rules: [
 				{
-					test: /\.html$/,
+					test: /\.(html|svelte)$/,
 					use: {
 						loader: 'svelte-loader',
 						options: {
@@ -43,13 +43,13 @@ module.exports = {
 		output: config.server.output(),
 		target: 'node',
 		resolve: {
-			extensions: ['.mjs', '.js', '.json', '.html'],
+			extensions: ['.mjs', '.js', '.json', '.html', '.svelte'],
 			mainFields: ['svelte', 'module', 'browser', 'main']
 		},
 		module: {
 			rules: [
 				{
-					test: /\.html$/,
+					test: /\.(html|svelte)$/,
 					use: {
 						loader: 'svelte-loader',
 						options: {