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

overhaul tests

Browse Source
This commit is contained in:
Rich Harris
2018-10-07 18:23:43 -04:00
committed by GitHub
parent 18acef3190
commit 5e59855a15
183 changed files with 4145 additions and 3126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
cypress.json
View File

@@ -1,9 +0,0 @@
{
"baseUrl": "http://localhost:3000",
"videoRecording": false,
"fixturesFolder": "test/cypress/fixtures",
"integrationFolder": "test/cypress/integration",
"pluginsFile": false,
"screenshotsFolder": "test/cypress/screenshots",
"supportFile": "test/cypress/support/index.js"
}

2
mocha.opts
View File

@@ -2,4 +2,4 @@
--require ts-node/register
--recursive
test/unit/*/*.ts
test/common/test.js
test/apps/*/__test__.ts

1764
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@@ -25,58 +25,56 @@
"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/puppeteer": "^1.9.0",
"@types/rimraf": "^2.0.2",
"agadoo": "^1.0.1",
"cheap-watch": "^0.3.0",
"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",
"puppeteer": "^1.9.0",
"require-relative": "^0.8.7",
"rimraf": "^2.6.2",
"rollup": "^0.65.0",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-json": "^3.0.0",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-node-resolve": "^3.4.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-string": "^2.0.2",
"rollup-plugin-svelte": "^4.3.2",
"rollup-plugin-typescript": "^0.8.1",
"sade": "^1.4.1",
"sander": "^0.6.0",
"serve-static": "^1.13.2",
"sirv": "^0.2.2",
"svelte": "^2.6.3",
"svelte-loader": "^2.9.0",
"tiny-glob": "^0.2.2",
"ts-node": "^7.0.1",
"typescript": "^2.8.3",
"walk-sync": "^0.3.2",
"webpack": "^4.8.3",
"webpack-format-messages": "^2.0.1"
},
"scripts": {
"cy:open": "cypress open",
"test": "mocha --opts mocha.opts",
"pretest": "npm run build",
"build": "rm -rf dist && rollup -c",
"prepare": "npm run build",
"dev": "rollup -cw",
"prepublishOnly": "npm test",
"update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > src/middleware/mime-types.md"
"update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > templates/src/server/middleware/mime-types.md"
},
"repository": "https://github.com/sveltejs/sapper",
"keywords": [

8
rollup.config.js
View File

@@ -12,7 +12,7 @@ const external = [].concat(
'sapper/core.js'
);
function template(kind, external) {
function template(kind, external, target) {
return {
input: `templates/src/${kind}/index.ts`,
output: {
@@ -28,15 +28,15 @@ function template(kind, external) {
}),
typescript({
typescript: require('typescript'),
target: "ES2017"
target
})
]
};
}
export default [
template('client', ['__ROOT__', '__ERROR__']),
template('server', builtinModules),
template('client', ['__ROOT__', '__ERROR__'], 'ES2017'),
template('server', builtinModules, 'ES2015'),
{
input: [

4
src/cli/build.ts
View File

@@ -19,9 +19,7 @@ export function build(opts: { bundler?: string, legacy?: boolean }) {
}, {
dest: locations.dest(),
src: locations.src(),
routes: locations.routes(),
webpack: 'webpack',
rollup: 'rollup'
routes: locations.routes()
});
emitter.on('build', event => {

6
src/core/create_manifests.ts
View File

@@ -10,7 +10,7 @@ export function create_main_manifests({ bundler, manifest_data, dev_port }: {
manifest_data: ManifestData;
dev_port?: number;
}) {
const manifest_dir = '__sapper__';
const manifest_dir = path.resolve('__sapper__');
if (!fs.existsSync(manifest_dir)) fs.mkdirSync(manifest_dir);
const path_to_routes = path.relative(manifest_dir, locations.routes());
@@ -19,7 +19,7 @@ export function create_main_manifests({ bundler, manifest_data, dev_port }: {
const server_manifest = generate_server(manifest_data, path_to_routes);
write_if_changed(
`${manifest_dir}/default-layout.html`,
`${manifest_dir}/_layout.html`,
`<svelte:component this={child.component} {...child.props}/>`
);
write_if_changed(`${manifest_dir}/client.js`, client_manifest);
@@ -218,7 +218,7 @@ function generate_server(
function get_file(path_to_routes: string, component: PageComponent) {
if (component.default) {
return `./default-layout.html`;
return `./_layout.html`;
}
return posixify(`${path_to_routes}/${component.file}`);

4
src/interfaces.ts
View File

@@ -44,9 +44,7 @@ export type ServerRoute = {
export type Dirs = {
dest: string,
src: string,
routes: string,
webpack: string,
rollup: string
routes: string
};
export type ManifestData = {

8
templates/src/client/prefetch/index.ts
View File

@@ -4,7 +4,11 @@ import { Target } from '../types';
export default function prefetch(href: string) {
const target: Target = select_route(new URL(href, document.baseURI));
if (target && (!prefetching || href !== prefetching.href)) {
set_prefetching(href, prepare_page(target));
if (target) {
if (!prefetching || href !== prefetching.href) {
set_prefetching(href, prepare_page(target));
}
return prefetching.promise;
}
}

2
templates/src/client/start/index.ts
View File

@@ -103,7 +103,7 @@ function handle_click(event: MouseEvent) {
const target = select_route(url);
if (target) {
const noscroll = a.hasAttribute('sapper-noscroll')
const noscroll = a.hasAttribute('sapper-noscroll');
navigate(target, null, noscroll);
event.preventDefault();
history.pushState({ id: cid }, '', url.href);

69
templates/src/server/middleware/get_page_handler.ts
View File

@@ -33,7 +33,7 @@ export function get_page_handler(
}, req, res, statusCode, error || new Error('Unknown error in preload function'));
}
function handle_page(page: Page, req: Req, res: Res, status = 200, error: Error | string = null) {
async function handle_page(page: Page, req: Req, res: Res, status = 200, error: Error | string = null) {
const build_info: {
bundler: 'rollup' | 'webpack',
shimport: string | null,
@@ -56,12 +56,22 @@ export function get_page_handler(
});
}
const link = preloaded_chunks
.filter(file => file && !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
.join(', ');
if (build_info.bundler === 'rollup') {
// TODO add dependencies and CSS
const link = preloaded_chunks
.filter(file => file && !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="modulepreload"`)
.join(', ');
res.setHeader('Link', link);
res.setHeader('Link', link);
} else {
const link = preloaded_chunks
.filter(file => file && !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
.join(', ');
res.setHeader('Link', link);
}
const store = store_getter ? store_getter(req, res) : null;
@@ -118,30 +128,37 @@ export function get_page_handler(
store
};
const root_preloaded = manifest.root.preload
? manifest.root.preload.call(preload_context, {
path: req.path,
query: req.query,
params: {}
})
: {};
let preloaded;
let match;
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, {
try {
const root_preloaded = manifest.root.preload
? manifest.root.preload.call(preload_context, {
path: req.path,
query: req.query,
params: part.params ? part.params(match) : {}
params: {}
})
: {};
}))).catch(err => {
match = error ? null : page.pattern.exec(req.path);
preloaded = await 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,
query: req.query,
params: part.params ? part.params(match) : {}
})
: {};
})));
} catch (err) {
preload_error = { statusCode: 500, message: err };
return []; // appease TypeScript
}).then(preloaded => {
preloaded = []; // appease TypeScript
}
try {
if (redirect) {
const location = `${req.baseUrl}/${redirect.location}`;
@@ -269,7 +286,7 @@ export function get_page_handler(
res.statusCode = status;
res.end(body);
}).catch(err => {
} catch(err) {
if (error) {
// we encountered an error while rendering the error page — oops
res.statusCode = 500;
@@ -277,7 +294,7 @@ export function get_page_handler(
} else {
handle_error(req, res, 500, err);
}
});
}
}
return function find_route(req: Req, res: Res, next: () => void) {

7
test/app/.gitignore vendored
View File

@@ -1,7 +0,0 @@
.DS_Store
node_modules
.sapper
yarn.lock
cypress/screenshots
templates/.*
dist

81
test/app/README.md
View File

@@ -1,81 +0,0 @@
# sapper-template
The default [Sapper](https://github.com/sveltejs/sapper) template. To clone it and get started:
```bash
npx degit sveltejs/sapper-template my-app
cd my-app
npm install # or yarn!
npm run dev
```
Open up [localhost:3000](http://localhost:3000) and start clicking around.
## Structure
Sapper expects to find three directories in the root of your project — `assets`, `routes` and `templates`.
### assets
The [assets](assets) directory contains any static assets that should be available. These are served using [serve-static](https://github.com/expressjs/serve-static).
In your [service-worker.js](templates/service-worker.js) file, Sapper makes these files available as `__assets__` so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
### routes
This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
**Pages** are Svelte components written in `.html` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
There are three simple rules for naming the files that define your routes:
* A file called `routes/about.html` corresponds to the `/about` route. A file called `routes/blog/[slug].html` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
* The file `routes/index.html` (or `routes/index.js`) corresponds to the root of your app. `routes/about/index.html` is treated the same as `routes/about.html`.
* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
### templates
This directory should contain the following files at a minimum:
* [2xx.html](templates/2xx.html) — a template for the page to serve for valid requests
* [4xx.html](templates/4xx.html) — a template for 4xx-range errors (such as 404 Not Found)
* [5xx.html](templates/5xx.html) — a template for 5xx-range errors (such as 500 Internal Server Error)
* [main.js](templates/main.js) — this module initialises Sapper
* [service-worker.js](templates/service-worker.js) — your app's service worker
Inside the HTML templates, Sapper will inject various values as indicated by `%sapper.xxxx%` tags. Inside JavaScript files, Sapper will replace strings like `__dev__` with the appropriate value.
In lieu of documentation (bear with us), consult the files to see what variables are available and how they're used.
## Webpack config
Sapper uses webpack to provide code-splitting, dynamic imports and hot module reloading, as well as compiling your Svelte components. As long as you don't do anything daft, you can edit the configuration files to add whatever loaders and plugins you'd like.
## Production mode and deployment
To start a production version of your app, run `npm start`. This will disable hot module replacement, and activate the appropriate webpack plugins.
You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands:
```bash
npm install -g now
now
```
## Bugs and feedback
Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).
## License
[LIL](LICENSE)

12
test/app/src/client.js
View File

@@ -1,12 +0,0 @@
import { Store } from 'svelte/store.js';
import * as sapper from '../__sapper__/client.js';
window.init = () => {
return sapper.start({
target: document.querySelector('#sapper'),
store: data => new Store(data)
});
};
window.prefetchRoutes = sapper.prefetchRoutes;
window.goto = sapper.goto;

6
test/app/src/routes/_error.html
View File

@@ -1,6 +0,0 @@
<svelte:head>
<title>{status}</title>
</svelte:head>
<h1>{status}</h1>
<p>{error.message}</p>

19
test/app/src/routes/about.html
View File

@@ -1,19 +0,0 @@
<svelte:head>
<title>About</title>
</svelte:head>
<h1>About this site</h1>
<p>This is the 'about' page. There's not much here.</p>
<button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
<script>
import { prefetch } from '../../__sapper__/client.js';
export default {
methods: {
prefetch
}
};
</script>

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

@@ -1,36 +0,0 @@
<svelte:head>
<title>{post.title}</title>
</svelte:head>
<h1>{post.title}</h1>
<div class='content'>
{@html post.html}
</div>
<script>
export default {
preload({ params, query }) {
// the `slug` parameter is available because this file
// is called [slug].html
const { slug } = params;
if (slug === 'throw-an-error') {
return this.error(500, 'something went wrong');
}
return fetch(`blog/${slug}.json`).then(r => {
if (r.status === 200) {
return r.json().then(post => ({ post }));
this.error(r.status, '')
}
if (r.status === 404) {
this.error(404, 'Not found');
} else {
throw new Error('Something went wrong');
}
});
}
};
</script>

23
test/app/src/routes/blog/[slug].json.js
View File

@@ -1,23 +0,0 @@
import posts from './_posts.js';
const lookup = {};
posts.forEach(post => {
lookup[post.slug] = JSON.stringify(post);
});
export function get(req, res, next) {
// the `slug` parameter is available because this file
// is called [slug].js
const { slug } = req.params;
if (slug in lookup) {
res.writeHead(200, {
'Content-Type': 'application/json',
'Cache-Control': `no-cache`
});
res.end(lookup[slug]);
} else {
next();
}
}

151
test/app/src/routes/blog/_posts.js
View File

@@ -1,151 +0,0 @@
// Ordinarily, you'd generate this data from markdown files in your
// repo, or fetch them from a database of some kind. But in order to
// avoid unnecessary dependencies in the starter template, and in the
// service of obviousness, we're just going to leave it here.
// This file is called `_posts.js` rather than `posts.js`, because
// we don't want to create an `/api/blog/posts` route — the leading
// underscore tells Sapper not to do that.
const posts = [
{
title: 'What is Sapper?',
slug: 'what-is-sapper',
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>
<ul>
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
<li>Server-side rendering (SSR) with client-side hydration</li>
<li>Service worker for offline support, and all the PWA bells and whistles</li>
<li>The nicest development experience you've ever had, or your money back</li>
</ul>
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
`
},
{
title: 'How to use Sapper',
slug: 'how-to-use-sapper',
html: `
<h2>Step one</h2>
<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
<pre><code>npx degit sveltejs/sapper-template my-app
cd my-app
npm install # or yarn!
npm run dev
</code></pre>
<h2>Step two</h2>
<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>routes</code> directory or add new ones.</p>
<h2>Step three</h2>
<p>...</p>
<h2>Step four</h2>
<p>Resist overdone joke formats.</p>
`
},
{
title: 'Why the name?',
slug: 'why-the-name',
html: `
<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
`
},
{
title: 'How is Sapper different from Next.js?',
slug: 'how-is-sapper-different-from-next',
html: `
<p><a href='https://github.com/zeit/next.js/'>Next.js</a> is a React framework from <a href='https://zeit.co'>Zeit</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
<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>
</ul>
`
},
{
title: 'How can I get involved?',
slug: 'how-can-i-get-involved',
html: `
<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://gitter.im/sveltejs/svelte'>Gitter chatroom</a>. Everyone is welcome, especially you!</p>
`
},
{
title: 'A very long post with deep links',
slug: 'a-very-long-post',
html: `
<h2 id='one'>One</h2>
<p>I'll have a vodka rocks. (Mom, it's breakfast time.) And a piece of toast. Let me out that Queen. Fried cheese… with club sauce.</p>
<p>Her lawyers are claiming the seal is worth $250,000. And that's not even including Buster's Swatch. This was a big get for God. What, so the guy we are meeting with can't even grow his own hair? COME ON! She's always got to wedge herself in the middle of us so that she can control everything. Yeah. Mom's awesome. It's, like, Hey, you want to go down to the whirlpool? Yeah, I don't have a husband. I call it Swing City. The CIA should've just Googled for his hideout, evidently. There are dozens of us! DOZENS! Yeah, like I'm going to take a whiz through this $5,000 suit. COME ON.</p>
<h2 id='two'>Two</h2>
<p>Tobias Fünke costume. Heart attack never stopped old big bear.</p>
<p>Nellie is blowing them all AWAY. I will be a bigger and hairier mole than the one on your inner left thigh! I'll sacrifice anything for my children.</p>
<p>Up yours, granny! You couldn't handle it! Hey, Dad. Look at you. You're a year older…and a year closer to death. Buster: Oh yeah, I guess that's kind of funny. Bob Loblaw Law Blog. The guy runs a prison, he can have any piece of ass he wants.</p>
<p><a href="blog/another-long-post">clicking this link should reset scroll</a></p>
<p><a href="blog/another-long-post" sapper-noscroll>clicking this link should not affect scroll</a></p>
<h2 id='three'>Three</h2>
<p>I prematurely shot my wad on what was supposed to be a dry run, so now I'm afraid I have something of a mess on my hands. Dead Dove DO NOT EAT. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You're losing blood, aren't you? Gob: Probably, my socks are wet. Sure, let the little fruit do it. HUZZAH! Although George Michael had only got to second base, he'd gone in head first, like Pete Rose. I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block!</p>
<p>Gosh Mom… after all these years, God's not going to take a call from you. Come on, this is a Bluth family celebration. It's no place for children.</p>
<p>And I wouldn't just lie there, if that's what you're thinking. That's not what I WAS thinking. Who? i just dont want him to point out my cracker ass in front of ann. When a man needs to prove to a woman that he's actually… When a man loves a woman… Heyyyyyy Uncle Father Oscar. [Stabbing Gob] White power! Gob: I'm white! Let me take off my assistant's skirt and put on my Barbra-Streisand-in-The-Prince-of-Tides ass-masking therapist pantsuit. In the mid '90s, Tobias formed a folk music band with Lindsay and Maebe which he called Dr. Funke's 100 Percent Natural Good Time Family Band Solution. The group was underwritten by the Natural Food Life Company, a division of Chem-Grow, an Allen Crayne acqusition, which was part of the Squimm Group. Their motto was simple: We keep you alive.</p>
<h2 id='four'>Four</h2>
<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: 'Another long post',
slug: 'another-long-post',
html: `
<h2 id='one'>One</h2>
<p>I'll have a vodka rocks. (Mom, it's breakfast time.) And a piece of toast. Let me out that Queen. Fried cheese… with club sauce.</p>
<p>Her lawyers are claiming the seal is worth $250,000. And that's not even including Buster's Swatch. This was a big get for God. What, so the guy we are meeting with can't even grow his own hair? COME ON! She's always got to wedge herself in the middle of us so that she can control everything. Yeah. Mom's awesome. It's, like, Hey, you want to go down to the whirlpool? Yeah, I don't have a husband. I call it Swing City. The CIA should've just Googled for his hideout, evidently. There are dozens of us! DOZENS! Yeah, like I'm going to take a whiz through this $5,000 suit. COME ON.</p>
<h2 id='two'>Two</h2>
<p>Tobias Fünke costume. Heart attack never stopped old big bear.</p>
<p>Nellie is blowing them all AWAY. I will be a bigger and hairier mole than the one on your inner left thigh! I'll sacrifice anything for my children.</p>
<p>Up yours, granny! You couldn't handle it! Hey, Dad. Look at you. You're a year older…and a year closer to death. Buster: Oh yeah, I guess that's kind of funny. Bob Loblaw Law Blog. The guy runs a prison, he can have any piece of ass he wants.</p>
<h2 id='three'>Three</h2>
<p>I prematurely shot my wad on what was supposed to be a dry run, so now I'm afraid I have something of a mess on my hands. Dead Dove DO NOT EAT. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You're losing blood, aren't you? Gob: Probably, my socks are wet. Sure, let the little fruit do it. HUZZAH! Although George Michael had only got to second base, he'd gone in head first, like Pete Rose. I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block!</p>
<p>Gosh Mom… after all these years, God's not going to take a call from you. Come on, this is a Bluth family celebration. It's no place for children.</p>
<p>And I wouldn't just lie there, if that's what you're thinking. That's not what I WAS thinking. Who? i just dont want him to point out my cracker ass in front of ann. When a man needs to prove to a woman that he's actually… When a man loves a woman… Heyyyyyy Uncle Father Oscar. [Stabbing Gob] White power! Gob: I'm white! Let me take off my assistant's skirt and put on my Barbra-Streisand-in-The-Prince-of-Tides ass-masking therapist pantsuit. In the mid '90s, Tobias formed a folk music band with Lindsay and Maebe which he called Dr. Funke's 100 Percent Natural Good Time Family Band Solution. The group was underwritten by the Natural Food Life Company, a division of Chem-Grow, an Allen Crayne acqusition, which was part of the Squimm Group. Their motto was simple: We keep you alive.</p>
<h2 id='four'>Four</h2>
<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>
`
}
];
posts.forEach(post => {
post.html = post.html.replace(/^\t{3}/gm, '');
});
export default posts;

25
test/app/src/routes/blog/index.html
View File

@@ -1,25 +0,0 @@
<svelte:head>
<title>Blog</title>
</svelte:head>
<h1>Recent posts</h1>
<ul>
{#each posts as post}
<!-- we're using the non-standard `rel=prefetch` attribute to
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>
{/each}
</ul>
<script>
export default {
preload({ params, query }) {
return fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
});
}
};
</script>

17
test/app/src/routes/blog/index.json.js
View File

@@ -1,17 +0,0 @@
import posts from './_posts.js';
const contents = JSON.stringify(posts.map(post => {
return {
title: post.title,
slug: post.slug
};
}));
export function get(req, res) {
res.writeHead(200, {
'Content-Type': 'application/json',
'Cache-Control': `max-age=${30 * 60 * 1e3}` // cache for 30 minutes
});
res.end(contents);
}

31
test/app/src/routes/index.html
View File

@@ -1,31 +0,0 @@
<svelte:head>
<title>Sapper project template</title>
</svelte:head>
<h1>Great success!</h1>
<a href='.'>home</a>
<a href='about'>about</a>
<a href='slow-preload'>slow preload</a>
<a href='non-sapper-redirect-from'>redirect</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>
<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>
<style>
h1 {
text-align: center;
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
</style>

1
test/app/src/routes/missing-index/ok.html
View File

@@ -1 +0,0 @@
<h1>it works</h1>

1
test/app/src/routes/non-sapper-redirect-to.html
View File

@@ -1 +0,0 @@
<h1>redirected</h1>

3
test/app/src/routes/throw-an-error.js
View File

@@ -1,3 +0,0 @@
export function get() {
throw new Error('nope');
}

126
test/app/src/server.js
View File

@@ -1,126 +0,0 @@
import fs from 'fs';
import { resolve } from 'url';
import express from 'express';
import serve from 'serve-static';
import { Store } from 'svelte/store.js';
import * as sapper from '../__sapper__/server.js';
let pending;
let ended;
process.on('message', message => {
if (message.action === 'start') {
if (pending) {
throw new Error(`Already capturing`);
}
pending = new Set();
ended = false;
process.send({ type: 'ready' });
}
if (message.action === 'end') {
ended = true;
if (pending.size === 0) {
process.send({ type: 'done' });
pending = null;
}
}
});
const app = express();
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) => {
return fetch(resolve(base, url), opts);
};
const middlewares = [
serve('assets'),
// set test cookie
(req, res, next) => {
res.setHeader('Set-Cookie', ['a=1; Path=/', 'b=2; Path=/']);
next();
},
// emit messages so we can capture requests
(req, res, next) => {
if (!pending) return next();
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();
},
// set up some values for the store
(req, res, next) => {
req.hello = 'hello';
res.locals = { name: 'world' };
next();
},
sapper.middleware({
store: (req, res) => {
return new Store({
title: `${req.hello} ${res.locals.name}`
});
},
ignore: [
/foobar/i,
'/buzz',
'fizz',
x => x === '/hello'
]
}),
];
app.get(`${BASEPATH}/non-sapper-redirect-from`, (req, res) => {
res.writeHead(301, {
Location: `${BASEPATH}/non-sapper-redirect-to`
});
res.end();
});
if (BASEPATH) {
app.use(BASEPATH, ...middlewares);
} else {
app.use(...middlewares);
}
['foobar', 'buzz', 'fizzer', 'hello'].forEach(uri => {
app.get('/'+uri, (req, res) => res.end(uri));
});
app.listen(PORT);

33
test/app/src/template.html
View File

@@ -1,33 +0,0 @@
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<meta name='theme-color' content='#aa1e1e'>
%sapper.base%
<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
lazily loaded when it precaches secondary pages -->
%sapper.styles%
<!-- This contains the contents of the <:Head> component, if
the current page has one -->
%sapper.head%
</head>
<body>
<!-- The application will be rendered inside this element,
because `templates/main.js` references it -->
<div id='sapper'>%sapper.html%</div>
<!-- Sapper creates a <script> tag containing `templates/main.js`
and anything else it needs to hydrate the app and
initialise the router -->
%sapper.scripts%
</body>
</html>

BIN
test/app/static/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

45
test/app/static/global.css
View File

@@ -1,45 +0,0 @@
body {
margin: 0;
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #333;
}
main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
font-weight: 400;
line-height: 1.2;
}
h1 {
font-size: 2em;
}
a {
color: inherit;
}
code {
font-family: menlo, inconsolata, monospace;
font-size: calc(1em - 2px);
color: #555;
background-color: #f0f0f0;
padding: 0.2em 0.4em;
border-radius: 2px;
}
@media (min-width: 400px) {
body {
font-size: 16px;
}
}

BIN
test/app/static/great-success.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

20
test/app/static/manifest.json
View File

@@ -1,20 +0,0 @@
{
"background_color": "#ffffff",
"theme_color": "#aa1e1e",
"name": "TODO",
"short_name": "TODO",
"display": "minimal-ui",
"start_url": "/",
"icons": [
{
"src": "svelte-logo-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "svelte-logo-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

BIN
test/app/static/svelte-logo-192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
test/app/static/svelte-logo-512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 KiB

84
test/app/webpack.config.js
View File

@@ -1,84 +0,0 @@
const path = require('path');
const webpack = require('webpack');
const config = require('../../config/webpack.js');
const sapper_pkg = require('../../package.json');
const mode = process.env.NODE_ENV;
const isDev = mode === 'development';
module.exports = {
client: {
entry: config.client.entry(),
output: config.client.output(),
resolve: {
extensions: ['.js', '.html']
},
module: {
rules: [
{
test: /\.html$/,
exclude: /node_modules/,
use: {
loader: 'svelte-loader',
options: {
hydratable: true,
cascade: false,
store: true
}
}
}
]
},
mode,
optimization: {
minimize: false
},
plugins: [
isDev && new webpack.HotModuleReplacementPlugin()
].filter(Boolean),
devtool: isDev && 'inline-source-map'
},
server: {
entry: config.server.entry(),
output: config.server.output(),
target: 'node',
resolve: {
extensions: ['.js', '.html']
},
externals: [].concat(
Object.keys(sapper_pkg.dependencies),
Object.keys(sapper_pkg.devDependencies)
),
module: {
rules: [
{
test: /\.html$/,
exclude: /node_modules/,
use: {
loader: 'svelte-loader',
options: {
css: false,
cascade: false,
store: true,
generate: 'ssr'
}
}
}
]
},
mode,
optimization: {
minimize: false
},
performance: {
hints: false // it doesn't matter if server.js is large
}
},
serviceworker: {
entry: config.serviceworker.entry(),
output: config.serviceworker.output(),
mode
}
};

122
test/apps/AppRunner.ts Normal file
View File

@@ -0,0 +1,122 @@
import * as path from 'path';
import * as puppeteer from 'puppeteer';
import * as ports from 'port-authority';
import { fork, ChildProcess } from 'child_process';
declare const start: () => Promise<void>;
declare const prefetchRoutes: () => Promise<void>;
declare const prefetch: (href: string) => Promise<void>;
declare const goto: (href: string) => Promise<void>;
export class AppRunner {
cwd: string;
entry: string;
port: number;
proc: ChildProcess;
messages: any[];
browser: puppeteer.Browser;
page: puppeteer.Page;
constructor(cwd: string, entry: string) {
this.cwd = cwd;
this.entry = path.join(cwd, entry);
this.messages = [];
}
async start() {
this.port = await ports.find(3000);
this.proc = fork(this.entry, [], {
cwd: this.cwd,
env: {
PORT: String(this.port)
}
});
this.proc.on('message', message => {
if (!message.__sapper__) return;
this.messages.push(message);
});
this.browser = await puppeteer.launch({ args: ['--no-sandbox'] });
this.page = await this.browser.newPage();
this.page.on('console', msg => {
const text = msg.text();
if (!text.startsWith('Failed to load resource')) {
console.log(text);
}
});
return {
page: this.page,
base: `http://localhost:${this.port}`,
// helpers
start: () => this.page.evaluate(() => start()),
prefetchRoutes: () => this.page.evaluate(() => prefetchRoutes()),
prefetch: (href: string) => this.page.evaluate((href: string) => prefetch(href), href),
goto: (href: string) => this.page.evaluate((href: string) => goto(href), href)
};
}
capture(fn: () => any): Promise<string[]> {
return new Promise((fulfil, reject) => {
const requests: string[] = [];
const pending: Set<string> = new Set();
let done = false;
function handle_request(request: puppeteer.Request) {
const url = request.url();
requests.push(url);
pending.add(url);
}
function handle_requestfinished(request: puppeteer.Request) {
const url = request.url();
pending.delete(url);
if (done && pending.size === 0) {
cleanup();
fulfil(requests);
}
}
function handle_requestfailed(request: puppeteer.Request) {
cleanup();
reject(new Error(`failed to fetch ${request.url()}`))
}
const cleanup = () => {
this.page.removeListener('request', handle_request);
this.page.removeListener('requestfinished', handle_requestfinished);
this.page.removeListener('requestfailed', handle_requestfailed);
};
this.page.on('request', handle_request);
this.page.on('requestfinished', handle_requestfinished);
this.page.on('requestfailed', handle_requestfailed);
return Promise.resolve(fn()).then(() => {
if (pending.size === 0) {
cleanup();
fulfil(requests);
}
done = true;
});
});
}
end() {
return Promise.all([
this.browser.close(),
new Promise(fulfil => {
this.proc.once('exit', fulfil);
this.proc.kill();
})
]);
}
}

270
test/apps/basics/__test__.ts Normal file
View File

@@ -0,0 +1,270 @@
import * as path from 'path';
import * as assert from 'assert';
import * as puppeteer from 'puppeteer';
import * as http from 'http';
import { build } from '../../../api';
import { AppRunner } from '../AppRunner';
import { wait } from '../../utils';
declare let deleted: { id: number };
declare let el: any;
describe('basics', function() {
this.timeout(10000);
let runner: AppRunner;
let page: puppeteer.Page;
let base: string;
// helpers
let start: () => Promise<void>;
let prefetchRoutes: () => Promise<void>;
let prefetch: (href: string) => Promise<void>;
let goto: (href: string) => Promise<void>;
// hooks
before(() => {
return new Promise((fulfil, reject) => {
// TODO this is brittle. Make it unnecessary
process.chdir(__dirname);
process.env.NODE_ENV = 'production';
// TODO this API isn't great. Rethink it
const emitter = build({
bundler: 'rollup'
}, {
src: path.join(__dirname, 'src'),
routes: path.join(__dirname, 'src/routes'),
dest: path.join(__dirname, '__sapper__/build')
});
emitter.on('error', reject);
emitter.on('done', async () => {
try {
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
({ base, page, start, prefetchRoutes, prefetch, goto } = await runner.start());
fulfil();
} catch (err) {
reject(err);
}
});
});
});
after(() => runner.end());
const title = () => page.$eval('h1', node => node.textContent);
it('serves /', async () => {
await page.goto(base);
assert.equal(
await title(),
'Great success!'
);
});
it('serves /?', async () => {
await page.goto(`${base}?`);
assert.equal(
await title(),
'Great success!'
);
});
it('serves static route', async () => {
await page.goto(`${base}/a`);
assert.equal(
await title(),
'a'
);
});
it('serves static route from dir/index.html file', async () => {
await page.goto(`${base}/b`);
assert.equal(
await title(),
'b'
);
});
it('serves dynamic route', async () => {
await page.goto(`${base}/test-slug`);
assert.equal(
await title(),
'TEST-SLUG'
);
});
it('navigates to a new page without reloading', async () => {
await page.goto(base);
await start();
await prefetchRoutes();
const requests: string[] = await runner.capture(async () => {
await page.click('a[href="a"]');
});
assert.deepEqual(requests, []);
assert.equal(
await title(),
'a'
);
});
it('navigates programmatically', async () => {
await page.goto(`${base}/a`);
await start();
await goto('b');
assert.equal(
await title(),
'b'
);
});
it('prefetches programmatically', async () => {
await page.goto(`${base}/a`);
await start();
const requests = await runner.capture(() => prefetch('b'));
assert.equal(requests.length, 2);
assert.equal(requests[1], `${base}/b.json`);
});
// TODO equivalent test for a webpack app
it('sets Content-Type, Link...modulepreload, and Cache-Control headers', () => {
return new Promise((fulfil, reject) => {
const req = http.get(base, res => {
try {
const { headers } = res;
assert.equal(
headers['content-type'],
'text/html'
);
assert.equal(
headers['cache-control'],
'max-age=600'
);
// TODO preload more than just the entry point
const regex = /<\/client\/client\.\w+\.js>;rel="modulepreload"/;
const link = <string>headers['link'];
assert.ok(regex.test(link), link);
fulfil();
} catch (err) {
reject(err);
}
});
req.on('error', reject);
});
});
it('calls a delete handler', async () => {
await page.goto(`${base}/delete-test`);
await start();
await page.click('.del');
await page.waitForFunction(() => deleted);
assert.equal(await page.evaluate(() => deleted.id), 42);
});
it('hydrates initial route', async () => {
await page.goto(base);
await page.evaluate(() => {
el = document.querySelector('.hydrate-test');
});
await start();
assert.ok(await page.evaluate(() => {
return document.querySelector('.hydrate-test') === el;
}));
});
it('does not attempt client-side navigation to server routes', async () => {
await page.goto(base);
await start();
await prefetchRoutes();
await page.click(`[href="ambiguous/ok.json"]`);
await wait(50);
assert.equal(
await page.evaluate(() => document.body.textContent),
'ok'
);
});
it('allows reserved words as route names', async () => {
await page.goto(`${base}/const`);
await start();
assert.equal(
await title(),
'reserved words are okay as routes'
);
});
it('accepts value-less query string parameter on server', async () => {
await page.goto(`${base}/echo-query?message`);
assert.equal(
await title(),
'message: ""'
);
});
it('accepts value-less query string parameter on client', async () => {
await page.goto(base);
await start();
await prefetchRoutes();
await page.click('a[href="echo-query?message"]')
assert.equal(
await title(),
'message: ""'
);
});
// skipped because Nightmare doesn't seem to focus the <a> correctly
it('resets the active element after navigation', async () => {
await page.goto(base);
await start();
await prefetchRoutes();
await page.click('[href="a"]');
await wait(50);
assert.equal(
await page.evaluate(() => document.activeElement.nodeName),
'BODY'
);
});
it('replaces %sapper.xxx% tags safely', async () => {
await page.goto(`${base}/unsafe-replacement`);
await start();
const html = await page.evaluate(() => document.body.innerHTML);
assert.equal(html.indexOf('%sapper'), -1);
});
});

64
test/apps/basics/rollup.config.js Normal file
View File

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

9
test/apps/basics/src/client.js Normal file
View File

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

1
test/apps/basics/src/routes/[slug].html Normal file
View File

@@ -0,0 +1 @@
<h1>{params.slug.toUpperCase()}</h1>

3
test/apps/basics/src/routes/_error.html Normal file
View File

@@ -0,0 +1,3 @@
<h1>{status}</h1>
<p>{error.message}</p>

1
test/apps/basics/src/routes/a.html Normal file
View File

@@ -0,0 +1 @@
<h1>a</h1>

0
test/apps/basics/src/routes/ambiguous/[slug].html Normal file
View File

3
test/apps/basics/src/routes/ambiguous/[slug].json.js Normal file
View File

@@ -0,0 +1,3 @@
export function get(req, res) {
res.end(req.params.slug);
}

11
test/apps/basics/src/routes/b/index.html Normal file
View File

@@ -0,0 +1,11 @@
<h1>{letter}</h1>
<script>
export default {
preload() {
return this.fetch('b.json').then(r => r.json()).then(letter => {
return { letter };
});
}
};
</script>

3
test/apps/basics/src/routes/b/index.json.js Normal file
View File

@@ -0,0 +1,3 @@
export function get(req, res) {
res.end(JSON.stringify('b'));
}

0
test/app/src/routes/const.html → test/apps/basics/src/routes/const.html
View File

0
test/app/src/routes/api/delete/[id].js → test/apps/basics/src/routes/delete-test/[id].json.js
View File

6
test/app/src/routes/delete-test.html → test/apps/basics/src/routes/delete-test/index.html
View File

@@ -2,9 +2,13 @@
<script>
export default {
oncreate() {
window.deleted = null;
},
methods: {
del() {
fetch(`api/delete/42`, { method: 'DELETE' })
fetch(`delete-test/42.json`, { method: 'DELETE' })
.then(r => r.json())
.then(data => {
window.deleted = data;

9
test/apps/basics/src/routes/echo-query/index.html Normal file
View File

@@ -0,0 +1,9 @@
<h1>message: "{message}"</h1>
<script>
export default {
preload({ query }) {
return query;
}
};
</script>

7
test/apps/basics/src/routes/index.html Normal file
View File

@@ -0,0 +1,7 @@
<h1>Great success!</h1>
<a href="a">a</a>
<a href="ambiguous/ok.json">ok</a>
<a href="echo-query?message">ok</a>
<div class='hydrate-test'></div>

0
test/app/src/routes/unsafe-replacement.html → test/apps/basics/src/routes/unsafe-replacement.html
View File

8
test/apps/basics/src/server.js Normal file
View File

@@ -0,0 +1,8 @@
import polka from 'polka';
import * as sapper from '../__sapper__/server.js';
const { PORT } = process.env;
polka()
.use(sapper.middleware())
.listen(PORT);

21
test/app/src/service-worker.js → test/apps/basics/src/service-worker.js
View File

@@ -1,10 +1,10 @@
import { files, shell, timestamp, routes } from '../__sapper__/service-worker.js';
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
const ASSETS = `cachetimestamp`;
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by webpack,
// `assets` is an array of everything in the `assets` directory
const to_cache = shell.concat(files);
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(ASSETS);
const cached = new Set(to_cache);
self.addEventListener('install', event => {
@@ -26,19 +26,24 @@ self.addEventListener('activate', event => {
if (key !== ASSETS) await caches.delete(key);
}
await self.clients.claim();
self.clients.claim();
})
);
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') return;
const url = new URL(event.request.url);
// don't try to handle e.g. data: URIs
if (!url.protocol.startsWith('http')) return;
// ignore dev server requests
if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
// always serve assets and webpack-generated files from cache
if (cached.has(url.pathname)) {
if (url.host === self.location.host && cached.has(url.pathname)) {
event.respondWith(caches.match(event.request));
return;
}
@@ -53,12 +58,14 @@ self.addEventListener('fetch', event => {
}
*/
if (event.request.cache === 'only-if-cached') return;
// for everything else, try the network first, falling back to
// cache if the user is offline. (If the pages never change, you
// might prefer a cache-first approach to a network-first one.)
event.respondWith(
caches
.open('offline')
.open(`offline${timestamp}`)
.then(async cache => {
try {
const response = await fetch(event.request);

14
test/apps/basics/src/template.html Normal file
View File

@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
%sapper.base%
%sapper.styles%
%sapper.head%
</head>
<body>
<div id='sapper'>%sapper.html%</div>
%sapper.scripts%
</body>
</html>

83
test/apps/credentials/__test__.ts Normal file
View File

@@ -0,0 +1,83 @@
import * as path from 'path';
import * as assert from 'assert';
import * as puppeteer from 'puppeteer';
import { build } from '../../../api';
import { wait } from '../../utils';
import { AppRunner } from '../AppRunner';
describe('credentials', function() {
this.timeout(10000);
let runner: AppRunner;
let page: puppeteer.Page;
let base: string;
// helpers
let start: () => Promise<void>;
let prefetchRoutes: () => Promise<void>;
// hooks
before(() => {
return new Promise((fulfil, reject) => {
// TODO this is brittle. Make it unnecessary
process.chdir(__dirname);
process.env.NODE_ENV = 'production';
// TODO this API isn't great. Rethink it
const emitter = build({
bundler: 'rollup'
}, {
src: path.join(__dirname, 'src'),
routes: path.join(__dirname, 'src/routes'),
dest: path.join(__dirname, '__sapper__/build')
});
emitter.on('error', reject);
emitter.on('done', async () => {
try {
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
({ base, page, start, prefetchRoutes } = await runner.start());
fulfil();
} catch (err) {
reject(err);
}
});
});
});
after(() => runner.end());
it('sends cookies when using this.fetch with credentials: "include"', async () => {
await page.goto(`${base}/credentials?creds=include`);
assert.equal(
await page.$eval('h1', node => node.textContent),
'a: 1, b: 2, max-age: undefined'
);
});
it('does not send cookies when using this.fetch without credentials', async () => {
await page.goto(`${base}/credentials`);
assert.equal(
await page.$eval('h1', node => node.textContent),
'unauthorized'
);
});
it('delegates to fetch on the client', async () => {
await page.goto(base)
await start();
await prefetchRoutes();
await page.click('[href="credentials?creds=include"]');
await wait(50);
assert.equal(
await page.$eval('h1', node => node.textContent),
'a: 1, b: 2, max-age: undefined'
);
});
});

64
test/apps/credentials/rollup.config.js Normal file
View File

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

9
test/apps/credentials/src/client.js Normal file
View File

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

3
test/apps/credentials/src/routes/_error.html Normal file
View File

@@ -0,0 +1,3 @@
<h1>{status}</h1>
<p>{error.message}</p>

0
test/app/src/routes/credentials/index.html → test/apps/credentials/src/routes/credentials/index.html
View File

0
test/app/src/routes/credentials/test.json.js → test/apps/credentials/src/routes/credentials/test.json.js
View File

3
test/apps/credentials/src/routes/index.html Normal file
View File

@@ -0,0 +1,3 @@
<h1>Great success!</h1>
<a href="credentials?creds=include">link</a>

13
test/apps/credentials/src/server.js Normal file
View File

@@ -0,0 +1,13 @@
import polka from 'polka';
import * as sapper from '../__sapper__/server.js';
const { PORT } = process.env;
polka()
.use((req, res, next) => {
// set test cookie
res.setHeader('Set-Cookie', ['a=1; Max-Age=3600', 'b=2; Max-Age=3600']);
next();
})
.use(sapper.middleware())
.listen(PORT);

82
test/apps/credentials/src/service-worker.js Normal file
View File

@@ -0,0 +1,82 @@
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by webpack,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(ASSETS);
const cached = new Set(to_cache);
self.addEventListener('install', event => {
event.waitUntil(
caches
.open(ASSETS)
.then(cache => cache.addAll(to_cache))
.then(() => {
self.skipWaiting();
})
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(async keys => {
// delete old caches
for (const key of keys) {
if (key !== ASSETS) await caches.delete(key);
}
self.clients.claim();
})
);
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') return;
const url = new URL(event.request.url);
// don't try to handle e.g. data: URIs
if (!url.protocol.startsWith('http')) return;
// ignore dev server requests
if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
// always serve assets and webpack-generated files from cache
if (url.host === self.location.host && cached.has(url.pathname)) {
event.respondWith(caches.match(event.request));
return;
}
// for pages, you might want to serve a shell `index.html` file,
// which Sapper has generated for you. It's not right for every
// app, but if it's right for yours then uncomment this section
/*
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
event.respondWith(caches.match('/index.html'));
return;
}
*/
if (event.request.cache === 'only-if-cached') return;
// for everything else, try the network first, falling back to
// cache if the user is offline. (If the pages never change, you
// might prefer a cache-first approach to a network-first one.)
event.respondWith(
caches
.open(`offline${timestamp}`)
.then(async cache => {
try {
const response = await fetch(event.request);
cache.put(event.request, response.clone());
return response;
} catch(err) {
const response = await cache.match(event.request);
if (response) return response;
throw err;
}
})
);
});

14
test/apps/credentials/src/template.html Normal file
View File

@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
%sapper.base%
%sapper.styles%
%sapper.head%
</head>
<body>
<div id='sapper'>%sapper.html%</div>
%sapper.scripts%
</body>
</html>

92
test/apps/encoding/__test__.ts Normal file
View File

@@ -0,0 +1,92 @@
import * as path from 'path';
import * as assert from 'assert';
import * as puppeteer from 'puppeteer';
import { build } from '../../../api';
import { AppRunner } from '../AppRunner';
import { wait } from '../../utils';
describe('encoding', function() {
this.timeout(10000);
let runner: AppRunner;
let page: puppeteer.Page;
let base: string;
// helpers
let start: () => Promise<void>;
let prefetchRoutes: () => Promise<void>;
// hooks
before(() => {
return new Promise((fulfil, reject) => {
// TODO this is brittle. Make it unnecessary
process.chdir(__dirname);
process.env.NODE_ENV = 'production';
// TODO this API isn't great. Rethink it
const emitter = build({
bundler: 'rollup'
}, {
src: path.join(__dirname, 'src'),
routes: path.join(__dirname, 'src/routes'),
dest: path.join(__dirname, '__sapper__/build')
});
emitter.on('error', reject);
emitter.on('done', async () => {
try {
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
({ base, page, start, prefetchRoutes } = await runner.start());
fulfil();
} catch (err) {
reject(err);
}
});
});
});
after(() => runner.end());
it('encodes routes', async () => {
await page.goto(`${base}/fünke`);
assert.equal(
await page.$eval('h1', node => node.textContent),
`I'm afraid I just blue myself`
);
});
it('encodes req.params and req.query for server-rendered pages', async () => {
await page.goto(`${base}/echo/page/encöded?message=hëllö+wörld`);
assert.equal(
await page.$eval('h1', node => node.textContent),
'encöded (hëllö wörld)'
);
});
it('encodes req.params and req.query for client-rendered pages', async () => {
await page.goto(base);
await start();
await prefetchRoutes();
await page.click('a[href="echo/page/encöded?message=hëllö+wörld"]');
await wait(50);
assert.equal(
await page.$eval('h1', node => node.textContent),
'encöded (hëllö wörld)'
);
});
it('encodes req.params for server routes', async () => {
await page.goto(`${base}/echo/server-route/encöded`);
assert.equal(
await page.$eval('h1', node => node.textContent),
'encöded'
);
});
});

64
test/apps/encoding/rollup.config.js Normal file
View File

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

9
test/apps/encoding/src/client.js Normal file
View File

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

3
test/apps/encoding/src/routes/_error.html Normal file
View File

@@ -0,0 +1,3 @@
<h1>{status}</h1>
<p>{error.message}</p>

0
test/app/src/routes/echo/page/[slug].html → test/apps/encoding/src/routes/echo/page/[slug].html
View File

0
test/app/src/routes/echo/server-route/[slug].js → test/apps/encoding/src/routes/echo/server-route/[slug].js
View File

0
test/app/src/routes/fünke.html → test/apps/encoding/src/routes/fünke.html
View File

0
test/app/src/routes/fünke.json.js → test/apps/encoding/src/routes/fünke.json.js
View File

3
test/apps/encoding/src/routes/index.html Normal file
View File

@@ -0,0 +1,3 @@
<h1>Great success!</h1>
<a href="echo/page/encöded?message=hëllö+wörld">link</a>

8
test/apps/encoding/src/server.js Normal file
View File

@@ -0,0 +1,8 @@
import polka from 'polka';
import * as sapper from '../__sapper__/server.js';
const { PORT } = process.env;
polka()
.use(sapper.middleware())
.listen(PORT);

82
test/apps/encoding/src/service-worker.js Normal file
View File

@@ -0,0 +1,82 @@
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by webpack,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(ASSETS);
const cached = new Set(to_cache);
self.addEventListener('install', event => {
event.waitUntil(
caches
.open(ASSETS)
.then(cache => cache.addAll(to_cache))
.then(() => {
self.skipWaiting();
})
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(async keys => {
// delete old caches
for (const key of keys) {
if (key !== ASSETS) await caches.delete(key);
}
self.clients.claim();
})
);
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') return;
const url = new URL(event.request.url);
// don't try to handle e.g. data: URIs
if (!url.protocol.startsWith('http')) return;
// ignore dev server requests
if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
// always serve assets and webpack-generated files from cache
if (url.host === self.location.host && cached.has(url.pathname)) {
event.respondWith(caches.match(event.request));
return;
}
// for pages, you might want to serve a shell `index.html` file,
// which Sapper has generated for you. It's not right for every
// app, but if it's right for yours then uncomment this section
/*
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
event.respondWith(caches.match('/index.html'));
return;
}
*/
if (event.request.cache === 'only-if-cached') return;
// for everything else, try the network first, falling back to
// cache if the user is offline. (If the pages never change, you
// might prefer a cache-first approach to a network-first one.)
event.respondWith(
caches
.open(`offline${timestamp}`)
.then(async cache => {
try {
const response = await fetch(event.request);
cache.put(event.request, response.clone());
return response;
} catch(err) {
const response = await cache.match(event.request);
if (response) return response;
throw err;
}
})
);
});

14
test/apps/encoding/src/template.html Normal file
View File

@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
%sapper.base%
%sapper.styles%
%sapper.head%
</head>
<body>
<div id='sapper'>%sapper.html%</div>
%sapper.scripts%
</body>
</html>

137
test/apps/errors/__test__.ts Normal file
View File

@@ -0,0 +1,137 @@
import * as path from 'path';
import * as assert from 'assert';
import * as puppeteer from 'puppeteer';
import { build } from '../../../api';
import { AppRunner } from '../AppRunner';
import { wait } from '../../utils';
describe('errors', function() {
this.timeout(10000);
let runner: AppRunner;
let page: puppeteer.Page;
let base: string;
// helpers
let start: () => Promise<void>;
let prefetchRoutes: () => Promise<void>;
// hooks
before(() => {
return new Promise((fulfil, reject) => {
// TODO this is brittle. Make it unnecessary
process.chdir(__dirname);
process.env.NODE_ENV = 'production';
// TODO this API isn't great. Rethink it
const emitter = build({
bundler: 'rollup'
}, {
src: path.join(__dirname, 'src'),
routes: path.join(__dirname, 'src/routes'),
dest: path.join(__dirname, '__sapper__/build')
});
emitter.on('error', reject);
emitter.on('done', async () => {
try {
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
({ base, page, start, prefetchRoutes } = await runner.start());
fulfil();
} catch (err) {
reject(err);
}
});
});
});
after(() => runner.end());
it('handles missing route on server', async () => {
await page.goto(`${base}/nope`);
assert.equal(
await page.$eval('h1', node => node.textContent),
'404'
);
});
it('handles missing route on client', async () => {
await page.goto(base);
await start();
await page.click('[href="nope"]');
await wait(50);
assert.equal(
await page.$eval('h1', node => node.textContent),
'404'
);
});
it('handles explicit 4xx on server', async () => {
await page.goto(`${base}/blog/nope`);
assert.equal(
await page.$eval('h1', node => node.textContent),
'404'
);
});
it('handles explicit 4xx on client', async () => {
await page.goto(base);
await start();
await prefetchRoutes();
await page.click('[href="blog/nope"]');
await wait(50);
assert.equal(
await page.$eval('h1', node => node.textContent),
'404'
);
});
it('handles error on server', async () => {
await page.goto(`${base}/throw`);
assert.equal(
await page.$eval('h1', node => node.textContent),
'500'
);
});
it('handles error on client', async () => {
await page.goto(base);
await start();
await prefetchRoutes();
await page.click('[href="throw"]');
await wait(50);
assert.equal(
await page.$eval('h1', node => node.textContent),
'500'
);
});
it('does not serve error page for explicit non-page errors', async () => {
await page.goto(`${base}/nope.json`);
assert.equal(
await page.evaluate(() => document.body.textContent),
'nope'
);
});
it('does not serve error page for thrown non-page errors', async () => {
await page.goto(`${base}/throw.json`);
assert.equal(
await page.evaluate(() => document.body.textContent),
'oops'
);
});
});

64
test/apps/errors/rollup.config.js Normal file
View File

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

9
test/apps/errors/src/client.js Normal file
View File

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

3
test/apps/errors/src/routes/_error.html Normal file
View File

@@ -0,0 +1,3 @@
<h1>{status}</h1>
<p>{error.message}</p>

19
test/apps/errors/src/routes/blog/[slug].html Normal file
View File

@@ -0,0 +1,19 @@
<h1>{post.title}</h1>
<script>
export default {
preload({ params }) {
const { slug } = params;
return this.fetch(`blog/${slug}.json`).then(r => {
return r.json().then(data => {
if (r.status !== 200) {
this.error(r.status, data);
}
return data;
});
});
}
};
</script>

9
test/apps/errors/src/routes/blog/[slug].json.js Normal file
View File

@@ -0,0 +1,9 @@
export function get(req, res) {
res.writeHead(404, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify({
message: 'not found'
}));
}

5
test/apps/errors/src/routes/index.html Normal file
View File

@@ -0,0 +1,5 @@
<h1>root</h1>
<a href="nope">nope</a>
<a href="blog/nope">blog/nope</a>
<a href="throw">throw</a>

4
test/apps/errors/src/routes/nope.json.js Normal file
View File

@@ -0,0 +1,4 @@
export function get(req, res) {
res.writeHead(500);
res.end('nope');
}

7
test/apps/errors/src/routes/throw.html Normal file
View File

@@ -0,0 +1,7 @@
<script>
export default {
preload() {
throw new Error('nope');
}
};
</script>

3
test/apps/errors/src/routes/throw.json.js Normal file
View File

@@ -0,0 +1,3 @@
export function get(req, res) {
throw new Error('oops');
}

8
test/apps/errors/src/server.js Normal file
View File

@@ -0,0 +1,8 @@
import polka from 'polka';
import * as sapper from '../__sapper__/server.js';
const { PORT } = process.env;
polka()
.use(sapper.middleware())
.listen(PORT);

82
test/apps/errors/src/service-worker.js Normal file
View File

@@ -0,0 +1,82 @@
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by webpack,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(ASSETS);
const cached = new Set(to_cache);
self.addEventListener('install', event => {
event.waitUntil(
caches
.open(ASSETS)
.then(cache => cache.addAll(to_cache))
.then(() => {
self.skipWaiting();
})
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(async keys => {
// delete old caches
for (const key of keys) {
if (key !== ASSETS) await caches.delete(key);
}
self.clients.claim();
})
);
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') return;
const url = new URL(event.request.url);
// don't try to handle e.g. data: URIs
if (!url.protocol.startsWith('http')) return;
// ignore dev server requests
if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
// always serve assets and webpack-generated files from cache
if (url.host === self.location.host && cached.has(url.pathname)) {
event.respondWith(caches.match(event.request));
return;
}
// for pages, you might want to serve a shell `index.html` file,
// which Sapper has generated for you. It's not right for every
// app, but if it's right for yours then uncomment this section
/*
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
event.respondWith(caches.match('/index.html'));
return;
}
*/
if (event.request.cache === 'only-if-cached') return;
// for everything else, try the network first, falling back to
// cache if the user is offline. (If the pages never change, you
// might prefer a cache-first approach to a network-first one.)
event.respondWith(
caches
.open(`offline${timestamp}`)
.then(async cache => {
try {
const response = await fetch(event.request);
cache.put(event.request, response.clone());
return response;
} catch(err) {
const response = await cache.match(event.request);
if (response) return response;
throw err;
}
})
);
});

14
test/apps/errors/src/template.html Normal file
View File

@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
%sapper.base%
%sapper.styles%
%sapper.head%
</head>
<body>
<div id='sapper'>%sapper.html%</div>
%sapper.scripts%
</body>
</html>

70
test/apps/export/__test__.ts Normal file
View File

@@ -0,0 +1,70 @@
import * as path from 'path';
import * as assert from 'assert';
import { walk } from '../../utils';
import * as api from '../../../api';
describe('export', function() {
this.timeout(10000);
// hooks
before(() => {
return new Promise((fulfil, reject) => {
// TODO this is brittle. Make it unnecessary
process.chdir(__dirname);
process.env.NODE_ENV = 'production';
// TODO this API isn't great. Rethink it
const builder = api.build({
bundler: 'rollup'
}, {
src: path.join(__dirname, 'src'),
routes: path.join(__dirname, 'src/routes'),
dest: path.join(__dirname, '__sapper__/build')
});
builder.on('error', reject);
builder.on('done', () => {
// TODO it'd be nice if build and export returned promises.
// not sure how best to combine promise and event emitter
const exporter = api.exporter({
build: '__sapper__/build',
dest: '__sapper__/export',
static: 'static',
basepath: '',
timeout: 5000
});
exporter.on('error', (err: Error) => {
console.error(err);
reject(err);
});
exporter.on('done', () => fulfil());
});
});
});
it('crawls a site', () => {
const files = walk('__sapper__/export');
const client_assets = files.filter(file => file.startsWith('client/'));
const non_client_assets = files.filter(file => !file.startsWith('client/')).sort();
assert.ok(client_assets.length > 0);
assert.deepEqual(non_client_assets, [
'blog.json',
'blog/bar.json',
'blog/bar/index.html',
'blog/baz.json',
'blog/baz/index.html',
'blog/foo.json',
'blog/foo/index.html',
'blog/index.html',
'global.css',
'index.html',
'service-worker.js'
]);
});
// TODO test timeout, basepath
});

64
test/apps/export/rollup.config.js Normal file
View File

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

9
test/apps/export/src/client.js Normal file
View File

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

3
test/apps/export/src/routes/_error.html Normal file
View File

@@ -0,0 +1,3 @@
<h1>{status}</h1>
<p>{error.message}</p>

11
test/apps/export/src/routes/blog/[slug].html Normal file
View File

@@ -0,0 +1,11 @@
<h1>{post.title}</h1>
<script>
export default {
preload({ params }) {
return this.fetch(`blog/${params.slug}.json`).then(r => r.json()).then(post => {
return { post };
});
}
};
</script>

19
test/apps/export/src/routes/blog/[slug].json.js Normal file
View File

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

5
test/apps/export/src/routes/blog/_posts.js Normal file
View File

@@ -0,0 +1,5 @@
export default [
{ slug: 'foo', title: 'once upon a foo' },
{ slug: 'bar', title: 'a bar is born' },
{ slug: 'baz', title: 'bazzily ever after' }
];

15
test/apps/export/src/routes/blog/index.html Normal file
View File

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

9
test/apps/export/src/routes/blog/index.json.js Normal file
View File

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

3
test/apps/export/src/routes/index.html Normal file
View File

@@ -0,0 +1,3 @@
<h1>Great success!</h1>
<a href="blog">blog</a>

15
test/apps/export/src/server.js Normal file
View File

@@ -0,0 +1,15 @@
import sirv from 'sirv';
import polka from 'polka';
import * as sapper from '../__sapper__/server.js';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
polka()
.use(
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});

Some files were not shown because too many files have changed in this diff Show More