├── .gitignore
├── cypress.json
├── src
    ├── manifest
    │   ├── default-layout.html
    │   ├── server.js
    │   ├── client.js
    │   └── service-worker.js
    ├── routes
    │   ├── _error.html
    │   ├── guide
    │   │   ├── index.json.js
    │   │   ├── _process_markdown.js
    │   │   ├── _sections.js
    │   │   └── index.html
    │   ├── _layout.html
    │   └── index.html
    ├── client.js
    ├── server.js
    ├── components
    │   ├── Toast.html
    │   ├── GuideContents.html
    │   └── Nav.html
    ├── service-worker.js
    └── template.html
├── static
    ├── favicon.ico
    ├── favicon.png
    ├── sapper-logo-192.png
    ├── sapper-logo-512.png
    ├── images
    │   └── twitter-card.png
    ├── fonts
    │   ├── Roboto
    │   │   ├── Roboto-Bold.woff
    │   │   ├── Roboto-Bold.woff2
    │   │   ├── Roboto-Light.woff
    │   │   ├── Roboto-Light.woff2
    │   │   ├── Roboto-LightItalic.woff
    │   │   └── Roboto-LightItalic.woff2
    │   ├── Rajdhani
    │   │   ├── Rajdhani-Bold.woff
    │   │   ├── Rajdhani-Bold.woff2
    │   │   ├── Rajdhani-Medium.woff
    │   │   ├── Rajdhani-Medium.woff2
    │   │   ├── Rajdhani-Regular.woff
    │   │   └── Rajdhani-Regular.woff2
    │   └── Inconsolata
    │   │   ├── Inconsolata-Bold.woff
    │   │   ├── Inconsolata-Bold.woff2
    │   │   ├── Inconsolata-Regular.woff
    │   │   ├── Inconsolata-Regular.woff2
    │   │   └── OFL.txt
    ├── package.json
    ├── manifest.json
    └── global.css
├── cypress
    ├── fixtures
    │   └── example.json
    ├── integration
    │   └── spec.js
    ├── plugins
    │   └── index.js
    └── support
    │   ├── index.js
    │   └── commands.js
├── .travis.yml
├── appveyor.yml
├── content
    └── guide
    │   ├── 14-testing.md
    │   ├── 15-debugging.md
    │   ├── 09-building.md
    │   ├── 13-base-urls.md
    │   ├── 08-prefetching.md
    │   ├── 12-security.md
    │   ├── 06-server-side-rendering.md
    │   ├── 11-deploying.md
    │   ├── 07-state-management.md
    │   ├── 03-client-api.md
    │   ├── 00-introduction.md
    │   ├── 10-exporting.md
    │   ├── 05-layouts.md
    │   ├── 02-routing.md
    │   ├── 04-preloading.md
    │   ├── 01-structure.md
    │   └── 16-migrating.md
├── README.md
├── LICENSE
├── package.json
└── rollup.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | yarn.lock
4 | cypress/screenshots
5 | __sapper__


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"baseUrl": "http://localhost:3000",
3 | 	"videoRecording": false
4 | }


--------------------------------------------------------------------------------
/src/manifest/default-layout.html:
--------------------------------------------------------------------------------
1 | <svelte:component this={child.component} {...child.props}/>


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/favicon.ico


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/favicon.png


--------------------------------------------------------------------------------
/static/sapper-logo-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/sapper-logo-192.png


--------------------------------------------------------------------------------
/static/sapper-logo-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/sapper-logo-512.png


--------------------------------------------------------------------------------
/static/images/twitter-card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/images/twitter-card.png


--------------------------------------------------------------------------------
/static/fonts/Roboto/Roboto-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Roboto/Roboto-Bold.woff


--------------------------------------------------------------------------------
/static/fonts/Roboto/Roboto-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Roboto/Roboto-Bold.woff2


--------------------------------------------------------------------------------
/static/fonts/Roboto/Roboto-Light.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Roboto/Roboto-Light.woff


--------------------------------------------------------------------------------
/static/fonts/Roboto/Roboto-Light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Roboto/Roboto-Light.woff2


--------------------------------------------------------------------------------
/static/fonts/Rajdhani/Rajdhani-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Rajdhani/Rajdhani-Bold.woff


--------------------------------------------------------------------------------
/static/fonts/Rajdhani/Rajdhani-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Rajdhani/Rajdhani-Bold.woff2


--------------------------------------------------------------------------------
/static/fonts/Rajdhani/Rajdhani-Medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Rajdhani/Rajdhani-Medium.woff


--------------------------------------------------------------------------------
/static/fonts/Rajdhani/Rajdhani-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Rajdhani/Rajdhani-Medium.woff2


--------------------------------------------------------------------------------
/static/fonts/Rajdhani/Rajdhani-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Rajdhani/Rajdhani-Regular.woff


--------------------------------------------------------------------------------
/static/fonts/Roboto/Roboto-LightItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Roboto/Roboto-LightItalic.woff


--------------------------------------------------------------------------------
/static/fonts/Inconsolata/Inconsolata-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Inconsolata/Inconsolata-Bold.woff


--------------------------------------------------------------------------------
/static/fonts/Rajdhani/Rajdhani-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Rajdhani/Rajdhani-Regular.woff2


--------------------------------------------------------------------------------
/static/fonts/Roboto/Roboto-LightItalic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Roboto/Roboto-LightItalic.woff2


--------------------------------------------------------------------------------
/static/fonts/Inconsolata/Inconsolata-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Inconsolata/Inconsolata-Bold.woff2


--------------------------------------------------------------------------------
/static/fonts/Inconsolata/Inconsolata-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Inconsolata/Inconsolata-Regular.woff


--------------------------------------------------------------------------------
/static/fonts/Inconsolata/Inconsolata-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sveltejs/sapper-legacy.svelte.dev/master/static/fonts/Inconsolata/Inconsolata-Regular.woff2


--------------------------------------------------------------------------------
/static/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "sapper.svelte.technology",
3 |   "scripts": {
4 |     "start": "serve ."
5 |   },
6 |   "dependencies": {
7 |     "serve": "latest"
8 |   }
9 | }


--------------------------------------------------------------------------------
/src/routes/_error.html:
--------------------------------------------------------------------------------
1 | <svelte:head>
2 | 	<title>Sapper • Military-grade progressive web apps, powered by Svelte</title>
3 | </svelte:head>
4 | 
5 | <h1>{status}</h1>
6 | <p>{error.message}</p>


--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Using fixtures to represent data",
3 |   "email": "hello@cypress.io",
4 |   "body": "Fixtures are a great way to mock data for responses to routes"
5 | }


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 |   - "stable"
 5 | env:
 6 |   global:
 7 |     - BUILD_TIMEOUT=10000
 8 | install:
 9 |   - npm install
10 | branches:
11 |   only:
12 |   - master
13 | script: npm run deploy:ci


--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
 1 | version: "{build}"
 2 | 
 3 | shallow_clone: true
 4 | 
 5 | init:
 6 |   - git config --global core.autocrlf false
 7 | 
 8 | build: off
 9 | 
10 | environment:
11 |   matrix:
12 |     # node.js
13 |     - nodejs_version: stable
14 | 
15 | install:
16 |   - ps: Install-Product node $env:nodejs_version
17 |   - npm install cypress
18 |   - npm install
19 | 


--------------------------------------------------------------------------------
/src/routes/guide/index.json.js:
--------------------------------------------------------------------------------
 1 | import sections from './_sections.js';
 2 | 
 3 | const dev = process.env.NODE_ENV === 'development';
 4 | let json;
 5 | 
 6 | export function get(req, res) {
 7 | 	if (dev || !json) {
 8 | 		json = JSON.stringify(sections());
 9 | 	}
10 | 
11 | 	res.set({
12 | 		'Content-Type': 'application/json',
13 | 		'Cache-Control': `max-age=${30 * 60 * 1e3}` // 30 minutes
14 | 	});
15 | 	res.end(json);
16 | }


--------------------------------------------------------------------------------
/static/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"background_color": "#ffffff",
 3 | 	"theme_color": "#aa1e1e",
 4 | 	"name": "Sapper",
 5 | 	"short_name": "Sapper",
 6 | 	"display": "minimal-ui",
 7 | 	"start_url": "/",
 8 | 	"icons": [
 9 | 		{
10 | 			"src": "sapper-logo-192.png",
11 | 			"sizes": "192x192",
12 | 			"type": "image/png"
13 | 		},
14 | 		{
15 | 			"src": "sapper-logo-512.png",
16 | 			"sizes": "512x512",
17 | 			"type": "image/png"
18 | 		}
19 | 	]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/routes/_layout.html:
--------------------------------------------------------------------------------
 1 | <Nav segment={child.segment}/>
 2 | 
 3 | <div>
 4 | 	<svelte:component this={child.component} {...child.props}/>
 5 | </div>
 6 | 
 7 | <style>
 8 | 	div {
 9 | 		position: relative;
10 | 		padding: 3em 0 0 0;
11 | 		overflow-x: hidden;
12 | 	}
13 | 
14 | 	@media (min-width: 768px) {
15 | 		div {
16 | 			padding: 4em 0 0 0;
17 | 		}
18 | 	}
19 | </style>
20 | 
21 | <script>
22 | 	export default {
23 | 		components: {
24 | 			Nav: '../components/Nav.html'
25 | 		}
26 | 	};
27 | </script>


--------------------------------------------------------------------------------
/cypress/integration/spec.js:
--------------------------------------------------------------------------------
 1 | describe('Sapper template app', () => {
 2 | 	beforeEach(() => {
 3 | 		cy.visit('/')
 4 | 	});
 5 | 
 6 | 	it('has the correct <h1>', () => {
 7 | 		cy.contains('h1', 'Great success!')
 8 | 	});
 9 | 
10 | 	it('navigates to /about', () => {
11 | 		cy.get('nav a').contains('about').click();
12 | 		cy.url().should('include', '/about');
13 | 	});
14 | 
15 | 	it('navigates to /blog', () => {
16 | 		cy.get('nav a').contains('blog').click();
17 | 		cy.url().should('include', '/blog');
18 | 	});
19 | });


--------------------------------------------------------------------------------
/src/routes/guide/_process_markdown.js:
--------------------------------------------------------------------------------
 1 | export default function process_markdown(markdown) {
 2 | 	const match = /---\n([\s\S]+?)\n---/.exec(markdown);
 3 | 	const frontMatter = match[1];
 4 | 	const content = markdown.slice(match[0].length);
 5 | 
 6 | 	const metadata = {};
 7 | 	frontMatter.split('\n').forEach(pair => {
 8 | 		const colonIndex = pair.indexOf(':');
 9 | 		metadata[pair.slice(0, colonIndex).trim()] = pair
10 | 			.slice(colonIndex + 1)
11 | 			.trim();
12 | 	});
13 | 
14 | 	return { metadata, content };
15 | }


--------------------------------------------------------------------------------
/content/guide/14-testing.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Testing
 3 | ---
 4 | 
 5 | You can use whatever testing frameworks and libraries you'd like. The default in [sapper-template](https://github.com/sveltejs/sapper-template) is [Cypress](https://cypress.io).
 6 | 
 7 | 
 8 | ### Running the tests
 9 | 
