feat: sapper export --no-subfolders

Prevent trailing slash redirect for hosts that prefer `export/foo.htm` instead of `export/foo/index.htm` (github pages)

Author: bfanger

site/content/docs/10-exporting.md

@@ -69,3 +69,5 @@ Because `sapper export` writes to the filesystem, it isn't possible to have two
 The solution is to rename one of the routes to avoid conflict — for example, `src/routes/foo-bar.js`. (Note that you would also need to update any code that fetches data from `/foo/bar` to reference `/foo-bar` instead.)
 
 For *pages*, we skirt around this problem by writing `export/foo/index.html` instead of `export/foo`.
+
+For hosts that prefer `export/foo.html` instead of `export/foo/index.html` pass the `--no-subfolders` option to prevent a redirect with a trailing slash added to the url.

src/api/export.ts

@@ -22,6 +22,7 @@ type Opts = {
 	static?: string;
 	basepath?: string;
 	host_header?: string;
+	subfolders?: boolean,
 	timeout?: number | false;
 	concurrent?: number;
 	oninfo?: ({ message }: { message: string }) => void;
@@ -82,6 +83,7 @@ async function _export({
 	export_dir = '__sapper__/export',
 	basepath = '',
 	host_header = undefined,
+	subfolders = true,
 	timeout = 5000,
 	concurrent = 8,
 	oninfo = noop,
@@ -147,7 +149,11 @@ async function _export({
 
 		if (is_html) {
 			if (!file.endsWith('.html')) {
-				file = file === '' ? 'index.html' : `${file}/index.html`;
+				if (file === '') {
+					file = 'index.html';
+				} else if (file !== 'manifest.json') {
+					file = subfolders ? `${file}/index.html` : `${file}.html`;
+				}
 			}
 
 			if (typeof body === 'string') {

src/cli.ts

@@ -207,6 +207,7 @@ prog.command('export [dest]')
 	.option('--build-dir', 'Intermediate build directory', '__sapper__/build')
 	.option('--ext', 'Custom page route extensions (space separated)', '.svelte .html')
 	.option('--entry', 'Custom entry points (space separated)', '/')
+	.option('--subfolders', 'Generate /path/index.html instead of /path.html', true)
 	.action(async (dest = '__sapper__/export', opts: {
 		build: boolean;
 		legacy: boolean;
@@ -223,6 +224,7 @@ prog.command('export [dest]')
 		'build-dir': string;
 		ext: string;
 		entry: string;
+		subfolders: boolean;
 	}) => {
 		try {
 			if (opts.build) {
@@ -244,6 +246,7 @@ prog.command('export [dest]')
 				timeout: opts.timeout,
 				concurrent: opts.concurrent,
 				entry: opts.entry,
+				subfolders: opts.subfolders,
 
 				oninfo: event => {
 					console.log(colors.bold().cyan(`> ${event.message}`));

test/apps/export-no-subfolders/content/example-192.png

@@ -0,0 +1,58 @@
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import svelte from 'rollup-plugin-svelte';
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+
+const config = require('../../../config/rollup.js');
+
+export default {
+	client: {
+		input: config.client.input(),
+		output: config.client.output(),
+		plugins: [
+			replace({
+				'process.browser': true,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			}),
+			svelte({
+				dev,
+				hydratable: true,
+				emitCss: true
+			}),
+			resolve()
+		]
+	},
+
+	server: {
+		input: config.server.input(),
+		output: config.server.output(),
+		plugins: [
+			replace({
+				'process.browser': false,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			}),
+			svelte({
+				generate: 'ssr',
+				dev
+			}),
+			resolve({
+				preferBuiltins: true
+			})
+		],
+		external: ['sirv', 'polka']
+	},
+
+	serviceworker: {
+		input: config.serviceworker.input(),
+		output: config.serviceworker.output(),
+		plugins: [
+			resolve(),
+			replace({
+				'process.browser': true,
+				'process.env.NODE_ENV': JSON.stringify(mode)
+			})
+		]
+	}
+};

test/apps/export-no-subfolders/content/example-512.png

@@ -0,0 +1,9 @@
+import * as sapper from '@sapper/app';
+
+window.start = () => sapper.start({
+	target: document.querySelector('#sapper')
+});
+
+window.prefetchRoutes = () => sapper.prefetchRoutes();
+window.prefetch = href => sapper.prefetch(href);
+window.goto = href => sapper.goto(href);

test/apps/export-no-subfolders/content/test.pdf

@@ -0,0 +1,10 @@
+<script>
+	export let status;
+	export let error;
+</script>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+<pre>{error.stack}</pre>

test/apps/export-no-subfolders/rollup.config.js

@@ -0,0 +1,24 @@
+<script context="module">
+	export function preload({ params }) {
+		return this.fetch(`blog/${params.slug}.json`).then(r => r.json()).then(post => {
+			return { post };
+		});
+	}
+</script>
+
+<script>
+	export let post;
+</script>
+
+<h1>{post.title}</h1>
+
+{#if post.src}
+	<picture>
+		<source srcset={post.srcset}/>
+		<img src={post.src}/>
+	</picture>
+{/if}
+
+{#if post.pdf}
+	<a href={post.pdf}>{post.pdf}</a>
+{/if}

test/apps/export-no-subfolders/src/client.js

@@ -0,0 +1,19 @@
+import posts from './_posts.js';
+
+export function get(req, res) {
+	const post = posts.find(post => post.slug === req.params.slug);
+
+	if (post) {
+		res.writeHead(200, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify(post));
+	} else {
+		res.writeHead(404, {
+			'Content-Type': 'application/json'
+		});
+
+		res.end(JSON.stringify({ message: 'not found' }));
+	}
+}

test/apps/export-no-subfolders/src/routes/_error.svelte

@@ -0,0 +1,5 @@
+export default [
+	{ slug: 'foo', title: 'once upon a foo', src: 'img/example-512.png', srcset: 'img/example-512.png 512w, img/example-192.png 192w', pdf: 'pdfs/test.pdf' },
+	{ slug: 'bar', title: 'a bar is born' },
+	{ slug: 'baz', title: 'bazzily ever after' }
+];

test/apps/export-no-subfolders/src/routes/blog/[slug].html

@@ -0,0 +1,17 @@
+<script context="module">
+	export function preload() {
+		return this.fetch('blog.json').then(r => r.json()).then(posts => {
+			return { posts };
+		});
+	}
+</script>
+
+<script>
+	export let posts;
+</script>
+
+<h1>blog</h1>
+
+{#each posts as post}
+	<p><a href="blog/{post.slug}">{post.title}</a></p>
+{/each}

test/apps/export-no-subfolders/src/routes/blog/[slug].json.js

@@ -0,0 +1,9 @@
+import posts from './_posts.js';
+
+export function get(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'application/json'
+	});
+
+	res.end(JSON.stringify(posts));
+}

test/apps/export-no-subfolders/src/routes/blog/_posts.js

@@ -0,0 +1,12 @@
+<script context="module">
+	export function preload({ params }) {
+		return params;
+	}
+</script>
+
+<script>
+	export let a;
+	export let b;
+</script>
+
+<p>{a}/{b}.html</p>

test/apps/export-no-subfolders/src/routes/blog/index.html

@@ -0,0 +1,12 @@
+<script context="module">
+	export function preload({ params }) {
+		return params;
+	}
+</script>
+
+<script>
+	export let a;
+	export let b;
+</script>
+
+<p>{a}/{b}</p>

test/apps/export-no-subfolders/src/routes/blog/index.json.js

@@ -0,0 +1,16 @@
+<script context="module">
+	export function preload({ params }) {
+		return params;
+	}
+</script>
+
+<script>
+	export let a;
+
+	const list = Array(20).fill().map((_, i) => i + 1);
+</script>
+
+{#each list as b}
+	<a href="boom/{a}/{b}">{a}/{b}</a>
+	<a href="boom/{a}/{b}.html">{a}/{b}.html</a>
+{/each}

test/apps/export-no-subfolders/src/routes/boom/[a]/[b].html.svelte

@@ -0,0 +1,7 @@
+<script>
+	const list = Array(20).fill().map((_, i) => i + 1);
+</script>
+
+{#each list as a}
+	<a href="boom/{a}">{a}</a>
+{/each}

test/apps/export-no-subfolders/src/routes/boom/[a]/[b].svelte

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+const cwd = process.cwd();
+
+export function get(req, res) {
+
+	const { slug } = req.params;
+	const image = path.join(cwd, `/content/${slug}.png`);
+
+	const s = fs.createReadStream(image);
+	s.on('open', () => {
+		res.writeHead(200, { 'Content-Type': 'image/png' });
+		s.pipe(res);
+	});
+}

test/apps/export-no-subfolders/src/routes/boom/[a]/index.svelte

@@ -0,0 +1,20 @@
+<svelte:head>
+	<link rel='manifest' href='manifest.json'>
+</svelte:head>
+
+<h1>Great success!</h1>
+
+<a href="blog">blog</a>
+<!-- svelte-ignore a11y-invalid-attribute -->
+<a href="">empty anchor</a>
+<!-- svelte-ignore a11y-invalid-attribute -->
+<a href=''>empty anchor #2</a>
+<!-- svelte-ignore a11y-invalid-attribute -->
+<a href=>empty anchor #3</a>
+<!-- svelte-ignore a11y-invalid-attribute -->
+<a href= >empty anchor #4</a>
+<a href>empty anchor #5</a>
+<!-- svelte-ignore a11y-missing-attribute -->
+<a>empty anchor #6</a>
+<a href="boom">boom</a>
+<a href="test.pdf">pdf file</a>

test/apps/export-no-subfolders/src/routes/boom/index.svelte

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+const cwd = process.cwd();
+
+export function get(req, res, next) {
+
+	const { slug } = req.params;
+	const image = path.join(cwd, `/content/${slug}.pdf`);
+
+	const s = fs.createReadStream(image);
+	s.on('open', () => {
+		res.writeHead(200, { 'Content-Type': 'application/pdf' });
+		s.pipe(res);
+	});
+}

test/apps/export-no-subfolders/src/routes/img/[slug].png.js

@@ -0,0 +1,13 @@
+import sirv from 'sirv';
+import polka from 'polka';
+import * as sapper from '@sapper/server';
+
+import { start, dev } from '../../common.js';
+
+const app = polka()
+	.use(
+		sirv('static', { dev }),
+		sapper.middleware()
+	);
+
+start(app);