mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-13 11:35:28 +00:00
Compare commits
25 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8c07d9d2ac | ||
|
|
7bd684a80e | ||
|
|
cbb5e8755b | ||
|
|
7ef72dbb77 | ||
|
|
87ff9c2aeb | ||
|
|
2d1f535314 | ||
|
|
cd1b53b80d | ||
|
|
0a7be736c0 | ||
|
|
5ee53a98c6 | ||
|
|
0e8ed6612c | ||
|
|
5ec748b95d | ||
|
|
64b16715cd | ||
|
|
9ea5e5e251 | ||
|
|
68b78f56d6 | ||
|
|
68e93a8fa0 | ||
|
|
e377515867 | ||
|
|
99ae39b8a8 | ||
|
|
1b489f4687 | ||
|
|
91f2c6e49c | ||
|
|
f5e07e9f78 | ||
|
|
17297a9794 | ||
|
|
9ef4f33e38 | ||
|
|
30966ee7f2 | ||
|
|
ae90f774e1 | ||
|
|
0706b5f50a |
21
CHANGELOG.md
21
CHANGELOG.md
@@ -1,5 +1,26 @@
|
||||
# sapper changelog
|
||||
|
||||
## 0.20.3
|
||||
|
||||
* Inject `nonce` attribute if `res.locals.nonce` is present ([#424](https://github.com/sveltejs/sapper/pull/424))
|
||||
* Prevent service worker caching ([#428](https://github.com/sveltejs/sapper/pull/428))
|
||||
* Consistent caching for HTML responses ([#429](https://github.com/sveltejs/sapper/pull/429))
|
||||
|
||||
## 0.20.2
|
||||
|
||||
* Add `immutable` cache control header for hashed assets ([#425](https://github.com/sveltejs/sapper/pull/425))
|
||||
* Handle value-less query string params ([#426](https://github.com/sveltejs/sapper/issues/426))
|
||||
|
||||
## 0.20.1
|
||||
|
||||
* Update shimport
|
||||
|
||||
## 0.20.0
|
||||
|
||||
* Decode `req.params` and `req.query` ([#417](https://github.com/sveltejs/sapper/issues/417))
|
||||
* Decode URLs before writing files in `sapper export` ([#414](https://github.com/sveltejs/sapper/pull/414))
|
||||
* Generate server sourcemaps for Rollup apps in dev mode ([#418](https://github.com/sveltejs/sapper/pull/418))
|
||||
|
||||
## 0.19.3
|
||||
|
||||
* Better unicode route handling ([#347](https://github.com/sveltejs/sapper/issues/347))
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svelte:component this={child.component} {...child.props}/>
|
||||
28
package-lock.json
generated
28
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sapper",
|
||||
"version": "0.19.3",
|
||||
"version": "0.20.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -10,15 +10,6 @@
|
||||
"integrity": "sha1-MU+BaPUK5IoDLP2tX9tDb0ZKl6w=",
|
||||
"dev": true
|
||||
},
|
||||
"@types/blessed": {
|
||||
"version": "0.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/blessed/-/blessed-0.1.10.tgz",
|
||||
"integrity": "sha512-lCpkGnCq2lj9RBPwh/RH/ZJegYV6JdyyRHmURIW1DwMdtNhRRxYeHllqaMu8K6bDf6zhO7PpHsmEqlYMDPlmhw==",
|
||||
"requires": {
|
||||
"@types/events": "*",
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/estree": {
|
||||
"version": "0.0.39",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
|
||||
@@ -28,7 +19,8 @@
|
||||
"@types/events": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/events/-/events-1.2.0.tgz",
|
||||
"integrity": "sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA=="
|
||||
"integrity": "sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/glob": {
|
||||
"version": "5.0.35",
|
||||
@@ -65,7 +57,8 @@
|
||||
"@types/node": {
|
||||
"version": "10.9.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.4.tgz",
|
||||
"integrity": "sha512-fCHV45gS+m3hH17zgkgADUSi2RR1Vht6wOZ0jyHP8rjiQra9f+mIcgwPQHllmDocYOstIEbKlxbFDYlgrTPYqw=="
|
||||
"integrity": "sha512-fCHV45gS+m3hH17zgkgADUSi2RR1Vht6wOZ0jyHP8rjiQra9f+mIcgwPQHllmDocYOstIEbKlxbFDYlgrTPYqw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/rimraf": {
|
||||
"version": "2.0.2",
|
||||
@@ -1017,11 +1010,6 @@
|
||||
"integrity": "sha1-RqoXUftqL5PuXmibsQh9SxTGwgU=",
|
||||
"dev": true
|
||||
},
|
||||
"blessed": {
|
||||
"version": "0.1.81",
|
||||
"resolved": "https://registry.npmjs.org/blessed/-/blessed-0.1.81.tgz",
|
||||
"integrity": "sha1-+WLWh+wsNpVwrnGvhDJW5tDKESk="
|
||||
},
|
||||
"bluebird": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
|
||||
@@ -6299,9 +6287,9 @@
|
||||
}
|
||||
},
|
||||
"shimport": {
|
||||
"version": "0.0.10",
|
||||
"resolved": "https://registry.npmjs.org/shimport/-/shimport-0.0.10.tgz",
|
||||
"integrity": "sha512-3xPFDLmcLj87sx0OwA60qbloMQUsu6VGF97IG4RqxTf91sGeiaaXOPxM1PoQHbaTm4TOhH8zosokqLAZtuNGnA=="
|
||||
"version": "0.0.11",
|
||||
"resolved": "https://registry.npmjs.org/shimport/-/shimport-0.0.11.tgz",
|
||||
"integrity": "sha512-wRlG/wMuV/czrzJEWBUPjydU/Ve0kTrTH8wHLRjuY6S2BDB+qDDXkTY/WrNc/7t5jnd0LPVO1sRIE7Ga6uXTpw=="
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sapper",
|
||||
"version": "0.19.3",
|
||||
"version": "0.20.3",
|
||||
"description": "Military-grade apps, engineered by Svelte",
|
||||
"main": "dist/middleware.js",
|
||||
"bin": {
|
||||
@@ -19,10 +19,8 @@
|
||||
"test": "test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/blessed": "^0.1.10",
|
||||
"blessed": "^0.1.81",
|
||||
"html-minifier": "^3.5.16",
|
||||
"shimport": "^0.0.10",
|
||||
"shimport": "0.0.11",
|
||||
"source-map-support": "^0.5.6",
|
||||
"sourcemap-codec": "^1.4.1",
|
||||
"string-hash": "^1.1.3",
|
||||
|
||||
@@ -200,8 +200,6 @@ class Watcher extends EventEmitter {
|
||||
handle_result: (result: CompileResult) => {
|
||||
deferred.promise.then(() => {
|
||||
const restart = () => {
|
||||
this.emit('restart');
|
||||
|
||||
log = '';
|
||||
this.crashed = false;
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ async function execute(emitter: EventEmitter, opts: Opts) {
|
||||
|
||||
function save(path: string, status: number, type: string, body: string) {
|
||||
const { pathname } = resolve(origin, path);
|
||||
let file = pathname.slice(1);
|
||||
let file = decodeURIComponent(pathname.slice(1));
|
||||
|
||||
if (saved.has(file)) return;
|
||||
saved.add(file);
|
||||
|
||||
@@ -15,15 +15,13 @@ prog.command('dev')
|
||||
.option('--hot', 'Use hot module replacement (requires webpack)', true)
|
||||
.option('--live', 'Reload on changes if not using --hot', true)
|
||||
.option('--bundler', 'Specify a bundler (rollup or webpack)')
|
||||
.option('--stream', 'Stream logs, instead of boxing them', false)
|
||||
.action(async (opts: {
|
||||
port: number,
|
||||
open: boolean,
|
||||
'dev-port': number,
|
||||
live: boolean,
|
||||
hot: boolean,
|
||||
bundler?: string,
|
||||
stream: boolean
|
||||
bundler?: string
|
||||
}) => {
|
||||
const { dev } = await import('./cli/dev');
|
||||
dev(opts);
|
||||
|
||||
237
src/cli/dev.ts
237
src/cli/dev.ts
@@ -1,263 +1,80 @@
|
||||
import * as path from 'path';
|
||||
import colors from 'kleur';
|
||||
import * as child_process from 'child_process';
|
||||
import * as blessed from 'blessed';
|
||||
import prettyMs from 'pretty-ms';
|
||||
import { dev as _dev } from '../api/dev';
|
||||
import * as events from '../api/interfaces';
|
||||
|
||||
function boxed_output() {
|
||||
const screen = blessed.screen({
|
||||
smartCSR: true
|
||||
});
|
||||
|
||||
function box(opts) {
|
||||
opts = Object.assign({
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
scrollable: true,
|
||||
style: {
|
||||
scrollbar: {
|
||||
bg: 'black'
|
||||
}
|
||||
},
|
||||
scrollbar: {},
|
||||
input: true,
|
||||
mouse: true,
|
||||
keys: true,
|
||||
scrollOnInput: false
|
||||
}, opts);
|
||||
|
||||
return blessed.box(opts);
|
||||
}
|
||||
|
||||
const status_box = box({});
|
||||
const log_box = box({
|
||||
bottom: '0'
|
||||
});
|
||||
|
||||
let mouse_is_down = false;
|
||||
let dragging = false;
|
||||
let did_drag = false;
|
||||
|
||||
let divider_is_horizontal = true;
|
||||
|
||||
function update_split(x: number, y: number) {
|
||||
if (divider_is_horizontal) {
|
||||
horizontal_divider.top = y;
|
||||
status_box.width = log_box.width = '100%';
|
||||
status_box.height = y;
|
||||
log_box.height = screen.height - (y + 1);
|
||||
log_box.top = y + 1;
|
||||
log_box.left = 0;
|
||||
} else {
|
||||
vertical_divider.left = x;
|
||||
status_box.height = log_box.height = '100%';
|
||||
status_box.width = x;
|
||||
log_box.width = screen.width - (x + 1);
|
||||
log_box.left = x + 1;
|
||||
log_box.top = 0;
|
||||
}
|
||||
|
||||
screen.render();
|
||||
}
|
||||
|
||||
screen.on('mousedown', data => {
|
||||
if (mouse_is_down) {
|
||||
if (dragging) {
|
||||
update_split(data.x, data.y);
|
||||
did_drag = true;
|
||||
}
|
||||
} else {
|
||||
if (data.y === horizontal_divider.top) {
|
||||
dragging = true;
|
||||
}
|
||||
|
||||
mouse_is_down = true;
|
||||
}
|
||||
});
|
||||
|
||||
screen.on('mouseup', data => {
|
||||
mouse_is_down = false;
|
||||
dragging = false;
|
||||
did_drag = false;
|
||||
});
|
||||
|
||||
const horizontal_divider = blessed.line({
|
||||
top: '50%',
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
const vertical_divider = blessed.line({
|
||||
left: '50%',
|
||||
orientation: 'vertical'
|
||||
});
|
||||
|
||||
horizontal_divider.on('click', event => {
|
||||
if (!did_drag) {
|
||||
horizontal_divider.hide();
|
||||
vertical_divider.show();
|
||||
divider_is_horizontal = false;
|
||||
update_split(event.x, event.y);
|
||||
}
|
||||
});
|
||||
|
||||
vertical_divider.on('click', event => {
|
||||
if (!did_drag) {
|
||||
vertical_divider.hide();
|
||||
horizontal_divider.show();
|
||||
divider_is_horizontal = true;
|
||||
update_split(event.x, event.y);
|
||||
}
|
||||
});
|
||||
|
||||
vertical_divider.hide();
|
||||
|
||||
screen.append(status_box);
|
||||
screen.append(log_box);
|
||||
screen.append(horizontal_divider);
|
||||
screen.append(vertical_divider);
|
||||
|
||||
update_split(process.stdout.columns >> 1, process.stdout.rows >> 1);
|
||||
|
||||
screen.key(['escape', 'q', 'C-c'], function(ch, key) {
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
const append_log = (data: Buffer | string) => {
|
||||
log_box.setContent(log_box.content + data);
|
||||
screen.render();
|
||||
};
|
||||
|
||||
const append_status = (data: Buffer | string) => {
|
||||
status_box.setContent(status_box.content + data);
|
||||
screen.render();
|
||||
};
|
||||
|
||||
let first = true;
|
||||
|
||||
return {
|
||||
stdout: append_log,
|
||||
|
||||
stderr: append_log,
|
||||
|
||||
clear_logs: () => {
|
||||
let content = `${colors.inverse(` server log • ${new Date().toISOString()}\n`)} \n`;
|
||||
if (first) {
|
||||
content += colors.gray(`> Click/drag the divider to adjust the split\n\n`);
|
||||
first = false;
|
||||
}
|
||||
|
||||
log_box.setContent(content);
|
||||
screen.render();
|
||||
},
|
||||
|
||||
log: (line: string) => {
|
||||
append_status(line + '\n');
|
||||
},
|
||||
|
||||
append: append_status,
|
||||
|
||||
clear: () => {
|
||||
status_box.setContent(`${colors.inverse(` build log • ${new Date().toISOString()}\n`)} \n`);
|
||||
screen.render();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function streamed_output() {
|
||||
return {
|
||||
stdout: process.stdout.write.bind(process.stdout),
|
||||
|
||||
stderr: process.stderr.write.bind(process.stderr),
|
||||
|
||||
clear_logs: () => {},
|
||||
|
||||
log: (line: string) => {
|
||||
console.log(line);
|
||||
},
|
||||
|
||||
append: (data: Buffer | string) => {
|
||||
process.stdout.write(data);
|
||||
},
|
||||
|
||||
clear: () => {}
|
||||
};
|
||||
}
|
||||
|
||||
export function dev(opts: { port: number, open: boolean, bundler?: string, stream: boolean }) {
|
||||
const output = opts.stream
|
||||
? streamed_output()
|
||||
: boxed_output();
|
||||
|
||||
output.clear();
|
||||
|
||||
export function dev(opts: { port: number, open: boolean, bundler?: string }) {
|
||||
try {
|
||||
const watcher = _dev(opts);
|
||||
|
||||
let first = true;
|
||||
|
||||
watcher.on('ready', (event: events.ReadyEvent) => {
|
||||
output.log(colors.bold.cyan(`> Listening on http://localhost:${event.port}`));
|
||||
|
||||
if (first) {
|
||||
console.log(colors.bold.cyan(`> Listening on http://localhost:${event.port}`));
|
||||
if (opts.open) child_process.exec(`open http://localhost:${event.port}`);
|
||||
first = false;
|
||||
}
|
||||
});
|
||||
|
||||
watcher.on('restart', output.clear_logs);
|
||||
watcher.on('stdout', output.stdout);
|
||||
watcher.on('stderr', output.stderr);
|
||||
// TODO clear screen?
|
||||
|
||||
event.process.stdout.on('data', data => {
|
||||
process.stdout.write(data);
|
||||
});
|
||||
|
||||
event.process.stderr.on('data', data => {
|
||||
process.stderr.write(data);
|
||||
});
|
||||
});
|
||||
|
||||
watcher.on('invalid', (event: events.InvalidEvent) => {
|
||||
const changed = event.changed.map(filename => path.relative(process.cwd(), filename)).join(', ');
|
||||
|
||||
output.clear();
|
||||
output.log(`${colors.bold.cyan(changed)} changed. rebuilding...`);
|
||||
console.log(`\n${colors.bold.cyan(changed)} changed. rebuilding...`);
|
||||
});
|
||||
|
||||
watcher.on('error', (event: events.ErrorEvent) => {
|
||||
output.log(colors.red(`✗ ${event.type}`));
|
||||
output.log(colors.red(event.message));
|
||||
console.log(colors.red(`✗ ${event.type}`));
|
||||
console.log(colors.red(event.message));
|
||||
});
|
||||
|
||||
watcher.on('fatal', (event: events.FatalEvent) => {
|
||||
output.log(colors.bold.red(`> ${event.message}`));
|
||||
if (event.log) output.log(event.log);
|
||||
console.log(colors.bold.red(`> ${event.message}`));
|
||||
if (event.log) console.log(event.log);
|
||||
});
|
||||
|
||||
watcher.on('build', (event: events.BuildEvent) => {
|
||||
if (event.errors.length) {
|
||||
output.log(colors.bold.red(`✗ ${event.type}`));
|
||||
console.log(colors.bold.red(`✗ ${event.type}`));
|
||||
|
||||
event.errors.filter(e => !e.duplicate).forEach(error => {
|
||||
if (error.file) output.log(colors.bold(error.file));
|
||||
output.log(error.message);
|
||||
if (error.file) console.log(colors.bold(error.file));
|
||||
console.log(error.message);
|
||||
});
|
||||
|
||||
const hidden = event.errors.filter(e => e.duplicate).length;
|
||||
if (hidden > 0) {
|
||||
output.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
|
||||
console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
|
||||
}
|
||||
} else if (event.warnings.length) {
|
||||
output.log(colors.bold.yellow(`• ${event.type}`));
|
||||
console.log(colors.bold.yellow(`• ${event.type}`));
|
||||
|
||||
event.warnings.filter(e => !e.duplicate).forEach(warning => {
|
||||
if (warning.file) output.log(colors.bold(warning.file));
|
||||
output.log(warning.message);
|
||||
if (warning.file) console.log(colors.bold(warning.file));
|
||||
console.log(warning.message);
|
||||
});
|
||||
|
||||
const hidden = event.warnings.filter(e => e.duplicate).length;
|
||||
if (hidden > 0) {
|
||||
output.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
|
||||
console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
|
||||
}
|
||||
} else {
|
||||
output.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
|
||||
console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
output.log(colors.bold.red(`> ${err.message}`));
|
||||
console.log(colors.bold.red(`> ${err.message}`));
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
@@ -63,6 +63,8 @@ function generate_client(
|
||||
import root from '${get_file(path_to_routes, manifest_data.root)}';
|
||||
import error from '${posixify(`${path_to_routes}/_error.html`)}';
|
||||
|
||||
const d = decodeURIComponent;
|
||||
|
||||
${manifest_data.components.map(component => {
|
||||
const annotation = bundler === 'webpack'
|
||||
? `/* webpackChunkName: "${component.name}" */ `
|
||||
@@ -88,7 +90,7 @@ function generate_client(
|
||||
if (part === null) return 'null';
|
||||
|
||||
if (part.params.length > 0) {
|
||||
const props = part.params.map((param, i) => `${param}: match[${i + 1}]`);
|
||||
const props = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
|
||||
return `{ component: ${part.component.name}, params: match => ({ ${props.join(', ')} }) }`;
|
||||
}
|
||||
|
||||
@@ -138,6 +140,8 @@ function generate_server(
|
||||
// This file is generated by Sapper — do not edit it!
|
||||
${imports.join('\n')}
|
||||
|
||||
const d = decodeURIComponent;
|
||||
|
||||
export const manifest = {
|
||||
server_routes: [
|
||||
${manifest_data.server_routes.map(route => `{
|
||||
@@ -145,7 +149,7 @@ function generate_server(
|
||||
pattern: ${route.pattern},
|
||||
handlers: ${route.name},
|
||||
params: ${route.params.length > 0
|
||||
? `match => ({ ${route.params.map((param, i) => `${param}: match[${i + 1}]`).join(', ')} })`
|
||||
? `match => ({ ${route.params.map((param, i) => `${param}: d(match[${i + 1}])`).join(', ')} })`
|
||||
: `() => ({})`}
|
||||
}`).join(',\n\n\t\t\t\t')}
|
||||
],
|
||||
@@ -165,7 +169,7 @@ function generate_server(
|
||||
];
|
||||
|
||||
if (part.params.length > 0) {
|
||||
const params = part.params.map((param, i) => `${param}: match[${i + 1}]`);
|
||||
const params = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
|
||||
props.push(`params: match => ({ ${params.join(', ')} })`);
|
||||
}
|
||||
|
||||
|
||||
@@ -136,22 +136,22 @@ export default function middleware(opts: {
|
||||
|
||||
fs.existsSync(path.join(output, 'index.html')) && serve({
|
||||
pathname: '/index.html',
|
||||
cache_control: 'max-age=600'
|
||||
cache_control: dev() ? 'no-cache' : 'max-age=600'
|
||||
}),
|
||||
|
||||
fs.existsSync(path.join(output, 'service-worker.js')) && serve({
|
||||
pathname: '/service-worker.js',
|
||||
cache_control: 'max-age=600'
|
||||
cache_control: 'no-cache, no-store, must-revalidate'
|
||||
}),
|
||||
|
||||
fs.existsSync(path.join(output, 'service-worker.js.map')) && serve({
|
||||
pathname: '/service-worker.js.map',
|
||||
cache_control: 'max-age=600'
|
||||
cache_control: 'no-cache, no-store, must-revalidate'
|
||||
}),
|
||||
|
||||
serve({
|
||||
prefix: '/client/',
|
||||
cache_control: dev() ? 'no-cache' : 'max-age=31536000'
|
||||
cache_control: dev() ? 'no-cache' : 'max-age=31536000, immutable'
|
||||
}),
|
||||
|
||||
get_server_route_handler(manifest.server_routes),
|
||||
@@ -312,6 +312,7 @@ function get_page_handler(
|
||||
} = get_build_info();
|
||||
|
||||
res.setHeader('Content-Type', 'text/html');
|
||||
res.setHeader('Cache-Control', dev() ? 'no-cache' : 'max-age=600');
|
||||
|
||||
// preload main.js and current route
|
||||
// TODO detect other stuff we can preload? images, CSS, fonts?
|
||||
@@ -524,9 +525,12 @@ function get_page_handler(
|
||||
styles = (css && css.code ? `<style>${css.code}</style>` : '');
|
||||
}
|
||||
|
||||
// users can set a CSP nonce using res.locals.nonce
|
||||
const nonce_attr = (res.locals && res.locals.nonce) ? ` nonce="${res.locals.nonce}"` : '';
|
||||
|
||||
const body = template()
|
||||
.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
|
||||
.replace('%sapper.scripts%', () => `<script>${script}</script>`)
|
||||
.replace('%sapper.scripts%', () => `<script${nonce_attr}>${script}</script>`)
|
||||
.replace('%sapper.html%', () => html)
|
||||
.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
|
||||
.replace('%sapper.styles%', () => styles);
|
||||
|
||||
@@ -30,7 +30,8 @@ export default {
|
||||
output: () => {
|
||||
return {
|
||||
dir: locations.dest(),
|
||||
format: 'cjs'
|
||||
format: 'cjs',
|
||||
sourcemap: dev()
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
@@ -66,8 +66,8 @@ function select_route(url: URL): Target {
|
||||
const query: Record<string, string | true> = {};
|
||||
if (url.search.length > 0) {
|
||||
url.search.slice(1).split('&').forEach(searchParam => {
|
||||
const [, key, value] = /([^=]+)=(.*)/.exec(searchParam);
|
||||
query[key] = value || true;
|
||||
const [, key, value] = /([^=]+)(?:=(.*))?/.exec(searchParam);
|
||||
query[key] = decodeURIComponent((value || '').replace(/\+/g, ' '));
|
||||
});
|
||||
}
|
||||
return { url, path, page, match, query };
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { init, prefetchRoutes } from '../../../runtime.js';
|
||||
import { init, goto, prefetchRoutes } from '../../../runtime.js';
|
||||
import { Store } from 'svelte/store.js';
|
||||
import { manifest } from './manifest/client.js';
|
||||
|
||||
@@ -10,4 +10,5 @@ window.init = () => {
|
||||
});
|
||||
};
|
||||
|
||||
window.prefetchRoutes = prefetchRoutes;
|
||||
window.prefetchRoutes = prefetchRoutes;
|
||||
window.goto = goto;
|
||||
@@ -106,6 +106,14 @@ const posts = [
|
||||
<p>If you didn't have adult onset diabetes, I wouldn't mind giving you a little sugar. Everybody dance NOW. And the soup of the day is bread. Great, now I'm gonna smell to high heaven like a tuna melt!</p>
|
||||
<p>That's how Tony Wonder lost a nut. She calls it a Mayonegg. Go ahead, touch the Cornballer. There's a new daddy in town. A discipline daddy.</p>
|
||||
`
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Encödïng test',
|
||||
slug: 'encödïng-test',
|
||||
html: `
|
||||
<p>It works</p>
|
||||
`
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
12
test/app/routes/echo/page/[slug].html
Normal file
12
test/app/routes/echo/page/[slug].html
Normal file
@@ -0,0 +1,12 @@
|
||||
<h1>{slug} ({message})</h1>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload({ params, query }) {
|
||||
return {
|
||||
slug: params.slug,
|
||||
message: query.message
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
15
test/app/routes/echo/server-route/[slug].js
Normal file
15
test/app/routes/echo/server-route/[slug].js
Normal file
@@ -0,0 +1,15 @@
|
||||
export function get(req, res) {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'text/html'
|
||||
});
|
||||
|
||||
res.end(`
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
<body>
|
||||
<h1>${req.params.slug}</h1>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
}
|
||||
@@ -15,6 +15,8 @@
|
||||
<a href='credentials?creds=include'>credentials</a>
|
||||
<a rel=prefetch class='{page === "blog" ? "selected" : ""}' href='blog'>blog</a>
|
||||
<a href="const">const</a>
|
||||
<a href="echo/page/encöded?message=hëllö+wörld">echo/page/encöded?message=hëllö+wörld</a>
|
||||
<a href="echo/page/empty?message">echo/page/empty?message</a>
|
||||
|
||||
<div class='hydrate-test'></div>
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ const Nightmare = require('nightmare');
|
||||
const walkSync = require('walk-sync');
|
||||
const rimraf = require('rimraf');
|
||||
const ports = require('port-authority');
|
||||
const fetch = require('node-fetch');
|
||||
|
||||
Nightmare.action('page', {
|
||||
title(done) {
|
||||
@@ -93,6 +94,7 @@ function testExport({ basepath = '' }) {
|
||||
'blog/how-to-use-sapper/index.html',
|
||||
'blog/what-is-sapper/index.html',
|
||||
'blog/why-the-name/index.html',
|
||||
'blog/encödïng-test/index.html',
|
||||
|
||||
'blog.json',
|
||||
'blog/a-very-long-post.json',
|
||||
@@ -101,6 +103,7 @@ function testExport({ basepath = '' }) {
|
||||
'blog/how-to-use-sapper.json',
|
||||
'blog/what-is-sapper.json',
|
||||
'blog/why-the-name.json',
|
||||
'blog/encödïng-test.json',
|
||||
|
||||
'favicon.png',
|
||||
'global.css',
|
||||
@@ -751,18 +754,67 @@ function run({ mode, basepath = '' }) {
|
||||
assert.equal(title, 'reserved words are okay as routes');
|
||||
});
|
||||
});
|
||||
|
||||
it('encodes req.params and req.query for server-rendered pages', () => {
|
||||
return nightmare.goto(`${base}/echo/page/encöded?message=hëllö+wörld`)
|
||||
.page.title()
|
||||
.then(title => {
|
||||
assert.equal(title, 'encöded (hëllö wörld)');
|
||||
});
|
||||
});
|
||||
|
||||
it('encodes req.params and req.query for client-rendered pages', () => {
|
||||
return nightmare.goto(base).init()
|
||||
.click('a[href="echo/page/encöded?message=hëllö+wörld"]')
|
||||
.wait(100)
|
||||
.page.title()
|
||||
.then(title => {
|
||||
assert.equal(title, 'encöded (hëllö wörld)');
|
||||
});
|
||||
});
|
||||
|
||||
it('accepts value-less query string parameter on server', () => {
|
||||
return nightmare.goto(`${base}/echo/page/empty?message`)
|
||||
.page.title()
|
||||
.then(title => {
|
||||
assert.equal(title, 'empty ()');
|
||||
});
|
||||
});
|
||||
|
||||
it('accepts value-less query string parameter on client', () => {
|
||||
return nightmare.goto(base).init()
|
||||
.click('a[href="echo/page/empty?message"]')
|
||||
.wait(100)
|
||||
.page.title()
|
||||
.then(title => {
|
||||
assert.equal(title, 'empty ()');
|
||||
});
|
||||
});
|
||||
|
||||
it('encodes req.params for server routes', () => {
|
||||
return nightmare.goto(`${base}/echo/server-route/encöded`)
|
||||
.page.title()
|
||||
.then(title => {
|
||||
assert.equal(title, 'encöded');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('headers', () => {
|
||||
it('sets Content-Type and Link...preload headers', () => {
|
||||
return capture(() => nightmare.goto(base)).then(requests => {
|
||||
const { headers } = requests[0];
|
||||
it('sets Content-Type, Link...preload, and Cache-Control headers', () => {
|
||||
return capture(() => fetch(base)).then(responses => {
|
||||
const { headers } = responses[0];
|
||||
|
||||
assert.equal(
|
||||
headers['content-type'],
|
||||
'text/html'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
headers['cache-control'],
|
||||
'max-age=600'
|
||||
);
|
||||
|
||||
const str = ['main', '.+?\\.\\d+']
|
||||
.map(file => {
|
||||
return `<${basepath}/client/[^/]+/${file}\\.js>;rel="preload";as="script"`;
|
||||
|
||||
Reference in New Issue
Block a user