10 | ```bash
11 | npm test
12 | ```
13 | 
14 | This will start the server and open Cypress. You can (and should!) add your own tests in `cypress/integration/spec.js` — consult the [docs](https://docs.cypress.io/guides/overview/why-cypress.html) for more information.


--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
 1 | import * as sapper from '../__sapper__/client.js';
 2 | import { Store } from 'svelte/store.js';
 3 | 
 4 | sapper.start({
 5 | 	target: document.querySelector('#sapper'),
 6 | 	store: state => {
 7 | 		return new Store(state);
 8 | 	}
 9 | });
10 | 
11 | if (navigator.serviceWorker && navigator.serviceWorker.controller) {
12 | 	navigator.serviceWorker.controller.onstatechange = function(e) {
13 | 		if (e.target.state === 'redundant') {
14 | 			import('./components/Toast.html').then(mod => {
15 | 				mod.default.show();
16 | 			});
17 | 		}
18 | 	};
19 | }


--------------------------------------------------------------------------------
/content/guide/15-debugging.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Debugging
 3 | ---
 4 | 
 5 | Debugging your server code is particularly easy with [ndb](https://github.com/GoogleChromeLabs/ndb). Install it globally...
 6 | 
 7 | ```bash
 8 | npm install -g ndb
 9 | ```
10 | 
11 | ...then run Sapper:
12 | 
13 | ```bash
14 | ndb npm run dev
15 | ```
16 | 
17 | > This assumes that `npm run dev` runs `sapper dev`. You can also run Sapper via [npx](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner), as in `ndb npx sapper dev`.
18 | 
19 | Note that you may not see any terminal output for a few seconds while ndb starts up.
20 | 


--------------------------------------------------------------------------------
/content/guide/09-building.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Building
 3 | ---
 4 | 
 5 | Up until now we've been using `sapper dev` to build our application and run a development server. But when it comes to production, we want to create a self-contained optimized build.
 6 | 
 7 | ### sapper build
 8 | 
 9 | This command packages up your application into the `__sapper__/build` directory. (You can change this to a custom directory, as well as controlling various other options — do `sapper build --help` for more information.)
10 | 
11 | The output is a Node app that you can run from the project root:
12 | 
13 | ```bash
14 | node __sapper__/build
15 | ```


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import compression from 'compression';
 3 | import serve from 'serve-static';
 4 | import { Store } from 'svelte/store.js';
 5 | import * as sapper from '../__sapper__/server.js';
 6 | import guide_sections from './routes/guide/_sections.js';
 7 | 
 8 | const guide_contents = guide_sections().map(section => {
 9 | 	return {
10 | 		metadata: section.metadata,
11 | 		subsections: section.subsections,
12 | 		slug: section.slug
13 | 	};
14 | })
15 | 
16 | express()
17 | 	.use(
18 | 		compression({ threshold: 0 }),
19 | 		serve('static'),
20 | 		sapper.middleware({
21 | 			store: () => new Store({
22 | 				guide_contents
23 | 			})
24 | 		})
25 | 	)
26 | 	.listen(process.env.PORT);


--------------------------------------------------------------------------------
/cypress/plugins/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example plugins/index.js can be used to load plugins
 3 | //
 4 | // You can change the location of this file or turn off loading
 5 | // the plugins file with the 'pluginsFile' configuration option.
 6 | //
 7 | // You can read more here:
 8 | // https://on.cypress.io/plugins-guide
 9 | // ***********************************************************
10 | 
11 | // This function is called when a project is opened or re-opened (e.g. due to
12 | // the project's config changing)
13 | 
14 | module.exports = (on, config) => {
15 |   // `on` is used to hook into various events Cypress emits
16 |   // `config` is the resolved Cypress config
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # sapper-legacy.svelte.dev
 2 | 
 3 | The legacy website for [Sapper](https://github.com/sveltejs/sapper), built with Sapper.
 4 | 
 5 | ## Note
 6 | 
 7 | **This is the repo for the old site.** The new site, for versions of Sapper compatible with Svelte v3, lives in [the `site` directory of the main Sapper repo](https://github.com/sveltejs/sapper/tree/master/site).
 8 | 
 9 | ## Running locally
10 | 
11 | Set up the project:
12 | 
13 | ```bash
14 | git clone git@github.com:sveltejs/sapper.svelte.technology.git
15 | cd sapper.svelte.technology
16 | npm install # or npm ci
17 | ```
18 | 
19 | Start the development server with `npm run dev` and navigate to [localhost:3000](http://localhost:3000).
20 | 
21 | ## License
22 | 
23 | [MIT](LICENSE)
24 | 


--------------------------------------------------------------------------------
/cypress/support/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/index.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 | 


--------------------------------------------------------------------------------
/src/components/Toast.html:
--------------------------------------------------------------------------------
 1 | <div class='toast' on:click='reload()'>
 2 | 	Site has been updated — tap to reload
 3 | </div>
 4 | 
 5 | <style>
 6 | 	.toast {
 7 | 		position: fixed;
 8 | 		left: 0;
 9 | 		bottom: 0;
10 | 		width: 100%;
11 | 		background-color: rgb(16,94,16);
12 | 		color: white;
13 | 		padding: 1em;
14 | 		font-weight: 500;
15 | 		z-index: 99;
16 | 		animation: slide-up 0.4s ease-out;
17 | 	}
18 | 	@keyframes slide-up {
19 | 		0% { transform: translate(0,100%); }
20 | 		100% { transform: translate(0,0); }
21 | 	}
22 | </style>
23 | 
24 | <script>
25 | 	export default {
26 | 		methods: {
27 | 			reload() {
28 | 				window.location.reload();
29 | 			}
30 | 		},
31 | 		setup(Toast) {
32 | 			Toast.show = () => {
33 | 				const target = document.createDocumentFragment();
34 | 				new Toast({ target });
35 | 
36 | 				document.body.appendChild(target);
37 | 				Toast.show = () => {};
38 | 			};
39 | 		}
40 | 	};
41 | </script>


--------------------------------------------------------------------------------
/static/global.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	margin: 0;
 3 | 	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 4 | 	font-size: 14px;
 5 | 	line-height: 1.5;
 6 | 	color: #333;
 7 | }
 8 | 
 9 | main {
10 | 	position: relative;
11 | 	max-width: 56em;
12 | 	background-color: white;
13 | 	padding: 2em;
14 | 	margin: 0 auto;
15 | 	box-sizing: border-box;
16 | }
17 | 
18 | h1, h2, h3, h4, h5, h6 {
19 | 	margin: 0 0 0.5em 0;
20 | 	font-weight: 400;
21 | 	line-height: 1.2;
22 | }
23 | 
24 | h1 {
25 | 	font-size: 2em;
26 | }
27 | 
28 | a {
29 | 	color: inherit;
30 | }
31 | 
32 | code {
33 | 	font-family: menlo, inconsolata, monospace;
34 | 	font-size: calc(1em - 2px);
35 | 	color: #555;
36 | 	background-color: #f0f0f0;
37 | 	padding: 0.2em 0.4em;
38 | 	border-radius: 2px;
39 | }
40 | 
41 | @media (min-width: 400px) {
42 | 	body {
43 | 		font-size: 16px;
44 | 	}
45 | }


--------------------------------------------------------------------------------
/content/guide/13-base-urls.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Base URLs
 3 | ---
 4 | 
 5 | Ordinarily, the root of your Sapper app is served at `/`. But in some cases, your app may need to be served from a different base path — for example, if Sapper only controls part of your domain, or if you have multiple Sapper apps living side-by-side.
 6 | 
 7 | This can be done like so:
 8 | 
 9 | ```js
10 | // app/server.js
11 | 
12 | express() // or Polka, or a similar framework
13 |   .use(
14 |     '/my-base-path', // <!-- add this line
15 |     compression({ threshold: 0 }),
16 |     serve('assets'),
17 |     sapper.middleware()
18 |   )
19 |   .listen(process.env.PORT);
20 | ```
21 | 
22 | Sapper will detect the base path and configure both the server-side and client-side routers accordingly.
23 | 
24 | If you're [exporting](guide#exporting) your app, you will need to tell the exporter where to begin crawling:
25 | 
26 | ```bash
27 | sapper export --basepath my-base-path
28 | ```
29 | 


--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************
 2 | // This example commands.js shows you how to
 3 | // create various custom commands and overwrite
 4 | // existing commands.
 5 | //
 6 | // For more comprehensive examples of custom
 7 | // commands please read more here:
 8 | // https://on.cypress.io/custom-commands
 9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2017 [these people](https://github.com/sveltejs/sapper.svelte.technology/graphs/contributors)
2 | 
3 | Permission is hereby granted by the authors of this software, to any person, to use the software for any purpose, free of charge, including the rights to run, read, copy, change, distribute and sell it, and including usage rights to any patents the authors may hold on it, subject to the following conditions:
4 | 
5 | This license, or a link to its text, must be included with all copies of the software and any derivative works.
6 | 
7 | Any modification to the software submitted to the authors may be incorporated into the software under the terms of this license.
8 | 
9 | The software is provided "as is", without warranty of any kind, including but not limited to the warranties of title, fitness, merchantability and non-infringement. The authors have no obligation to provide support or updates for the software, and may not be held liable for any damages, claims or other liability arising from its use.


--------------------------------------------------------------------------------
/src/manifest/server.js:
--------------------------------------------------------------------------------
 1 | // This file is generated by Sapper — do not edit it!
 2 | import * as route_guide_json from "../routes/guide/index.json.js";
 3 | import index from "../routes/index.html";
 4 | import guide from "../routes/guide/index.html";
 5 | import root from "../routes/_layout.html";
 6 | import error from "../routes/_error.html";
 7 | 
 8 | const d = decodeURIComponent;
 9 | 
10 | export const manifest = {
11 | 	server_routes: [
12 | 		{
13 | 			// guide/index.json.js
14 | 			pattern: /^\/guide.json$/,
15 | 			handlers: route_guide_json,
16 | 			params: () => ({})
17 | 		}
18 | 	],
19 | 
20 | 	pages: [
21 | 		{
22 | 			// index.html
23 | 			pattern: /^\/?$/,
24 | 			parts: [
25 | 				{ name: "index", file: "index.html", component: index }
26 | 			]
27 | 		},
28 | 
29 | 		{
30 | 			// guide/index.html
31 | 			pattern: /^\/guide\/?$/,
32 | 			parts: [
33 | 				null,
34 | 				{ name: "guide", file: "guide/index.html", component: guide }
35 | 			]
36 | 		}
37 | 	],
38 | 
39 | 	root,
40 | 
41 | 	error
42 | };
43 | 
44 | // this is included for legacy reasons
45 | export const routes = {};


--------------------------------------------------------------------------------
/src/manifest/client.js:
--------------------------------------------------------------------------------
 1 | // This file is generated by Sapper — do not edit it!
 2 | import root from "../routes/_layout.html";
 3 | import error from "../routes/_error.html";
 4 | 
 5 | const d = decodeURIComponent;
 6 | 
 7 | const index = {
 8 | 	js: () => import("../routes/index.html"),
 9 | 	css: "__SAPPER_CSS_PLACEHOLDER:index.html__"
10 | };
11 | const guide = {
12 | 	js: () => import("../routes/guide/index.html"),
13 | 	css: "__SAPPER_CSS_PLACEHOLDER:guide/index.html__"
14 | };
15 | 
16 | export const manifest = {
17 | 	ignore: [/^\/guide.json$/],
18 | 
19 | 	pages: [
20 | 		{
21 | 			// index.html
22 | 			pattern: /^\/?$/,
23 | 			parts: [
24 | 				{ component: index }
25 | 			]
26 | 		},
27 | 
28 | 		{
29 | 			// guide/index.html
30 | 			pattern: /^\/guide\/?$/,
31 | 			parts: [
32 | 				null,
33 | 				{ component: guide }
34 | 			]
35 | 		}
36 | 	],
37 | 
38 | 	root,
39 | 
40 | 	error
41 | };
42 | 
43 | // this is included for legacy reasons
44 | export const routes = {};
45 | 
46 | import("/Users/208311/Development/SVELTE/sapper.svelte.technology/node_modules/sapper/sapper-dev-client.js").then(client => {
47 | 	client.connect(10000);
48 | });


--------------------------------------------------------------------------------
/content/guide/08-prefetching.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Prefetching
 3 | ---
 4 | 
 5 | Sapper uses code splitting to break your app into small chunks (one per route), ensuring fast startup times.
 6 | 
 7 | For *dynamic* routes, such as our `src/routes/blog/[slug].html` example, that's not enough. In order to render the blog post, we need to fetch the data for it, and we can't do that until we know what `slug` is. In the worst case, that could cause lag as the browser waits for the data to come back from the server.
 8 | 
 9 | 
10 | ### rel=prefetch
11 | 
12 | We can mitigate that by *prefetching* the data. Adding a `rel=prefetch` attribute to a link...
13 | 
14 | ```html
15 | <a rel=prefetch href='blog/what-is-sapper'>What is Sapper?</a>
16 | ```
17 | 
18 | ...will cause Sapper to run the page's `preload` function as soon as the user hovers over the link (on a desktop) or touches it (on mobile), rather than waiting for the `click` event to trigger navigation. Typically, this buys us an extra couple of hundred milliseconds, which is the difference between a user interface that feels laggy, and one that feels snappy.
19 | 
20 | > `rel=prefetch` is a Sapper idiom, not a standard attribute for `<a>` elements
21 | 
22 | <!-- TODO add a function to prefetch programmatically -->


--------------------------------------------------------------------------------
/content/guide/12-security.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Security
 3 | ---
 4 | 
 5 | By default, Sapper does not add security headers to your app, but you may add them yourself using middleware such as [Helmet][].
 6 | 
 7 | ### Content Security Policy (CSP)
 8 | 
 9 | Sapper generates inline `<script>`s, which can fail to execute if [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers disallow arbitrary script execution (`unsafe-inline`).
10 | 
11 | To work around this, Sapper can inject a [nonce](https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/) which can be configured with middleware to emit the proper CSP headers. Here is an example using [Express][] and [Helmet][]:
12 | 
13 | ```js
14 | // server.js
15 | import uuidv4 from 'uuid/v4';
16 | import helmet from 'helmet';
17 | 
18 | app.use((req, res, next) => {
19 | 	res.locals.nonce = uuidv4();
20 | 	next();
21 | });
22 | app.use(helmet({
23 | 	contentSecurityPolicy: {
24 | 		directives: {
25 | 			scriptSrc: [
26 | 				"'self'",
27 | 				(req, res) => `'nonce-${res.locals.nonce}'`
28 | 			]
29 | 		}
30 | 	}
31 | }));
32 | app.use(sapper.middleware());
33 | ```
34 | 
35 | Using `res.locals.nonce` in this way follows the convention set by
36 | [Helmet's CSP docs](https://helmetjs.github.io/docs/csp/#generating-nonces).
37 | 
38 | [Express]: https://expressjs.com/
39 | [Helmet]: https://helmetjs.github.io/


--------------------------------------------------------------------------------
/src/manifest/service-worker.js:
--------------------------------------------------------------------------------
 1 | // This file is generated by Sapper — do not edit it!
 2 | export const timestamp = 1537755891555;
 3 | 
 4 | export const files = [
 5 | 	"favicon.ico",
 6 | 	"favicon.png",
 7 | 	"fonts/Inconsolata/Inconsolata-Bold.woff",
 8 | 	"fonts/Inconsolata/Inconsolata-Bold.woff2",
 9 | 	"fonts/Inconsolata/Inconsolata-Regular.woff",
10 | 	"fonts/Inconsolata/Inconsolata-Regular.woff2",
11 | 	"fonts/Inconsolata/OFL.txt",
12 | 	"fonts/Rajdhani/Rajdhani-Bold.woff",
13 | 	"fonts/Rajdhani/Rajdhani-Bold.woff2",
14 | 	"fonts/Rajdhani/Rajdhani-Medium.woff",
15 | 	"fonts/Rajdhani/Rajdhani-Medium.woff2",
16 | 	"fonts/Rajdhani/Rajdhani-Regular.woff",
17 | 	"fonts/Rajdhani/Rajdhani-Regular.woff2",
18 | 	"fonts/Roboto/Roboto-Bold.woff",
19 | 	"fonts/Roboto/Roboto-Bold.woff2",
20 | 	"fonts/Roboto/Roboto-Light.woff",
21 | 	"fonts/Roboto/Roboto-Light.woff2",
22 | 	"fonts/Roboto/Roboto-LightItalic.woff",
23 | 	"fonts/Roboto/Roboto-LightItalic.woff2",
24 | 	"global.css",
25 | 	"images/twitter-card.png",
26 | 	"manifest.json",
27 | 	"package.json",
28 | 	"sapper-logo-192.png",
29 | 	"sapper-logo-512.png"
30 | ];
31 | export { files as assets }; // legacy
32 | 
33 | export const shell = [
34 | 	"client/client.2592ce3d.js",
35 | 	"client/chunk.3df7add4.js",
36 | 	"client/chunk.3ebc741a.js",
37 | 	"client/index.a970adf6.js",
38 | 	"client/index.d8894e09.js",
39 | 	"client/sapper-dev-client.c1ed07a9.js",
40 | 	"client/Toast.5da78cbd.js"
41 | ];
42 | 
43 | export const routes = [
44 | 	{ pattern: /^\/?$/ },
45 | 	{ pattern: /^\/guide\/?$/ }
46 | ];


--------------------------------------------------------------------------------
/src/components/GuideContents.html:
--------------------------------------------------------------------------------
 1 | <ul class='guide-toc'>
 2 | 	{#each $guide_contents as section}
 3 | 		<li>
 4 | 			<a class='section {section.slug === $activeGuideSection ? "active": ""}' href='guide#{section.slug}'>{section.metadata.title}</a>
 5 | 			{#each section.subsections as subsection}
 6 | 				<a class='subsection {subsection.slug === $activeGuideSection ? "active": ""}' href='guide#{subsection.slug}'>{subsection.title}</a>
 7 | 			{/each}
 8 | 		</li>
 9 | 	{/each}
10 | </ul>
11 | 
12 | <style>
13 | 	.guide-toc {
14 | 		margin: 0;
15 | 		padding: 0;
16 | 	}
17 | 
18 | 	.guide-toc li {
19 | 		display: block;
20 | 		margin: 0 0 2em 0;
21 | 	}
22 | 
23 | 	.section {
24 | 		display: block;
25 | 		font-weight: 700;
26 | 		color: #333;
27 | 		font-size: 1.2rem;
28 | 		margin: 0 0 0.15em 0;
29 | 	}
30 | 
31 | 	.subsection {
32 | 		display: block;
33 | 		font-weight: 500;
34 | 		color:#727272;
35 | 		font-size: 1em;
36 | 		margin: 0 0 0.15em 0;
37 | 	}
38 | 
39 | 	.section.active, .subsection.active {
40 | 		color: rgb(16,94,16);
41 | 	}
42 | </style>
43 | 
44 | <script>
45 | 	export default {
46 | 		data() {
47 | 			return {
48 | 				contents: []
49 | 			}
50 | 		},
51 | 
52 | 		oncreate () {
53 | 			const onhashchange = () => {
54 | 				this.store.set({ activeGuideSection: window.location.hash.slice( 1 ) });
55 | 			};
56 | 
57 | 			window.addEventListener( 'hashchange', onhashchange, false );
58 | 			this.on( 'destroy', () => {
59 | 				window.removeEventListener( 'hashchange', onhashchange, false );
60 | 			});
61 | 
62 | 			onhashchange();
63 | 		}
64 | 	};
65 | </script>
66 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sapper.svelte.technology",
 3 |   "description": "The Sapper website",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "sapper dev",
 7 |     "start": "serve __sapper__/export",
 8 |     "cy:run": "cypress run",
 9 |     "cy:open": "cypress open",
10 |     "test": "run-p --race dev cy:run",
11 |     "stage": "now export",
12 |     "prestage": "npm run build",
13 |     "build": "sapper export",
14 |     "deploy": "git-branch-is master && npm run stage && now alias",
15 |     "deploy:ci": "now __sapper__/export --token $NOW_TOKEN && now alias --token $NOW_TOKEN",
16 |     "predeploy:ci": "sapper export"
17 |   },
18 |   "dependencies": {
19 |     "compression": "^1.7.1",
20 |     "cross-env": "^5.2.0",
21 |     "express": "^4.16.2",
22 |     "glob": "^7.1.2",
23 |     "highlight.js": "^9.12.0",
24 |     "marked": "^0.4.0",
25 |     "node-fetch": "^2.0.0",
26 |     "npm-run-all": "^4.1.3",
27 |     "serve": "^9.4.0",
28 |     "serve-static": "^1.13.1",
29 |     "svelte": "^2.9.11"
30 |   },
31 |   "now": {
32 |     "alias": "sapper.svelte.technology"
33 |   },
34 |   "devDependencies": {
35 |     "@babel/core": "^7.1.0",
36 |     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
37 |     "@babel/plugin-transform-runtime": "^7.1.0",
38 |     "@babel/preset-env": "^7.1.0",
39 |     "git-branch-is": "^2.0.0",
40 |     "now": "^11.3.8",
41 |     "rollup": "^0.66.2",
42 |     "rollup-plugin-babel": "^4.0.3",
43 |     "rollup-plugin-commonjs": "^9.1.8",
44 |     "rollup-plugin-node-resolve": "^3.4.0",
45 |     "rollup-plugin-replace": "^2.0.0",
46 |     "rollup-plugin-svelte": "^4.3.1",
47 |     "rollup-plugin-terser": "^3.0.0",
48 |     "sapper": "^0.23.1"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/content/guide/06-server-side-rendering.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Server-side rendering
 3 | ---
 4 | 
 5 | Sapper, by default, renders server-side first (SSR), and then re-mounts any dynamic elements on the client. Svelte provides [excellent support for this](https://v2.svelte.dev/guide#server-side-rendering). This has benefits in performance and search engine indexing, among others, but comes with its own set of complexities.
 6 | 
 7 | ### Making a component SSR compatible
 8 | 
 9 | Sapper works well with most third-party libraries you are likely to come across. However, sometimes, a third-party library comes bundled in a way which allows it to work with multiple different module loaders. Sometimes, this code creates a dependency on `window`, such as checking for the existence of `window.global` might do.
10 | 
11 | Since there is no `window` in a server-side environment like Sapper's, the action of simply importing such a module can cause the import to fail, and terminate the Sapper's server with an error such as:
12 | 
13 | ```bash
14 | ReferenceError: window is not defined
15 | ```
16 | 
17 | The way to get around this is to use a dynamic import for your component, from within the `oncreate` hook (which is only called on the client), so that your import code is never called on the server.
18 | 
19 | ```js
20 | export default {
21 |   async oncreate () {
22 |     const MyComponent = await import('my-non-ssr-component')
23 |     this.set({ MyComponent })
24 |   }
25 | }
26 | ```
27 | 
28 | You can then use your component within your app:
29 | 
30 | ```html
31 | <svelte:component this={MyComponent}
32 |   {prop1}
33 |   prop2="foo"
34 | />
35 | ```
36 | 
37 | > It might be the case that your component uses a default export, which actually ends up being an object with a property called `default`, in which case you would import it as `{ default: MyComponent }` rather than just `MyComponent`
38 | 


--------------------------------------------------------------------------------
/content/guide/11-deploying.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Deployment
 3 | ---
 4 | 
 5 | Sapper apps run anywhere that supports Node 8 or higher.
 6 | 
 7 | 
 8 | ### Deploying to Now
 9 | 
10 | We can very easily deploy our apps to [Now][]:
11 | 
12 | ```bash
13 | npm install -g now
14 | now
15 | ```
16 | 
17 | This will upload the source code to Now, whereupon it will do `npm run build` and `npm start` and give you a URL for the deployed app.
18 | 
19 | For other hosting environments, you may need to do `npm run build` yourself.
20 | 
21 | ### Deploying service workers
22 | 
23 | Sapper makes the Service Worker file (`service-worker.js`) unique by including a timestamp in the source code 
24 | (calculated using `Date.now()`).
25 |  
26 | In environments where the app is deployed to multiple servers (such as [Now][]), it is advisable to use a 
27 | consistent timestamp for all deployments. Otherwise, users may run into issues where the Service Worker 
28 | updates unexpectedly because the app hits server 1, then server 2, and they have slightly different timestamps.
29 | 
30 | To override Sapper's timestamp, you can use an environment variable (e.g. `SAPPER_TIMESTAMP`) and then modify
31 | the `service-worker.js`:
32 | 
33 | ```js
34 | const timestamp = process.env.SAPPER_TIMESTAMP; // instead of `import { timestamp }`
35 | 
36 | const ASSETS = `cache${timestamp}`;
37 | 
38 | export default {
39 | 	/* ... */
40 | 	plugins: [
41 | 		/* ... */
42 | 		replace({
43 | 			/* ... */
44 | 			'process.env.SAPPER_TIMESTAMP': process.env.SAPPER_TIMESTAMP || Date.now()
45 | 		})
46 | 	]
47 | }
48 | ```
49 | 
50 | Then you can set it using the environment variable, e.g.:
51 | 
52 | ```bash
53 | SAPPER_TIMESTAMP=$(date +%s%3N) npm run build
54 | ```
55 | 
56 | When deploying to [Now][], you can pass the environment variable into Now itself:
57 | 
58 | ```bash
59 | now -e SAPPER_TIMESTAMP=$(date +%s%3N)
60 | ```
61 | 
62 | [Now]: https://zeit.co/now


--------------------------------------------------------------------------------
/src/routes/guide/_sections.js:
--------------------------------------------------------------------------------
 1 | import fs from 'fs';
 2 | import path from 'path';
 3 | import process_markdown from './_process_markdown.js';
 4 | import marked from 'marked';
 5 | import hljs from 'highlight.js';
 6 | 
 7 | const langs = {
 8 | 	'hidden-data': 'json',
 9 | 	'html-no-repl': 'html'
10 | };
11 | 
12 | function btoa(str) {
13 | 	return new Buffer(str).toString('base64');
14 | }
15 | 
16 | const escaped = {
17 | 	'"': '&quot;',
18 | 	"'": '&#39;',
19 | 	'&': '&amp;',
20 | 	'<': '&lt;',
21 | 	'>': '&gt;'
22 | };
23 | 
24 | const unescaped = Object.keys(escaped).reduce(
25 | 	(unescaped, key) => ((unescaped[escaped[key]] = key), unescaped),
26 | 	{}
27 | );
28 | 
29 | function unescape(str) {
30 | 	return String(str).replace(/&.+?;/g, match => unescaped[match] || match);
31 | }
32 | 
33 | export default () => fs
34 | 	.readdirSync(`content/guide`)
35 | 	.filter(file => file[0] !== '.' && path.extname(file) === '.md')
36 | 	.map(file => {
37 | 		const markdown = fs.readFileSync(`content/guide/${file}`, 'utf-8');
38 | 
39 | 		const { content, metadata } = process_markdown(markdown);
40 | 
41 | 		// syntax highlighting
42 | 		let uid = 0;
43 | 		const highlighted = {};
44 | 
45 | 		const tweaked_content = content.replace(
46 | 			/```([\w-]+)?\n([\s\S]+?)```/g,
47 | 			(match, lang, code) => {
48 | 				const { value } = hljs.highlight(lang, code);
49 | 				highlighted[++uid] = value;
50 | 
51 | 				return `@@${uid}`;
52 | 			}
53 | 		);
54 | 
55 | 		const html = marked(tweaked_content)
56 | 			.replace(/<p>@@(\d+)<\/p>/g, (match, id) => {
57 | 				return `<pre><code>${highlighted[id]}</code></pre>`;
58 | 			})
59 | 			.replace(/^\t+/gm, match => match.split('\t').join('  '));
60 | 
61 | 		const subsections = [];
62 | 		const pattern = /<h3 id="(.+?)">(.+?)<\/h3>/g;
63 | 		let match;
64 | 
65 | 		while ((match = pattern.exec(html))) {
66 | 			const slug = match[1];
67 | 			// const title = unescape(
68 | 			// 	match[2].replace(/<\/?code>/g, '').replace(/\.(\w+)\W.*/, '.$1')
69 | 			// );
70 | 			const title = unescape(match[2]);
71 | 
72 | 			subsections.push({ slug, title });
73 | 		}
74 | 
75 | 		return {
76 | 			html,
77 | 			metadata,
78 | 			subsections,
79 | 			slug: file.replace(/^\d+-/, '').replace(/\.md$/, ''),
80 | 			file
81 | 		};
82 | 	});
83 | 


--------------------------------------------------------------------------------
/content/guide/07-state-management.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: State management
 3 | ---
 4 | 
 5 | Sapper integrates with the built-in Svelte store. If you're not familiar with Store, read the [Svelte state management](https://v2.svelte.dev/guide#state-management) guide before continuing with this section.
 6 | 
 7 | To use Store, you must integrate it with your server and client apps separately.
 8 | 
 9 | ### On the server
10 | 
11 | Whereas the client-side app has a single Store instance that lasts as long as the page is open, the server-side app must create a new store for each request:
12 | 
13 | ```js
14 | // app/server.js
15 | import { Store } from 'svelte/store.js';
16 | 
17 | express() // or Polka, or a similar framework
18 | 	.use(
19 | 		compression({ threshold: 0 }),
20 | 		serve('assets'),
21 | 		authenticationMiddleware(),
22 | 		sapper.middleware({
23 | 			store: request => {
24 | 				return new Store({
25 | 					user: request.user
26 | 				});
27 | 			}
28 | 		})
29 | 	)
30 | 	.listen(process.env.PORT);
31 | ```
32 | 
33 | In this example, we're using some imaginary `authenticationMiddleware` that creates a `request.user` object based on the user's cookies. (In real life it tends to be a bit more involved — see [express-session](https://github.com/expressjs/session) and [Passport](http://www.passportjs.org/) if you're ready to learn more about sessions and authentication.)
34 | 
35 | Because we've supplied a `store` option, Sapper creates a new `Store` instance for each new `request`. The data in our store will be used to render the HTML that Sapper responds with.
36 | 
37 | 
38 | ### On the client
39 | 
40 | This time around, we're creating a single store that is attached to each page as the user navigates around the app.
41 | 
42 | ```js
43 | import * as sapper from '../__sapper__/client.js';
44 | import { Store } from 'svelte/store.js';
45 | 
46 | sapper.start({
47 | 	target: document.querySelector('#sapper'),
48 | 	store: data => {
49 | 		// `data` is whatever was in the server-side store
50 | 		return new Store(data);
51 | 	}
52 | });
53 | ```
54 | 
55 | > In order to re-use the server-side store data, it must be serializable (using [devalue](https://github.com/Rich-Harris/devalue)) — no functions or custom classes, just built-in JavaScript data types
56 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from 'rollup-plugin-node-resolve';
 2 | import replace from 'rollup-plugin-replace';
 3 | import commonjs from 'rollup-plugin-commonjs';
 4 | import svelte from 'rollup-plugin-svelte';
 5 | import babel from 'rollup-plugin-babel';
 6 | import { terser } from 'rollup-plugin-terser';
 7 | import config from 'sapper/config/rollup.js';
 8 | import pkg from './package.json';
 9 | 
10 | const mode = process.env.NODE_ENV;
11 | const dev = mode === 'development';
12 | const legacy = !!process.env.SAPPER_LEGACY_BUILD;
13 | 
14 | export default {
15 | 	client: {
16 | 		input: config.client.input(),
17 | 		output: config.client.output(),
18 | 		plugins: [
19 | 			svelte({
20 | 				dev,
21 | 				hydratable: true,
22 | 				emitCss: true
23 | 			}),
24 | 			resolve(),
25 | 			replace({
26 | 				'process.browser': true,
27 | 				'process.env.NODE_ENV': JSON.stringify(mode)
28 | 			}),
29 | 			commonjs(),
30 | 
31 | 			legacy && babel({
32 | 				extensions: ['.js', '.html'],
33 | 				runtimeHelpers: true,
34 | 				exclude: ['node_modules/@babel/**'],
35 | 				presets: [
36 | 					['@babel/preset-env', {
37 | 						targets: '> 0.25%, not dead'
38 | 					}]
39 | 				],
40 | 				plugins: [
41 | 					'@babel/plugin-syntax-dynamic-import',
42 | 					['@babel/plugin-transform-runtime', {
43 | 						useESModules: true
44 | 					}]
45 | 				]
46 | 			}),
47 | 
48 | 			!dev && terser({
49 | 				module: true
50 | 			})
51 | 		],
52 | 
53 | 		// temporary, pending Rollup 1.0
54 | 		experimentalCodeSplitting: true
55 | 	},
56 | 
57 | 	server: {
58 | 		input: config.server.input(),
59 | 		output: config.server.output(),
60 | 		plugins: [
61 | 			svelte({
62 | 				generate: 'ssr',
63 | 				dev
64 | 			}),
65 | 			resolve(),
66 | 			replace({
67 | 				'process.browser': false,
68 | 				'process.env.NODE_ENV': JSON.stringify(mode)
69 | 			}),
70 | 			commonjs()
71 | 		],
72 | 		external: Object.keys(pkg.dependencies).concat(
73 | 			require('module').builtinModules || Object.keys(process.binding('natives'))
74 | 		),
75 | 
76 | 		// temporary, pending Rollup 1.0
77 | 		experimentalCodeSplitting: true
78 | 	},
79 | 
80 | 	serviceworker: {
81 | 		input: config.serviceworker.input(),
82 | 		output: config.serviceworker.output(),
83 | 		plugins: [
84 | 			resolve(),
85 | 			replace({
86 | 				'process.browser': true,
87 | 				'process.env.NODE_ENV': JSON.stringify(mode)
88 | 			}),
89 | 			commonjs(),
90 | 			!dev && terser()
91 | 		]
92 | 	}
93 | };


--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
 1 | import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
 2 | 
 3 | const asset_cache = `cache${timestamp}`;
 4 | 
 5 | // `shell` is an array of all the files generated by webpack,
 6 | // `files` is an array of everything in the `static` directory
 7 | const to_cache = shell.concat(files);
 8 | const cached = new Set(to_cache);
 9 | 
10 | self.addEventListener('install', event => {
11 | 	event.waitUntil(
12 | 		caches
13 | 			.open(asset_cache)
14 | 			.then(cache => cache.addAll(to_cache))
15 | 			.then(() => {
16 | 				self.skipWaiting();
17 | 			})
18 | 	);
19 | });
20 | 
21 | self.addEventListener('activate', event => {
22 | 	event.waitUntil(
23 | 		caches.keys().then(async keys => {
24 | 			// delete old caches
25 | 			for (const key of keys) {
26 | 				if (key !== asset_cache) await caches.delete(key);
27 | 			}
28 | 
29 | 			self.clients.claim();
30 | 		})
31 | 	);
32 | });
33 | 
34 | self.addEventListener('fetch', event => {
35 | 	const url = new URL(event.request.url);
36 | 
37 | 	// don't try to handle e.g. data: URIs
38 | 	if (!url.protocol.startsWith('http')) return;
39 | 
40 | 	// ignore dev server requests
41 | 	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
42 | 
43 | 	// always serve assets and webpack-generated files from cache
44 | 	if (url.host === self.location.host && cached.has(url.pathname)) {
45 | 		event.respondWith(caches.match(event.request));
46 | 		return;
47 | 	}
48 | 
49 | 	// for pages, you might want to serve a shell `index.html` file,
50 | 	// which Sapper has generated for you. It's not right for every
51 | 	// app, but if it's right for yours then uncomment this section
52 | 	/*
53 | 	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
54 | 		event.respondWith(caches.match('/index.html'));
55 | 		return;
56 | 	}
57 | 	*/
58 | 
59 | 	// for everything else, try the network first, falling back to
60 | 	// cache if the user is offline. (If the pages never change, you
61 | 	// might prefer a cache-first approach to a network-first one.)
62 | 	event.respondWith(
63 | 		caches
64 | 			.open(`offline${timestamp}`)
65 | 			.then(async cache => {
66 | 				try {
67 | 					const response = await fetch(event.request);
68 | 					cache.put(event.request, response.clone());
69 | 					return response;
70 | 				} catch(err) {
71 | 					const response = await cache.match(event.request);
72 | 					if (response) return response;
73 | 
74 | 					throw err;
75 | 				}
76 | 			})
77 | 	);
78 | });
79 | 


--------------------------------------------------------------------------------
/content/guide/03-client-api.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Client API
 3 | ---
 4 | 
 5 | The `__sapper__/client.js` module contains functions for controlling your app and responding to events.
 6 | 
 7 | 
 8 | ### start({ target, store? })
 9 | 
10 | * `target` — an element to render pages to
11 | * `store` — an function that, given some data, returns a Store object. See the [state management](guide#state-management) section for more detail
12 | 
13 | This configures the router and starts the application — listens for clicks on `<a>` elements, interacts with the `history` API, and renders and updates your Svelte components.
14 | 
15 | Returns a `Promise` that resolves when the initial page has been hydrated.
16 | 
17 | ```js
18 | import * as sapper from '../__sapper__/client.js';
19 | 
20 | sapper.start({
21 | 	target: document.querySelector('#sapper')
22 | }).then(() => {
23 | 	console.log('client-side app has started');
24 | });
25 | ```
26 | 
27 | 
28 | ### goto(href, options?)
29 | 
30 | * `href` — the page to go to
31 | * `options` — can include a `replaceState` property, which determines whether to use `history.pushState` (the default) or `history.replaceState`). Not required
32 | 
33 | Programmatically navigates to the given `href`. If the destination is a Sapper route, Sapper will handle the navigation, otherwise the page will be reloaded with the new `href`. (In other words, the behaviour is as though the user clicked on a link with this `href`.)
34 | 
35 | 
36 | ### prefetch(href)
37 | 
38 | * `href` — the page to prefetch
39 | 
40 | Programmatically prefetches the given page, which means a) ensuring that the code for the page is loaded, and b) calling the page's `preload` method with the appropriate options. This is the same behaviour that Sapper triggers when the user taps or mouses over an `<a>` element with [rel=prefetch](guide#prefetching).
41 | 
42 | 
43 | 
44 | ### prefetchRoutes(routes?)
45 | 
46 | * `routes` — an optional array of strings representing routes to prefetch
47 | 
48 | Programmatically prefetches the code for routes that haven't yet been fetched. Typically, you might call this after `sapper.start()` is complete, to speed up subsequent navigation (this is the 'L' of the [PRPL pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)). Omitting arguments will cause all routes to be fetched, or you can specify routes by any matching pathname such as `/about` (to match `src/routes/about.html`) or `/blog/*` (to match `src/routes/blog/[slug].html`). Unlike `prefetch`, this won't call `preload` for individual pages.
49 | 


--------------------------------------------------------------------------------
/content/guide/00-introduction.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Introduction
 3 | ---
 4 | 
 5 | *Note: Sapper is in early development, and some things may change before we hit version 1.*
 6 | 
 7 | ### What is Sapper?
 8 | 
 9 | Sapper is a framework for building extremely high-performance web apps. You're looking at one right now! There are two basic concepts:
10 | 
11 | * Each page of your app is a [Svelte](https://v2.svelte.dev) component
12 | * You create pages by adding files to the `src/routes` directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over
13 | 
14 | Building an app with all the modern best practices — code-splitting, offline support, server-rendered views with client-side hydration — is fiendishly complicated. Sapper does all the boring stuff for you so that you can get on with the creative part.
15 | 
16 | You don't need to know Svelte to understand the rest of this guide, but it will help. In short, it's a UI framework that compiles your components to highly optimized vanilla JavaScript. Read the [introductory blog post](https://v2.svelte.dev/blog/frameworks-without-the-framework) and the [guide](https://v2.svelte.dev/guide) to learn more.
17 | 
18 | 
19 | ### Why the name?
20 | 
21 | In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as *sappers*.
22 | 
23 | For web developers, the stakes are generally lower than 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 <b>S</b>velte <b>app</b> mak<b>er</b>, is your courageous and dutiful ally.
24 | 
25 | 
26 | ### Comparison with Next.js
27 | 
28 | [Next.js](https://github.com/zeit/next.js) is a React framework from [Zeit](https://zeit.co), and is the inspiration for Sapper. There are a few notable differences, however:
29 | 
30 | * Sapper is powered by Svelte instead of React, so it's faster and your apps are smaller
31 | * Instead of route masking, we encode route parameters in filenames (see the [routing](guide#routing) section below)
32 | * As well as *pages*, you can create *server routes* in your `src/routes` directory. This makes it very easy to, for example, add a JSON API such as the one powering this very page (try visiting [/guide.json](/guide.json))
33 | * Links are just `<a>` elements, rather than framework-specific `<Link>` components. That means, for example, that [this link right here](/), despite being inside a blob of markdown, works with the router as you'd expect
34 | 
35 | 
36 | ### Getting started
37 | 
38 | The easiest way to start building a Sapper app is to clone the [sapper-template](https://github.com/sveltejs/sapper-template) repo with [degit](https://github.com/Rich-Harris/degit):
39 | 
40 | ```bash
41 | npx degit sveltejs/sapper-template#rollup my-app
42 | # or: npx degit sveltejs/sapper-template#webpack my-app
43 | cd my-app
44 | npm install
45 | npm run dev
46 | ```
47 | 
48 | This will scaffold a new project in the `my-app` directory, install its dependencies, and start a server on [localhost:3000](http://localhost:3000). Try editing the files to get a feel for how everything works – you may not need to bother reading the rest of this guide!
49 | 


--------------------------------------------------------------------------------
/content/guide/10-exporting.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Exporting
 3 | ---
 4 | 
 5 | Many sites are effectively *static*, which is to say they don't actually need an Express server backing them. Instead, they can be hosted and served as static files, which allows them to be deployed to more hosting environments (such as [Netlify](https://www.netlify.com/) or [GitHub Pages](https://pages.github.com/)). Static sites are generally cheaper to operate and have better performance characteristics.
 6 | 
 7 | Sapper allows you to *export* a static site with a single zero-config `sapper export` command. In fact, you're looking at an exported site right now!
 8 | 
 9 | Static doesn't mean non-interactive — your Svelte components work exactly as they do normally, and you still get all the benefits of client-side routing and prefetching.
10 | 
11 | 
12 | ### sapper export
13 | 
14 | Inside your Sapper project, try this:
15 | 
16 | ```bash
17 | # npx allows you to use locally-installed dependencies
18 | npx sapper export
19 | ```
20 | 
21 | This will create a `__sapper__/export` folder with a production-ready build of your site. You can launch it like so:
22 | 
23 | ```bash
24 | npx serve __sapper__/export
25 | ```
26 | 
27 | Navigate to [localhost:5000](http://localhost:5000) (or whatever port `serve` picked), and verify that your site works as expected.
28 | 
29 | You can also add a script to your package.json...
30 | 
31 | ```js
32 | {
33 | 	"scripts": {
34 | 		...
35 | 		"export": "sapper export"
36 | 	}
37 | }
38 | ```
39 | 
40 | ...allowing you to `npm run export` your app.
41 | 
42 | 
43 | ### How it works
44 | 
45 | When you run `sapper export`, Sapper first builds a production version of your app, as though you had run `sapper build`, and copies the contents of your `assets` folder to the destination. It then starts the server, and navigates to the root of your app. From there, it follows any `<a>` elements it finds, and captures any data served by the app.
46 | 
47 | Because of this, any pages you want to be included in the exported site must be reachable by `<a>` elements. Additionally, any non-page routes should be requested in `preload`, *not* in `oncreate` or elsewhere.
48 | 
49 | 
50 | ### When not to export
51 | 
52 | The basic rule is this: for an app to be exportable, any two users hitting the same page of your app must get the same content from the server. In other words, any app that involves user sessions or authentication is *not* a candidate for `sapper export`.
53 | 
54 | Note that you can still export apps with dynamic routes, like our `src/routes/blog/[slug].html` example from earlier. `sapper export` will intercept `fetch` requests made inside `preload`, so the data served from `src/routes/blog/[slug].json.js` will also be captured.
55 | 
56 | 
57 | ### Route conflicts
58 | 
59 | Because `sapper export` writes to the filesystem, it isn't possible to have two server routes that would cause a directory and a file to have the same name. For example, `src/routes/foo/index.js` and `src/routes/foo/bar.js` would try to create `export/foo` and `export/foo/bar`, which is impossible.
60 | 
61 | The solution is to rename one of the routes to avoid conflict — for example, `src/routes/foo-bar.js`. (Note that you would also need to update any code that fetches data from `/foo/bar` to reference `/foo-bar` instead.)
62 | 
63 | For *pages*, we skirt around this problem by writing `export/foo/index.html` instead of `export/foo`.


--------------------------------------------------------------------------------
/content/guide/05-layouts.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Layouts
  3 | ---
  4 | 
  5 | So far, we've treated pages as entirely standalone components — upon navigation, the existing component will be destroyed, and a new one will take its place.
  6 | 
  7 | But in many apps, there are elements that should be visible on *every* page, such as top-level navigation or a footer. Instead of repeating them in every page, we can use *layout* components.
  8 | 
  9 | To create a layout component that applies to every page, make a file called `src/routes/_layout.html`. The default layout component (the one that Sapper uses if you don't bring your own) looks like this...
 10 | 
 11 | ```html
 12 | <svelte:component this={child.component} {...child.props}/>
 13 | ```
 14 | 
 15 | ...but we can add whatever markup, styles and behaviour we want. For example, let's add a nav bar:
 16 | 
 17 | ```html
 18 | <!-- src/routes/_layout.html -->
 19 | <nav>
 20 | 	<a href=".">Home</a>
 21 | 	<a href="about">About</a>
 22 | 	<a href="settings">Settings</a>
 23 | </nav>
 24 | 
 25 | <svelte:component this={child.component} {...child.props}/>
 26 | ```
 27 | 
 28 | Sapper computes the `child` property based on which page the user has navigated to. If we create pages for `/`, `/about` and `/settings`...
 29 | 
 30 | ```html
 31 | <!-- src/routes/index.html -->
 32 | <h1>Home</h1>
 33 | ```
 34 | 
 35 | ```html
 36 | <!-- src/routes/about.html -->
 37 | <h1>About</h1>
 38 | ```
 39 | 
 40 | ```html
 41 | <!-- src/routes/settings.html -->
 42 | <h1>Settings</h1>
 43 | ```
 44 | 
 45 | ...the nav will always be visible, and clicking between the three pages will only result in the `<h1>` being replaced.
 46 | 
 47 | 
 48 | ### Nested routes
 49 | 
 50 | Suppose we don't just have a single `/settings` page, but instead have nested pages like `/settings/profile` and `/settings/notifications` with a shared submenu (for an real-life example, see [github.com/settings](https://github.com/settings)).
 51 | 
 52 | We can create a layout that only applies to pages below `/settings` (while inheriting the root layout with the top-level nav):
 53 | 
 54 | ```html
 55 | <!-- src/routes/settings/_layout.html -->
 56 | <h1>Settings</h1>
 57 | 
 58 | <div class="submenu">
 59 | 	<a href="settings/profile">Profile</a>
 60 | 	<a href="settings/notifications">Notifications</a>
 61 | </div>
 62 | 
 63 | <svelte:component this={child.component} {...child.props}/>
 64 | ```
 65 | 
 66 | In addition to `child.component` and `child.props`, there is a `child.segment` property which is useful for things like styling:
 67 | 
 68 | ```diff
 69 | <div class="submenu">
 70 | -	<a href="settings/profile">Profile</a>
 71 | -	<a href="settings/notifications">Notifications</a>
 72 | +	<a
 73 | +		class={child.segment === "profile" ? "selected" : ""}
 74 | +		href="settings/profile"
 75 | +	>Profile</a>
 76 | +
 77 | +	<a
 78 | +		class={child.segment === "notifications" ? "selected" : ""}
 79 | +		href="settings/notifications"
 80 | +	>Notifications</a>
 81 | </div>
 82 | ```
 83 | 
 84 | 
 85 | ### Preloading
 86 | 
 87 | Like page components, layout components can use `preload`:
 88 | 
 89 | ```html
 90 | <!-- src/routes/foo/_layout.html -->
 91 | <svelte:component
 92 | 	this={child.component}
 93 | 	someData={thingAllChildComponentsWillNeed}
 94 | 	{...child.props}
 95 | />
 96 | 
 97 | <script>
 98 | 	export default {
 99 | 		async preload() {
100 | 			return {
101 | 				thingAllChildComponentsWillNeed: await loadSomeData()
102 | 			};
103 | 		}
104 | 	};
105 | </script>
106 | ```


--------------------------------------------------------------------------------
/content/guide/02-routing.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Routing
  3 | ---
  4 | 
  5 | As we've seen, there are two types of route in Sapper — pages, and server routes.
  6 | 
  7 | 
  8 | ### Pages
  9 | 
 10 | 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.
 11 | 
 12 | The filename determines the route. For example, `src/routes/index.html` is the root of your site:
 13 | 
 14 | ```html
 15 | <!-- src/routes/index.html -->
 16 | <svelte:head>
 17 | 	<title>Welcome</title>
 18 | </svelte:head>
 19 | 
 20 | <h1>Hello and welcome to my site!</h1>
 21 | ```
 22 | 
 23 | A file called either `src/routes/about.html` or `src/routes/about/index.html` would correspond to the `/about` route:
 24 | 
 25 | ```html
 26 | <!-- src/routes/about.html -->
 27 | <svelte:head>
 28 | 	<title>About</title>
 29 | </svelte:head>
 30 | 
 31 | <h1>About this site</h1>
 32 | <p>TODO...</p>
 33 | ```
 34 | 
 35 | Dynamic parameters are encoded using `[brackets]`. For example, here's how you could create a page that renders a blog post:
 36 | 
 37 | ```html
 38 | <!-- src/routes/blog/[slug].html -->
 39 | <svelte:head>
 40 | 	<title>{article.title}</title>
 41 | </svelte:head>
 42 | 
 43 | <h1>{article.title}</h1>
 44 | 
 45 | <div class='content'>
 46 | 	{@html article.html}
 47 | </div>
 48 | 
 49 | <script>
 50 | 	export default {
 51 | 		// the (optional) preload function takes a
 52 | 		// `{ params, query }` object and turns it into
 53 | 		// the data we need to render the page
 54 | 		preload({ params, query }) {
 55 | 			// the `slug` parameter is available because this file
 56 | 			// is called [slug].html
 57 | 			const { slug } = params;
 58 | 
 59 | 			return this.fetch(`blog/${slug}.json`).then(r => r.json()).then(article => {
 60 | 				return { article };
 61 | 			});
 62 | 		}
 63 | 	};
 64 | </script>
 65 | ```
 66 | 
 67 | > See the section on [preloading](guide#preloading) for more info about `preload` and `this.fetch`
 68 | 
 69 | 
 70 | ### Server routes
 71 | 
 72 | Server routes are modules written in `.js` files that export functions corresponding to HTTP methods. Each function receives HTTP `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API. For example, here's how you could create an endpoint that served the blog page above:
 73 | 
 74 | ```js
 75 | // routes/blog/[slug].json.js
 76 | import db from './_database.js'; // the underscore tells Sapper this isn't a route
 77 | 
 78 | export async function get(req, res, next) {
 79 | 	// the `slug` parameter is available because this file
 80 | 	// is called [slug].json.js
 81 | 	const { slug } = req.params;
 82 | 
 83 | 	const article = await db.get(slug);
 84 | 
 85 | 	if (article !== null) {
 86 | 		res.setHeader('Content-Type', 'application/json');
 87 | 		res.end(JSON.stringify(article));
 88 | 	} else {
 89 | 		next();
 90 | 	}
 91 | }
 92 | ```
 93 | 
 94 | > `delete` is a reserved word in JavaScript. To handle DELETE requests, export a function called `del` instead.
 95 | 
 96 | 
 97 | ### File naming rules
 98 | 
 99 | There are three simple rules for naming the files that define your routes:
100 | 
101 | * A file called `src/routes/about.html` corresponds to the `/about` route. A file called `src/routes/blog/[slug].html` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to `preload`
102 | * The file `src/routes/index.html` corresponds to the root of your app. `src/routes/about/index.html` is treated the same as `src/routes/about.html`.
103 | * 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 `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
104 | 
105 | 
106 | 
107 | ### Error page
108 | 
109 | In addition to regular pages, there is a 'special' page that Sapper expects to find — `src/routes/_error.html`. This will be shown when an error occurs while rendering a page.
110 | 
111 | The `error` object is made available to the template along with the HTTP `status` code.
112 | 
113 | 
114 | 
115 | ### Regexes in routes
116 | 
117 | You can use a subset of regular expressions to qualify route parameters, by placing them in parentheses after the parameter name.
118 | 
119 | For example, `src/routes/items/[id([0-9]+)].html` would only match numeric IDs — `/items/123` would match, but `/items/xyz` would not.
120 | 
121 | Because of technical limitations, the following characters cannot be used: `/`, `\`, `?`, `:`, `(` and `)`.
122 | 


--------------------------------------------------------------------------------
/static/fonts/Inconsolata/OFL.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011, Raph Levien (firstname.lastname@gmail.com), Copyright (c) 2012, Cyreal (cyreal.org)
 2 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
 3 | This license is copied below, and is also available with a FAQ at:
 4 | http://scripts.sil.org/OFL
 5 | 
 6 | 
 7 | -----------------------------------------------------------
 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 9 | -----------------------------------------------------------
10 | 
11 | PREAMBLE
12 | The goals of the Open Font License (OFL) are to stimulate worldwide
13 | development of collaborative font projects, to support the font creation
14 | efforts of academic and linguistic communities, and to provide a free and
15 | open framework in which fonts may be shared and improved in partnership
16 | with others.
17 | 
18 | The OFL allows the licensed fonts to be used, studied, modified and
19 | redistributed freely as long as they are not sold by themselves. The
20 | fonts, including any derivative works, can be bundled, embedded, 
21 | redistributed and/or sold with any software provided that any reserved
22 | names are not used by derivative works. The fonts and derivatives,
23 | however, cannot be released under any other type of license. The
24 | requirement for fonts to remain under this license does not apply
25 | to any document created using the fonts or their derivatives.
26 | 
27 | DEFINITIONS
28 | "Font Software" refers to the set of files released by the Copyright
29 | Holder(s) under this license and clearly marked as such. This may
30 | include source files, build scripts and documentation.
31 | 
32 | "Reserved Font Name" refers to any names specified as such after the
33 | copyright statement(s).
34 | 
35 | "Original Version" refers to the collection of Font Software components as
36 | distributed by the Copyright Holder(s).
37 | 
38 | "Modified Version" refers to any derivative made by adding to, deleting,
39 | or substituting -- in part or in whole -- any of the components of the
40 | Original Version, by changing formats or by porting the Font Software to a
41 | new environment.
42 | 
43 | "Author" refers to any designer, engineer, programmer, technical
44 | writer or other person who contributed to the Font Software.
45 | 
46 | PERMISSION & CONDITIONS
47 | Permission is hereby granted, free of charge, to any person obtaining
48 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
49 | redistribute, and sell modified and unmodified copies of the Font
50 | Software, subject to the following conditions:
51 | 
52 | 1) Neither the Font Software nor any of its individual components,
53 | in Original or Modified Versions, may be sold by itself.
54 | 
55 | 2) Original or Modified Versions of the Font Software may be bundled,
56 | redistributed and/or sold with any software, provided that each copy
57 | contains the above copyright notice and this license. These can be
58 | included either as stand-alone text files, human-readable headers or
59 | in the appropriate machine-readable metadata fields within text or
60 | binary files as long as those fields can be easily viewed by the user.
61 | 
62 | 3) No Modified Version of the Font Software may use the Reserved Font
63 | Name(s) unless explicit written permission is granted by the corresponding
64 | Copyright Holder. This restriction only applies to the primary font name as
65 | presented to the users.
66 | 
67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
68 | Software shall not be used to promote, endorse or advertise any
69 | Modified Version, except to acknowledge the contribution(s) of the
70 | Copyright Holder(s) and the Author(s) or with their explicit written
71 | permission.
72 | 
73 | 5) The Font Software, modified or unmodified, in part or in whole,
74 | must be distributed entirely under this license, and must not be
75 | distributed under any other license. The requirement for fonts to
76 | remain under this license does not apply to any document created
77 | using the Font Software.
78 | 
79 | TERMINATION
80 | This license becomes null and void if any of the above conditions are
81 | not met.
82 | 
83 | DISCLAIMER
84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
92 | OTHER DEALINGS IN THE FONT SOFTWARE.
93 | 


--------------------------------------------------------------------------------
/content/guide/04-preloading.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Preloading
  3 | ---
  4 | 
  5 | As seen in the [routing](guide#routing) section, top-level page components can have a `preload` function that will load some data that the page depends on. This is similar to `getInitialProps` in Next.js or `asyncData` in Nuxt.js.
  6 | 
  7 | ```html
  8 | <script>
  9 | 	export default {
 10 | 		preload({ params, query }) {
 11 | 			const { slug } = params;
 12 | 
 13 | 			return this.fetch(`blog/${slug}.json`).then(r => r.json()).then(article => {
 14 | 				return { article };
 15 | 			});
 16 | 		}
 17 | 	};
 18 | </script>
 19 | ```
 20 | 
 21 | Your `preload` function is optional; whether or not you include it, the component will have access to the `query` and `params` objects, on top of any [default data](https://v2.svelte.dev/guide#default-data) specified with a `data` property.
 22 | 
 23 | The top-level `_layout.html` component is rendered with a `preloading` value: `true` during preloading, `false` otherwise. This value is useful to display a loading spinner or otherwise indicate that a navigation is in progress.
 24 | 
 25 | ```html
 26 | <!-- src/routes/_layout.html -->
 27 | {#if preloading}
 28 |   <div>Loading...</div>
 29 | {/if}
 30 | 
 31 | <svelte:component this={child.component} {...child.props}/>
 32 | ```
 33 | 
 34 | The `preloading` value is only set during page navigations. Prefetching (see [below](guide#prefetching)) does not set `preloading` since it is intended to be transparent to the user.
 35 | 
 36 | ### Argument
 37 | 
 38 | The `preload` function receives a `{ params, query }` object where `params` is derived from the URL and the route filename, and `query` is an object of values in the query string.
 39 | 
 40 | So if the example above was `src/routes/blog/[slug].html` and the URL was `/blog/some-post?foo=bar&baz`, the following would be true:
 41 | 
 42 | * `params.slug === 'some-post'`
 43 | * `query.foo === 'bar'`
 44 | * `query.baz === true`
 45 | 
 46 | 
 47 | ### Return value
 48 | 
 49 | If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object.
 50 | 
 51 | When Sapper renders a page on the server, it will attempt to serialize the resolved value (using [devalue](https://github.com/Rich-Harris/devalue)) and include it on the page, so that the client doesn't also need to call `preload` upon initialization. Serialization will fail if the value includes functions or custom classes (cyclical and repeated references are fine, as are built-ins like `Date`, `Map`, `Set` and `RegExp`).
 52 | 
 53 | ### Context
 54 | 
 55 | Inside `preload`, you have access to three methods...
 56 | 
 57 | * `this.fetch(url, options)`
 58 | * `this.error(statusCode, error)`
 59 | * `this.redirect(statusCode, location)`
 60 | 
 61 | ...and `this.store`, if you're using [state management](guide#state-management).
 62 | 
 63 | 
 64 | #### this.fetch
 65 | 
 66 | In browsers, you can use `fetch` to make AJAX requests, for getting data from your server routes (among other things). On the server it's a little trickier — you can make HTTP requests, but you must specify an origin, and you don't have access to cookies. This means that it's impossible to request data based on the user's session, such as data that requires you to be logged in.
 67 | 
 68 | To fix this, Sapper provides `this.fetch`, which works on the server as well as in the client:
 69 | 
 70 | ```html
 71 | <script>
 72 | 	export default {
 73 | 		preload() {
 74 | 			return this.fetch(`secret-data.json`, {
 75 | 				credentials: 'include'
 76 | 			}).then(r => {
 77 | 				// ...
 78 | 			});
 79 | 		}
 80 | 	};
 81 | </script>
 82 | ```
 83 | 
 84 | Note that you will need to use session middleware such as [express-session](https://github.com/expressjs/session) in your `app/server.js` in order to maintain user sessions or do anything involving authentication.
 85 | 
 86 | 
 87 | #### this.error
 88 | 
 89 | If the user navigated to `/blog/some-invalid-slug`, we would want to render a 404 Not Found page. We can do that with `this.error`:
 90 | 
 91 | ```html
 92 | <script>
 93 | 	export default {
 94 | 		preload({ params, query }) {
 95 | 			const { slug } = params;
 96 | 
 97 | 			return this.fetch(`blog/${slug}.json`).then(r => {
 98 | 				// assume all responses are either 200 or 404
 99 | 				if (r.status === 200) {
100 | 					return r.json().then(article => {
101 | 						return { article };
102 | 					});
103 | 				} else {
104 | 					this.error(404, 'Not found');
105 | 				}
106 | 			});
107 | 		}
108 | 	};
109 | </script>
110 | ```
111 | 
112 | The same applies to other error codes you might encounter.
113 | 
114 | 
115 | #### this.redirect
116 | 
117 | You can abort rendering and redirect to a different location with `this.redirect`:
118 | 
119 | ```html
120 | <script>
121 | 	export default {
122 | 		preload({ params, session }) {
123 | 			const { user } = this.store.get();
124 | 
125 | 			if (!user) {
126 | 				return this.redirect(302, 'login');
127 | 			}
128 | 
129 | 			return {
130 | 				user
131 | 			};
132 | 		}
133 | 	};
134 | </script>
135 | ```
136 | 


--------------------------------------------------------------------------------
/src/routes/index.html:
--------------------------------------------------------------------------------
  1 | <svelte:head>
  2 | 	<title>Sapper • Military-grade progressive web apps, powered by Svelte</title>
  3 | </svelte:head>
  4 | 
  5 | <div class='hero'>
  6 | 	<div class='left'>
  7 | 		<h1>Sapper</h1>
  8 | 
  9 | 	</div>
 10 | 
 11 | 	<div class='right'>
 12 | 		<h2>Military-grade progressive web apps, powered by Svelte</h2>
 13 | 		<ul>
 14 | 			<li><strong>Beautiful development experience, inspired by Next.js.</strong> Declarative routing, hot-module replacement, scoped styles</li>
 15 | 			<li><strong>Ridiculous performance.</strong> Svelte compiles your components down to tiny, blazing fast JavaScript modules</li>
 16 | 			<li><strong>Modern best practices baked in.</strong> Code-splitting, server-side rendering, offline support</li>
 17 | 		</ul>
 18 | 
 19 | 		<a rel='prefetch' class='learn' href='guide'>Learn Sapper</a>
 20 | 	</div>
 21 | </div>
 22 | 
 23 | <style>
 24 | 	.hero {
 25 | 		position: relative;
 26 | 		padding: 2em 1em;
 27 | 		/*background-color: #333;
 28 | 		color: #f4f4f4;*/
 29 | 		background-color: white;
 30 | 		color: #333;
 31 | 		clear: fix;
 32 | 		min-height: calc(100vh - 7em);
 33 | 		box-sizing: border-box;
 34 | 	}
 35 | 
 36 | 	ul {
 37 | 		max-width: 32em;
 38 | 		padding: 0;
 39 | 		margin: 0 0 3em 0;
 40 | 	}
 41 | 
 42 | 	li {
 43 | 		position: relative;
 44 | 		list-style: none;
 45 | 		margin: 0 0 1em 0;
 46 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 47 | 		color: #666;
 48 | 	}
 49 | 
 50 | 	li::before {
 51 | 		position: absolute;
 52 | 		content: '◆';
 53 | 		top: 0em;
 54 | 		left: -1.4em;
 55 | 		font-size: 0.8em;
 56 | 		/*color: rgba(255,255,255,0.4);*/
 57 | 		color: #ddd;
 58 | 	}
 59 | 
 60 | 	strong {
 61 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 62 | 		margin: 0 auto;
 63 | 		color: #333;
 64 | 	}
 65 | 
 66 | 	.left {
 67 | 		padding: 0 0 0 1em;
 68 | 	}
 69 | 
 70 | 	h1 {
 71 | 		display: block;
 72 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 73 | 		color: rgb(16,94,16);
 74 | 		font-size: 24vw;
 75 | 		font-weight: 300;
 76 | 		line-height: 1;
 77 | 		margin: 0;
 78 | 		text-transform: uppercase;
 79 | 		padding: 0.5em 0 0 0;
 80 | 	}
 81 | 
 82 | 	.right {
 83 | 		padding: 0 0 0 1em;
 84 | 		margin: 0 0 2em 0;
 85 | 	}
 86 | 
 87 | 	h2 {
 88 | 		font-size: 7.2vw;
 89 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 90 | 		font-weight: 300;
 91 | 		display: block;
 92 | 		margin: 0 0 4rem 0;
 93 | 		max-width: 14em;
 94 | 	}
 95 | 
 96 | 	.learn {
 97 | 		background-color: rgb(16,94,16);
 98 | 		color: white;
 99 | 		padding: 0.5em 2em;
100 | 		border-radius: 0.2em;
101 | 		line-height: 1;
102 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
103 | 		font-size: 1.2em;
104 | 		font-weight: 800;
105 | 		text-transform: uppercase;
106 | 		width: calc(100% - 1em);
107 | 		max-width: 16em;
108 | 		display: block;
109 | 		text-align: center;
110 | 	}
111 | 
112 | 	.learn:hover {
113 | 		background-color: rgba(16,94,16,0.9);
114 | 	}
115 | 
116 | 	@media (min-width: 480px) {
117 | 		.left, .right {
118 | 			max-width: 32em;
119 | 			margin: 0 auto;
120 | 		}
121 | 
122 | 		h1 {
123 | 			font-size: 8em;
124 | 		}
125 | 
126 | 		h2 {
127 | 			font-size: 2em;
128 | 			max-width: none;
129 | 		}
130 | 
131 | 		li {
132 | 			font-size: 1.2em;
133 | 		}
134 | 	}
135 | 
136 | 	@media (min-width: 1040px) {
137 | 		.hero {
138 | 			padding: 6em 1em 2em 1em;
139 | 			max-width: 64em;
140 | 			margin: 0 auto;
141 | 		}
142 | 
143 | 		.left {
144 | 			position: relative;
145 | 			float: left;
146 | 			width: 40%;
147 | 			box-sizing: border-box;
148 | 		}
149 | 
150 | 		.right {
151 | 			position: relative;
152 | 			float: left;
153 | 			width: 60%;
154 | 			box-sizing: border-box;
155 | 		}
156 | 
157 | 		h1 {
158 | 			position: relative;
159 | 			right: 3rem;
160 | 			top: 1.4rem;
161 | 			font-size: 7.2em;
162 | 			text-align: right;
163 | 		}
164 | 
165 | 		h2 {
166 | 			font-size: 2.6em;
167 | 			line-height: 1.2;
168 | 			margin: 0 0 2rem 0;
169 | 			max-width: 14em;
170 | 		}
171 | 	}
172 | 
173 | </style>
174 | 
175 | <script>
176 | 	export default {
177 | 		oncreate() {
178 | 			if ('caches' in window) {
179 | 				// cache the guide, so we can navigate instantly
180 | 				// and use it offline
181 | 				caches.keys()
182 | 					.then(keys => {
183 | 						// find the offline cache
184 | 						const key = keys.filter(k => k.startsWith('offline'));
185 | 						return caches.open(key);
186 | 					})
187 | 					.then(cache => {
188 | 						// see if we already have it — if not, fetch
189 | 						cache.match('guide.json').then(match => {
190 | 							if (!match) cache.add('guide.json');
191 | 						});
192 | 					});
193 | 			}
194 | 		}
195 | 	};
196 | </script>


--------------------------------------------------------------------------------
/src/template.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang='en'>
  3 | <head>
  4 | 	<meta charset='utf-8'>
  5 | 	<meta name='viewport' content='width=device-width'>
  6 | 	<meta name='theme-color' content='rgb(16,94,16)'>
  7 | 
  8 | 	%sapper.base%
  9 | 
 10 | 	<link rel='manifest' href='manifest.json'>
 11 | 	<link rel='icon' type='image/png' href='favicon.png'>
 12 | 
 13 | 	<style>
 14 | 		@font-face {
 15 | 			font-family: 'Roboto';
 16 | 			src: url('fonts/Roboto/Roboto-LightItalic.woff2') format('woff2'),
 17 | 				url('fonts/Roboto/Roboto-LightItalic.woff') format('woff');
 18 | 			font-weight: 300;
 19 | 			font-style: italic;
 20 | 		}
 21 | 
 22 | 		@font-face {
 23 | 			font-family: 'Roboto';
 24 | 			src: url('fonts/Roboto/Roboto-Light.woff2') format('woff2'),
 25 | 				url('fonts/Roboto/Roboto-Light.woff') format('woff');
 26 | 			font-weight: 300;
 27 | 			font-style: normal;
 28 | 		}
 29 | 
 30 | 		@font-face {
 31 | 			font-family: 'Roboto';
 32 | 			src: url('fonts/Roboto/Roboto-Bold.woff2') format('woff2'),
 33 | 				url('fonts/Roboto/Roboto-Bold.woff') format('woff');
 34 | 			font-weight: bold;
 35 | 			font-style: normal;
 36 | 		}
 37 | 
 38 | 		@font-face {
 39 | 			font-family: 'Rajdhani';
 40 | 			src: url('fonts/Rajdhani/Rajdhani-Bold.woff2') format('woff2'),
 41 | 				url('fonts/Rajdhani/Rajdhani-Bold.woff') format('woff');
 42 | 			font-weight: 700;
 43 | 			font-style: normal;
 44 | 		}
 45 | 
 46 | 		@font-face {
 47 | 			font-family: 'Rajdhani';
 48 | 			src: url('fonts/Rajdhani/Rajdhani-Medium.woff2') format('woff2'),
 49 | 				url('fonts/Rajdhani/Rajdhani-Medium.woff') format('woff');
 50 | 			font-weight: 500;
 51 | 			font-style: normal;
 52 | 		}
 53 | 
 54 | 		@font-face {
 55 | 			font-family: 'Rajdhani';
 56 | 			src: url('fonts/Rajdhani/Rajdhani-Regular.woff2') format('woff2'),
 57 | 				url('fonts/Rajdhani/Rajdhani-Regular.woff') format('woff');
 58 | 			font-weight: 300;
 59 | 			font-style: normal;
 60 | 		}
 61 | 
 62 | 		@font-face {
 63 | 			font-family: 'Inconsolata';
 64 | 			src: local('Inconsolata Bold'), local('Inconsolata-Bold'),
 65 | 				url('fonts/Inconsolata/Inconsolata-Bold.woff2') format('woff2'),
 66 | 				url('fonts/Inconsolata/Inconsolata-Bold.woff') format('woff');
 67 | 			font-weight: bold;
 68 | 			font-style: normal;
 69 | 		}
 70 | 
 71 | 		@font-face {
 72 | 			font-family: 'Inconsolata';
 73 | 			src: local('Inconsolata'), local('Inconsolata-Regular'),
 74 | 				url('fonts/Inconsolata/Inconsolata-Regular.woff2') format('woff2'),
 75 | 				url('fonts/Inconsolata/Inconsolata-Regular.woff') format('woff');
 76 | 			font-weight: normal;
 77 | 			font-style: normal;
 78 | 		}
 79 | 
 80 | 		* {
 81 | 			position: relative;
 82 | 			box-sizing: border-box;
 83 | 		}
 84 | 
 85 | 		body {
 86 | 			margin: 0;
 87 | 			background: #fff;
 88 | 			font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 89 | 			font-weight: 300;
 90 | 			color: #333;
 91 | 		}
 92 | 
 93 | 		code, pre {
 94 | 			font-family: 'Inconsolata', monospace;
 95 | 			font-weight: 400;
 96 | 			line-height: 1.2;
 97 | 		}
 98 | 
 99 | 		pre {
100 | 			overflow-x: auto;
101 | 		}
102 | 
103 | 		h1, h2, h3 {
104 | 			font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
105 | 			margin: 0;
106 | 			font-weight: 300;
107 | 			padding: 0.5em 0;
108 | 			line-height: 1.2;
109 | 		}
110 | 
111 | 		a { text-decoration: none; color: rgb(16, 94, 16); }
112 | 		strong { font-weight: 800; }
113 | 
114 | 		.hljs, .hljs-subst { color: #333; }
115 | 		.hljs-comment { color: #999; }
116 | 		.hljs-tag { color: #170; }
117 | 		.hljs-keyword { color: #708; }
118 | 		.hljs-attr { color: #333; }
119 | 		.hljs-number { color: #164; }
120 | 		.hljs-type, .hljs-string, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion { color: rgb(16,94,16); }
121 | 		.hljs-title, .hljs-section { color: rgb(16,94,16); }
122 | 		.hljs-literal { color: #170; }
123 | 		.hljs-meta { color: #555; }
124 | 		.hljs-meta-string { color: #555; }
125 | 	</style>
126 | 
127 | 	%sapper.styles%
128 | 
129 | 	%sapper.head%
130 | 
131 | 	<meta name='twitter:card' content='summary_large_image'>
132 | 	<meta name='twitter:site' content='@sveltejs'>
133 | 	<meta name='twitter:creator' content='@sveltejs'>
134 | 	<meta name='twitter:title' content='Sapper'>
135 | 	<meta name='twitter:description' content='Military-grade web apps, powered by Svelte'>
136 | 	<meta name='twitter:image' content='https://sapper.svelte.technology/images/twitter-card.png'>
137 | </head>
138 | <body>
139 | 	<div id='sapper'>%sapper.html%</div>
140 | 	%sapper.scripts%
141 | 	<script>
142 | 		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
143 | 		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
144 | 		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
145 | 		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
146 | 
147 | 		ga('create', 'UA-5602942-11', 'auto');
148 | 		ga('send', 'pageview');
149 | 	</script>
150 | </body>
151 | </html>
152 | 


--------------------------------------------------------------------------------
/src/components/Nav.html:
--------------------------------------------------------------------------------
  1 | <div class='{open ? "open": "closed"} mousecatcher' on:click='set({ open: false })'></div>
  2 | 
  3 | <div class='container'>
  4 | 	<span class="menu-link" on:click='toggleOpen()'>{open ? 'Close' : 'Menu'}</span>
  5 | 	<a href='.' class='logo'>Sapper</a>
  6 | </div>
  7 | 
  8 | <nav ref:nav class='{open ? "open": "closed"}' on:click='set({ open: false })'>
  9 | 	<ul class='primary'>
 10 | 		<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li>
 11 | 		<li><a href='https://discord.gg/yy75DKs'>Chat</a></li>
 12 | 		<li><a href='https://v2.svelte.dev'>Svelte</a></li>
 13 | 		<li><a href='https://github.com/sveltejs/sapper'>GitHub</a></li>
 14 | 	</ul>
 15 | 
 16 | 	<div class='secondary'>
 17 | 		<GuideContents/>
 18 | 	</div>
 19 | </nav>
 20 | 
 21 | <style>
 22 | 	.mousecatcher {
 23 | 		position: fixed;
 24 | 		left: 0;
 25 | 		top: 0;
 26 | 		width: 100vw;
 27 | 		height: 100vh;
 28 | 		background-color: black;
 29 | 		pointer-events: none;
 30 | 		opacity: 0;
 31 | 		/*transition: opacity 0.4s;*/
 32 | 		z-index: 3;
 33 | 	}
 34 | 
 35 | 	.mousecatcher.open {
 36 | 		pointer-events: all;
 37 | 		opacity: 0.3;
 38 | 	}
 39 | 
 40 | 	@keyframes fadein {
 41 | 		from { opacity: 0; }
 42 | 		to { opacity: 1; }
 43 | 	}
 44 | 
 45 | 	.container {
 46 | 		position: fixed;
 47 | 		width: 100%;
 48 | 		height: 3em;
 49 | 		background-color: #333;
 50 | 		color: #eee;
 51 | 		border-bottom: 2px solid rgb(16,94,16);
 52 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 53 | 		z-index: 5;
 54 | 	}
 55 | 
 56 | 	nav {
 57 | 		position: fixed;
 58 | 		width: 14em;
 59 | 		height: calc(100vh - 3em);
 60 | 		top: 3em;
 61 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 62 | 		background-color: white;
 63 | 		transform: translate(-100%,0);
 64 | 		transition: transform 0.2s cubic-bezier(.17,.67,.24,.99);
 65 | 		border-right: 1px solid #eee;
 66 | 		z-index: 5;
 67 | 		padding: 1em;
 68 | 		user-select: none;
 69 | 	}
 70 | 
 71 | 	.open {
 72 | 		transform: translate(0,0);
 73 | 		transition: transform 0.3s cubic-bezier(.17,.67,.24,.99);
 74 | 		overflow-y: auto;
 75 | 	}
 76 | 
 77 | 	.menu-link {
 78 | 		display: inline;
 79 | 		position: absolute;
 80 | 		top: 0;
 81 | 		left: 1rem;
 82 | 		font-size: 1em;
 83 | 		line-height: 3.1em;
 84 | 		color: #ccc;
 85 | 		cursor: pointer;
 86 | 		font-weight: 500;
 87 | 		-webkit-tap-highlight-color: transparent;
 88 | 		-webkit-touch-callout: none;
 89 | 	}
 90 | 
 91 | 	.logo {
 92 | 		position: absolute;
 93 | 		top: 50%;
 94 | 		left: 50%;
 95 | 		transform: translate(-50%, -45%);
 96 | 		-webkit-tap-highlight-color: transparent;
 97 | 		-webkit-touch-callout: none;
 98 | 		line-height: 1;
 99 | 		text-transform: uppercase;
100 | 		color: white;
101 | 		font-size: 1.4rem;
102 | 	}
103 | 
104 | 	ul {
105 | 		display: block;
106 | 		margin: 0;
107 | 		padding: 0;
108 | 		list-style: none;
109 | 	}
110 | 
111 | 	.primary {
112 | 		margin: 0 0 2em 0;
113 | 	}
114 | 
115 | 	.primary li {
116 | 		position: relative;
117 | 		display: block;
118 | 	}
119 | 
120 | 	.primary .active {
121 | 		color: #333;
122 | 		font-weight: 700;
123 | 	}
124 | 
125 | 	/**/
126 | 
127 | 	.primary li a {
128 | 		display: block;
129 | 		color: #727272;
130 | 		font-size: 1.3em;
131 | 		font-weight: 500;
132 | 		padding: 0.75em 0;
133 | 		line-height: 1;
134 | 	}
135 | 
136 | 	@media (min-width: 768px) {
137 | 		.mousecatcher, .menu-link {
138 | 			display: none;
139 | 		}
140 | 
141 | 		.container {
142 | 			height: 4em;
143 | 		}
144 | 
145 | 		nav {
146 | 			width: 100%;
147 | 			height: 4em;
148 | 			padding: 0 1.5em 0 0;
149 | 			transform: none;
150 | 			transition: none;
151 | 			height: 0;
152 | 		}
153 | 
154 | 		.primary {
155 | 			position: fixed;
156 | 			top: 0;
157 | 			right: 1em;
158 | 			margin: 0;
159 | 		}
160 | 
161 | 		.primary li {
162 | 			display: inline-block;
163 | 		}
164 | 
165 | 		.primary li a {
166 | 			padding: 1.5em 0.5em;
167 | 			color: #ccc;
168 | 			font-size: 1rem;
169 | 		}
170 | 
171 | 		.primary li a.active {
172 | 			color: white;
173 | 			font-weight: 500;
174 | 		}
175 | 
176 | 		.primary li::after {
177 | 			position: absolute;
178 | 			top: 1.5rem;
179 | 			right: -0.3em;
180 | 			content: '/';
181 | 			font-size: 0.8em;
182 | 			color: #999;
183 | 		}
184 | 
185 | 		.primary li:last-child::after {
186 | 			content: '';
187 | 		}
188 | 
189 | 		.secondary {
190 | 			display: none;
191 | 		}
192 | 
193 | 		.logo {
194 | 			position: absolute;
195 | 			top: 1rem;
196 | 			left: 1rem;
197 | 			font-size: 2em;
198 | 			font-weight: 300;
199 | 			transform: none;
200 | 		}
201 | 	}
202 | </style>
203 | 
204 | <script>
205 | 	export default {
206 | 		components: {
207 | 			GuideContents: './GuideContents.html'
208 | 		},
209 | 
210 | 		data () {
211 | 			return {
212 | 				open: false,
213 | 				route: '',
214 | 				active: null
215 | 			};
216 | 		},
217 | 
218 | 		methods: {
219 | 			toggleOpen () {
220 | 				const open = this.get().open;
221 | 
222 | 				// if the menu is closing, scroll back to the top *after* it
223 | 				// shuts. otherwise, scroll back to the top immediately
224 | 				// (just in case the user reopened before it happened).
225 | 				// The reason we don't just do it when the menu opens is
226 | 				// that the scrollbar visibly flashes
227 | 				if ( open ) {
228 | 					setTimeout( () => {
229 | 						if ( !this.get().open ) {
230 | 							this.refs.nav.scrollTop = 0;
231 | 						}
232 | 					}, 350 );
233 | 				} else {
234 | 					this.refs.nav.scrollTop = 0;
235 | 				}
236 | 
237 | 				this.set({ open: !open });
238 | 			}
239 | 		}
240 | 	};
241 | </script>
242 | 


--------------------------------------------------------------------------------
/content/guide/01-structure.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Sapper app structure
  3 | ---
  4 | 
  5 | This section is a reference for the curious. We recommend you play around with the project template first, and come back here when you've got a feel for how things fit together.
  6 | 
  7 | If you take a look inside the [sapper-template](https://github.com/sveltejs/sapper-template) repo, you'll see some files that Sapper expects to find:
  8 | 
  9 | ```bash
 10 | ├ package.json
 11 | ├ src
 12 | │ ├ routes
 13 | │ │ ├ # your routes here
 14 | │ │ ├ _error.html
 15 | │ │ └ index.html
 16 | │ ├ client.js
 17 | │ ├ server.js
 18 | │ ├ service-worker.js
 19 | │ └ template.html
 20 | ├ static
 21 | │ ├ # your files here
 22 | └ rollup.config.js / webpack.config.js
 23 | ```
 24 | 
 25 | When you first run Sapper, it will create an additional `__sapper__` directory containing generated files.
 26 | 
 27 | You'll notice a few extra files and a `cypress` directory which relates to [testing](guide#testing) — we don't need to worry about those right now.
 28 | 
 29 | > You *can* create these files from scratch, but it's much better to use the template. See [getting started](guide#getting-started) for instructions on how to easily clone it
 30 | 
 31 | 
 32 | ### package.json
 33 | 
 34 | Your package.json contains your app's dependencies and defines a number of scripts:
 35 | 
 36 | * `npm run dev` — start the app in development mode, and watch source files for changes
 37 | * `npm run build` — build the app in production mode
 38 | * `npm run export` — bake out a static version, if applicable (see [exporting](guide#exporting))
 39 | * `npm start` — start the app in production mode after you've built it
 40 | * `npm test` — run the tests (see [testing](guide#testing))
 41 | 
 42 | 
 43 | ### src
 44 | 
 45 | This contains the three *entry points* for your app — `src/client.js`, `src/server.js` and (optionally) `src/service-worker.js` — along with a `src/template.html` file.
 46 | 
 47 | #### src/client.js
 48 | 
 49 | This *must* import, and call, the `start` function from the generated `__sapper__/client.js` file:
 50 | 
 51 | ```js
 52 | import * as sapper from '../__sapper__/client.js';
 53 | 
 54 | sapper.start({
 55 | 	target: document.querySelector('#sapper')
 56 | });
 57 | ```
 58 | 
 59 | In many cases, that's the entirety of your entry module, though you can do as much or as little here as you wish. See the [client API](guide#client-api) section for more information on functions you can import.
 60 | 
 61 | 
 62 | #### src/server.js
 63 | 
 64 | This is a normal Express (or [Polka](https://github.com/lukeed/polka), etc) app, with three requirements:
 65 | 
 66 | * it should serve the contents of the `static` folder, using for example [sirv](https://github.com/lukeed/sirv)
 67 | * it should call `app.use(sapper.middleware())` at the end, where `sapper` is imported from `../__sapper__/server.js`
 68 | * it must listen on `process.env.PORT`
 69 | 
 70 | Beyond that, you can write the server however you like.
 71 | 
 72 | 
 73 | #### src/service-worker.js
 74 | 
 75 | Service workers act as proxy servers that give you fine-grained control over how to respond to network requests. For example, when the browser requests `/goats.jpg`, the service worker can respond with a file it previously cached, or it can pass the request on to the server, or it could even respond with something completely different, such as a picture of llamas.
 76 | 
 77 | Among other things, this makes it possible to build applications that work offline.
 78 | 
 79 | Because every app needs a slightly different service worker (sometimes it's appropriate to always serve from the cache, sometimes that should only be a last resort in case of no connectivity), Sapper doesn't attempt to control the service worker. Instead, you write the logic in `service-worker.js`. You can import any of the following from `../__sapper__/service-worker.js`:
 80 | 
 81 | * `files` — an array of files found in the `static` directory
 82 | * `shell` — the client-side JavaScript generated by the bundler (Rollup or webpack)
 83 | * `routes` — an array of `{ pattern: RegExp }` objects you can use to determine whether a Sapper-controlled page is being requested
 84 | * `timestamp` — the time the service worker was generated (useful for generating unique cache names)
 85 | 
 86 | 
 87 | #### src/template.html
 88 | 
 89 | This file is a template for responses from the server. Sapper will inject content that replaces the following tags:
 90 | 
 91 | * `%sapper.base%` — a `<base>` element (see [base URLs](guide#base-urls))
 92 | * `%sapper.styles%` — critical CSS for the page being requested
 93 | * `%sapper.head%` — HTML representing page-specific `<head>` contents, like `<title>`
 94 | * `%sapper.html%` — HTML representing the body of the page being rendered
 95 | * `%sapper.scripts%` — script tags for the client-side app
 96 | 
 97 | 
 98 | ### src/routes
 99 | 
100 | This is the meat of your app — the pages and server routes. See the section on [routing](guide#routing) for the juicy details.
101 | 
102 | 
103 | ### static
104 | 
105 | This is a place to put any files that your app uses — fonts, images and so on. For example `static/favicon.png` will be served as `/favicon.png`.
106 | 
107 | Sapper doesn't serve these files — you'd typically use [sirv](https://github.com/lukeed/sirv) or [serve-static](https://github.com/expressjs/serve-static) for that — but it will read the contents of the `static` folder so that you can easily generate a cache manifest for offline support (see [service-worker.js](guide#templates-service-worker-js)).
108 | 
109 | 
110 | ### rollup.config.js / webpack.config.js
111 | 
112 | Sapper can use [Rollup](https://rollupjs.org/) or [webpack](https://webpack.js.org/) to bundle your app. You probably won't need to change the config, but if you want to (for example to add new loaders or plugins), you can.
113 | 


--------------------------------------------------------------------------------
/src/routes/guide/index.html:
--------------------------------------------------------------------------------
  1 | <svelte:head>
  2 | 	<title>Learn Sapper</title>
  3 | </svelte:head>
  4 | 
  5 | <div ref:container class='content'>
  6 | 	{#each sections as section}
  7 | 		<section id='{section.slug}'>
  8 | 			<h2>
  9 | 				{section.metadata.title}
 10 | 				<small><a href='https://github.com/sveltejs/sapper.svelte.technology/edit/master/content/guide/{section.file}'>edit this section</a></small>
 11 | 			</h2>
 12 | 
 13 | 			{@html section.html}
 14 | 		</section>
 15 | 	{/each}
 16 | </div>
 17 | 
 18 | <div class='sidebar'>
 19 | 	<GuideContents ref:contents/>
 20 | </div>
 21 | 
 22 | <style>
 23 | 	.sidebar {
 24 | 		position: fixed;
 25 | 		left: 0;
 26 | 		top: 4em;
 27 | 		width: 14em;
 28 | 		height: calc(100vh - 4em);
 29 | 		display: none;
 30 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 31 | 		overflow-y: auto;
 32 | 		padding: 2em 1em 2em 1.5em;
 33 | 	}
 34 | 
 35 | 	.content {
 36 | 		width: 100%;
 37 | 		padding: 1em;
 38 | 	}
 39 | 
 40 | 	h2 {
 41 | 		padding: 6rem 0 0 0;
 42 | 		margin: -3rem 0 1rem 0;
 43 | 		font-size: 2.4em;
 44 | 		font-weight: 400;
 45 | 		pointer-events: none;
 46 | 	}
 47 | 
 48 | 	small {
 49 | 		font-size: 14px;
 50 | 		opacity: 0.5;
 51 | 		float: right;
 52 | 		line-height: 3.4rem;
 53 | 		pointer-events: all;
 54 | 	}
 55 | 
 56 | 	section :global(pre) :global(h2) {
 57 | 		margin: 0 0 1em 0;
 58 | 		padding: 0.2em 0;
 59 | 		border-bottom: 1px solid rgba(0,0,0,0.1);
 60 | 		font-size: 1.2em;
 61 | 		color: rgba(0,0,0,0.5);
 62 | 	}
 63 | 
 64 | 	section :global(h3) {
 65 | 		padding-top: 6rem;
 66 | 		font-size: 1.2em;
 67 | 		font-weight: 800;
 68 | 		margin: -3em 0 0 0;
 69 | 		pointer-events: none;
 70 | 	}
 71 | 
 72 | 	section :global(p) {
 73 | 		margin: 0 0 1em 0;
 74 | 		font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 75 | 		font-weight: 300;
 76 | 		color: #181818;
 77 | 		line-height: 1.5;
 78 | 	}
 79 | 
 80 | 	section :global(a) {
 81 | 		border-bottom: 1px solid #e3d9d9;
 82 | 	}
 83 | 
 84 | 	section :global(strong) {
 85 | 		font-weight: 700;
 86 | 	}
 87 | 
 88 | 	section :global(code) {
 89 | 		background-color: #f9f9f9;
 90 | 		padding: 0.2em 0.4em;
 91 | 		border-radius: 3px;
 92 | 		color: #444;
 93 | 	}
 94 | 
 95 | 	section :global(pre) :global(code) {
 96 | 		padding: 0;
 97 | 	}
 98 | 
 99 | 	section:first-child :global(h3) {
100 | 		border: none;
101 | 	}
102 | 
103 | 	section {
104 | 		border-bottom: 1px solid #eee;
105 | 		max-width: 64em;
106 | 		margin: 0 auto 2em auto;
107 | 		padding: 0 0 4em 0;
108 | 	}
109 | 
110 | 	section:last-child {
111 | 		border: none;
112 | 	}
113 | 
114 | 	section > :global(pre), section :global(.CodeMirror) {
115 | 		background-color: #f9f9f9;
116 | 		border-left: 2px solid #eee;
117 | 		padding: 8px;
118 | 		margin: 0 0 1em 0;
119 | 	}
120 | 
121 | 	section > :global(pre) {
122 | 		padding: 12px 8px 12px 12px;
123 | 		border-radius: 3px;
124 | 	}
125 | 
126 | 	section :global(p), section :global(ul) {
127 | 		max-width: 48em;
128 | 	}
129 | 
130 | 	section :global(ul) {
131 | 		line-height: 1.5;
132 | 	}
133 | 
134 | 	section :global(li) {
135 | 		margin: 0;
136 | 	}
137 | 
138 | 	section :global(.open-in-repl) {
139 | 		position: absolute;
140 | 		z-index: 2;
141 | 		right: 0;
142 | 	}
143 | 
144 | 	section :global(.open-in-repl::after) {
145 | 		position: absolute;
146 | 		content: 'open in repl';
147 | 		text-transform: uppercase;
148 | 		right: 0.5em;
149 | 		top: 0.5em;
150 | 		border: 1px solid rgba(0,0,0,0.1);
151 | 		font-family: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
152 | 		font-weight: 500;
153 | 		text-align: center;
154 | 		white-space: pre;
155 | 		padding: 0.25em 0.5em 0.1em 0.5em;
156 | 		line-height: 1;
157 | 		border-radius: 0.1em;
158 | 		color: rgba(16,94,16,0.8);
159 | 		background-color: rgb(253,242,242);
160 | 	}
161 | 
162 | 	section :global(.open-in-repl:hover::after) {
163 | 		color: white;
164 | 		background-color: rgba(16,94,16,1);
165 | 	}
166 | 
167 | 	section :global(blockquote) {
168 | 		position: relative;
169 | 		color: #999;
170 | 		margin: 1em 0;
171 | 		padding: 0.5em 0 0.5em 2em;
172 | 		max-width: 48em;
173 | 		border-top: 1px solid #eee;
174 | 		border-bottom: 1px solid #eee;
175 | 	}
176 | 
177 | 	section :global(blockquote) :global(p) {
178 | 		color: #666;
179 | 	}
180 | 
181 | 	section :global(blockquote) :global(p:last-child) {
182 | 		margin: 0;
183 | 	}
184 | 
185 | 	section :global(blockquote::before) {
186 | 		content: '!';
187 | 		position: absolute;
188 | 		left: 0.5em;
189 | 		top: 0.8em;
190 | 		color: rgba(16,94,16, 0.7);
191 | 		font-size: 0.8em;
192 | 		font-weight: 800;
193 | 		width: 1em;
194 | 		height: 1em;
195 | 		text-align: center;
196 | 		line-height: 1;
197 | 		padding: 0.15em 0.1em 0.1em 0.1em;
198 | 		border-radius: 50%;
199 | 		border: 2px solid rgba(16,94,16,0.7);
200 | 	}
201 | 
202 | 	section :global(.hljs-addition) {
203 | 		color: rgb(30,180,30);
204 | 		background-color: rgba(30,180,30,0.1);
205 | 	}
206 | 
207 | 	section :global(.hljs-deletion) {
208 | 		color: rgb(200,50,50);
209 | 		background-color: rgba(200,50,50,0.1);
210 | 	}
211 | 
212 | 	@media (min-width: 768px) {
213 | 		.sidebar {
214 | 			display: block;
215 | 		}
216 | 
217 | 		.content {
218 | 			padding: 0 2em 2em 16em;
219 | 		}
220 | 
221 | 		h2 {
222 | 			padding: 7rem 0 0 0;
223 | 			margin: -4rem 0 1rem 0;
224 | 		}
225 | 
226 | 		section :global(h3) {
227 | 			padding-top: 7rem;
228 | 			margin: -4em 0 0 0;
229 | 		}
230 | 	}
231 | </style>
232 | 
233 | <script>
234 | 	export default {
235 | 		components: {
236 | 			GuideContents: '../../components/GuideContents.html'
237 | 		},
238 | 
239 | 		preload() {
240 | 			return this.fetch(`guide.json`).then(r => r.json()).then(sections => {
241 | 				return { sections };
242 | 			});
243 | 		},
244 | 
245 | 		oncreate() {
246 | 			const anchors = this.refs.container.querySelectorAll('[id]');
247 | 			let positions;
248 | 
249 | 			const onresize = () => {
250 | 				const { top } = this.refs.container.getBoundingClientRect();
251 | 				positions = [].map.call(anchors, anchor => {
252 | 					return anchor.getBoundingClientRect().top - top;
253 | 				});
254 | 			}
255 | 
256 | 			let lastId = window.location.hash.slice(1);
257 | 
258 | 			const onscroll = () => {
259 | 				const top = -window.scrollY;
260 | 
261 | 				let i = anchors.length;
262 | 				while (i--) {
263 | 					if (positions[i] + top < 40) {
264 | 						const anchor = anchors[i];
265 | 						const { id } = anchor;
266 | 
267 | 						if (id !== lastId) {
268 | 							this.store.set({ activeGuideSection: id });
269 | 							this.fire('scroll', id);
270 | 
271 | 							lastId = id;
272 | 						}
273 | 
274 | 						return;
275 | 					}
276 | 				}
277 | 			};
278 | 
279 | 			window.addEventListener('scroll', onscroll, true);
280 | 			window.addEventListener('resize', onresize, true);
281 | 
282 | 			// wait for fonts to load...
283 | 			const timeouts = [
284 | 				setTimeout(onresize, 1000),
285 | 				setTimeout(onresize, 5000)
286 | 			];
287 | 
288 | 			this.on('destroy', () => {
289 | 				window.removeEventListener('scroll', onscroll, true);
290 | 				window.removeEventListener('resize', onresize, true);
291 | 
292 | 				timeouts.forEach(timeout => clearTimeout(timeout));
293 | 			});
294 | 
295 | 			onresize();
296 | 			onscroll();
297 | 		}
298 | 	};
299 | </script>


--------------------------------------------------------------------------------
/content/guide/16-migrating.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Migrating
  3 | ---
  4 | 
  5 | Until we reach version 1.0, there may be occasional changes to the project structure Sapper expects. If you upgrade and Sapper sends you here, it's because it was unable to fix your project automatically.
  6 | 
  7 | 
  8 | ### 0.6 to 0.7
  9 | 
 10 | Consult [sapper-template](https://github.com/sveltejs/sapper-template) for full examples of all the below points.
 11 | 
 12 | 
 13 | #### package.json
 14 | 
 15 | To start a dev server, use `sapper dev` rather than `node server.js`. In all likelihood, your package.json will have an `npm run dev` script that will need to be updated.
 16 | 
 17 | #### Entry points
 18 | 
 19 | As of version 0.7, Sapper expects to find your entry points — for client, server and service worker — in an `app` folder. Instead of using magically-injected `__variables__`, each entry point imports from its corresponding file in the `app/manifests` folder. These are automatically generated by Sapper.
 20 | 
 21 | ```js
 22 | // app/client.js (formerly templates/main.js)
 23 | import { init } from 'sapper/runtime.js';
 24 | import { routes } from './manifest/client.js';
 25 | 
 26 | init(document.querySelector('#sapper'), routes);
 27 | 
 28 | if (module.hot) module.hot.accept(); // enable hot reloading
 29 | ```
 30 | 
 31 | ```js
 32 | // app/server.js (formerly server.js)
 33 | // Note that we're now using ES module syntax, because this
 34 | // file is processed by webpack like the rest of your app
 35 | import sapper from 'sapper';
 36 | import { routes } from './manifest/server.js';
 37 | // ..other imports
 38 | 
 39 | // we now pass the `routes` object to the Sapper middleware
 40 | app.use(sapper({
 41 | 	routes
 42 | }));
 43 | ```
 44 | 
 45 | ```js
 46 | // app/service-worker.js (formerly templates/service-worker.js)
 47 | import { assets, shell, timestamp, routes } from './manifest/service-worker.js';
 48 | 
 49 | // replace e.g. `__assets__` with `assets` in the rest of the file
 50 | ```
 51 | 
 52 | 
 53 | #### Templates and error pages
 54 | 
 55 | In previous versions, we had `templates/2xx.html`, `templates/4xx.html` and `templates/5xx.html`. Now, we have a single template, `app/template.html`, which should look like your old `templates/2xx.html`.
 56 | 
 57 | For handling error states, we have a 'special' route: `routes/_error.html`.
 58 | 
 59 | This page is just like any other, except that it will get rendered whenever an error states is reached. The component has access to `status` and `error` values.
 60 | 
 61 | Note that you can now use `this.error(statusCode, error)` inside your `preload` functions.
 62 | 
 63 | 
 64 | #### Webpack configs
 65 | 
 66 | Your webpack configs now live in a `webpack` directory:
 67 | 
 68 | * `webpack.client.config.js` is now `webpack/client.config.js`
 69 | * `webpack.server.config.js` is now `webpack/server.config.js`
 70 | 
 71 | If you have a service worker, you should also have a `webpack/service-worker.config.js` file. See [sapper-template](https://github.com/sveltejs/sapper-template) for an example.
 72 | 
 73 | 
 74 | ### <0.9 to 0.10
 75 | 
 76 | #### app/template.html
 77 | 
 78 | * Your `<head>` element must contain `%sapper.base%` (see ([base URLs](guide#base-urls))
 79 | * Remove references to your service worker; this is now handled by `%sapper.scripts%`
 80 | 
 81 | #### Pages
 82 | 
 83 | * Your `preload` functions should now use `this.fetch` instead of `fetch`. `this.fetch` allows you to make credentialled requests on the server, and means that you no longer need to create a `global.fetch` object in `app/server.js`.
 84 | 
 85 | 
 86 | ### 0.11 to 0.12
 87 | 
 88 | In earlier versions, each page was a completely standalone component. Upon navigation, the entire page would be torn down and a new one created. Typically, each page would import a shared `<Layout>` component to achieve visual consistency.
 89 | 
 90 | As of 0.12, this changes: we have a single `<App>` component, defined in `app/App.html`, which controls the rendering of the rest of the app. See [sapper-template](https://github.com/sveltejs/sapper-template/blob/master/app/App.html) for an example.
 91 | 
 92 | This component is rendered with the following values:
 93 | 
 94 | * `Page` — a component constructor for the current page
 95 | * `props` — an object with `params`, `query`, and any data returned from the page's `preload` function
 96 | * `preloading` — `true` during preload, `false` otherwise. Useful for showing progress indicators
 97 | 
 98 | Sapper needs to know about your app component. To that end, you will need to modify your `app/server.js` and `app/client.js`:
 99 | 
100 | ```diff
101 | // app/server.js
102 | import polka from 'polka';
103 | import sapper from 'sapper';
104 | import serve from 'serve-static';
105 | import { routes } from './manifest/server.js';
106 | +import App from './App.html';
107 | 
108 | polka()
109 | 	.use(
110 | 		serve('assets'),
111 | -		sapper({ routes })
112 | +		sapper({ App, routes })
113 | 	)
114 | 	.listen(process.env.PORT);
115 | ```
116 | 
117 | ```diff
118 | // app/client.js
119 | import { init } from 'sapper/runtime.js';
120 | import { routes } from './manifest/client.js';
121 | +import App from './App.html';
122 | 
123 | -init(target: document.querySelector('#sapper'), routes);
124 | +init({
125 | +	target: document.querySelector('#sapper'),
126 | +	routes,
127 | +	App
128 | +});
129 | ```
130 | 
131 | Once your `App.html` has been created and your server and client apps updated, you can remove any `<Layout>` components from your individual pages.
132 | 
133 | 
134 | ### 0.13 to 0.14
135 | 
136 | The `4xx.html` and `5xx.html` error pages have been replaced with a single page, `_error.html`. In addition to the regular `params`, `query` and `path` props, it receives `status` and `error`.
137 | 
138 | 
139 | ### 0.14 to 0.15
140 | 
141 | This release changed how routing is handled, resulting in a number of changes.
142 | 
143 | Instead of a single `App.html` component, you can place `_layout.html` components in any directory under `routes`. You should move `app/App.html` to `routes/_layout.html` and modify it like so:
144 | 
145 | ```diff
146 | -<!-- app/App.html -->
147 | +<!-- routes/_layout.html -->
148 | 
149 | -<Nav path={props.path}/>
150 | +<Nav segment={child.segment}/>
151 | 
152 | -<svelte:component this={Page} {...props}/>
153 | +<svelte:component this={child.component} {...child.props}/>
154 | ```
155 | 
156 | You will then need to remove `App` from your client and server entry points, and replace `routes` with `manifest`:
157 | 
158 | ```diff
159 | // app/client.js
160 | import { init } from 'sapper/runtime.js';
161 | -import { routes } from './manifest/client.js';
162 | -import App from './App.html';
163 | +import { manifest } from './manifest/client.js';
164 | 
165 | init({
166 | 	target: document.querySelector('#sapper'),
167 | -	routes,
168 | -	App
169 | +	manifest
170 | });
171 | ```
172 | 
173 | ```diff
174 | // app/server.js
175 | import sirv from 'sirv';
176 | import polka from 'polka';
177 | import sapper from 'sapper';
178 | import compression from 'compression';
179 | -import { routes } from './manifest/server.js';
180 | -import App from './App.html';
181 | +import { manifest } from './manifest/server.js';
182 | 
183 | polka()
184 | 	.use(
185 | 		compression({ threshold: 0 }),
186 | 		sirv('assets'),
187 | -		sapper({ routes, App })
188 | +		sapper({ manifest })
189 | 	)
190 | 	.listen(process.env.PORT)
191 | 	.catch(err => {
192 | 		console.log('error', err);
193 | 	});
194 | ```
195 | 
196 | `preload` functions no longer take the entire request object on the server; instead, they receive the same argument as on the client.
197 | 
198 | 
199 | ### 0.17 to 0.18
200 | 
201 | The `sapper/webpack/config.js` file (required in the `webpack/*.config.js` files) is now `sapper/config/webpack.js`.
202 | 
203 | 
204 | ### 0.20 to 0.21
205 | 
206 | * The `app` directory is now `src`
207 | * The `routes` directory is now `src/routes`
208 | * The `assets` directory is now `static` (remember to update your `src/server.js` file to reflect this change as well)
209 | * Instead of having three separate config files (`webpack/client.config.js`, `webpack/server.config.js` and `webpack/service-worker.config.js`), there is a single `webpack.config.js` file that exports `client`, `server` and `serviceworker` configs.
210 | 
211 | 
212 | ### 0.21 to 0.22
213 | 
214 | Instead of importing middleware from the `sapper` package, or importing the client runtime from `sapper/runtime.js`, the app is *compiled into* the generated files:
215 | 
216 | ```diff
217 | // src/client.js
218 | -import { init } from 'sapper/runtime.js';
219 | -import { manifest } from './manifest/client.js';
220 | +import * as sapper from '../__sapper__/client.js';
221 | 
222 | -init({
223 | +sapper.start({
224 | 	target: document.querySelector('#sapper'),
225 | -	manifest
226 | });
227 | ```
228 | 
229 | ```diff
230 | // src/server.js
231 | import sirv from 'sirv';
232 | import polka from 'polka';
233 | import compression from 'compression';
234 | -import sapper from 'sapper';
235 | -import { manifest } from './manifest/server.js';
236 | +import * as sapper from '../__sapper__/server.js';
237 | 
238 | const { PORT, NODE_ENV } = process.env;
239 | const dev = NODE_ENV === 'development';
240 | 
241 | polka() // You can also use Express
242 | 	.use(
243 | 		compression({ threshold: 0 }),
244 | -		sirv('assets', { dev }),
245 | +		sirv('static', { dev }),
246 | -		sapper({ manifest })
247 | +		sapper.middleware()
248 | 	)
249 | 	.listen(PORT, err => {
250 | 		if (err) console.log('error', err);
251 | 	});
252 | ```
253 | 
254 | ```diff
255 | // src/service-worker.js
256 | -import { assets, shell, routes, timestamp } from './manifest/service-worker.js';
257 | +import { files, shell, routes, timestamp } from '../__sapper__/service-worker.js';
258 | ```
259 | 
260 | In addition, the default build and export directories are now `__sapper__/build` and `__sapper__/export` respectively.
261 | 


--------------------------------------------------------------------------------