mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-13 19:45:26 +00:00
Compare commits
59 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4315a46ff2 | ||
|
|
0fb5827968 | ||
|
|
611017fd28 | ||
|
|
72b265a35f | ||
|
|
e0d533f2ea | ||
|
|
dba83641e4 | ||
|
|
14e5c8e761 | ||
|
|
cbbf4a95db | ||
|
|
55b7ffd2ed | ||
|
|
9f4d4e70de | ||
|
|
deef1bbfcf | ||
|
|
17b0fc0d0c | ||
|
|
3c44c511e4 | ||
|
|
7cf1b9613a | ||
|
|
99e5a9601c | ||
|
|
4c9c1dccf5 | ||
|
|
2cddd5afa0 | ||
|
|
8c6a0c4773 | ||
|
|
af5063552d | ||
|
|
419d154794 | ||
|
|
abda059be5 | ||
|
|
444908cac5 | ||
|
|
c6da26e1a0 | ||
|
|
aad87857ce | ||
|
|
666c113297 | ||
|
|
84a58f34a0 | ||
|
|
75f5b5c721 | ||
|
|
a176a3b79b | ||
|
|
1627a5767a | ||
|
|
6ff3a9e9ab | ||
|
|
3ce2bd30f9 | ||
|
|
de4f99807f | ||
|
|
eae8351f77 | ||
|
|
d386308301 | ||
|
|
13afbc84d7 | ||
|
|
31327b3780 | ||
|
|
81f483d7b8 | ||
|
|
1bcf20511b | ||
|
|
003fa8ab2c | ||
|
|
d1fcd07c92 | ||
|
|
47a6d6f662 | ||
|
|
4b2b6440d0 | ||
|
|
fc855f30f8 | ||
|
|
4a75fff4ec | ||
|
|
7b7b695938 | ||
|
|
2fca2e295f | ||
|
|
eae991d369 | ||
|
|
c2b393d3fd | ||
|
|
566addd406 | ||
|
|
3d77dacbd6 | ||
|
|
51b4f9cbbf | ||
|
|
1d611be83e | ||
|
|
1782904994 | ||
|
|
e3ddbfc181 | ||
|
|
8e3830b646 | ||
|
|
b28cdff233 | ||
|
|
7f586ff1a3 | ||
|
|
731d4f535c | ||
|
|
f8c731ca21 |
@@ -18,4 +18,4 @@ addons:
|
||||
install:
|
||||
- export DISPLAY=':99.0'
|
||||
- Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
|
||||
- npm install
|
||||
- npm ci || npm i
|
||||
|
||||
41
CHANGELOG.md
41
CHANGELOG.md
@@ -1,5 +1,46 @@
|
||||
# sapper changelog
|
||||
|
||||
## 0.16.1
|
||||
|
||||
* Fix file watching regression in previous version
|
||||
|
||||
## 0.16.0
|
||||
|
||||
* Slim down installed package ([#363](https://github.com/sveltejs/sapper/pull/363))
|
||||
|
||||
## 0.15.8
|
||||
|
||||
* Only set `preloading: true` on navigation, not prefetch ([#352](https://github.com/sveltejs/sapper/issues/352))
|
||||
* Provide fallback for missing preload errors ([#361](https://github.com/sveltejs/sapper/pull/361))
|
||||
|
||||
## 0.15.7
|
||||
|
||||
* Strip leading slash from redirects ([#291](https://github.com/sveltejs/sapper/issues/291))
|
||||
* Pass `(req, res)` to store getter ([#344](https://github.com/sveltejs/sapper/issues/344))
|
||||
|
||||
## 0.15.6
|
||||
|
||||
* Fix exporting with custom basepath ([#342](https://github.com/sveltejs/sapper/pull/342))
|
||||
|
||||
## 0.15.5
|
||||
|
||||
* Faster `export` with more explanatory output ([#335](https://github.com/sveltejs/sapper/pull/335))
|
||||
* Only blur `activeElement` if it exists ([#332](https://github.com/sveltejs/sapper/issues/332))
|
||||
* Don't emit `client_info.json` or `server_info.json` ([#318](https://github.com/sveltejs/sapper/issues/318))
|
||||
|
||||
## 0.15.4
|
||||
|
||||
* Add `ignore` option ([#326](https://github.com/sveltejs/sapper/pull/326))
|
||||
|
||||
## 0.15.3
|
||||
|
||||
* Crawl pages in parallel when exporting ([#329](https://github.com/sveltejs/sapper/pull/329))
|
||||
* Don't minify inline JS when exporting ([#328](https://github.com/sveltejs/sapper/pull/328))
|
||||
|
||||
## 0.15.2
|
||||
|
||||
* Collapse component chains where no intermediate layout component is specified ([#312](https://github.com/sveltejs/sapper/issues/312))
|
||||
|
||||
## 0.15.1
|
||||
|
||||
* Prevent confusing error when no root layout is specified
|
||||
|
||||
38
README.md
38
README.md
@@ -31,6 +31,44 @@ npm run build
|
||||
npm start
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/sapper/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out!
|
||||
|
||||
To install and work on Sapper locally:
|
||||
|
||||
```bash
|
||||
git clone git@github.com:sveltejs/sapper.git
|
||||
cd sapper
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Linking to a Live Project
|
||||
|
||||
You can make changes locally to Sapper and test it against a local Sapper project. For a quick project that takes almost no setup, use the default [sapper-template](https://github.com/sveltejs/sapper-template) project. Instruction on setup are found in that project repository.
|
||||
|
||||
To link Sapper to your project, from the root of your local Sapper git checkout:
|
||||
|
||||
```bash
|
||||
cd sapper
|
||||
npm link
|
||||
```
|
||||
|
||||
Then, to link from `sapper-template` (or any other given project):
|
||||
|
||||
```bash
|
||||
cd sapper-template
|
||||
npm link sapper
|
||||
```
|
||||
|
||||
You should be good to test changes locally.
|
||||
|
||||
### Running Tests
|
||||
|
||||
```bash
|
||||
npm run test
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ environment:
|
||||
|
||||
install:
|
||||
- ps: Install-Product node $env:nodejs_version
|
||||
- npm install
|
||||
- npm ci
|
||||
|
||||
test_script:
|
||||
- node --version && npm --version
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
--require source-map-support/register
|
||||
--require ts-node/register
|
||||
--recursive
|
||||
test/unit/*/*.js
|
||||
test/unit/*/*.ts
|
||||
test/common/test.js
|
||||
7200
package-lock.json
generated
Normal file
7200
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
package.json
43
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sapper",
|
||||
"version": "0.15.1",
|
||||
"version": "0.16.1",
|
||||
"description": "Military-grade apps, engineered by Svelte",
|
||||
"main": "dist/middleware.ts.js",
|
||||
"bin": {
|
||||
@@ -19,50 +19,53 @@
|
||||
"test": "test"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-colors": "^2.0.1",
|
||||
"cheerio": "^1.0.0-rc.2",
|
||||
"chokidar": "^2.0.3",
|
||||
"cookie": "^0.3.1",
|
||||
"devalue": "^1.0.1",
|
||||
"glob": "^7.1.2",
|
||||
"chokidar": "^2.0.4",
|
||||
"html-minifier": "^3.5.16",
|
||||
"mkdirp": "^0.5.1",
|
||||
"node-fetch": "^2.1.1",
|
||||
"port-authority": "^1.0.2",
|
||||
"pretty-bytes": "^5.0.0",
|
||||
"pretty-ms": "^3.1.0",
|
||||
"require-relative": "^0.8.7",
|
||||
"rimraf": "^2.6.2",
|
||||
"sade": "^1.4.1",
|
||||
"sander": "^0.6.0",
|
||||
"source-map-support": "^0.5.6",
|
||||
"tslib": "^1.9.1",
|
||||
"url-parse": "^1.2.0",
|
||||
"webpack-format-messages": "^2.0.1"
|
||||
"tslib": "^1.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/glob": "^5.0.34",
|
||||
"@types/mkdirp": "^0.5.2",
|
||||
"@types/mocha": "^5.2.5",
|
||||
"@types/node": "^10.7.1",
|
||||
"@types/rimraf": "^2.0.2",
|
||||
"compression": "^1.7.1",
|
||||
"cookie": "^0.3.1",
|
||||
"devalue": "^1.0.4",
|
||||
"eslint": "^4.13.1",
|
||||
"eslint-plugin-import": "^2.12.0",
|
||||
"express": "^4.16.3",
|
||||
"kleur": "^2.0.1",
|
||||
"mkdirp": "^0.5.1",
|
||||
"mocha": "^5.2.0",
|
||||
"nightmare": "^3.0.0",
|
||||
"node-fetch": "^2.1.1",
|
||||
"npm-run-all": "^4.1.3",
|
||||
"polka": "^0.4.0",
|
||||
"port-authority": "^1.0.5",
|
||||
"pretty-bytes": "^5.0.0",
|
||||
"pretty-ms": "^3.1.0",
|
||||
"require-relative": "^0.8.7",
|
||||
"rimraf": "^2.6.2",
|
||||
"rollup": "^0.59.2",
|
||||
"rollup-plugin-commonjs": "^9.1.3",
|
||||
"rollup-plugin-json": "^3.0.0",
|
||||
"rollup-plugin-node-resolve": "^3.3.0",
|
||||
"rollup-plugin-string": "^2.0.2",
|
||||
"rollup-plugin-typescript": "^0.8.1",
|
||||
"sade": "^1.4.1",
|
||||
"sander": "^0.6.0",
|
||||
"serve-static": "^1.13.2",
|
||||
"svelte": "^2.6.3",
|
||||
"svelte-loader": "^2.9.0",
|
||||
"tiny-glob": "^0.2.2",
|
||||
"ts-node": "^7.0.1",
|
||||
"typescript": "^2.8.3",
|
||||
"url-parse": "^1.2.0",
|
||||
"walk-sync": "^0.3.2",
|
||||
"webpack": "^4.8.3"
|
||||
"webpack": "^4.8.3",
|
||||
"webpack-format-messages": "^2.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"cy:open": "cypress open",
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import typescript from 'rollup-plugin-typescript';
|
||||
import string from 'rollup-plugin-string';
|
||||
import json from 'rollup-plugin-json';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import pkg from './package.json';
|
||||
|
||||
@@ -44,6 +45,7 @@ export default [
|
||||
include: '**/*.md'
|
||||
}),
|
||||
json(),
|
||||
resolve(),
|
||||
commonjs(),
|
||||
typescript({
|
||||
typescript: require('typescript')
|
||||
|
||||
@@ -3,9 +3,8 @@ import * as path from 'path';
|
||||
import mkdirp from 'mkdirp';
|
||||
import rimraf from 'rimraf';
|
||||
import { EventEmitter } from 'events';
|
||||
import { minify_html } from './utils/minify_html';
|
||||
import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core'
|
||||
import { locations } from '../config';
|
||||
import minify_html from './utils/minify_html';
|
||||
import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
|
||||
import * as events from './interfaces';
|
||||
|
||||
export function build(opts: {}) {
|
||||
@@ -62,7 +61,6 @@ async function execute(emitter: EventEmitter, {
|
||||
});
|
||||
|
||||
const client_info = client_stats.toJson();
|
||||
fs.writeFileSync(path.join(dest, 'client_info.json'), JSON.stringify(client_info));
|
||||
fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(client_info.assetsByChunkName));
|
||||
|
||||
const server_stats = await compile(server);
|
||||
|
||||
@@ -9,6 +9,7 @@ import format_messages from 'webpack-format-messages';
|
||||
import { locations } from '../config';
|
||||
import { EventEmitter } from 'events';
|
||||
import { create_routes, create_main_manifests, create_compilers, create_serviceworker_manifest } from '../core';
|
||||
import Deferred from './utils/Deferred';
|
||||
import * as events from './interfaces';
|
||||
|
||||
export function dev(opts) {
|
||||
@@ -168,8 +169,6 @@ class Watcher extends EventEmitter {
|
||||
},
|
||||
|
||||
result: info => {
|
||||
fs.writeFileSync(path.join(dest, 'server_info.json'), JSON.stringify(info, null, ' '));
|
||||
|
||||
this.deferreds.client.promise.then(() => {
|
||||
const restart = () => {
|
||||
log = '';
|
||||
@@ -252,7 +251,6 @@ class Watcher extends EventEmitter {
|
||||
},
|
||||
|
||||
result: info => {
|
||||
fs.writeFileSync(path.join(dest, 'client_info.json'), JSON.stringify(info));
|
||||
fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(info.assetsByChunkName, null, ' '));
|
||||
this.deferreds.client.fulfil();
|
||||
|
||||
@@ -401,19 +399,6 @@ function mungeWebpackError(message: string, duplicate: boolean) {
|
||||
};
|
||||
}
|
||||
|
||||
class Deferred {
|
||||
promise: Promise<any>;
|
||||
fulfil: (value?: any) => void;
|
||||
reject: (error: Error) => void;
|
||||
|
||||
constructor() {
|
||||
this.promise = new Promise((fulfil, reject) => {
|
||||
this.fulfil = fulfil;
|
||||
this.reject = reject;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const INTERVAL = 10000;
|
||||
|
||||
class DevServer {
|
||||
@@ -469,19 +454,24 @@ class DevServer {
|
||||
function noop() {}
|
||||
|
||||
function watch_files(pattern: string, events: string[], callback: () => void) {
|
||||
const chokidar = require('chokidar');
|
||||
let watcher;
|
||||
let closed = false;
|
||||
|
||||
const watcher = chokidar.watch(pattern, {
|
||||
persistent: true,
|
||||
ignoreInitial: true,
|
||||
disableGlobbing: true
|
||||
});
|
||||
import('chokidar').then((chokidar) => {
|
||||
if (closed) return;
|
||||
|
||||
events.forEach(event => {
|
||||
watcher.on(event, callback);
|
||||
watcher = chokidar.watch(pattern, {
|
||||
persistent: true,
|
||||
ignoreInitial: true,
|
||||
disableGlobbing: true
|
||||
});
|
||||
|
||||
events.forEach(event => {
|
||||
watcher.on(event, callback);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
close: () => watcher.close()
|
||||
close: () => watcher && watcher.close()
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import * as child_process from 'child_process';
|
||||
import * as path from 'path';
|
||||
import * as sander from 'sander';
|
||||
import cheerio from 'cheerio';
|
||||
import URL from 'url-parse';
|
||||
import fetch from 'node-fetch';
|
||||
import * as ports from 'port-authority';
|
||||
import { EventEmitter } from 'events';
|
||||
import { minify_html } from './utils/minify_html';
|
||||
import { locations } from '../config';
|
||||
import clean_html from './utils/clean_html';
|
||||
import minify_html from './utils/minify_html';
|
||||
import Deferred from './utils/Deferred';
|
||||
import * as events from './interfaces';
|
||||
|
||||
export function exporter(opts: {}) {
|
||||
@@ -51,6 +51,11 @@ async function execute(emitter: EventEmitter, {
|
||||
const port = await ports.find(3000);
|
||||
|
||||
const origin = `http://localhost:${port}`;
|
||||
const root = new URL(basepath || '', origin);
|
||||
|
||||
emitter.emit('info', {
|
||||
message: `Crawling ${root.href}`
|
||||
});
|
||||
|
||||
const proc = child_process.fork(path.resolve(`${build}/server.js`), [], {
|
||||
cwd: process.cwd(),
|
||||
@@ -64,11 +69,23 @@ async function execute(emitter: EventEmitter, {
|
||||
|
||||
const seen = new Set();
|
||||
const saved = new Set();
|
||||
const deferreds = new Map();
|
||||
|
||||
function get_deferred(pathname: string) {
|
||||
pathname = pathname.replace(root.pathname, '');
|
||||
|
||||
if (!deferreds.has(pathname)) {
|
||||
deferreds.set(pathname, new Deferred());
|
||||
}
|
||||
|
||||
return deferreds.get(pathname);
|
||||
}
|
||||
|
||||
proc.on('message', message => {
|
||||
if (!message.__sapper__ || message.event !== 'file') return;
|
||||
|
||||
let file = new URL(message.url, origin).pathname.slice(1);
|
||||
const pathname = new URL(message.url, origin).pathname;
|
||||
let file = pathname.slice(1);
|
||||
let { body } = message;
|
||||
|
||||
if (saved.has(file)) return;
|
||||
@@ -83,49 +100,66 @@ async function execute(emitter: EventEmitter, {
|
||||
|
||||
emitter.emit('file', <events.FileEvent>{
|
||||
file,
|
||||
size: body.length
|
||||
size: body.length,
|
||||
status: message.status
|
||||
});
|
||||
|
||||
sander.writeFileSync(export_dir, file, body);
|
||||
|
||||
get_deferred(pathname).fulfil();
|
||||
});
|
||||
|
||||
async function handle(url: URL) {
|
||||
const pathname = (url.pathname.replace(root.pathname, '') || '/');
|
||||
|
||||
if (seen.has(pathname)) return;
|
||||
seen.add(pathname);
|
||||
|
||||
const deferred = get_deferred(pathname);
|
||||
|
||||
const r = await fetch(url.href);
|
||||
const range = ~~(r.status / 100);
|
||||
|
||||
if (range >= 4) {
|
||||
emitter.emit('failure', <events.FailureEvent>{
|
||||
status: r.status,
|
||||
pathname: url.pathname
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (range === 2) {
|
||||
if (r.headers.get('Content-Type') === 'text/html') {
|
||||
const body = await r.text();
|
||||
const $ = cheerio.load(body);
|
||||
const urls: URL[] = [];
|
||||
|
||||
const base = new URL($('base').attr('href') || '/', url.href);
|
||||
const cleaned = clean_html(body);
|
||||
|
||||
$('a[href]').each((i: number, $a) => {
|
||||
const url = new URL($a.attribs.href, base.href);
|
||||
const base_match = /<base ([\s\S]+?)>/m.exec(cleaned);
|
||||
const base_href = base_match && get_href(base_match[1]);
|
||||
const base = new URL(base_href || '/', url.href);
|
||||
|
||||
if (url.origin === origin && !seen.has(url.pathname)) {
|
||||
seen.add(url.pathname);
|
||||
urls.push(url);
|
||||
let match;
|
||||
let pattern = /<a ([\s\S]+?)>/gm;
|
||||
|
||||
while (match = pattern.exec(cleaned)) {
|
||||
const attrs = match[1];
|
||||
const href = get_href(attrs);
|
||||
|
||||
if (href) {
|
||||
const url = new URL(href, base.href);
|
||||
if (url.origin === origin) urls.push(url);
|
||||
}
|
||||
});
|
||||
|
||||
for (const url of urls) {
|
||||
await handle(url);
|
||||
}
|
||||
|
||||
await Promise.all(urls.map(handle));
|
||||
}
|
||||
}
|
||||
|
||||
await deferred.promise;
|
||||
}
|
||||
|
||||
return ports.wait(port)
|
||||
.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
|
||||
.then(() => {
|
||||
// TODO all static routes
|
||||
return handle(root);
|
||||
})
|
||||
.then(() => proc.kill());
|
||||
}
|
||||
|
||||
function get_href(attrs: string) {
|
||||
const match = /href\s*=\s*(?:"(.+?)"|'(.+?)'|([^\s>]+))/.exec(attrs);
|
||||
return match[1] || match[2] || match[3];
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import * as glob from 'glob';
|
||||
import { locations } from '../config';
|
||||
import { create_routes } from '../core';
|
||||
|
||||
|
||||
12
src/api/utils/Deferred.ts
Normal file
12
src/api/utils/Deferred.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
export default class Deferred {
|
||||
promise: Promise<any>;
|
||||
fulfil: (value?: any) => void;
|
||||
reject: (error: Error) => void;
|
||||
|
||||
constructor() {
|
||||
this.promise = new Promise((fulfil, reject) => {
|
||||
this.fulfil = fulfil;
|
||||
this.reject = reject;
|
||||
});
|
||||
}
|
||||
}
|
||||
7
src/api/utils/clean_html.ts
Normal file
7
src/api/utils/clean_html.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function clean_html(html: string) {
|
||||
return html
|
||||
.replace(/<!\[CDATA\[[\s\S]*?\]\]>/gm, '')
|
||||
.replace(/(<script[\s\S]*?>)[\s\S]*?<\/script>/gm, '$1</' + 'script>')
|
||||
.replace(/(<style[\s\S]*?>)[\s\S]*?<\/style>/gm, '$1</' + 'style>')
|
||||
.replace(/<!--[\s\S]*?-->/gm, '');
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { minify } from 'html-minifier';
|
||||
|
||||
export function minify_html(html: string) {
|
||||
export default function minify_html(html: string) {
|
||||
return minify(html, {
|
||||
collapseBooleanAttributes: true,
|
||||
collapseWhitespace: true,
|
||||
@@ -8,7 +8,7 @@ export function minify_html(html: string) {
|
||||
decodeEntities: true,
|
||||
html5: true,
|
||||
minifyCSS: true,
|
||||
minifyJS: true,
|
||||
minifyJS: false,
|
||||
removeAttributeQuotes: true,
|
||||
removeComments: true,
|
||||
removeOptionalTags: true,
|
||||
|
||||
22
src/cli.ts
22
src/cli.ts
@@ -1,11 +1,8 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as child_process from 'child_process';
|
||||
import sade from 'sade';
|
||||
import * as colors from 'ansi-colors';
|
||||
import colors from 'kleur';
|
||||
import prettyMs from 'pretty-ms';
|
||||
// import upgrade from './cli/upgrade';
|
||||
import * as ports from 'port-authority';
|
||||
import * as pkg from '../package.json';
|
||||
|
||||
const prog = sade('sapper').version(pkg.version);
|
||||
@@ -65,19 +62,22 @@ prog.command('start [dir]')
|
||||
|
||||
prog.command('export [dest]')
|
||||
.describe('Export your app as static files (if possible)')
|
||||
.option('--build', '(Re)build app before exporting', true)
|
||||
.option('--build-dir', 'Specify a custom temporary build directory', '.sapper/prod')
|
||||
.option('--basepath', 'Specify a base path')
|
||||
.action(async (dest = 'export', opts: { basepath?: string }) => {
|
||||
console.log(`> Building...`);
|
||||
|
||||
.action(async (dest = 'export', opts: { build: boolean, 'build-dir': string, basepath?: string }) => {
|
||||
process.env.NODE_ENV = 'production';
|
||||
process.env.SAPPER_DEST = '.sapper/.export';
|
||||
process.env.SAPPER_DEST = opts['build-dir'];
|
||||
|
||||
const start = Date.now();
|
||||
|
||||
try {
|
||||
const { build } = await import('./cli/build');
|
||||
await build();
|
||||
console.error(`\n> Built in ${elapsed(start)}. Crawling site...`);
|
||||
if (opts.build) {
|
||||
console.log(`> Building...`);
|
||||
const { build } = await import('./cli/build');
|
||||
await build();
|
||||
console.error(`\n> Built in ${elapsed(start)}`);
|
||||
}
|
||||
|
||||
const { exporter } = await import('./cli/export');
|
||||
await exporter(dest, opts);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { build as _build } from '../api/build';
|
||||
import * as colors from 'ansi-colors';
|
||||
import colors from 'kleur';
|
||||
import { locations } from '../config';
|
||||
|
||||
export function build() {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as path from 'path';
|
||||
import * as colors from 'ansi-colors';
|
||||
import colors from 'kleur';
|
||||
import * as child_process from 'child_process';
|
||||
import prettyMs from 'pretty-ms';
|
||||
import { dev as _dev } from '../api/dev';
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import { exporter as _exporter } from '../api/export';
|
||||
import * as colors from 'ansi-colors';
|
||||
import colors from 'kleur';
|
||||
import prettyBytes from 'pretty-bytes';
|
||||
import { locations } from '../config';
|
||||
|
||||
function left_pad(str: string, len: number) {
|
||||
while (str.length < len) str = ` ${str}`;
|
||||
return str;
|
||||
}
|
||||
|
||||
export function exporter(export_dir: string, { basepath = '' }) {
|
||||
return new Promise((fulfil, reject) => {
|
||||
try {
|
||||
@@ -13,11 +18,19 @@ export function exporter(export_dir: string, { basepath = '' }) {
|
||||
});
|
||||
|
||||
emitter.on('file', event => {
|
||||
console.log(`${colors.bold.cyan(event.file)} ${colors.gray(`(${prettyBytes(event.size)})`)}`);
|
||||
const pb = prettyBytes(event.size);
|
||||
const size_color = event.size > 150000 ? colors.bold.red : event.size > 50000 ? colors.bold.yellow : colors.bold.gray;
|
||||
const size_label = size_color(left_pad(prettyBytes(event.size), 10));
|
||||
|
||||
const file_label = event.status === 200
|
||||
? event.file
|
||||
: colors.bold[event.status >= 400 ? 'red' : 'yellow'](`(${event.status}) ${event.file}`);
|
||||
|
||||
console.log(`${size_label} ${file_label}`);
|
||||
});
|
||||
|
||||
emitter.on('failure', event => {
|
||||
console.log(`${colors.red(`> Received ${event.status} response when fetching ${event.pathname}`)}`);
|
||||
emitter.on('info', event => {
|
||||
console.log(colors.bold.cyan(`> ${event.message}`));
|
||||
});
|
||||
|
||||
emitter.on('error', event => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as child_process from 'child_process';
|
||||
import * as colors from 'ansi-colors';
|
||||
import colors from 'kleur';
|
||||
import * as ports from 'port-authority';
|
||||
|
||||
export async function start(dir: string, opts: { port: number, open: boolean }) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as fs from 'fs';
|
||||
import * as colors from 'ansi-colors';
|
||||
import colors from 'kleur';
|
||||
|
||||
export default async function upgrade() {
|
||||
const upgraded = [
|
||||
|
||||
@@ -6,5 +6,5 @@ export const locations = {
|
||||
base: () => path.resolve(process.env.SAPPER_BASE || ''),
|
||||
app: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_APP || 'app'),
|
||||
routes: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_ROUTES || 'routes'),
|
||||
dest: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST || '.sapper')
|
||||
dest: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST || `.sapper/${dev() ? 'dev' : 'prod'}`)
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as glob from 'glob';
|
||||
import glob from 'tiny-glob/sync.js';
|
||||
import { posixify, write_if_changed } from './utils';
|
||||
import { dev, locations } from '../config';
|
||||
import { Page, PageComponent, ServerRoute } from '../interfaces';
|
||||
@@ -9,24 +9,27 @@ export function create_main_manifests({ routes, dev_port }: {
|
||||
routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
|
||||
dev_port?: number;
|
||||
}) {
|
||||
const path_to_routes = path.relative(`${locations.app()}/manifest`, locations.routes());
|
||||
const manifest_dir = path.join(locations.app(), 'manifest');
|
||||
if (!fs.existsSync(manifest_dir)) fs.mkdirSync(manifest_dir);
|
||||
|
||||
const path_to_routes = path.relative(manifest_dir, locations.routes());
|
||||
|
||||
const client_manifest = generate_client(routes, path_to_routes, dev_port);
|
||||
const server_manifest = generate_server(routes, path_to_routes);
|
||||
|
||||
write_if_changed(
|
||||
`${locations.app()}/manifest/default-layout.html`,
|
||||
`${manifest_dir}/default-layout.html`,
|
||||
`<svelte:component this={child.component} {...child.props}/>`
|
||||
);
|
||||
write_if_changed(`${locations.app()}/manifest/client.js`, client_manifest);
|
||||
write_if_changed(`${locations.app()}/manifest/server.js`, server_manifest);
|
||||
write_if_changed(`${manifest_dir}/client.js`, client_manifest);
|
||||
write_if_changed(`${manifest_dir}/server.js`, server_manifest);
|
||||
}
|
||||
|
||||
export function create_serviceworker_manifest({ routes, client_files }: {
|
||||
routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] };
|
||||
client_files: string[];
|
||||
}) {
|
||||
const assets = glob.sync('**', { cwd: 'assets', nodir: true });
|
||||
const assets = glob('**', { cwd: 'assets', filesOnly: true });
|
||||
|
||||
let code = `
|
||||
// This file is generated by Sapper — do not edit it!
|
||||
@@ -42,11 +45,6 @@ export function create_serviceworker_manifest({ routes, client_files }: {
|
||||
write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
|
||||
}
|
||||
|
||||
function right_pad(str: string, len: number) {
|
||||
while (str.length < len) str += ' ';
|
||||
return str;
|
||||
}
|
||||
|
||||
function generate_client(
|
||||
routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] },
|
||||
path_to_routes: string,
|
||||
@@ -79,6 +77,8 @@ function generate_client(
|
||||
pattern: ${page.pattern},
|
||||
parts: [
|
||||
${page.parts.map(part => {
|
||||
if (part === null) return 'null';
|
||||
|
||||
if (part.params.length > 0) {
|
||||
const props = part.params.map((param, i) => `${param}: match[${i + 1}]`);
|
||||
return `{ component: ${part.component.name}, params: match => ({ ${props.join(', ')} }) }`;
|
||||
@@ -150,6 +150,8 @@ function generate_server(
|
||||
pattern: ${page.pattern},
|
||||
parts: [
|
||||
${page.parts.map(part => {
|
||||
if (part === null) return 'null';
|
||||
|
||||
const props = [
|
||||
`name: "${part.component.name}"`,
|
||||
`component: ${part.component.name}`
|
||||
|
||||
@@ -4,11 +4,6 @@ import { locations } from '../config';
|
||||
import { Page, PageComponent, ServerRoute } from '../interfaces';
|
||||
import { posixify } from './utils';
|
||||
|
||||
const default_layout_file = posixify(path.resolve(
|
||||
__dirname,
|
||||
'../components/default-layout.html'
|
||||
));
|
||||
|
||||
export default function create_routes(cwd = locations.routes()) {
|
||||
const components: PageComponent[] = [];
|
||||
const pages: Page[] = [];
|
||||
@@ -101,27 +96,21 @@ export default function create_routes(cwd = locations.routes()) {
|
||||
|
||||
if (item.is_dir) {
|
||||
const index = path.join(dir, item.basename, '_layout.html');
|
||||
const layout = fs.existsSync(index)
|
||||
? {
|
||||
name: `${get_slug(item.file)}__layout`,
|
||||
file: `${item.file}/_layout.html`
|
||||
}
|
||||
: null;
|
||||
|
||||
if (layout) {
|
||||
components.push(layout);
|
||||
} else if (components.indexOf(default_layout) === -1) {
|
||||
components.push(default_layout);
|
||||
}
|
||||
const component = fs.existsSync(index) && {
|
||||
name: `${get_slug(item.file)}__layout`,
|
||||
file: `${item.file}/_layout.html`
|
||||
};
|
||||
|
||||
if (component) components.push(component);
|
||||
|
||||
walk(
|
||||
path.join(dir, item.basename),
|
||||
segments,
|
||||
params,
|
||||
stack.concat({
|
||||
component: layout || default_layout,
|
||||
params
|
||||
})
|
||||
component
|
||||
? stack.concat({ component, params })
|
||||
: stack.concat(null)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import * as sander from 'sander';
|
||||
import * as fs from 'fs';
|
||||
|
||||
const previous_contents = new Map();
|
||||
|
||||
export function write_if_changed(file: string, code: string) {
|
||||
if (code !== previous_contents.get(file)) {
|
||||
previous_contents.set(file, code);
|
||||
sander.writeFileSync(file, code);
|
||||
fs.writeFileSync(file, code);
|
||||
fudge_mtime(file);
|
||||
}
|
||||
}
|
||||
@@ -16,8 +16,8 @@ export function posixify(file: string) {
|
||||
|
||||
export function fudge_mtime(file: string) {
|
||||
// need to fudge the mtime so that webpack doesn't go doolally
|
||||
const { atime, mtime } = sander.statSync(file);
|
||||
sander.utimesSync(
|
||||
const { atime, mtime } = fs.statSync(file);
|
||||
fs.utimesSync(
|
||||
file,
|
||||
new Date(atime.getTime() - 999999),
|
||||
new Date(mtime.getTime() - 999999)
|
||||
|
||||
@@ -73,9 +73,18 @@ interface Component {
|
||||
preload: (data: any) => any | Promise<any>
|
||||
}
|
||||
|
||||
const IGNORE = '__SAPPER__IGNORE__';
|
||||
function toIgnore(uri: string, val: any) {
|
||||
if (Array.isArray(val)) return val.some(x => toIgnore(uri, x));
|
||||
if (val instanceof RegExp) return val.test(uri);
|
||||
if (typeof val === 'function') return val(uri);
|
||||
return uri.startsWith(val.charCodeAt(0) === 47 ? val : `/${val}`);
|
||||
}
|
||||
|
||||
export default function middleware(opts: {
|
||||
manifest: Manifest,
|
||||
store: (req: Req) => Store,
|
||||
store: (req: Req, res: ServerResponse) => Store,
|
||||
ignore?: any,
|
||||
routes?: any // legacy
|
||||
}) {
|
||||
if (opts.routes) {
|
||||
@@ -84,12 +93,19 @@ export default function middleware(opts: {
|
||||
|
||||
const output = locations.dest();
|
||||
|
||||
const { manifest, store } = opts;
|
||||
const { manifest, store, ignore } = opts;
|
||||
|
||||
let emitted_basepath = false;
|
||||
|
||||
const middleware = compose_handlers([
|
||||
ignore && ((req: Req, res: ServerResponse, next: () => void) => {
|
||||
req[IGNORE] = toIgnore(req.path, ignore);
|
||||
next();
|
||||
}),
|
||||
|
||||
(req: Req, res: ServerResponse, next: () => void) => {
|
||||
if (req[IGNORE]) return next();
|
||||
|
||||
if (req.baseUrl === undefined) {
|
||||
let { originalUrl } = req;
|
||||
if (req.url === '/' && originalUrl[originalUrl.length - 1] !== '/') {
|
||||
@@ -163,6 +179,8 @@ function serve({ prefix, pathname, cache_control }: {
|
||||
: (file: string) => (cache.has(file) ? cache : cache.set(file, fs.readFileSync(path.resolve(output, file)))).get(file)
|
||||
|
||||
return (req: Req, res: ServerResponse, next: () => void) => {
|
||||
if (req[IGNORE]) return next();
|
||||
|
||||
if (filter(req)) {
|
||||
const type = lookup(req.path);
|
||||
|
||||
@@ -245,6 +263,8 @@ function get_server_route_handler(routes: ServerRoute[]) {
|
||||
}
|
||||
|
||||
return function find_route(req: Req, res: ServerResponse, next: () => void) {
|
||||
if (req[IGNORE]) return next();
|
||||
|
||||
for (const route of routes) {
|
||||
if (route.pattern.test(req.path)) {
|
||||
handle_route(route, req, res, next);
|
||||
@@ -256,7 +276,10 @@ function get_server_route_handler(routes: ServerRoute[]) {
|
||||
};
|
||||
}
|
||||
|
||||
function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store) {
|
||||
function get_page_handler(
|
||||
manifest: Manifest,
|
||||
store_getter: (req: Req, res: ServerResponse) => Store
|
||||
) {
|
||||
const output = locations.dest();
|
||||
|
||||
const get_chunks = dev()
|
||||
@@ -276,13 +299,10 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
parts: [
|
||||
{ name: null, component: error_route }
|
||||
]
|
||||
}, req, res, statusCode, error);
|
||||
}, req, res, statusCode, error || new Error('Unknown error in preload function'));
|
||||
}
|
||||
|
||||
function handle_page(page: Page, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
|
||||
const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
|
||||
const match = error ? null : page.pattern.exec(req.path);
|
||||
|
||||
const chunks: Record<string, string | string[]> = get_chunks();
|
||||
|
||||
res.setHeader('Content-Type', 'text/html');
|
||||
@@ -292,6 +312,8 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
let preloaded_chunks = Array.isArray(chunks.main) ? chunks.main : [chunks.main];
|
||||
if (!error) {
|
||||
page.parts.forEach(part => {
|
||||
if (!part) return;
|
||||
|
||||
// using concat because it could be a string or an array. thanks webpack!
|
||||
preloaded_chunks = preloaded_chunks.concat(chunks[part.name]);
|
||||
});
|
||||
@@ -304,7 +326,7 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
|
||||
res.setHeader('Link', link);
|
||||
|
||||
const store = store_getter ? store_getter(req) : null;
|
||||
const store = store_getter ? store_getter(req, res) : null;
|
||||
|
||||
let redirect: { statusCode: number, location: string };
|
||||
let preload_error: { statusCode: number, message: Error | string };
|
||||
@@ -314,6 +336,7 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
if (redirect && (redirect.statusCode !== statusCode || redirect.location !== location)) {
|
||||
throw new Error(`Conflicting redirects`);
|
||||
}
|
||||
location = location.replace(/^\//g, ''); // leading slash (only)
|
||||
redirect = { statusCode, location };
|
||||
},
|
||||
error: (statusCode: number, message: Error | string) => {
|
||||
@@ -365,7 +388,11 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
})
|
||||
: {};
|
||||
|
||||
const match = error ? null : page.pattern.exec(req.path);
|
||||
|
||||
Promise.all([root_preloaded].concat(page.parts.map(part => {
|
||||
if (!part) return null;
|
||||
|
||||
return part.component.preload
|
||||
? part.component.preload.call(preload_context, {
|
||||
path: req.path,
|
||||
@@ -378,10 +405,24 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
return []; // appease TypeScript
|
||||
}).then(preloaded => {
|
||||
if (redirect) {
|
||||
const location = `${req.baseUrl}/${redirect.location}`;
|
||||
|
||||
res.statusCode = redirect.statusCode;
|
||||
res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
|
||||
res.setHeader('Location', location);
|
||||
res.end();
|
||||
|
||||
if (process.send) {
|
||||
process.send({
|
||||
__sapper__: true,
|
||||
event: 'file',
|
||||
url: req.url,
|
||||
method: req.method,
|
||||
status: redirect.statusCode,
|
||||
type: 'text/html',
|
||||
body: `<script>window.location.href = "${location}"</script>`
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -411,23 +452,28 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
|
||||
const data = Object.assign({}, props, preloaded[0], {
|
||||
params: {},
|
||||
child: {}
|
||||
child: {
|
||||
segment: segments[0]
|
||||
}
|
||||
});
|
||||
|
||||
let level = data.child;
|
||||
for (let i = 0; i < page.parts.length; i += 1) {
|
||||
const part = page.parts[i];
|
||||
if (!part) continue;
|
||||
|
||||
const get_params = part.params || (() => ({}));
|
||||
|
||||
Object.assign(level, {
|
||||
segment: segments[i],
|
||||
component: part.component,
|
||||
props: Object.assign({}, props, {
|
||||
params: get_params(match)
|
||||
}, preloaded[i + 1])
|
||||
});
|
||||
|
||||
level.props.child = <Props["child"]>{};
|
||||
level.props.child = <Props["child"]>{
|
||||
segment: segments[i + 1]
|
||||
};
|
||||
level = level.props.child;
|
||||
}
|
||||
|
||||
@@ -443,9 +489,9 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
|
||||
let inline_script = `__SAPPER__={${[
|
||||
error && `error:1`,
|
||||
`baseUrl: "${req.baseUrl}"`,
|
||||
serialized.preloaded && `preloaded: ${serialized.preloaded}`,
|
||||
serialized.store && `store: ${serialized.store}`
|
||||
`baseUrl:"${req.baseUrl}"`,
|
||||
serialized.preloaded && `preloaded:${serialized.preloaded}`,
|
||||
serialized.store && `store:${serialized.store}`
|
||||
].filter(Boolean).join(',')}};`;
|
||||
|
||||
const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
|
||||
@@ -469,7 +515,7 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
event: 'file',
|
||||
url: req.url,
|
||||
method: req.method,
|
||||
status: 200,
|
||||
status,
|
||||
type: 'text/html',
|
||||
body
|
||||
});
|
||||
@@ -485,7 +531,9 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store)
|
||||
});
|
||||
}
|
||||
|
||||
return function find_route(req: Req, res: ServerResponse) {
|
||||
return function find_route(req: Req, res: ServerResponse, next: () => void) {
|
||||
if (req[IGNORE]) return next();
|
||||
|
||||
if (!server_routes.some(route => route.pattern.test(req.path))) {
|
||||
for (const page of pages) {
|
||||
if (page.pattern.test(req.path)) {
|
||||
@@ -537,4 +585,4 @@ function escape_html(html: string) {
|
||||
};
|
||||
|
||||
return html.replace(/["'&<>]/g, c => `&${chars[c]};`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,14 +77,14 @@ function select_route(url: URL): Target {
|
||||
|
||||
let current_token: {};
|
||||
|
||||
function render(data: any, changed_from: number, scroll: ScrollPosition, token: {}) {
|
||||
function render(data: any, nullable_depth: number, scroll: ScrollPosition, token: {}) {
|
||||
if (current_token !== token) return;
|
||||
|
||||
if (root) {
|
||||
// first, clear out highest-level root component
|
||||
let level = data.child;
|
||||
for (let i = 0; i < changed_from; i += 1) {
|
||||
if (i === changed_from) break;
|
||||
for (let i = 0; i < nullable_depth; i += 1) {
|
||||
if (i === nullable_depth) break;
|
||||
level = level.props.child;
|
||||
}
|
||||
|
||||
@@ -134,12 +134,8 @@ let root_data: any;
|
||||
function prepare_page(target: Target): Promise<{
|
||||
redirect?: Redirect;
|
||||
data?: any;
|
||||
changed_from?: number;
|
||||
nullable_depth?: number;
|
||||
}> {
|
||||
if (root) {
|
||||
root.set({ preloading: true });
|
||||
}
|
||||
|
||||
const { page, path, query } = target;
|
||||
const new_segments = path.split('/').filter(Boolean);
|
||||
let changed_from = 0;
|
||||
@@ -179,6 +175,7 @@ function prepare_page(target: Target): Promise<{
|
||||
|
||||
return Promise.all(page.parts.map(async (part, i) => {
|
||||
if (i < changed_from) return null;
|
||||
if (!part) return null;
|
||||
|
||||
const { default: Component } = await part.component();
|
||||
const req = {
|
||||
@@ -231,33 +228,42 @@ function prepare_page(target: Target): Promise<{
|
||||
const data = {
|
||||
path,
|
||||
preloading: false,
|
||||
child: Object.assign({}, root_props.child)
|
||||
child: Object.assign({}, root_props.child, {
|
||||
segment: segments[0]
|
||||
})
|
||||
};
|
||||
if (changed(query, root_props.query)) data.query = query;
|
||||
if (changed(params, root_props.params)) data.params = params;
|
||||
|
||||
let level = data.child;
|
||||
let nullable_depth = 0;
|
||||
|
||||
for (let i = 0; i < page.parts.length; i += 1) {
|
||||
const part = page.parts[i];
|
||||
if (!part) continue;
|
||||
|
||||
const get_params = part.params || (() => ({}));
|
||||
|
||||
if (i < changed_from) {
|
||||
level.props.path = path;
|
||||
level.props.query = query;
|
||||
level.props.child = Object.assign({}, level.props.child);
|
||||
|
||||
nullable_depth += 1;
|
||||
} else {
|
||||
level.segment = new_segments[i];
|
||||
level.component = results[i].Component;
|
||||
level.props = Object.assign({}, level.props, props, {
|
||||
params: get_params(target.match),
|
||||
}, results[i].preloaded);
|
||||
|
||||
level.props.child = {};
|
||||
}
|
||||
|
||||
level = level.props.child;
|
||||
level.segment = segments[i + 1];
|
||||
}
|
||||
|
||||
return { data, changed_from };
|
||||
return { data, nullable_depth };
|
||||
});
|
||||
}
|
||||
|
||||
@@ -275,6 +281,9 @@ async function navigate(target: Target, id: number): Promise<any> {
|
||||
|
||||
cid = id;
|
||||
|
||||
if (root) {
|
||||
root.set({ preloading: true });
|
||||
}
|
||||
const loaded = prefetching && prefetching.href === target.url.href ?
|
||||
prefetching.promise :
|
||||
prepare_page(target);
|
||||
@@ -282,13 +291,13 @@ async function navigate(target: Target, id: number): Promise<any> {
|
||||
prefetching = null;
|
||||
|
||||
const token = current_token = {};
|
||||
const { redirect, data, changed_from } = await loaded;
|
||||
const { redirect, data, nullable_depth } = await loaded;
|
||||
|
||||
if (redirect) {
|
||||
await goto(redirect.location, { replaceState: true });
|
||||
} else {
|
||||
render(data, changed_from, scroll_history[id], token);
|
||||
document.activeElement.blur();
|
||||
render(data, nullable_depth, scroll_history[id], token);
|
||||
if (document.activeElement) document.activeElement.blur();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -353,7 +362,7 @@ function handle_popstate(event: PopStateEvent) {
|
||||
|
||||
let prefetching: {
|
||||
href: string;
|
||||
promise: Promise<{ redirect?: Redirect, data?: any, changed_from?: number }>;
|
||||
promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number }>;
|
||||
} = null;
|
||||
|
||||
export function prefetch(href: string) {
|
||||
|
||||
@@ -85,14 +85,27 @@ const middlewares = [
|
||||
next();
|
||||
},
|
||||
|
||||
// set up some values for the store
|
||||
(req, res, next) => {
|
||||
req.hello = 'hello';
|
||||
res.locals = { name: 'world' };
|
||||
next();
|
||||
},
|
||||
|
||||
sapper({
|
||||
manifest,
|
||||
store: () => {
|
||||
store: (req, res) => {
|
||||
return new Store({
|
||||
title: 'Stored title'
|
||||
title: `${req.hello} ${res.locals.name}`
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
ignore: [
|
||||
/foobar/i,
|
||||
'/buzz',
|
||||
'fizz',
|
||||
x => x === '/hello'
|
||||
]
|
||||
}),
|
||||
];
|
||||
|
||||
if (BASEPATH) {
|
||||
@@ -101,4 +114,8 @@ if (BASEPATH) {
|
||||
app.use(...middlewares);
|
||||
}
|
||||
|
||||
app.listen(PORT);
|
||||
['foobar', 'buzz', 'fizzer', 'hello'].forEach(uri => {
|
||||
app.get('/'+uri, (req, res) => res.end(uri));
|
||||
});
|
||||
|
||||
app.listen(PORT);
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<span>y: {segment} {count}</span>
|
||||
<svelte:component this={child.component} {...child.props}/>
|
||||
|
||||
<span>child segment: {child.segment}</span>
|
||||
|
||||
<script>
|
||||
import counts from '../_counts.js';
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
<span>x: {segment} {count}</span>
|
||||
<svelte:component this={child.component} {...child.props}/>
|
||||
|
||||
<script>
|
||||
import counts from './_counts.js';
|
||||
|
||||
export default {
|
||||
preload() {
|
||||
return {
|
||||
count: counts.x += 1
|
||||
};
|
||||
},
|
||||
|
||||
oncreate() {
|
||||
this.set({
|
||||
segment: this.get().params.x
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -8,6 +8,7 @@
|
||||
<a href='about'>about</a>
|
||||
<a href='slow-preload'>slow preload</a>
|
||||
<a href='redirect-from'>redirect</a>
|
||||
<a href='redirect-root'>redirect (root)</a>
|
||||
<a href='blog/nope'>broken link</a>
|
||||
<a href='blog/throw-an-error'>error link</a>
|
||||
<a href='credentials?creds=include'>credentials</a>
|
||||
|
||||
7
test/app/routes/redirect-root.html
Normal file
7
test/app/routes/redirect-root.html
Normal file
@@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
this.redirect(301, '/');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -59,9 +59,19 @@ describe('sapper', function() {
|
||||
basepath: '/custom-basepath'
|
||||
});
|
||||
|
||||
describe('export', () => {
|
||||
testExport({});
|
||||
|
||||
testExport({ basepath: '/custom-basepath' });
|
||||
});
|
||||
|
||||
function testExport({ basepath = '' }) {
|
||||
describe(basepath ? `export --basepath ${basepath}` : 'export', () => {
|
||||
before(() => {
|
||||
return exec(`node ${cli} export`);
|
||||
if (basepath) {
|
||||
process.env.BASEPATH = basepath;
|
||||
}
|
||||
|
||||
return exec(`node ${cli} export ${basepath ? `--basepath ${basepath}` : ''}`);
|
||||
});
|
||||
|
||||
it('export all pages', () => {
|
||||
@@ -96,7 +106,10 @@ describe('sapper', function() {
|
||||
'service-worker.js',
|
||||
'svelte-logo-192.png',
|
||||
'svelte-logo-512.png',
|
||||
];
|
||||
].map(file => {
|
||||
return basepath ? `${basepath.replace(/^[\/\\]/, '')}/${file}` : file;
|
||||
});
|
||||
|
||||
// Client scripts that should show up in the extraction directory.
|
||||
const expectedClientRegexes = [
|
||||
/client\/[^/]+\/main(\.\d+)?\.js/,
|
||||
@@ -126,7 +139,7 @@ describe('sapper', function() {
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function run({ mode, basepath = '' }) {
|
||||
describe(`mode=${mode}`, function () {
|
||||
@@ -423,6 +436,33 @@ function run({ mode, basepath = '' }) {
|
||||
});
|
||||
});
|
||||
|
||||
it('redirects on server (root)', () => {
|
||||
return nightmare.goto(`${base}/redirect-root`)
|
||||
.path()
|
||||
.then(path => {
|
||||
assert.equal(path, `${basepath}/`);
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Great success!');
|
||||
});
|
||||
});
|
||||
|
||||
it('redirects in client (root)', () => {
|
||||
return nightmare.goto(base)
|
||||
.wait('[href="redirect-root"]')
|
||||
.click('[href="redirect-root"]')
|
||||
.wait(200)
|
||||
.path()
|
||||
.then(path => {
|
||||
assert.equal(path, `${basepath}/`);
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Great success!');
|
||||
});
|
||||
});
|
||||
|
||||
it('handles 4xx error on server', () => {
|
||||
return nightmare.goto(`${base}/blog/nope`)
|
||||
.path()
|
||||
@@ -477,6 +517,42 @@ function run({ mode, basepath = '' }) {
|
||||
});
|
||||
});
|
||||
|
||||
// Ignores are meant for top-level escape.
|
||||
// ~> Sapper **should** own the entire {basepath} when designated.
|
||||
if (!basepath) {
|
||||
it('respects `options.ignore` values (RegExp)', () => {
|
||||
return nightmare.goto(`${base}/foobar`)
|
||||
.evaluate(() => document.documentElement.textContent)
|
||||
.then(text => {
|
||||
assert.equal(text, 'foobar');
|
||||
});
|
||||
});
|
||||
|
||||
it('respects `options.ignore` values (String #1)', () => {
|
||||
return nightmare.goto(`${base}/buzz`)
|
||||
.evaluate(() => document.documentElement.textContent)
|
||||
.then(text => {
|
||||
assert.equal(text, 'buzz');
|
||||
});
|
||||
});
|
||||
|
||||
it('respects `options.ignore` values (String #2)', () => {
|
||||
return nightmare.goto(`${base}/fizzer`)
|
||||
.evaluate(() => document.documentElement.textContent)
|
||||
.then(text => {
|
||||
assert.equal(text, 'fizzer');
|
||||
});
|
||||
});
|
||||
|
||||
it('respects `options.ignore` values (Function)', () => {
|
||||
return nightmare.goto(`${base}/hello`)
|
||||
.evaluate(() => document.documentElement.textContent)
|
||||
.then(text => {
|
||||
assert.equal(text, 'hello');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
it('does not attempt client-side navigation to server routes', () => {
|
||||
return nightmare.goto(`${base}/blog/how-is-sapper-different-from-next`)
|
||||
.init()
|
||||
@@ -532,11 +608,11 @@ function run({ mode, basepath = '' }) {
|
||||
return nightmare.goto(`${base}/store`)
|
||||
.page.title()
|
||||
.then(title => {
|
||||
assert.equal(title, 'Stored title');
|
||||
assert.equal(title, 'hello world');
|
||||
return nightmare.init().page.title();
|
||||
})
|
||||
.then(title => {
|
||||
assert.equal(title, 'Stored title');
|
||||
assert.equal(title, 'hello world');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -629,9 +705,9 @@ function run({ mode, basepath = '' }) {
|
||||
.evaluate(() => document.querySelector('#sapper').textContent)
|
||||
.then(text => {
|
||||
assert.deepEqual(text.split('\n').filter(Boolean), [
|
||||
'x: foo 1',
|
||||
'y: bar 1',
|
||||
'z: baz 1'
|
||||
'z: baz 1',
|
||||
'child segment: baz'
|
||||
]);
|
||||
|
||||
return nightmare.click(`a`)
|
||||
@@ -642,9 +718,9 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(text => {
|
||||
assert.deepEqual(text.split('\n').filter(Boolean), [
|
||||
'x: foo 1',
|
||||
'y: bar 1',
|
||||
'z: qux 2'
|
||||
'z: qux 2',
|
||||
'child segment: qux'
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
26
test/unit/clean_html/index.ts
Normal file
26
test/unit/clean_html/index.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as assert from 'assert';
|
||||
import clean_html from '../../../src/api/utils/clean_html';
|
||||
|
||||
describe('clean_html', () => {
|
||||
const samples = path.join(__dirname, 'samples');
|
||||
|
||||
fs.readdirSync(samples).forEach(dir => {
|
||||
if (dir[0] === '.') return;
|
||||
|
||||
it(dir, () => {
|
||||
const input = fs.readFileSync(`${samples}/${dir}/input.html`, 'utf-8');
|
||||
const expected = fs.readFileSync(`${samples}/${dir}/output.html`, 'utf-8');
|
||||
|
||||
const actual = clean_html(input);
|
||||
|
||||
fs.writeFileSync(`${samples}/${dir}/.actual.html`, actual);
|
||||
|
||||
assert.equal(
|
||||
actual.replace(/\s+$/gm, ''),
|
||||
expected.replace(/\s+$/gm, '')
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
14
test/unit/clean_html/samples/removes-cdata/.actual.html
Normal file
14
test/unit/clean_html/samples/removes-cdata/.actual.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<math>
|
||||
<ms></ms>
|
||||
<mo>+</mo>
|
||||
<mn>3</mn>
|
||||
<mo>=</mo>
|
||||
<ms></ms>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
14
test/unit/clean_html/samples/removes-cdata/input.html
Normal file
14
test/unit/clean_html/samples/removes-cdata/input.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<math>
|
||||
<ms><![CDATA[x<y]]></ms>
|
||||
<mo>+</mo>
|
||||
<mn>3</mn>
|
||||
<mo>=</mo>
|
||||
<ms><![CDATA[x<y3]]></ms>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
14
test/unit/clean_html/samples/removes-cdata/output.html
Normal file
14
test/unit/clean_html/samples/removes-cdata/output.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<math>
|
||||
<ms></ms>
|
||||
<mo>+</mo>
|
||||
<mn>3</mn>
|
||||
<mo>=</mo>
|
||||
<ms></ms>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<a href="keep-me">keep me</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
9
test/unit/clean_html/samples/removes-comments/input.html
Normal file
9
test/unit/clean_html/samples/removes-comments/input.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<a href="keep-me">keep me</a>
|
||||
<!-- <a href="delete-me">delete me</a> -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<a href="keep-me">keep me</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<script></script>
|
||||
|
||||
<script></script>
|
||||
|
||||
<script src="attributes-are-preserved.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
console.log('this should be deleted');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
console.log('so should this');
|
||||
</script>
|
||||
|
||||
<script src="attributes-are-preserved.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<script></script>
|
||||
|
||||
<script></script>
|
||||
|
||||
<script src="attributes-are-preserved.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +1,6 @@
|
||||
const path = require('path');
|
||||
const assert = require('assert');
|
||||
const { create_routes } = require('../../../dist/core.ts.js');
|
||||
|
||||
|
||||
const _default_layout = {
|
||||
default: true,
|
||||
name: '_default_layout',
|
||||
file: null
|
||||
};
|
||||
import * as path from 'path';
|
||||
import * as assert from 'assert';
|
||||
import create_routes from '../../../src/core/create_routes';
|
||||
|
||||
describe('create_routes', () => {
|
||||
it('creates routes', () => {
|
||||
@@ -21,7 +14,6 @@ describe('create_routes', () => {
|
||||
assert.deepEqual(components, [
|
||||
index,
|
||||
about,
|
||||
_default_layout,
|
||||
blog,
|
||||
blog_$slug
|
||||
]);
|
||||
@@ -44,7 +36,7 @@ describe('create_routes', () => {
|
||||
{
|
||||
pattern: /^\/blog\/?$/,
|
||||
parts: [
|
||||
{ component: _default_layout, params: [] },
|
||||
null,
|
||||
{ component: blog, params: [] }
|
||||
]
|
||||
},
|
||||
@@ -52,7 +44,7 @@ describe('create_routes', () => {
|
||||
{
|
||||
pattern: /^\/blog\/([^\/]+?)\/?$/,
|
||||
parts: [
|
||||
{ component: _default_layout, params: [] },
|
||||
null,
|
||||
{ component: blog_$slug, params: ['slug'] }
|
||||
]
|
||||
}
|
||||
@@ -110,15 +102,15 @@ describe('create_routes', () => {
|
||||
it('sorts routes correctly', () => {
|
||||
const { pages } = create_routes(path.join(__dirname, 'samples/sorting'));
|
||||
|
||||
assert.deepEqual(pages.map(p => p.parts.map(part => part.component.file)), [
|
||||
assert.deepEqual(pages.map(p => p.parts.map(part => part && part.component.file)), [
|
||||
['index.html'],
|
||||
['about.html'],
|
||||
[_default_layout.file, 'post/index.html'],
|
||||
[_default_layout.file, 'post/bar.html'],
|
||||
[_default_layout.file, 'post/foo.html'],
|
||||
[_default_layout.file, 'post/f[xx].html'],
|
||||
[_default_layout.file, 'post/[id([0-9-a-z]{3,})].html'],
|
||||
[_default_layout.file, 'post/[id].html'],
|
||||
[null, 'post/index.html'],
|
||||
[null, 'post/bar.html'],
|
||||
[null, 'post/foo.html'],
|
||||
[null, 'post/f[xx].html'],
|
||||
[null, 'post/[id([0-9-a-z]{3,})].html'],
|
||||
[null, 'post/[id].html'],
|
||||
['[wildcard].html']
|
||||
]);
|
||||
});
|
||||
Reference in New Issue
Block a user