totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-11 19:04:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add goto function (#46)

Browse Source 
* WIP

* programmatic navigation

* get tests working

* wait longer
This commit is contained in:
Rich Harris
2017-12-23 13:15:40 -05:00
committed by GitHub
parent e8d510b261
commit db1c1f332a
11 changed files with 1279 additions and 3764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/index.js
View File

@@ -187,7 +187,8 @@ function get_route_handler(fn) {
next();
} catch(err) {
res.status(500).end(templates.render(500, {
res.status(500);
res.end(templates.render(500, {
title: (err && err.name) || 'Internal server error',
url,
error: escape_html(err && (err.details || err.message || err) || 'Unknown error'),
@@ -201,7 +202,8 @@ function get_not_found_handler(fn) {
return function handle_not_found(req, res) {
const asset_cache = fn();
res.status(404).end(templates.render(404, {
res.status(404);
res.end(templates.render(404, {
title: 'Not found',
status: 404,
method: req.method,

1223
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -21,6 +21,7 @@
"webpack-hot-middleware": "^2.21.0"
},
"devDependencies": {
"css-loader": "^0.28.7",
"eslint": "^4.13.1",
"eslint-plugin-import": "^2.8.0",
"express": "^4.16.2",
@@ -29,6 +30,9 @@
"nightmare": "^2.10.0",
"node-fetch": "^1.7.3",
"npm-run-all": "^4.1.2",
"style-loader": "^0.19.1",
"svelte": "^1.49.1",
"svelte-loader": "^2.3.2",
"wait-on": "^2.0.2"
},
"scripts": {

22
runtime/app.js
View File

@@ -6,12 +6,17 @@ export let component;
let target;
let routes;
const history = typeof window !== 'undefined' ? window.history : {
pushState: () => {},
replaceState: () => {},
};
const scroll_history = {};
let uid = 1;
let cid;
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual'
history.scrollRestoration = 'manual';
}
function select_route(url) {
@@ -39,7 +44,7 @@ function render(Component, data, scroll) {
} else {
// first load — remove SSR'd <head> contents
const start = document.querySelector('#sapper-head-start');
let end = document.querySelector('#sapper-head-end');
const end = document.querySelector('#sapper-head-end');
if (start && end) {
while (start.nextSibling !== end) detach(start.nextSibling);
@@ -75,8 +80,6 @@ function navigate(url, id) {
id = cid = ++uid;
scroll_history[cid] = { x: 0, y: 0 };
history.pushState({ id }, '', url.href);
}
selected.route.load().then(mod => {
@@ -123,6 +126,7 @@ function handle_click(event) {
if (navigate(url, null)) {
event.preventDefault();
history.pushState({ id: cid }, '', url.href);
}
}
@@ -173,7 +177,7 @@ export function init(_target, _routes) {
inited = true;
}
const scroll = scroll_history[uid] = scroll_state();
scroll_history[uid] = scroll_state();
history.replaceState({ id: uid }, '', window.location.href);
navigate(new URL(window.location), uid);
@@ -189,4 +193,12 @@ function scroll_state() {
x: window.scrollX,
y: window.scrollY
};
}
export function goto(href, opts = {}) {
if (navigate(new URL(href, window.location.href))) {
if (history) history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
} else {
window.location.href = href;
}
}

7
test/app/routes/about.html
View File

@@ -6,14 +6,21 @@
<h1>About this site</h1>
<p>This is the 'about' page. There's not much here.</p>
<button on:click='goto("/blog/what-is-sapper")'>What is Sapper?</button>
</Layout>
<script>
import Layout from './_components/Layout.html';
import { goto } from '../../../runtime/app.js';
export default {
components: {
Layout
},
methods: {
goto
}
};
</script>

2
test/app/templates/main.js
View File

@@ -1,4 +1,4 @@
import { init } from '__app__';
import { init } from '../../../runtime/app.js';
// `routes` is an array of route objects injected by Sapper
init(document.querySelector('#sapper'), __routes__);

15
test/app/webpack.client.config.js
View File

@@ -1,7 +1,5 @@
const config = require('../../webpack/config.js');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: config.client.entry(),
@@ -24,27 +22,18 @@ module.exports = {
}
}
},
config.dev && {
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
!config.dev && {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{ loader: 'css-loader', options: { sourceMap: config.dev } }]
})
}
].filter(Boolean)
},
plugins: [
config.dev && new webpack.HotModuleReplacementPlugin(),
!config.dev && new ExtractTextPlugin('main.css'),
!config.dev && new webpack.optimize.ModuleConcatenationPlugin(),
!config.dev && new UglifyJSPlugin()
!config.dev && new webpack.optimize.ModuleConcatenationPlugin()
].filter(Boolean),
devtool: config.dev ? 'inline-source-map' : false
};

3
test/app/webpack.server.config.js
View File

@@ -1,7 +1,4 @@
const config = require('../../webpack/config.js');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: config.server.entry(),

42
test/common/test.js
View File

@@ -1,4 +1,3 @@
const fs = require('fs');
const path = require('path');
const assert = require('assert');
const express = require('express');
@@ -12,7 +11,7 @@ run('development');
function run(env) {
describe(`env=${env}`, function () {
this.timeout(30000);
this.timeout(5000);
let PORT;
let server;
@@ -23,7 +22,7 @@ function run(env) {
let base;
function get(url) {
return new Promise((fulfil, reject) => {
return new Promise(fulfil => {
const req = {
url,
method: 'GET'
@@ -93,7 +92,7 @@ function run(env) {
return result;
};
app = express();
const app = express();
app.use(serve('assets'));
@@ -128,6 +127,14 @@ function run(env) {
nightmare.on('console', (type, ...args) => {
console[type](...args);
});
nightmare.on('page', (type, ...args) => {
if (type === 'error') {
console.error(args[1]);
} else {
console.warn(type, args);
}
});
});
afterEach(async () => {
@@ -177,6 +184,20 @@ function run(env) {
assert.deepEqual(requests.map(r => r.url), []);
});
it('navigates programmatically', async () => {
await nightmare
.goto(`${base}/about`)
.wait(() => window.READY)
.click('button')
.wait(() => window.location.pathname === '/blog/what-is-sapper')
.wait(100);
assert.equal(
await nightmare.evaluate(() => document.title),
'What is Sapper?'
);
});
});
describe('headers', () => {
@@ -188,8 +209,8 @@ function run(env) {
'text/html'
);
assert.ok
(/<\/client\/main.\w+\.js\>;rel="preload";as="script", <\/client\/_.\d+.\w+.js>;rel="preload";as="script"/.test(headers['Link']),
assert.ok(
/<\/client\/main.\w+\.js>;rel="preload";as="script", <\/client\/_.\d+.\w+.js>;rel="preload";as="script"/.test(headers['Link']),
headers['Link']
);
});
@@ -200,10 +221,13 @@ function run(env) {
function exec(cmd) {
return new Promise((fulfil, reject) => {
require('child_process').exec(cmd, (err, stdout, stderr) => {
if (err) return reject(err);
if (err) {
process.stdout.write(stdout);
process.stderr.write(stderr);
return reject(err);
}
process.stdout.write(stdout);
process.stderr.write(stderr);
fulfil();
});
});

75
test/launch.js
View File

@@ -1,75 +0,0 @@
const fs = require('fs');
const path = require('path');
const rimraf = require('rimraf');
const child_process = require('child_process');
// ensure sapper doesn't exist in app/node_modules
rimraf.sync(
path.join(__dirname, 'app/node_modules/sapper')
);
rimraf.sync(
path.join(__dirname, 'app/node_modules/.bin/sapper')
);
// create symlinks
fs.symlinkSync(
path.join(__dirname, '..'),
path.join(__dirname, 'app/node_modules/sapper')
);
fs.symlinkSync(
path.join(__dirname, '../cli/index.js'),
path.join(__dirname, 'app/node_modules/.bin/sapper')
);
const app_dir = path.join(__dirname, 'app');
function start_server() {
const server = child_process.spawn(process.execPath, ['server.js'], {
cwd: app_dir,
env: {
NODE_ENV: 'development'
},
stdio: 'pipe'
});
server.stdout.on('data', (data) => {
process.stdout.write(data);
});
server.stderr.on('data', (data) => {
process.stderr.write(data);
});
}
function launch() {
if (process.argv[2] === '--dev') {
start_server();
} else {
child_process.exec(`npm run build`, {
cwd: app_dir
}, (err, stdout, stderr) => {
if (err) throw err;
process.stdout.write(stdout);
process.stderr.write(stderr);
start_server();
});
}
}
// this is a terrible hack
if (process.env.APPVEYOR) {
child_process.exec(`npm install`, {
cwd: app_dir
}, (err, stdout, stderr) => {
if (err) throw err;
process.stdout.write(stdout);
process.stderr.write(stderr);
launch();
});
} else {
launch();
}

3644
yarn.lock
View File

File diff suppressed because it is too large Load Diff