totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-20 22:35:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support being mounted on a path — fixes #180

Browse Source
This commit is contained in:
Rich Harris
2018-03-17 11:55:02 -04:00
committed by GitHub
parent a95ddee48d
commit b94481b716
21 changed files with 240 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
test/app/app/server.js
View File

@@ -1,6 +1,6 @@
import fs from 'fs';
import polka from 'polka';
import compression from 'compression';
import { resolve } from 'url';
import express from 'express';
import serve from 'serve-static';
import sapper from '../../../dist/middleware.ts.js';
import { routes } from './manifest/server.js';
@@ -28,58 +28,62 @@ process.on('message', message => {
}
});
const app = polka();
const app = express();
app.use((req, res, next) => {
if (pending) pending.add(req.url);
const { write, end } = res;
const chunks = [];
res.write = function(chunk) {
chunks.push(new Buffer(chunk));
write.apply(res, arguments);
};
res.end = function(chunk) {
if (chunk) chunks.push(new Buffer(chunk));
end.apply(res, arguments);
if (pending) pending.delete(req.url);
process.send({
method: req.method,
url: req.url,
status: res.statusCode,
headers: res._headers,
body: Buffer.concat(chunks).toString()
});
if (pending && pending.size === 0 && ended) {
process.send({ type: 'done' });
}
};
next();
});
const { PORT = 3000 } = process.env;
const { PORT = 3000, BASEPATH = '' } = process.env;
const base = `http://localhost:${PORT}${BASEPATH}/`;
// this allows us to do e.g. `fetch('/api/blog')` on the server
const fetch = require('node-fetch');
global.fetch = (url, opts) => {
if (url[0] === '/') url = `http://localhost:${PORT}${url}`;
return fetch(url, opts);
return fetch(resolve(base, url), opts);
};
app.use(compression({ threshold: 0 }));
const middlewares = [
serve('assets'),
app.use(serve('assets'));
(req, res, next) => {
if (!pending) return next();
app.use(sapper({
routes
}));
pending.add(req.url);
app.listen(PORT, () => {
console.log(`listening on port ${PORT}`);
});
const { write, end } = res;
const chunks = [];
res.write = function(chunk) {
chunks.push(new Buffer(chunk));
write.apply(res, arguments);
};
res.end = function(chunk) {
if (chunk) chunks.push(new Buffer(chunk));
end.apply(res, arguments);
if (pending) pending.delete(req.url);
process.send({
method: req.method,
url: req.url,
status: res.statusCode,
headers: res._headers,
body: Buffer.concat(chunks).toString()
});
if (pending && pending.size === 0 && ended) {
process.send({ type: 'done' });
}
};
next();
},
sapper({ routes })
];
if (BASEPATH) {
app.use(BASEPATH, ...middlewares);
} else {
app.use(...middlewares);
}
app.listen(PORT);

12
test/app/app/template.html
View File

@@ -5,15 +5,11 @@
<meta name='viewport' content='width=device-width'>
<meta name='theme-color' content='#aa1e1e'>
<link rel='stylesheet' href='/global.css'>
<link rel='manifest' href='/manifest.json'>
<link rel='icon' type='image/png' href='/favicon.png'>
%sapper.base%
<script>
// if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('/service-worker.js');
// }
</script>
<link rel='stylesheet' href='global.css'>
<link rel='manifest' href='manifest.json'>
<link rel='icon' type='image/png' href='favicon.png'>
<!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is

14
test/app/routes/_components/Nav.html
View File

@@ -1,12 +1,12 @@
<nav>
<ul>
<li><a href='/'>home</a></li>
<li><a href='/about'>about</a></li>
<li><a href='/slow-preload'>slow preload</a></li>
<li><a href='/redirect-from'>redirect</a></li>
<li><a href='/blog/nope'>broken link</a></li>
<li><a href='/blog/throw-an-error'>error link</a></li>
<li><a rel=prefetch class='{{page === "blog" ? "selected" : ""}}' href='/blog'>blog</a></li>
<li><a href=''>home</a></li>
<li><a href='about'>about</a></li>
<li><a href='slow-preload'>slow preload</a></li>
<li><a href='redirect-from'>redirect</a></li>
<li><a href='blog/nope'>broken link</a></li>
<li><a href='blog/throw-an-error'>error link</a></li>
<li><a rel=prefetch class='{{page === "blog" ? "selected" : ""}}' href='blog'>blog</a></li>
</ul>
</nav>

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

@@ -7,8 +7,8 @@
<p>This is the 'about' page. There's not much here.</p>
<button class='goto' on:click='goto("/blog/what-is-sapper")'>What is Sapper?</button>
<button class='prefetch' on:click='goto("/blog/why-the-name")'>Why the name?</button>
<button class='goto' on:click='goto("blog/what-is-sapper")'>What is Sapper?</button>
<button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
</Layout>
<script>

2
test/app/routes/blog/[slug].html
View File

@@ -63,7 +63,7 @@
return this.error(500, 'something went wrong');
}
return fetch(`/blog/${slug}.json`).then(r => {
return fetch(`blog/${slug}.json`).then(r => {
if (r.status === 200) {
return r.json().then(post => ({ post }));
this.error(r.status, '')

6
test/app/routes/blog/_posts.js
View File

@@ -14,7 +14,7 @@ const posts = [
html: `
<p>First, you have to know what <a href='https://svelte.technology'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.technology/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
<p>Sapper is a Next.js-style framework (<a href='/blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
<ul>
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
@@ -70,8 +70,8 @@ const posts = [
<ul>
<li>It's powered by <a href='https://svelte.technology'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>routes/blog/[slug].html</code></li>
<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='/blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='/blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
</ul>
`
},

4
test/app/routes/blog/index.html
View File

@@ -11,7 +11,7 @@
tell Sapper to load the data for the page as soon as
the user hovers over the link or taps it, instead of
waiting for the 'click' event -->
<li><a rel='prefetch' href='/blog/{{post.slug}}'>{{post.title}}</a></li>
<li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li>
{{/each}}
</ul>
</Layout>
@@ -32,7 +32,7 @@
},
preload({ params, query }) {
return fetch(`/blog.json`).then(r => r.json()).then(posts => {
return fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
});
}

2
test/app/routes/delete-test.html
View File

@@ -4,7 +4,7 @@
export default {
methods: {
del() {
fetch(`/api/delete/42`, { method: 'DELETE' })
fetch(`api/delete/42`, { method: 'DELETE' })
.then(r => r.json())
.then(data => {
window.deleted = data;

2
test/app/routes/index.html
View File

@@ -6,7 +6,7 @@
<h1>Great success!</h1>
<figure>
<img alt='borat' src='/great-success.png'>
<img alt='borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>

2
test/app/routes/redirect-from.html
View File

@@ -1,7 +1,7 @@
<script>
export default {
preload() {
this.redirect(301, '/redirect-to');
this.redirect(301, 'redirect-to');
}
};
</script>