Compare commits

...

145 Commits

Author SHA1 Message Date
Rich Harris
d13d6209ed use sapper.server() in tests 2019-05-10 08:52:01 -04:00
Rich Harris
05aef8de71 add req.query, add sapper.server(), remove unused code 2019-05-10 08:47:30 -04:00
Rich Harris
429f44e3a6 get tests passing 2019-05-10 08:00:21 -04:00
Rich Harris
f8e853c02b handle missing static folder 2019-05-10 07:38:18 -04:00
Rich Harris
bedbcb834b incorporate Sirv, and add a sapper.start() function 2019-05-09 21:32:13 -04:00
Richard Harris
5c07080207 -> v0.27.0 2019-05-09 09:38:21 -04:00
Richard Harris
c2ed73f103 -> v0.27.0 2019-05-09 09:30:45 -04:00
Richard Harris
133ac07ed2 remove some unused imports 2019-05-09 09:26:49 -04:00
Richard Harris
7417de101e Merge branch 'master' of github.com:sveltejs/sapper 2019-05-09 09:26:13 -04:00
Rich Harris
2792b7c5d1 Merge pull request #676 from mrkishi/server-indexes
Consolidate index handling for page and server routes
2019-05-09 09:18:26 -04:00
Rich Harris
cf8d5ee717 Merge pull request #670 from cristianl/pr-rollup-output-naming
Build rollup config: Don't add hashes to files in dist
2019-05-09 09:15:04 -04:00
Rich Harris
8e4517a1ad Merge pull request #673 from mrkishi/testing-issue
Harden tests (...a bit)
2019-05-09 08:57:18 -04:00
Rich Harris
91894722ee Merge pull request #652 from sveltejs/relicense
switch license to MIT
2019-05-09 08:44:32 -04:00
Rich Harris
933b3b76a6 Merge pull request #665 from mrkishi/node-stable
Switch to node stable
2019-05-09 08:42:07 -04:00
Richard Harris
3ed4d1d887 update deps 2019-05-09 08:39:58 -04:00
Richard Harris
dda936e53b fix theme color 2019-05-09 08:34:41 -04:00
Rich Harris
ac4eb84f3d Merge pull request #662 from thollander/feat/fix-mobile-viewport
Fix mobile viewport KO
2019-05-09 08:32:57 -04:00
Rich Harris
9e70e68c0c Merge pull request #664 from mrkishi/refactor
Tidy a few things up
2019-05-09 08:28:57 -04:00
Rich Harris
22389eab99 Merge pull request #678 from mrkishi/generated-app-quoted-attributes
Add attribute quotes to generated `App.svelte`
2019-05-09 08:24:02 -04:00
mrkishi
fe6b7976ef Add attribute quotes to generated App.svelte 2019-05-08 22:44:07 -03:00
mrkishi
54e92c3b99 Regularize page and server routes
Treats both page and server routes similarly in regards to indexes.

It's a (somewhat) breaking change: server routes will accept trailing
slashes to match page routes behavior, but only if there's no extension.

We still need a stronger support for dealing with different clean urls
rules.
2019-05-08 12:24:45 -03:00
mrkishi
e6c1a54164 Harden tests (...a bit) 2019-05-08 00:57:59 -03:00
Cristian Lorsson
629b5601c8 Don't add hashes to dist output
Default is '[name].[hash].js'
2019-05-06 20:46:32 -03:00
Conduitry
8bdd363a19 site: remove chokidar 2019-05-06 12:50:31 -04:00
mrkishi
8fcc27d44f Update svelte to released v3 2019-05-05 23:19:00 -03:00
mrkishi
f6e72a0432 Update dependencies 2019-05-05 21:25:00 -03:00
mrkishi
f886a12bd7 Group route filters 2019-05-05 14:51:23 -03:00
mrkishi
6c03cfd46a Extract layout file search 2019-05-05 14:51:22 -03:00
mrkishi
78480fe5e8 Fix typo 2019-05-05 14:51:22 -03:00
mrkishi
5cba40b7e0 Refactor compose_handlers and ignore 2019-05-05 14:51:22 -03:00
Richard Harris
c99b787632 -> v0.26.1 2019-05-05 11:44:53 -04:00
Rich Harris
99a25308fc Merge pull request #663 from sveltejs/skipped-segments
Handle skipped segments
2019-05-05 11:44:08 -04:00
Richard Harris
c0ada5c52f handle skipped segments 2019-05-05 11:36:02 -04:00
Richard Harris
d51e1a0af8 failing test for skipped segments 2019-05-05 10:49:38 -04:00
thollander
5e5a8c4c69 Fix mobile viewport KO
- Changed `;` to `,` which causes the bug
2019-05-05 12:17:41 +02:00
Rich Harris
49f8b2c4bd Update 10-exporting.md 2019-05-04 10:58:26 -04:00
Rich Harris
2754ba0ee4 Merge pull request #655 from zigomir/patch-1
Fix template
2019-05-04 10:34:10 -04:00
ziga
1ad27573c6 Need to use branch
- fix port
2019-05-02 20:41:11 -04:00
ziga
f10b941c4e Fix template 2019-05-02 20:37:11 -04:00
Conduitry
6ca869a3b1 update links in readme 2019-05-02 10:11:24 -04:00
Richard Harris
f44e900d61 -> v0.26.0 2019-05-02 09:10:48 -04:00
Rich Harris
69baa99a79 Merge pull request #638 from sveltejs/site
start adding site to main repo
2019-05-02 08:49:09 -04:00
Rich Harris
ff6eb3d915 Merge pull request #651 from sveltejs/shimport
always use latest shimport
2019-05-02 08:36:21 -04:00
Richard Harris
a2204a9d2e switch license to MIT 2019-05-02 08:32:40 -04:00
Richard Harris
011e20519f use shimport ^1.0.0 2019-05-02 08:30:51 -04:00
Richard Harris
4589ffe759 add deploy script 2019-05-02 08:25:57 -04:00
Richard Harris
e2502edc08 fix broken links 2019-05-02 08:23:04 -04:00
Richard Harris
c55fe8fcf8 always use latest shimport 2019-05-01 09:22:26 -04:00
Richard Harris
5d6e4c2287 add netlify config 2019-05-01 09:17:05 -04:00
Richard Harris
b0a8534de5 Merge branch 'master' into site 2019-05-01 09:01:39 -04:00
Rich Harris
1a36fb53cd Merge pull request #642 from sveltejs/context-stores
give each app its own page, preloading and session stores, using context
2019-05-01 09:01:25 -04:00
Richard Harris
f84318b21d clarify a couple of points 2019-05-01 08:56:59 -04:00
Rich Harris
316c9d7baa lol 2019-04-30 13:28:52 -04:00
Rich Harris
52ed1cb2c6 update site-kit version 2019-04-30 13:25:17 -04:00
Rich Harris
dc73973d44 update docs 2019-04-30 12:10:53 -04:00
Richard Harris
bca88831da add 0.26 migration guide 2019-04-30 09:25:40 -04:00
Rich Harris
afeedf6bb2 give each app its own page, preloading and session stores, using context 2019-04-29 14:52:19 -04:00
Rich Harris
9c48e32a45 Merge pull request #641 from sveltejs/gh-604-redux
prevent hanging with large numbers of links
2019-04-29 13:43:55 -04:00
Rich Harris
bc8e5501cd prevent hanging with large numbers of links (#604) 2019-04-29 13:10:15 -04:00
Rich Harris
1707fe8e9d wait inside handle function when exporting 2019-04-29 11:55:03 -04:00
Rich Harris
ff60a7b389 Merge branch 'gh-604-alpha' of https://github.com/bwbroersma/sapper into bwbroersma-gh-604-alpha 2019-04-29 11:50:08 -04:00
Rich Harris
1bc7096a9e Merge pull request #591 from thgh/redirect-basepath
Fix redirect with basepath
2019-04-29 11:43:51 -04:00
Rich Harris
497ae89279 add a test for #618 2019-04-29 11:23:42 -04:00
Rich Harris
02e0aeb8a2 merge master -> artemjackson-patch-3 2019-04-29 11:22:21 -04:00
Rich Harris
15924d9768 shuffle things around 2019-04-29 11:04:40 -04:00
Rich Harris
e07c27adba Merge pull request #607 from cudr/spread_routes
[...spread] routes
2019-04-29 10:39:21 -04:00
Richard Harris
54abed7d6e hack 2019-04-29 09:09:45 -04:00
Richard Harris
d3782dac28 reverse migration order 2019-04-29 09:04:18 -04:00
Richard Harris
26bdd54484 move more stuff into site-kit 2019-04-28 22:52:56 -04:00
Richard Harris
63251c6733 fix some styles 2019-04-28 22:06:02 -04:00
Richard Harris
381af86f04 move old docs over 2019-04-28 21:44:34 -04:00
Richard Harris
36f91d4e9a start adding site to main repo 2019-04-28 14:37:02 -04:00
cudr
54efe7235a fix comparator sort && add more tests 2019-04-28 00:14:27 +03:00
Rich Harris
8c7ce2c6bb Merge branch 'master' into spread_routes 2019-04-27 13:09:54 -04:00
Richard Harris
01dd08849a Merge branch 'master' of github.com:sveltejs/sapper 2019-04-27 13:05:28 -04:00
Richard Harris
534a96214e pin node version to 11, for now 2019-04-27 13:05:22 -04:00
Rich Harris
9725767fe2 Merge pull request #593 from thgh/patch-4
Provide session in layout preload
2019-04-27 12:19:58 -04:00
Rich Harris
90ec61f14d Merge pull request #603 from sveltejs/gh-602
fix handling of empty hrefs during export
2019-04-27 12:18:45 -04:00
Rich Harris
4f9919e95c Merge pull request #610 from cudr/navigate_fix
Navigate from /a/[id] to /b/[id] fix
2019-04-27 11:56:03 -04:00
Rich Harris
83e427178e Merge branch 'master' into spread_routes 2019-04-27 11:16:18 -04:00
Rich Harris
b089ca42ff Merge pull request #608 from cudr/preload_return_fix
Don't crash if preload return empty
2019-04-27 11:15:14 -04:00
Rich Harris
6cb4030b2b Merge branch 'master' into navigate_fix 2019-04-27 11:11:27 -04:00
Rich Harris
a89f7b01bb Merge pull request #616 from Seb35/fix-swindex-base-path
Fix base-path with service-worker-index.html - fixes #579
2019-04-27 11:07:36 -04:00
Rich Harris
96a068245b Merge pull request #620 from cudr/error_page_hooks
Error page lifecycle
2019-04-27 11:06:28 -04:00
Richard Harris
0862d0e2c8 add a test for server-route-as-middleware 2019-04-27 10:55:22 -04:00
Richard Harris
a26f8600c1 Merge branch 'html' of https://github.com/akihikodaki/sapper into akihikodaki-html 2019-04-27 10:47:49 -04:00
Rich Harris
f9d1dc5d3f Merge pull request #622 from artemjackson/patch-2
Fixed %sapper.styles% injection for webpack apps
2019-04-21 13:42:21 -04:00
Rich Harris
52c4106d2c in this house we use tabs 2019-04-21 13:41:52 -04:00
Akihiko Odaki
0fd332135e Allow to have middleware for the path same with a HTML page
The feature was introduced with 9e2d0a7fbc,
but regressed with commit 8dc52a04e4.
2019-04-13 19:42:19 +09:00
Artyom Stepanishchev
06eee32ee5 Fix for #618
`query-string` is used as example

see https://github.com/sindresorhus/query-string/blob/master/index.js#L186
2019-04-08 22:56:35 +03:00
cudr
9bb8bfa884 receive preloaded root_data 2019-04-08 20:07:42 +03:00
Artyom Stepanishchev
01c0097acb Fixed %sapper.styles% injection for webpack builds 2019-04-08 18:51:35 +03:00
cudr
dcf726a89b add missed semicolon 2019-04-06 02:51:05 +03:00
cudr
9e60a71cf5 clean up 2019-04-06 02:50:00 +03:00
cudr
3a9d457389 execute error page hooks 2019-04-06 02:32:11 +03:00
Seb35
1e9cd84854 Fix base-path with service-worker-index.html - fixes #579 2019-03-25 20:33:43 +01:00
Benjamin W. Broersma
bf50392df5 Fixes #604 - using single queue for export. 2019-03-22 00:43:08 +01:00
cudr
d2cda4b6c0 add test 2019-03-15 05:13:18 +03:00
cudr
0dd2d2eb4a complete fix 2019-03-15 04:57:10 +03:00
cudr
6bf3dd04dd fix empty preload 2019-03-13 15:18:23 +03:00
cudr
81f80e6215 spread routes 2019-03-13 15:14:06 +03:00
Conduitry
6d5aa9a35d fix handling of empty hrefs during export (#602) 2019-03-11 10:39:35 -04:00
Richard Harris
7be7e1eb9f bump alpha version 2019-03-08 09:25:54 -05:00
Richard Harris
ca7973465b Merge branch 'master' of github.com:sveltejs/sapper 2019-03-08 08:37:08 -05:00
Rich Harris
f7c88df3be Merge pull request #596 from sveltejs/recover-alpha-10
various lost changes and fixes from 0.26.0-alpha.10
2019-03-08 08:35:47 -05:00
Conduitry
74c66b784f Server-side preload check fixes (fixes #575, #594, #598) 2019-03-08 08:34:36 -05:00
Conduitry
9e9bd10333 various lost changes and fixes from 0.26.0-alpha.10 2019-03-07 13:18:40 -05:00
Thomas Ghysels
8858301fed Provide session in layout preload 2019-03-05 15:22:40 +01:00
Rich Harris
9540383796 bump alpha version 2019-03-04 19:44:22 -05:00
halfnelson
b5edf0edd5 Fix export race condition (#585)
* Await all items in the export queue before killing server
2019-03-04 05:21:30 -05:00
Thomas Ghysels
13b64cd1bb Fix redirect with basepath
Fix #589
2019-03-03 10:40:49 +01:00
Thomas Ghysels
9522cb4539 Add failing test for #589 2019-03-02 18:35:16 +01:00
Richard Harris
6dad750942 Merge branch 'better-errors' 2019-02-24 20:56:20 -05:00
Richard Harris
eee9d21900 tidy up 2019-02-24 20:56:16 -05:00
Richard Harris
55505571f8 extract entry css correctly 2019-02-24 20:44:19 -05:00
Richard Harris
4fe3c96c2d print file/location/frame when encountering an initial error in dev 2019-02-22 09:28:08 -05:00
Rich Harris
411e2594af bump alpha version 2019-02-21 17:05:06 -05:00
Rich Harris
e0de230e13 Slot-based routing (#573) 2019-02-21 16:34:07 -05:00
Tamas Ridly
c637687922 Fixed README - Get started section 2019-02-18 08:01:09 -05:00
Richard Harris
57fe5bdfa2 bump alpha version 2019-02-17 10:10:02 -05:00
Rich Harris
b2b476abb1 Merge pull request #568 from nolanlawson/nolan/preload-in-export
fix: add link rel=preload for exported sites
2019-02-17 09:55:08 -04:00
Rich Harris
ad0ebb8a69 Merge branch 'master' into nolan/preload-in-export 2019-02-17 09:51:03 -04:00
Rich Harris
130eafbd0a Merge pull request #566 from nolanlawson/nolan/issue-565
fix: fix "sapper export" with a custom PORT
2019-02-17 09:48:02 -04:00
Rich Harris
9d2ce6d852 Merge pull request #563 from nolanlawson/patch-2
Remove unnecessary index.html file serve
2019-02-17 09:46:55 -04:00
Rich Harris
a476d21c9b Merge pull request #561 from thgh/patch-3
Use getElementById to avoid querySelector error
2019-02-17 09:45:57 -04:00
Rich Harris
30b4b6660b Merge pull request #569 from sveltejs/update-rollup
update Rollup, remove some superfluous deps
2019-02-17 09:45:02 -04:00
Richard Harris
cfd10c6f61 remove some more unused deps 2019-02-17 08:32:02 -05:00
Richard Harris
82a4973943 remove node 6 from ci matrix 2019-02-17 08:31:48 -05:00
Richard Harris
0609a92f3a update Rollup, remove some superfluous deps 2019-02-17 08:23:30 -05:00
Nolan Lawson
37780656fd fix incorrect test 2019-02-16 00:13:27 -08:00
Nolan Lawson
351ab13d29 fix: add link rel=preload for exported sites 2019-02-16 00:07:06 -08:00
Nolan Lawson
795da23418 fix: fix "sapper export" with a custom PORT
Fixes #565
2019-02-15 18:50:34 -08:00
Nolan Lawson
1f1211b7b4 Remove unnecessary index.html file serve
As far as I can tell, `/index.html` should no longer exist (outside of `sapper export`, which doesn't apply here). After #525 was merged, we're now using `/service-worker-index.html`, but that's handled by `get_page_handler.ts`, not here. So this code is doing nothing.
2019-02-14 19:14:14 -08:00
Thomas Ghysels
acafeac1cc Fix #561 2019-02-13 17:59:32 +01:00
Rich Harris
82e637ea7c Merge pull request #559 from sveltejs/svelte-extension
Use .svelte extension
2019-02-08 11:47:37 -05:00
Rich Harris
14ace57612 rename .html files to .svelte 2019-02-08 11:40:30 -05:00
Rich Harris
84a0ae562f support .svelte or .html extensions 2019-02-08 11:34:33 -05:00
Rich Harris
8870b58766 bump alpha version 2019-02-08 10:42:46 -05:00
Rich Harris
54506c1eb6 bump alpha version 2019-02-07 08:47:32 -05:00
Rich Harris
4f6b2dcb7c fix kleur thing 2019-02-07 08:47:02 -05:00
Richard Harris
0a87204593 Merge branch 'svelte-3' 2019-02-04 07:43:11 -05:00
Richard Harris
720cf8a859 treat foo.html and foo/index.html the same when generating manifest 2019-02-04 07:42:45 -05:00
Rich Harris
ca034d0857 Support Svelte 3
fixes #546, #551, #552, #554
2019-02-03 14:29:47 -05:00
Richard Harris
96b9d19715 remove typescript in favour of sucrase 2019-02-03 14:28:59 -05:00
Richard Harris
293da8bcd1 fix a cmd-f/cmd-r mistake 2019-02-03 14:12:17 -05:00
261 changed files with 9188 additions and 4107 deletions

4
.gitignore vendored
View File

@@ -3,11 +3,7 @@ yarn.lock
yarn-error.log
node_modules
cypress/screenshots
test/app/.sapper
test/app/src/manifest
__sapper__
test/app/export
test/app/build
sapper
runtime.js
dist

3
.netlify/state.json Normal file
View File

@@ -0,0 +1,3 @@
{
"siteId": "a6a3cfed-c34e-42f7-9616-07ad2eedb15f"
}

View File

@@ -3,7 +3,6 @@ sudo: false
language: node_js
node_js:
- "6"
- "stable"
env:

View File

@@ -1,5 +1,31 @@
# sapper changelog
## 0.27.0
* Change license from LIL to MIT ([#652](https://github.com/sveltejs/sapper/pull/652))
* Fix index server route mapping ([#624](https://github.com/sveltejs/sapper/issues/624))
## 0.26.1
* Handle skipped segments ([#663](https://github.com/sveltejs/sapper/pull/663))
## 0.26.0
* Update to Svelte 3
* Slot-based nested routes ([#573](https://github.com/sveltejs/sapper/issues/573))
* Make `page`, `preloading` and `session` stores available to components ([#642](https://github.com/sveltejs/sapper/pull/642))
* Handle missing/empty refs when exporting ([#602](https://github.com/sveltejs/sapper/issues/602))
* Prevent race condition when exporting ([#585](https://github.com/sveltejs/sapper/pull/585))
* Fix redirects with base path ([#589](https://github.com/sveltejs/sapper/issues/589))
* Add `<link rel="preload">` to exported HTML ([#568](https://github.com/sveltejs/sapper/pull/568))
* Handle deep links that are invalid selectors on initial load ([#516](https://github.com/sveltejs/sapper/issues/516))
* Use shared queue for exporting ([#604](https://github.com/sveltejs/sapper/issues/604))
* Handle `+` character in query string ([#618](https://github.com/sveltejs/sapper/issues/618))
* Spread routes ([#545](https://github.com/sveltejs/sapper/issues/545))
* Fix navigation from `/a/[id]` to `/b/[id]` ([#610](https://github.com/sveltejs/sapper/pull/610))
* Allow `preload` functions to return falsy values ([#587](https://github.com/sveltejs/sapper/issues/587))
* Mount error pages correctly ([#620](https://github.com/sveltejs/sapper/pull/620))
## 0.25.0
* Force refresh on `goto(current_url)` ([#484](https://github.com/sveltejs/sapper/pull/484))

10
LICENSE
View File

@@ -1,9 +1,7 @@
Copyright (c) 2017 [these people](https://github.com/sveltejs/sapper/graphs/contributors).
Copyright (c) 2016-19 [these people](https://github.com/sveltejs/sapper/graphs/contributors)
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:
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
This license, or a link to its text, must be included with all copies of the software and any derivative works.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
Any modification to the software submitted to the authors may be incorporated into the software under the terms of this license.
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.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -1,19 +1,21 @@
# sapper
[Military-grade progressive web apps, powered by Svelte.](https://sapper.svelte.technology)
[Military-grade progressive web apps, powered by Svelte.](https://sapper.svelte.dev)
## What is Sapper?
Sapper is a framework for building high-performance universal web apps. [Read the guide](https://sapper.svelte.technology/guide) or the [introductory blog post](https://svelte.technology/blog/sapper-towards-the-ideal-web-app-framework) to learn more.
Sapper is a framework for building high-performance universal web apps. [Read the guide](https://sapper.svelte.dev/docs) or the [introductory blog post](https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework) to learn more.
## Get started
Clone the [starter project template](https://github.com/sveltejs/sapper-template) with [degit](https://github.com/rich-harris/degit)...
When cloning you have to choose between rollup or webpack:
```bash
npx degit sveltejs/sapper-template my-app
npx degit "sveltejs/sapper-template#rollup" my-app
# or: npx degit "sveltejs/sapper-template#webpack" my-app
```
...then install dependencies and start the dev server...
@@ -72,4 +74,4 @@ npm run test
## License
[LIL](LICENSE)
[LIL](LICENSE)

View File

@@ -10,7 +10,7 @@ build: off
environment:
matrix:
# node.js
- nodejs_version: 10.5
- nodejs_version: 11
install:
- ps: Install-Product node $env:nodejs_version

View File

@@ -1,4 +1,5 @@
--require source-map-support/register
--require sucrase/register
--recursive
test/apps/*/test.ts
test/unit/*/test.ts
test/apps/*/test.ts

3525
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,6 @@
{
"name": "sapper",
"version": "0.26.0-alpha.3",
"version": "0.27.0",
"description": "Military-grade apps, engineered by Svelte",
"bin": {
"sapper": "./sapper"
@@ -18,59 +18,50 @@
"test": "test"
},
"dependencies": {
"html-minifier": "^3.5.21",
"shimport": "0.0.14",
"source-map-support": "^0.5.10",
"html-minifier": "^4.0.0",
"http-link-header": "^1.0.2",
"shimport": "^1.0.0",
"sourcemap-codec": "^1.4.4",
"string-hash": "^1.1.3",
"tslib": "^1.9.3"
"string-hash": "^1.1.3"
},
"devDependencies": {
"@types/mkdirp": "^0.5.2",
"@types/mocha": "^5.2.5",
"@types/node": "^10.12.21",
"@types/puppeteer": "^1.11.3",
"@types/rimraf": "^2.0.2",
"@types/mocha": "^5.2.6",
"@types/node": "^12.0.0",
"@types/puppeteer": "^1.12.4",
"agadoo": "^1.0.1",
"cheap-watch": "^1.0.2",
"cookie": "^0.3.1",
"devalue": "^1.1.0",
"eslint": "^5.12.1",
"eslint-plugin-import": "^2.16.0",
"kleur": "^3.0.1",
"mkdirp": "^0.5.1",
"mocha": "^5.2.0",
"node-fetch": "^2.3.0",
"eslint": "^5.16.0",
"eslint-plugin-import": "^2.17.2",
"kleur": "^3.0.3",
"mocha": "^6.1.4",
"node-fetch": "^2.5.0",
"npm-run-all": "^4.1.5",
"polka": "^0.5.1",
"polka": "^0.5.2",
"port-authority": "^1.0.5",
"pretty-bytes": "^5.1.0",
"puppeteer": "^1.12.0",
"pretty-bytes": "^5.2.0",
"puppeteer": "^1.15.0",
"require-relative": "^0.8.7",
"rimraf": "^2.6.3",
"rollup": "^1.1.2",
"rollup-plugin-commonjs": "^9.2.0",
"rollup-plugin-json": "^3.1.0",
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-replace": "^2.1.0",
"rollup-plugin-string": "^2.0.2",
"rollup": "^1.11.3",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^4.2.3",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-string": "^3.0.0",
"rollup-plugin-sucrase": "^2.1.0",
"rollup-plugin-svelte": "^5.0.1",
"rollup-plugin-typescript": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3",
"sade": "^1.4.2",
"sander": "^0.6.0",
"sirv": "^0.2.2",
"sucrase": "^3.9.5",
"svelte": "^3.0.0-alpha27",
"svelte-loader": "^2.12.0",
"ts-node": "^8.0.2",
"typescript": "^3.3.1",
"webpack": "^4.29.0",
"sirv": "^0.4.2",
"sucrase": "^3.10.1",
"svelte": "^3.2.2",
"svelte-loader": "^2.13.3",
"webpack": "^4.31.0",
"webpack-format-messages": "^2.0.5",
"yootils": "0.0.14"
"yootils": "0.0.15"
},
"peerDependencies": {
"svelte": "^3.0.0"
"svelte": "^3.2.2"
},
"scripts": {
"test": "mocha --opts mocha.opts",
@@ -90,7 +81,7 @@
"express"
],
"author": "Rich Harris",
"license": "LIL",
"license": "MIT",
"bugs": {
"url": "https://github.com/sveltejs/sapper/issues"
},

View File

@@ -1,5 +1,5 @@
import sucrase from 'rollup-plugin-sucrase';
import string from 'rollup-plugin-string';
import { string } from 'rollup-plugin-string';
import json from 'rollup-plugin-json';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
@@ -9,7 +9,8 @@ import { builtinModules } from 'module';
const external = [].concat(
Object.keys(pkg.dependencies),
Object.keys(process.binding('natives')),
'sapper/core.js'
'sapper/core.js',
'svelte/compiler'
);
function template(kind, external) {
@@ -23,8 +24,9 @@ function template(kind, external) {
external,
plugins: [
resolve({
extensions: ['.mjs', '.js', '.ts']
extensions: ['.mjs', '.js', '.json', '.ts']
}),
json(),
commonjs(),
string({
include: '**/*.md'
@@ -38,7 +40,7 @@ function template(kind, external) {
export default [
template('app', id => /^(svelte\/?|@sapper\/)/.test(id)),
template('server', id => builtinModules.includes(id)),
template('server', id => /^(svelte\/?|@sapper\/)/.test(id) || builtinModules.includes(id)),
{
input: [
@@ -51,7 +53,8 @@ export default [
output: {
dir: 'dist',
format: 'cjs',
sourcemap: true
sourcemap: true,
chunkFileNames: '[name].js'
},
external,
plugins: [
@@ -65,4 +68,4 @@ export default [
})
]
}
];
];

View File

@@ -1,12 +0,0 @@
<script>
import { setContext } from 'svelte';
import { CONTEXT_KEY } from './shared';
export let Root;
export let props;
export let session;
setContext(CONTEXT_KEY, session);
</script>
<Root {...props}/>

View File

@@ -0,0 +1,7 @@
<h1>{status}</h1>
<p>{error.message}</p>
{#if process.env.NODE_ENV === 'development'}
<pre>{error.stack}</pre>
{/if}

View File

@@ -1 +0,0 @@
<svelte:component this={child.component} {...child.props}/>

View File

@@ -0,0 +1 @@
<slot></slot>

View File

@@ -1,10 +1,5 @@
import { writable } from 'svelte/store';
export const stores = {
preloading: writable(false),
page: writable(null)
};
export const CONTEXT_KEY = {};
export const preload = () => ({});

View File

@@ -1,7 +1,6 @@
import { writable } from 'svelte/store.mjs';
import Sapper from '@sapper/internal/Sapper.html';
import { stores } from '@sapper/internal/shared';
import { Root, root_preload, ErrorComponent, ignore, components, routes } from '@sapper/internal/manifest-client';
import App from '@sapper/internal/App.svelte';
import { root_preload, ErrorComponent, ignore, components, routes } from '@sapper/internal/manifest-client';
import {
Target,
ScrollPosition,
@@ -10,6 +9,7 @@ import {
ComponentLoader,
ComponentConstructor,
Route,
Query,
Page
} from './types';
import goto from './goto';
@@ -23,12 +23,16 @@ let current_token: {};
let root_preloaded: Promise<any>;
let current_branch = [];
const session = writable(initial_data && initial_data.session);
const stores = {
page: writable({}),
preloading: writable(null),
session: writable(initial_data && initial_data.session)
};
let $session;
let session_dirty: boolean;
session.subscribe(async value => {
stores.session.subscribe(async value => {
$session = value;
if (!ready) return;
@@ -80,11 +84,28 @@ export { _history as history };
export const scroll_history: Record<string, ScrollPosition> = {};
export function extract_query(search: string) {
const query = Object.create(null);
if (search.length > 0) {
search.slice(1).split('&').forEach(searchParam => {
let [, key, value = ''] = /([^=]*)(?:=(.*))?/.exec(decodeURIComponent(searchParam.replace(/\+/g, ' ')));
if (typeof query[key] === 'string') query[key] = [<string>query[key]];
if (typeof query[key] === 'object') (query[key] as string[]).push(value);
else query[key] = value;
});
}
return query;
}
export function select_target(url: URL): Target {
if (url.origin !== location.origin) return null;
if (!url.pathname.startsWith(initial_data.baseUrl)) return null;
const path = url.pathname.slice(initial_data.baseUrl.length);
let path = url.pathname.slice(initial_data.baseUrl.length);
if (path === '') {
path = '/';
}
// avoid accidental clashes between server routes and page routes
if (ignore.some(pattern => pattern.test(path))) return;
@@ -93,18 +114,9 @@ export function select_target(url: URL): Target {
const route = routes[i];
const match = route.pattern.exec(path);
if (match) {
const query: Record<string, string | string[]> = Object.create(null);
if (url.search.length > 0) {
url.search.slice(1).split('&').forEach(searchParam => {
let [, key, value] = /([^=]*)(?:=(.*))?/.exec(decodeURIComponent(searchParam));
value = (value || '').replace(/\+/g, ' ');
if (typeof query[key] === 'string') query[key] = [<string>query[key]];
if (typeof query[key] === 'object') (query[key] as string[]).push(value);
else query[key] = value;
});
}
if (match) {
const query: Query = extract_query(url.search);
const part = route.parts[route.parts.length - 1];
const params = part.params ? part.params(match) : {};
@@ -115,6 +127,35 @@ export function select_target(url: URL): Target {
}
}
export function handle_error(url: URL) {
const { pathname, search } = location;
const { session, preloaded, status, error } = initial_data;
if (!root_preloaded) {
root_preloaded = preloaded && preloaded[0]
}
const props = {
error,
status,
session,
level0: {
props: root_preloaded
},
level1: {
props: {
status,
error
},
component: ErrorComponent
},
segments: preloaded
}
const query = extract_query(search);
render(null, [], props, { path: pathname, query, params: {} });
}
export function scroll_state() {
return {
x: pageXOffset,
@@ -158,7 +199,7 @@ export async function navigate(target: Target, id: number, noscroll?: boolean, h
if (hash) {
// scroll is an element id (from a hash), we need to compute y.
const deep_linked = document.querySelector(hash);
const deep_linked = document.getElementById(hash.slice(1));
if (deep_linked) {
scroll = {
@@ -180,8 +221,17 @@ async function render(redirect: Redirect, branch: any[], props: any, page: Page)
stores.preloading.set(false);
if (root_component) {
root_component.props = props;
root_component.$set(props);
} else {
props.stores = {
page: { subscribe: stores.page.subscribe },
preloading: { subscribe: stores.preloading.subscribe },
session: stores.session
};
props.level0 = {
props: await root_preloaded
};
// first load — remove SSR'd <head> contents
const start = document.querySelector('#sapper-head-start');
const end = document.querySelector('#sapper-head-end');
@@ -192,13 +242,9 @@ async function render(redirect: Redirect, branch: any[], props: any, page: Page)
detach(end);
}
root_component = new Sapper({
root_component = new App({
target,
props: {
Root,
props,
session
},
props,
hydrate: true
});
}
@@ -211,13 +257,14 @@ async function render(redirect: Redirect, branch: any[], props: any, page: Page)
export async function hydrate_target(target: Target): Promise<{
redirect?: Redirect;
props?: any;
branch?: Array<{ Component: ComponentConstructor, preload: (page) => Promise<any>, segment: string }>
branch?: Array<{ Component: ComponentConstructor, preload: (page) => Promise<any>, segment: string }>;
}> {
const { route, page } = target;
const segments = page.path.split('/').filter(Boolean);
let redirect: Redirect = null;
let error: { statusCode: number, message: Error | string } = null;
const props = { error: null, status: 200, segments: [segments[0]] };
const preload_context = {
fetch: (url: string, opts?: any) => fetch(url, opts),
@@ -227,8 +274,9 @@ export async function hydrate_target(target: Target): Promise<{
}
redirect = { statusCode, location };
},
error: (statusCode: number, message: Error | string) => {
error = { statusCode, message };
error: (status: number, error: Error | string) => {
props.error = typeof error === 'string' ? new Error(error) : error;
props.status = status;
}
};
@@ -241,15 +289,27 @@ export async function hydrate_target(target: Target): Promise<{
}
let branch;
let l = 1;
try {
let segment_dirty = false;
branch = await Promise.all(route.parts.map(async (part, i) => {
if (!part) return null;
const segment = segments[i];
if (!session_dirty && current_branch[i] && current_branch[i].segment === segment) return current_branch[i];
const { default: Component, preload } = await load_component(components[part.i]);
if (current_branch[i] && current_branch[i].segment !== segment) segment_dirty = true;
props.segments[l] = segments[i + 1]; // TODO make this less confusing
if (!part) return { segment };
const j = l++;
if (!session_dirty && !segment_dirty && current_branch[i] && current_branch[i].part === part.i) {
return current_branch[i];
}
segment_dirty = false;
const { default: component, preload } = await load_component(components[part.i]);
let preloaded;
if (ready || !initial_data.preloaded[i + 1]) {
@@ -264,53 +324,19 @@ export async function hydrate_target(target: Target): Promise<{
preloaded = initial_data.preloaded[i + 1];
}
return { Component, preloaded, segment };
return (props[`level${j}`] = { component, props: preloaded, segment, part: part.i });
}));
} catch (e) {
error = { statusCode: 500, message: e };
} catch (error) {
props.error = error;
props.status = 500;
branch = [];
}
if (redirect) return { redirect };
if (error) {
// TODO be nice if this was less of a special case
return {
props: {
child: {
component: ErrorComponent,
props: {
error: typeof error.message === 'string' ? new Error(error.message) : error.message,
status: error.statusCode
}
}
},
branch
};
}
const props = Object.assign({}, await root_preloaded, {
child: { segment: segments[0] }
});
let level = props.child;
branch.forEach((node, i) => {
if (!node) return;
level.component = node.Component;
level.props = Object.assign({}, node.preloaded, {
child: { segment: segments[i + 1] }
});
level = level.props.child;
});
return { props, branch };
return { redirect, props, branch };
}
function load_css(chunk: string) {
const href = `client/${chunk}`;
const href = `sapper/${chunk}`;
if (document.querySelector(`link[href="${href}"]`)) return;
return new Promise((fulfil, reject) => {
@@ -338,4 +364,4 @@ export function load_component(component: ComponentLoader): Promise<{
function detach(node: Node) {
node.parentNode.removeChild(node);
}
}

View File

@@ -1,10 +1,7 @@
import { getContext } from 'svelte';
import { CONTEXT_KEY, stores } from '@sapper/internal/shared';
import { CONTEXT_KEY } from '@sapper/internal/shared';
export const preloading = { subscribe: stores.preloading.subscribe };
export const page = { subscribe: stores.page.subscribe };
export const getSession = () => getContext(CONTEXT_KEY);
export const stores = () => getContext(CONTEXT_KEY);
export { default as start } from './start/index';
export { default as goto } from './goto/index';

View File

@@ -6,6 +6,7 @@ import {
scroll_history,
scroll_state,
select_target,
handle_error,
set_target,
uid,
set_uid,
@@ -34,10 +35,12 @@ export default function start(opts: {
history.replaceState({ id: uid }, '', href);
if (!initial_data.error) {
const target = select_target(new URL(location.href));
if (target) return navigate(target, uid, false, hash);
}
const url = new URL(location.href);
if (initial_data.error) return handle_error(url);
const target = select_target(url);
if (target) return navigate(target, uid, false, hash);
});
}
@@ -127,4 +130,4 @@ function handle_popstate(event: PopStateEvent) {
set_cid(uid);
history.replaceState({ id: cid }, '', location.href);
}
}
}

View File

@@ -1 +0,0 @@
export const IGNORE = '__SAPPER__IGNORE__';

View File

@@ -1 +1,17 @@
export { default as middleware } from './middleware/index';
import http from 'http';
import middleware from './middleware/index';
import { StartOptions, MiddlewareOptions, Handler } from './types';
export { middleware };
export function server(opts: MiddlewareOptions) {
const handler = middleware(opts) as Handler;
return http.createServer(handler as http.ServerOptions);
}
export function start(opts: StartOptions = {}) {
const s = server(opts);
s.listen(opts.port || process.env.PORT);
return s;
}

View File

@@ -5,11 +5,9 @@ import cookie from 'cookie';
import devalue from 'devalue';
import fetch from 'node-fetch';
import URL from 'url';
import { IGNORE } from '../constants';
import { Manifest, Page, Props, Req, Res } from './types';
import { Manifest, Page, Req, Res } from '../types';
import { build_dir, dev, src_dir } from '@sapper/internal/manifest-server';
import { stores } from '@sapper/internal/shared';
import Sapper from '@sapper/internal/Sapper.html';
import App from '@sapper/internal/App.svelte';
export function get_page_handler(
manifest: Manifest,
@@ -23,9 +21,8 @@ export function get_page_handler(
? () => read_template(src_dir)
: (str => () => str)(read_template(build_dir));
const has_service_worker = fs.existsSync(path.join(build_dir, 'service-worker.js'));
const has_service_worker = fs.existsSync(path.join(build_dir, 'service-worker/service-worker.js'));
const { server_routes, pages } = manifest;
const error_route = manifest.error;
function handle_error(req: Req, res: Res, statusCode: number, error: Error | string) {
@@ -38,7 +35,7 @@ export function get_page_handler(
}
async function handle_page(page: Page, req: Req, res: Res, status = 200, error: Error | string = null) {
const isSWIndexHtml = req.path === '/service-worker-index.html';
const is_service_worker_index = req.path === '/service-worker-index.html';
const build_info: {
bundler: 'rollup' | 'webpack',
shimport: string | null,
@@ -52,7 +49,7 @@ export function get_page_handler(
// preload main.js and current route
// TODO detect other stuff we can preload? images, CSS, fonts?
let preloaded_chunks = Array.isArray(build_info.assets.main) ? build_info.assets.main : [build_info.assets.main];
if (!error && !isSWIndexHtml) {
if (!error && !is_service_worker_index) {
page.parts.forEach(part => {
if (!part) return;
@@ -65,7 +62,7 @@ export function get_page_handler(
// TODO add dependencies and CSS
const link = preloaded_chunks
.filter(file => file && !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="modulepreload"`)
.map(file => `<${req.baseUrl}/sapper/${file}>;rel="modulepreload"`)
.join(', ');
res.setHeader('Link', link);
@@ -74,7 +71,7 @@ export function get_page_handler(
.filter(file => file && !file.match(/\.map$/))
.map((file) => {
const as = /\.css$/.test(file) ? 'style' : 'script';
return `<${req.baseUrl}/client/${file}>;rel="preload";as="${as}"`;
return `<${req.baseUrl}/sapper/${file}>;rel="preload";as="${as}"`;
})
.join(', ');
@@ -145,14 +142,14 @@ export function get_page_handler(
path: req.path,
query: req.query,
params: {}
})
}, session)
: {};
match = error ? null : page.pattern.exec(req.path);
let toPreload = [root_preloaded];
if (!isSWIndexHtml) {
if (!is_service_worker_index) {
toPreload = toPreload.concat(page.parts.map(part => {
if (!part) return null;
@@ -177,7 +174,7 @@ export function get_page_handler(
try {
if (redirect) {
const location = URL.resolve(req.baseUrl || '/', redirect.location);
const location = URL.resolve((req.baseUrl || '') + '/', redirect.location);
res.statusCode = redirect.statusCode;
res.setHeader('Location', location);
@@ -193,58 +190,68 @@ export function get_page_handler(
const segments = req.path.split('/').filter(Boolean);
const props = Object.assign({}, preloaded[0], {
child: {
// TODO make this less confusing
const layout_segments = [segments[0]];
let l = 1;
page.parts.forEach((part, i) => {
layout_segments[l] = segments[i + 1];
if (!part) return null;
l++;
});
const props = {
stores: {
page: {
subscribe: writable({
path: req.path,
query: req.query,
params
}).subscribe
},
preloading: {
subscribe: writable(null).subscribe
},
session: writable(session)
},
segments: layout_segments,
status: error ? status : 200,
error: error ? error instanceof Error ? error : { message: error } : null,
level0: {
props: preloaded[0]
},
level1: {
segment: segments[0],
props: {}
}
});
};
let level = props.child;
if (!isSWIndexHtml) {
if (!is_service_worker_index) {
let l = 1;
for (let i = 0; i < page.parts.length; i += 1) {
const part = page.parts[i];
if (!part) continue;
Object.assign(level, {
props[`level${l++}`] = {
component: part.component,
props: Object.assign({}, preloaded[i + 1])
});
level.props.child = <Props["child"]>{
segment: segments[i + 1],
props: {}
props: preloaded[i + 1] || {},
segment: segments[i]
};
level = level.props.child;
}
}
if (error) {
props.child.props.error = error instanceof Error ? error : { message: error };
props.child.props.status = status;
}
stores.page.set({
path: req.path,
query: req.query,
params: params
});
const { html, head, css } = Sapper.render({
Root: manifest.root,
props: props,
session: writable(session)
});
const { html, head, css } = App.render(props);
const serialized = {
preloaded: `[${preloaded.map(data => try_serialize(data)).join(',')}]`,
session: session && try_serialize(session, err => {
throw new Error(`Failed to serialize session data: ${err.message}`);
})
}),
error: error && try_serialize(props.error)
};
let script = `__SAPPER__={${[
error && `error:1`,
error && `error:${serialized.error},status:${status}`,
`baseUrl:"${req.baseUrl}"`,
serialized.preloaded && `preloaded:${serialized.preloaded}`,
serialized.session && `session:${serialized.session}`
@@ -255,14 +262,14 @@ export function get_page_handler(
}
const file = [].concat(build_info.assets.main).filter(file => file && /\.js$/.test(file))[0];
const main = `${req.baseUrl}/client/${file}`;
const main = `${req.baseUrl}/sapper/${file}`;
if (build_info.bundler === 'rollup') {
if (build_info.legacy_assets) {
const legacy_main = `${req.baseUrl}/client/legacy/${build_info.legacy_assets.main}`;
script += `(function(){try{eval("async function x(){}");var main="${main}"}catch(e){main="${legacy_main}"};var s=document.createElement("script");try{new Function("if(0)import('')")();s.src=main;s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main",main);}document.head.appendChild(s);}());`;
const legacy_main = `${req.baseUrl}/sapper/legacy/${build_info.legacy_assets.main}`;
script += `(function(){try{eval("async function x(){}");var main="${main}"}catch(e){main="${legacy_main}"};var s=document.createElement("script");try{new Function("if(0)import('')")();s.src=main;s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/sapper/shimport@${build_info.shimport}.js";s.setAttribute("data-main",main);}document.head.appendChild(s);}());`;
} else {
script += `var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="${main}";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}")}document.head.appendChild(s)`;
script += `var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="${main}";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/sapper/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}")}document.head.appendChild(s)`;
}
} else {
script += `</script><script src="${main}">`;
@@ -287,7 +294,7 @@ export function get_page_handler(
});
styles = Array.from(css_chunks)
.map(href => `<link rel="stylesheet" href="client/${href}">`)
.map(href => `<link rel="stylesheet" href="sapper/${href}">`)
.join('')
} else {
styles = (css && css.code ? `<style>${css.code}</style>` : '');
@@ -318,20 +325,16 @@ export function get_page_handler(
}
return function find_route(req: Req, res: Res, next: () => void) {
if (req[IGNORE]) return next();
if (req.path === '/service-worker-index.html') {
const homePage = pages.find(page => page.pattern.test('/'));
const homePage = manifest.pages.find(page => page.pattern.test('/'));
handle_page(homePage, req, res);
return;
}
if (!server_routes.some(route => route.pattern.test(req.path))) {
for (const page of pages) {
if (page.pattern.test(req.path)) {
handle_page(page, req, res);
return;
}
for (const page of manifest.pages) {
if (page.pattern.test(req.path)) {
handle_page(page, req, res);
return;
}
}

View File

@@ -1,5 +1,4 @@
import { IGNORE } from '../constants';
import { Req, Res, ServerRoute } from './types';
import { Req, Res, ServerRoute } from '../types';
export function get_server_route_handler(routes: ServerRoute[]) {
async function handle_route(route: ServerRoute, req: Req, res: Res, next: () => void) {
@@ -64,8 +63,6 @@ export function get_server_route_handler(routes: ServerRoute[]) {
}
return function find_route(req: Req, res: Res, next: () => void) {
if (req[IGNORE]) return next();
for (const route of routes) {
if (route.pattern.test(req.path)) {
handle_route(route, req, res, next);
@@ -75,4 +72,4 @@ export function get_server_route_handler(routes: ServerRoute[]) {
next();
};
}
}

View File

@@ -1,31 +1,42 @@
import fs from 'fs';
import path from 'path';
import querystring from 'querystring';
import sirv from 'sirv';
import { build_dir, dev, manifest } from '@sapper/internal/manifest-server';
import { Handler, Req, Res } from './types';
import { Handler, Req, Res, MiddlewareOptions } from '../types';
import { get_server_route_handler } from './get_server_route_handler';
import { get_page_handler } from './get_page_handler';
import { lookup } from './mime';
import { IGNORE } from '../constants';
export default function middleware(opts: {
session?: (req: Req, res: Res) => any,
ignore?: any
} = {}) {
export default function middleware(opts: MiddlewareOptions = {}) {
const { session, ignore } = opts;
let emitted_basepath = false;
return compose_handlers([
ignore && ((req: Req, res: Res, next: () => void) => {
req[IGNORE] = should_ignore(req.path, ignore);
next();
return compose_handlers(ignore, [
fs.existsSync('static') && sirv('static', {
dev,
setHeaders: opts.static && opts.static.headers && ((res: Response, pathname: string, stats: fs.Stats) => {
const headers = opts.static.headers(pathname, stats);
for (const k in headers) res.setHeader(k, headers[k]);
})
}),
(req: Req, res: Res, next: () => void) => {
if (req[IGNORE]) return next();
sirv(`${build_dir}/client`, {
dev,
maxAge: 31536000,
immutable: true
}),
sirv(`${build_dir}/service-worker`, {
dev,
maxAge: 300
}),
function condition_request(req: Req, res: Res, next: () => void) {
const qi = req.url.indexOf('?');
req.query = ~qi ? querystring.parse(req.url.slice(qi + 1)) : {}
if (req.baseUrl === undefined) {
let { originalUrl } = req;
let originalUrl = req.originalUrl || req.url;
if (req.url === '/' && originalUrl[originalUrl.length - 1] !== '/') {
originalUrl += '/';
}
@@ -52,50 +63,32 @@ export default function middleware(opts: {
next();
},
fs.existsSync(path.join(build_dir, 'index.html')) && serve({
pathname: '/index.html',
cache_control: dev ? 'no-cache' : 'max-age=600'
}),
fs.existsSync(path.join(build_dir, 'service-worker.js')) && serve({
pathname: '/service-worker.js',
cache_control: 'no-cache, no-store, must-revalidate'
}),
fs.existsSync(path.join(build_dir, 'service-worker.js.map')) && serve({
pathname: '/service-worker.js.map',
cache_control: 'no-cache, no-store, must-revalidate'
}),
serve({
prefix: '/client/',
cache_control: dev ? 'no-cache' : 'max-age=31536000, immutable'
}),
get_server_route_handler(manifest.server_routes),
get_page_handler(manifest, session || noop)
].filter(Boolean));
}
export function compose_handlers(handlers: Handler[]) {
return (req: Req, res: Res, next: () => void) => {
let i = 0;
function go() {
const handler = handlers[i];
export function compose_handlers(ignore: any, handlers: Handler[]): Handler {
const total = handlers.length;
if (handler) {
handler(req, res, () => {
i += 1;
go();
});
} else {
next();
}
function nth_handler(n: number, req: Req, res: Res, next: () => void) {
if (n >= total) {
return next();
}
go();
};
handlers[n](req, res, () => nth_handler(n+1, req, res, next));
}
return !ignore
? (req, res, next) => nth_handler(0, req, res, next)
: (req, res, next) => {
if (should_ignore(req.path, ignore)) {
next();
} else {
nth_handler(0, req, res, next);
}
};
}
export function should_ignore(uri: string, val: any) {
@@ -105,42 +98,4 @@ export function should_ignore(uri: string, val: any) {
return uri.startsWith(val.charCodeAt(0) === 47 ? val : `/${val}`);
}
export function serve({ prefix, pathname, cache_control }: {
prefix?: string,
pathname?: string,
cache_control: string
}) {
const filter = pathname
? (req: Req) => req.path === pathname
: (req: Req) => req.path.startsWith(prefix);
const cache: Map<string, Buffer> = new Map();
const read = dev
? (file: string) => fs.readFileSync(path.resolve(build_dir, file))
: (file: string) => (cache.has(file) ? cache : cache.set(file, fs.readFileSync(path.resolve(build_dir, file)))).get(file)
return (req: Req, res: Res, next: () => void) => {
if (req[IGNORE]) return next();
if (filter(req)) {
const type = lookup(req.path);
try {
const file = decodeURIComponent(req.path.slice(1));
const data = read(file);
res.setHeader('Content-Type', type);
res.setHeader('Cache-Control', cache_control);
res.end(data);
} catch (err) {
res.statusCode = 404;
res.end('not found');
}
} else {
next();
}
};
}
function noop(){}
function noop(){}

View File

@@ -1,767 +0,0 @@
application/andrew-inset ez
application/applixware aw
application/atom+xml atom
application/atomcat+xml atomcat
application/atomsvc+xml atomsvc
application/ccxml+xml ccxml
application/cdmi-capability cdmia
application/cdmi-container cdmic
application/cdmi-domain cdmid
application/cdmi-object cdmio
application/cdmi-queue cdmiq
application/cu-seeme cu
application/davmount+xml davmount
application/docbook+xml dbk
application/dssc+der dssc
application/dssc+xml xdssc
application/ecmascript ecma
application/emma+xml emma
application/epub+zip epub
application/exi exi
application/font-tdpfr pfr
application/gml+xml gml
application/gpx+xml gpx
application/gxf gxf
application/hyperstudio stk
application/inkml+xml ink inkml
application/ipfix ipfix
application/java-archive jar
application/java-serialized-object ser
application/java-vm class
application/javascript js
application/json json map
application/jsonml+json jsonml
application/lost+xml lostxml
application/mac-binhex40 hqx
application/mac-compactpro cpt
application/mads+xml mads
application/marc mrc
application/marcxml+xml mrcx
application/mathematica ma nb mb
application/mathml+xml mathml
application/mbox mbox
application/mediaservercontrol+xml mscml
application/metalink+xml metalink
application/metalink4+xml meta4
application/mets+xml mets
application/mods+xml mods
application/mp21 m21 mp21
application/mp4 mp4s
application/msword doc dot
application/mxf mxf
application/octet-stream bin dms lrf mar so dist distz pkg bpk dump elc deploy
application/oda oda
application/oebps-package+xml opf
application/ogg ogx
application/omdoc+xml omdoc
application/onenote onetoc onetoc2 onetmp onepkg
application/oxps oxps
application/patch-ops-error+xml xer
application/pdf pdf
application/pgp-encrypted pgp
application/pgp-signature asc sig
application/pics-rules prf
application/pkcs10 p10
application/pkcs7-mime p7m p7c
application/pkcs7-signature p7s
application/pkcs8 p8
application/pkix-attr-cert ac
application/pkix-cert cer
application/pkix-crl crl
application/pkix-pkipath pkipath
application/pkixcmp pki
application/pls+xml pls
application/postscript ai eps ps
application/prs.cww cww
application/pskc+xml pskcxml
application/rdf+xml rdf
application/reginfo+xml rif
application/relax-ng-compact-syntax rnc
application/resource-lists+xml rl
application/resource-lists-diff+xml rld
application/rls-services+xml rs
application/rpki-ghostbusters gbr
application/rpki-manifest mft
application/rpki-roa roa
application/rsd+xml rsd
application/rss+xml rss
application/rtf rtf
application/sbml+xml sbml
application/scvp-cv-request scq
application/scvp-cv-response scs
application/scvp-vp-request spq
application/scvp-vp-response spp
application/sdp sdp
application/set-payment-initiation setpay
application/set-registration-initiation setreg
application/shf+xml shf
application/smil+xml smi smil
application/sparql-query rq
application/sparql-results+xml srx
application/srgs gram
application/srgs+xml grxml
application/sru+xml sru
application/ssdl+xml ssdl
application/ssml+xml ssml
application/tei+xml tei teicorpus
application/thraud+xml tfi
application/timestamped-data tsd
application/vnd.3gpp.pic-bw-large plb
application/vnd.3gpp.pic-bw-small psb
application/vnd.3gpp.pic-bw-var pvb
application/vnd.3gpp2.tcap tcap
application/vnd.3m.post-it-notes pwn
application/vnd.accpac.simply.aso aso
application/vnd.accpac.simply.imp imp
application/vnd.acucobol acu
application/vnd.acucorp atc acutc
application/vnd.adobe.air-application-installer-package+zip air
application/vnd.adobe.formscentral.fcdt fcdt
application/vnd.adobe.fxp fxp fxpl
application/vnd.adobe.xdp+xml xdp
application/vnd.adobe.xfdf xfdf
application/vnd.ahead.space ahead
application/vnd.airzip.filesecure.azf azf
application/vnd.airzip.filesecure.azs azs
application/vnd.amazon.ebook azw
application/vnd.americandynamics.acc acc
application/vnd.amiga.ami ami
application/vnd.android.package-archive apk
application/vnd.anser-web-certificate-issue-initiation cii
application/vnd.anser-web-funds-transfer-initiation fti
application/vnd.antix.game-component atx
application/vnd.apple.installer+xml mpkg
application/vnd.apple.mpegurl m3u8
application/vnd.aristanetworks.swi swi
application/vnd.astraea-software.iota iota
application/vnd.audiograph aep
application/vnd.blueice.multipass mpm
application/vnd.bmi bmi
application/vnd.businessobjects rep
application/vnd.chemdraw+xml cdxml
application/vnd.chipnuts.karaoke-mmd mmd
application/vnd.cinderella cdy
application/vnd.claymore cla
application/vnd.cloanto.rp9 rp9
application/vnd.clonk.c4group c4g c4d c4f c4p c4u
application/vnd.cluetrust.cartomobile-config c11amc
application/vnd.cluetrust.cartomobile-config-pkg c11amz
application/vnd.commonspace csp
application/vnd.contact.cmsg cdbcmsg
application/vnd.cosmocaller cmc
application/vnd.crick.clicker clkx
application/vnd.crick.clicker.keyboard clkk
application/vnd.crick.clicker.palette clkp
application/vnd.crick.clicker.template clkt
application/vnd.crick.clicker.wordbank clkw
application/vnd.criticaltools.wbs+xml wbs
application/vnd.ctc-posml pml
application/vnd.cups-ppd ppd
application/vnd.curl.car car
application/vnd.curl.pcurl pcurl
application/vnd.dart dart
application/vnd.data-vision.rdz rdz
application/vnd.dece.data uvf uvvf uvd uvvd
application/vnd.dece.ttml+xml uvt uvvt
application/vnd.dece.unspecified uvx uvvx
application/vnd.dece.zip uvz uvvz
application/vnd.denovo.fcselayout-link fe_launch
application/vnd.dna dna
application/vnd.dolby.mlp mlp
application/vnd.dpgraph dpg
application/vnd.dreamfactory dfac
application/vnd.ds-keypoint kpxx
application/vnd.dvb.ait ait
application/vnd.dvb.service svc
application/vnd.dynageo geo
application/vnd.ecowin.chart mag
application/vnd.enliven nml
application/vnd.epson.esf esf
application/vnd.epson.msf msf
application/vnd.epson.quickanime qam
application/vnd.epson.salt slt
application/vnd.epson.ssf ssf
application/vnd.eszigno3+xml es3 et3
application/vnd.ezpix-album ez2
application/vnd.ezpix-package ez3
application/vnd.fdf fdf
application/vnd.fdsn.mseed mseed
application/vnd.fdsn.seed seed dataless
application/vnd.flographit gph
application/vnd.fluxtime.clip ftc
application/vnd.framemaker fm frame maker book
application/vnd.frogans.fnc fnc
application/vnd.frogans.ltf ltf
application/vnd.fsc.weblaunch fsc
application/vnd.fujitsu.oasys oas
application/vnd.fujitsu.oasys2 oa2
application/vnd.fujitsu.oasys3 oa3
application/vnd.fujitsu.oasysgp fg5
application/vnd.fujitsu.oasysprs bh2
application/vnd.fujixerox.ddd ddd
application/vnd.fujixerox.docuworks xdw
application/vnd.fujixerox.docuworks.binder xbd
application/vnd.fuzzysheet fzs
application/vnd.genomatix.tuxedo txd
application/vnd.geogebra.file ggb
application/vnd.geogebra.tool ggt
application/vnd.geometry-explorer gex gre
application/vnd.geonext gxt
application/vnd.geoplan g2w
application/vnd.geospace g3w
application/vnd.gmx gmx
application/vnd.google-earth.kml+xml kml
application/vnd.google-earth.kmz kmz
application/vnd.grafeq gqf gqs
application/vnd.groove-account gac
application/vnd.groove-help ghf
application/vnd.groove-identity-message gim
application/vnd.groove-injector grv
application/vnd.groove-tool-message gtm
application/vnd.groove-tool-template tpl
application/vnd.groove-vcard vcg
application/vnd.hal+xml hal
application/vnd.handheld-entertainment+xml zmm
application/vnd.hbci hbci
application/vnd.hhe.lesson-player les
application/vnd.hp-hpgl hpgl
application/vnd.hp-hpid hpid
application/vnd.hp-hps hps
application/vnd.hp-jlyt jlt
application/vnd.hp-pcl pcl
application/vnd.hp-pclxl pclxl
application/vnd.hydrostatix.sof-data sfd-hdstx
application/vnd.ibm.minipay mpy
application/vnd.ibm.modcap afp listafp list3820
application/vnd.ibm.rights-management irm
application/vnd.ibm.secure-container sc
application/vnd.iccprofile icc icm
application/vnd.igloader igl
application/vnd.immervision-ivp ivp
application/vnd.immervision-ivu ivu
application/vnd.insors.igm igm
application/vnd.intercon.formnet xpw xpx
application/vnd.intergeo i2g
application/vnd.intu.qbo qbo
application/vnd.intu.qfx qfx
application/vnd.ipunplugged.rcprofile rcprofile
application/vnd.irepository.package+xml irp
application/vnd.is-xpr xpr
application/vnd.isac.fcs fcs
application/vnd.jam jam
application/vnd.jcp.javame.midlet-rms rms
application/vnd.jisp jisp
application/vnd.joost.joda-archive joda
application/vnd.kahootz ktz ktr
application/vnd.kde.karbon karbon
application/vnd.kde.kchart chrt
application/vnd.kde.kformula kfo
application/vnd.kde.kivio flw
application/vnd.kde.kontour kon
application/vnd.kde.kpresenter kpr kpt
application/vnd.kde.kspread ksp
application/vnd.kde.kword kwd kwt
application/vnd.kenameaapp htke
application/vnd.kidspiration kia
application/vnd.kinar kne knp
application/vnd.koan skp skd skt skm
application/vnd.kodak-descriptor sse
application/vnd.las.las+xml lasxml
application/vnd.llamagraphics.life-balance.desktop lbd
application/vnd.llamagraphics.life-balance.exchange+xml lbe
application/vnd.lotus-1-2-3 123
application/vnd.lotus-approach apr
application/vnd.lotus-freelance pre
application/vnd.lotus-notes nsf
application/vnd.lotus-organizer org
application/vnd.lotus-screencam scm
application/vnd.lotus-wordpro lwp
application/vnd.macports.portpkg portpkg
application/vnd.mcd mcd
application/vnd.medcalcdata mc1
application/vnd.mediastation.cdkey cdkey
application/vnd.mfer mwf
application/vnd.mfmp mfm
application/vnd.micrografx.flo flo
application/vnd.micrografx.igx igx
application/vnd.mif mif
application/vnd.mobius.daf daf
application/vnd.mobius.dis dis
application/vnd.mobius.mbk mbk
application/vnd.mobius.mqy mqy
application/vnd.mobius.msl msl
application/vnd.mobius.plc plc
application/vnd.mobius.txf txf
application/vnd.mophun.application mpn
application/vnd.mophun.certificate mpc
application/vnd.mozilla.xul+xml xul
application/vnd.ms-artgalry cil
application/vnd.ms-cab-compressed cab
application/vnd.ms-excel xls xlm xla xlc xlt xlw
application/vnd.ms-excel.addin.macroenabled.12 xlam
application/vnd.ms-excel.sheet.binary.macroenabled.12 xlsb
application/vnd.ms-excel.sheet.macroenabled.12 xlsm
application/vnd.ms-excel.template.macroenabled.12 xltm
application/vnd.ms-fontobject eot
application/vnd.ms-htmlhelp chm
application/vnd.ms-ims ims
application/vnd.ms-lrm lrm
application/vnd.ms-officetheme thmx
application/vnd.ms-pki.seccat cat
application/vnd.ms-pki.stl stl
application/vnd.ms-powerpoint ppt pps pot
application/vnd.ms-powerpoint.addin.macroenabled.12 ppam
application/vnd.ms-powerpoint.presentation.macroenabled.12 pptm
application/vnd.ms-powerpoint.slide.macroenabled.12 sldm
application/vnd.ms-powerpoint.slideshow.macroenabled.12 ppsm
application/vnd.ms-powerpoint.template.macroenabled.12 potm
application/vnd.ms-project mpp mpt
application/vnd.ms-word.document.macroenabled.12 docm
application/vnd.ms-word.template.macroenabled.12 dotm
application/vnd.ms-works wps wks wcm wdb
application/vnd.ms-wpl wpl
application/vnd.ms-xpsdocument xps
application/vnd.mseq mseq
application/vnd.musician mus
application/vnd.muvee.style msty
application/vnd.mynfc taglet
application/vnd.neurolanguage.nlu nlu
application/vnd.nitf ntf nitf
application/vnd.noblenet-directory nnd
application/vnd.noblenet-sealer nns
application/vnd.noblenet-web nnw
application/vnd.nokia.n-gage.data ngdat
application/vnd.nokia.n-gage.symbian.install n-gage
application/vnd.nokia.radio-preset rpst
application/vnd.nokia.radio-presets rpss
application/vnd.novadigm.edm edm
application/vnd.novadigm.edx edx
application/vnd.novadigm.ext ext
application/vnd.oasis.opendocument.chart odc
application/vnd.oasis.opendocument.chart-template otc
application/vnd.oasis.opendocument.database odb
application/vnd.oasis.opendocument.formula odf
application/vnd.oasis.opendocument.formula-template odft
application/vnd.oasis.opendocument.graphics odg
application/vnd.oasis.opendocument.graphics-template otg
application/vnd.oasis.opendocument.image odi
application/vnd.oasis.opendocument.image-template oti
application/vnd.oasis.opendocument.presentation odp
application/vnd.oasis.opendocument.presentation-template otp
application/vnd.oasis.opendocument.spreadsheet ods
application/vnd.oasis.opendocument.spreadsheet-template ots
application/vnd.oasis.opendocument.text odt
application/vnd.oasis.opendocument.text-master odm
application/vnd.oasis.opendocument.text-template ott
application/vnd.oasis.opendocument.text-web oth
application/vnd.olpc-sugar xo
application/vnd.oma.dd2+xml dd2
application/vnd.openofficeorg.extension oxt
application/vnd.openxmlformats-officedocument.presentationml.presentation pptx
application/vnd.openxmlformats-officedocument.presentationml.slide sldx
application/vnd.openxmlformats-officedocument.presentationml.slideshow ppsx
application/vnd.openxmlformats-officedocument.presentationml.template potx
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx
application/vnd.openxmlformats-officedocument.spreadsheetml.template xltx
application/vnd.openxmlformats-officedocument.wordprocessingml.document docx
application/vnd.openxmlformats-officedocument.wordprocessingml.template dotx
application/vnd.osgeo.mapguide.package mgp
application/vnd.osgi.dp dp
application/vnd.osgi.subsystem esa
application/vnd.palm pdb pqa oprc
application/vnd.pawaafile paw
application/vnd.pg.format str
application/vnd.pg.osasli ei6
application/vnd.picsel efif
application/vnd.pmi.widget wg
application/vnd.pocketlearn plf
application/vnd.powerbuilder6 pbd
application/vnd.previewsystems.box box
application/vnd.proteus.magazine mgz
application/vnd.publishare-delta-tree qps
application/vnd.pvi.ptid1 ptid
application/vnd.quark.quarkxpress qxd qxt qwd qwt qxl qxb
application/vnd.realvnc.bed bed
application/vnd.recordare.musicxml mxl
application/vnd.recordare.musicxml+xml musicxml
application/vnd.rig.cryptonote cryptonote
application/vnd.rim.cod cod
application/vnd.rn-realmedia rm
application/vnd.rn-realmedia-vbr rmvb
application/vnd.route66.link66+xml link66
application/vnd.sailingtracker.track st
application/vnd.seemail see
application/vnd.sema sema
application/vnd.semd semd
application/vnd.semf semf
application/vnd.shana.informed.formdata ifm
application/vnd.shana.informed.formtemplate itp
application/vnd.shana.informed.interchange iif
application/vnd.shana.informed.package ipk
application/vnd.simtech-mindmapper twd twds
application/vnd.smaf mmf
application/vnd.smart.teacher teacher
application/vnd.solent.sdkm+xml sdkm sdkd
application/vnd.spotfire.dxp dxp
application/vnd.spotfire.sfs sfs
application/vnd.stardivision.calc sdc
application/vnd.stardivision.draw sda
application/vnd.stardivision.impress sdd
application/vnd.stardivision.math smf
application/vnd.stardivision.writer sdw vor
application/vnd.stardivision.writer-global sgl
application/vnd.stepmania.package smzip
application/vnd.stepmania.stepchart sm
application/vnd.sun.xml.calc sxc
application/vnd.sun.xml.calc.template stc
application/vnd.sun.xml.draw sxd
application/vnd.sun.xml.draw.template std
application/vnd.sun.xml.impress sxi
application/vnd.sun.xml.impress.template sti
application/vnd.sun.xml.math sxm
application/vnd.sun.xml.writer sxw
application/vnd.sun.xml.writer.global sxg
application/vnd.sun.xml.writer.template stw
application/vnd.sus-calendar sus susp
application/vnd.svd svd
application/vnd.symbian.install sis sisx
application/vnd.syncml+xml xsm
application/vnd.syncml.dm+wbxml bdm
application/vnd.syncml.dm+xml xdm
application/vnd.tao.intent-module-archive tao
application/vnd.tcpdump.pcap pcap cap dmp
application/vnd.tmobile-livetv tmo
application/vnd.trid.tpt tpt
application/vnd.triscape.mxs mxs
application/vnd.trueapp tra
application/vnd.ufdl ufd ufdl
application/vnd.uiq.theme utz
application/vnd.umajin umj
application/vnd.unity unityweb
application/vnd.uoml+xml uoml
application/vnd.vcx vcx
application/vnd.visio vsd vst vss vsw
application/vnd.visionary vis
application/vnd.vsf vsf
application/vnd.wap.wbxml wbxml
application/vnd.wap.wmlc wmlc
application/vnd.wap.wmlscriptc wmlsc
application/vnd.webturbo wtb
application/vnd.wolfram.player nbp
application/vnd.wordperfect wpd
application/vnd.wqd wqd
application/vnd.wt.stf stf
application/vnd.xara xar
application/vnd.xfdl xfdl
application/vnd.yamaha.hv-dic hvd
application/vnd.yamaha.hv-script hvs
application/vnd.yamaha.hv-voice hvp
application/vnd.yamaha.openscoreformat osf
application/vnd.yamaha.openscoreformat.osfpvg+xml osfpvg
application/vnd.yamaha.smaf-audio saf
application/vnd.yamaha.smaf-phrase spf
application/vnd.yellowriver-custom-menu cmp
application/vnd.zul zir zirz
application/vnd.zzazz.deck+xml zaz
application/voicexml+xml vxml
application/widget wgt
application/winhlp hlp
application/wsdl+xml wsdl
application/wspolicy+xml wspolicy
application/x-7z-compressed 7z
application/x-abiword abw
application/x-ace-compressed ace
application/x-apple-diskimage dmg
application/x-authorware-bin aab x32 u32 vox
application/x-authorware-map aam
application/x-authorware-seg aas
application/x-bcpio bcpio
application/x-bittorrent torrent
application/x-blorb blb blorb
application/x-bzip bz
application/x-bzip2 bz2 boz
application/x-cbr cbr cba cbt cbz cb7
application/x-cdlink vcd
application/x-cfs-compressed cfs
application/x-chat chat
application/x-chess-pgn pgn
application/x-conference nsc
application/x-cpio cpio
application/x-csh csh
application/x-debian-package deb udeb
application/x-dgc-compressed dgc
application/x-director dir dcr dxr cst cct cxt w3d fgd swa
application/x-doom wad
application/x-dtbncx+xml ncx
application/x-dtbook+xml dtb
application/x-dtbresource+xml res
application/x-dvi dvi
application/x-envoy evy
application/x-eva eva
application/x-font-bdf bdf
application/x-font-ghostscript gsf
application/x-font-linux-psf psf
application/x-font-pcf pcf
application/x-font-snf snf
application/x-font-type1 pfa pfb pfm afm
application/x-freearc arc
application/x-futuresplash spl
application/x-gca-compressed gca
application/x-glulx ulx
application/x-gnumeric gnumeric
application/x-gramps-xml gramps
application/x-gtar gtar
application/x-hdf hdf
application/x-install-instructions install
application/x-iso9660-image iso
application/x-java-jnlp-file jnlp
application/x-latex latex
application/x-lzh-compressed lzh lha
application/x-mie mie
application/x-mobipocket-ebook prc mobi
application/x-ms-application application
application/x-ms-shortcut lnk
application/x-ms-wmd wmd
application/x-ms-wmz wmz
application/x-ms-xbap xbap
application/x-msaccess mdb
application/x-msbinder obd
application/x-mscardfile crd
application/x-msclip clp
application/x-msdownload exe dll com bat msi
application/x-msmediaview mvb m13 m14
application/x-msmetafile wmf wmz emf emz
application/x-msmoney mny
application/x-mspublisher pub
application/x-msschedule scd
application/x-msterminal trm
application/x-mswrite wri
application/x-netcdf nc cdf
application/x-nzb nzb
application/x-pkcs12 p12 pfx
application/x-pkcs7-certificates p7b spc
application/x-pkcs7-certreqresp p7r
application/x-rar-compressed rar
application/x-research-info-systems ris
application/x-sh sh
application/x-shar shar
application/x-shockwave-flash swf
application/x-silverlight-app xap
application/x-sql sql
application/x-stuffit sit
application/x-stuffitx sitx
application/x-subrip srt
application/x-sv4cpio sv4cpio
application/x-sv4crc sv4crc
application/x-t3vm-image t3
application/x-tads gam
application/x-tar tar
application/x-tcl tcl
application/x-tex tex
application/x-tex-tfm tfm
application/x-texinfo texinfo texi
application/x-tgif obj
application/x-ustar ustar
application/x-wais-source src
application/x-x509-ca-cert der crt
application/x-xfig fig
application/x-xliff+xml xlf
application/x-xpinstall xpi
application/x-xz xz
application/x-zmachine z1 z2 z3 z4 z5 z6 z7 z8
application/xaml+xml xaml
application/xcap-diff+xml xdf
application/xenc+xml xenc
application/xhtml+xml xhtml xht
application/xml xml xsl
application/xml-dtd dtd
application/xop+xml xop
application/xproc+xml xpl
application/xslt+xml xslt
application/xspf+xml xspf
application/xv+xml mxml xhvml xvml xvm
application/yang yang
application/yin+xml yin
application/zip zip
audio/adpcm adp
audio/basic au snd
audio/midi mid midi kar rmi
audio/mp4 m4a mp4a
audio/mpeg mpga mp2 mp2a mp3 m2a m3a
audio/ogg oga ogg spx
audio/s3m s3m
audio/silk sil
audio/vnd.dece.audio uva uvva
audio/vnd.digital-winds eol
audio/vnd.dra dra
audio/vnd.dts dts
audio/vnd.dts.hd dtshd
audio/vnd.lucent.voice lvp
audio/vnd.ms-playready.media.pya pya
audio/vnd.nuera.ecelp4800 ecelp4800
audio/vnd.nuera.ecelp7470 ecelp7470
audio/vnd.nuera.ecelp9600 ecelp9600
audio/vnd.rip rip
audio/webm weba
audio/x-aac aac
audio/x-aiff aif aiff aifc
audio/x-caf caf
audio/x-flac flac
audio/x-matroska mka
audio/x-mpegurl m3u
audio/x-ms-wax wax
audio/x-ms-wma wma
audio/x-pn-realaudio ram ra
audio/x-pn-realaudio-plugin rmp
audio/x-wav wav
audio/xm xm
chemical/x-cdx cdx
chemical/x-cif cif
chemical/x-cmdf cmdf
chemical/x-cml cml
chemical/x-csml csml
chemical/x-xyz xyz
font/collection ttc
font/otf otf
font/ttf ttf
font/woff woff
font/woff2 woff2
image/bmp bmp
image/cgm cgm
image/g3fax g3
image/gif gif
image/ief ief
image/jpeg jpeg jpg jpe
image/ktx ktx
image/png png
image/prs.btif btif
image/sgi sgi
image/svg+xml svg svgz
image/tiff tiff tif
image/vnd.adobe.photoshop psd
image/vnd.dece.graphic uvi uvvi uvg uvvg
image/vnd.djvu djvu djv
image/vnd.dvb.subtitle sub
image/vnd.dwg dwg
image/vnd.dxf dxf
image/vnd.fastbidsheet fbs
image/vnd.fpx fpx
image/vnd.fst fst
image/vnd.fujixerox.edmics-mmr mmr
image/vnd.fujixerox.edmics-rlc rlc
image/vnd.ms-modi mdi
image/vnd.ms-photo wdp
image/vnd.net-fpx npx
image/vnd.wap.wbmp wbmp
image/vnd.xiff xif
image/webp webp
image/x-3ds 3ds
image/x-cmu-raster ras
image/x-cmx cmx
image/x-freehand fh fhc fh4 fh5 fh7
image/x-icon ico
image/x-mrsid-image sid
image/x-pcx pcx
image/x-pict pic pct
image/x-portable-anymap pnm
image/x-portable-bitmap pbm
image/x-portable-graymap pgm
image/x-portable-pixmap ppm
image/x-rgb rgb
image/x-tga tga
image/x-xbitmap xbm
image/x-xpixmap xpm
image/x-xwindowdump xwd
message/rfc822 eml mime
model/iges igs iges
model/mesh msh mesh silo
model/vnd.collada+xml dae
model/vnd.dwf dwf
model/vnd.gdl gdl
model/vnd.gtw gtw
model/vnd.mts mts
model/vnd.vtu vtu
model/vrml wrl vrml
model/x3d+binary x3db x3dbz
model/x3d+vrml x3dv x3dvz
model/x3d+xml x3d x3dz
text/cache-manifest appcache
text/calendar ics ifb
text/css css
text/csv csv
text/html html htm
text/n3 n3
text/plain txt text conf def list log in
text/prs.lines.tag dsc
text/richtext rtx
text/sgml sgml sgm
text/tab-separated-values tsv
text/troff t tr roff man me ms
text/turtle ttl
text/uri-list uri uris urls
text/vcard vcard
text/vnd.curl curl
text/vnd.curl.dcurl dcurl
text/vnd.curl.mcurl mcurl
text/vnd.curl.scurl scurl
text/vnd.dvb.subtitle sub
text/vnd.fly fly
text/vnd.fmi.flexstor flx
text/vnd.graphviz gv
text/vnd.in3d.3dml 3dml
text/vnd.in3d.spot spot
text/vnd.sun.j2me.app-descriptor jad
text/vnd.wap.wml wml
text/vnd.wap.wmlscript wmls
text/x-asm s asm
text/x-c c cc cxx cpp h hh dic
text/x-fortran f for f77 f90
text/x-java-source java
text/x-nfo nfo
text/x-opml opml
text/x-pascal p pas
text/x-setext etx
text/x-sfv sfv
text/x-uuencode uu
text/x-vcalendar vcs
text/x-vcard vcf
video/3gpp 3gp
video/3gpp2 3g2
video/h261 h261
video/h263 h263
video/h264 h264
video/jpeg jpgv
video/jpm jpm jpgm
video/mj2 mj2 mjp2
video/mp4 mp4 mp4v mpg4
video/mpeg mpeg mpg mpe m1v m2v
video/ogg ogv
video/quicktime qt mov
video/vnd.dece.hd uvh uvvh
video/vnd.dece.mobile uvm uvvm
video/vnd.dece.pd uvp uvvp
video/vnd.dece.sd uvs uvvs
video/vnd.dece.video uvv uvvv
video/vnd.dvb.file dvb
video/vnd.fvt fvt
video/vnd.mpegurl mxu m4u
video/vnd.ms-playready.media.pyv pyv
video/vnd.uvvu.mp4 uvu uvvu
video/vnd.vivo viv
video/webm webm
video/x-f4v f4v
video/x-fli fli
video/x-flv flv
video/x-m4v m4v
video/x-matroska mkv mk3d mks
video/x-mng mng
video/x-ms-asf asf asx
video/x-ms-vob vob
video/x-ms-wm wm
video/x-ms-wmv wmv
video/x-ms-wmx wmx
video/x-ms-wvx wvx
video/x-msvideo avi
video/x-sgi-movie movie
video/x-smv smv
x-conference/x-cooltalk ice

View File

@@ -1,20 +0,0 @@
import mime_raw from './mime-types.md';
const map: Map<string, string> = new Map();
mime_raw.split('\n').forEach((row: string) => {
const match = /(.+?)\t+(.+)/.exec(row);
if (!match) return;
const type = match[1];
const extensions = match[2].split(' ');
extensions.forEach(ext => {
map.set(ext, type);
});
});
export function lookup(file: string) {
const match = /\.([^\.]+)$/.exec(file);
return match && map.get(match[1]);
}

View File

@@ -1,3 +1,4 @@
import { Stats } from 'fs';
import { ClientRequest, ServerResponse } from 'http';
export type ServerRoute = {
@@ -37,6 +38,18 @@ export type Props = {
[key: string]: any;
};
export interface MiddlewareOptions {
static?: {
headers?: (pathname: string, stats: Stats) => Record<string, string>
},
session?: (req: Req, res: Res) => any,
ignore?: any
}
export interface StartOptions extends MiddlewareOptions {
port?: number;
}
export interface Req extends ClientRequest {
url: string;
baseUrl: string;
@@ -44,7 +57,7 @@ export interface Req extends ClientRequest {
method: string;
path: string;
params: Record<string, string>;
query: Record<string, string>;
query: Record<string, string | string[]>;
headers: Record<string, string>;
}

5
site/.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
.DS_Store
node_modules
yarn-error.log
/cypress/screenshots/
/__sapper__/

88
site/README.md Normal file
View File

@@ -0,0 +1,88 @@
# sapper-template
The default [Sapper](https://github.com/sveltejs/sapper) template, with branches for Rollup and webpack. To clone it and get started:
```bash
# for Rollup
npx degit sveltejs/sapper-template#rollup my-app
# for webpack
npx degit sveltejs/sapper-template#webpack my-app
cd my-app
npm install # or yarn!
npm run dev
```
Open up [localhost:3000](http://localhost:3000) and start clicking around.
Consult [sapper.svelte.technology](https://sapper.svelte.technology) for help getting started.
## Structure
Sapper expects to find two directories in the root of your project — `src` and `static`.
### src
The [src](src) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file and a `routes` directory.
#### src/routes
This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
**Pages** are Svelte components written in `.html` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
There are three simple rules for naming the files that define your routes:
* A file called `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 the route
* The file `src/routes/index.html` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.html` is treated the same as `src/routes/about.html`.
* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
### static
The [static](static) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv).
In your [service-worker.js](app/service-worker.js) file, you can import these as `files` from the generated manifest...
```js
import { files } from '../__sapper__/service-worker.js';
```
...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
## Bundler config
Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.
## Production mode and deployment
To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins.
You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands:
```bash
npm install -g now
now
```
## Using external components with webpack
When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.
Because of that, it's essential that webpack doesn't treat the package as an *external dependency*. You can either modify the `externals` option in [webpack/server.config.js](webpack/server.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:
```bash
yarn add -D @sveltejs/svelte-virtual-list
```
## Bugs and feedback
Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).

18
site/appveyor.yml Normal file
View File

@@ -0,0 +1,18 @@
version: "{build}"
shallow_clone: true
init:
- git config --global core.autocrlf false
build: off
environment:
matrix:
# node.js
- nodejs_version: stable
install:
- ps: Install-Product node $env:nodejs_version
- npm install cypress
- npm install

3
site/config.js Normal file
View File

@@ -0,0 +1,3 @@
export const SLUG_PRESERVE_UNICODE = false;
export const SLUG_SEPARATOR = '_';
export const SLUG_LANG = 'en';

View File

@@ -0,0 +1,52 @@
---
title: Introduction
---
### Before we begin
> Sapper is in early development, and some things may change before we hit version 1.0. This document is a work-in-progress. If you get stuck, reach out for help in the [Discord chatroom](https://discord.gg/yy75DKs).
>
> See the [migration guides](migrating) for help upgrading from older versions.
### What is Sapper?
Sapper is a framework for building extremely high-performance web apps. You're looking at one right now! There are two basic concepts:
* Each page of your app is a [Svelte](https://svelte.dev) component
* 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
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.
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://svelte.dev/blog/svelte-3-rethinking-reactivity) and the [tutorial](https://svelte.dev/tutorial) to learn more.
### Why the name?
In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as *sappers*.
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.
### Comparison with Next.js
[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:
* Sapper is powered by Svelte instead of React, so it's faster and your apps are smaller
* Instead of route masking, we encode route parameters in filenames (see the [routing](docs#routing) section below)
* 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 [/docs.json](/docs.json))
* 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
### Getting started
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):
```bash
npx degit sveltejs/sapper-template#rollup my-app
# or: npx degit sveltejs/sapper-template#webpack my-app
cd my-app
npm install
npm run dev
```
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!

View File

@@ -0,0 +1,112 @@
---
title: Sapper app structure
---
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.
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:
```bash
├ package.json
├ src
│ ├ routes
│ │ ├ # your routes here
│ │ ├ _error.svelte
│ │ └ index.svelte
│ ├ client.js
│ ├ server.js
│ ├ service-worker.js
│ └ template.html
├ static
│ ├ # your files here
└ rollup.config.js / webpack.config.js
```
When you first run Sapper, it will create an additional `__sapper__` directory containing generated files.
You'll notice a few extra files and a `cypress` directory which relates to [testing](docs#testing) — we don't need to worry about those right now.
> You *can* create these files from scratch, but it's much better to use the template. See [getting started](docs#getting-started) for instructions on how to easily clone it
### package.json
Your package.json contains your app's dependencies and defines a number of scripts:
* `npm run dev` — start the app in development mode, and watch source files for changes
* `npm run build` — build the app in production mode
* `npm run export` — bake out a static version, if applicable (see [exporting](docs#exporting))
* `npm start` — start the app in production mode after you've built it
* `npm test` — run the tests (see [testing](docs#testing))
### src
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.
#### src/client.js
This *must* import, and call, the `start` function from the generated `@sapper/app` module:
```js
import * as sapper from '@sapper/app';
sapper.start({
target: document.querySelector('#sapper')
});
```
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](docs#client-api) section for more information on functions you can import.
#### src/server.js
This is a normal Express (or [Polka](https://github.com/lukeed/polka), etc) app, with three requirements:
* it should serve the contents of the `static` folder, using for example [sirv](https://github.com/lukeed/sirv)
* it should call `app.use(sapper.middleware())` at the end, where `sapper` is imported from `@sapper/server`
* it must listen on `process.env.PORT`
Beyond that, you can write the server however you like.
#### src/service-worker.js
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.
Among other things, this makes it possible to build applications that work offline.
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`:
* `files` — an array of files found in the `static` directory
* `shell` — the client-side JavaScript generated by the bundler (Rollup or webpack)
* `routes` — an array of `{ pattern: RegExp }` objects you can use to determine whether a Sapper-controlled page is being requested
* `timestamp` — the time the service worker was generated (useful for generating unique cache names)
#### src/template.html
This file is a template for responses from the server. Sapper will inject content that replaces the following tags:
* `%sapper.base%` — a `<base>` element (see [base URLs](docs#base-urls))
* `%sapper.styles%` — critical CSS for the page being requested
* `%sapper.head%` — HTML representing page-specific `<head>` contents, like `<title>`
* `%sapper.html%` — HTML representing the body of the page being rendered
* `%sapper.scripts%` — script tags for the client-side app
### src/routes
This is the meat of your app — the pages and server routes. See the section on [routing](docs#routing) for the juicy details.
### static
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`.
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](docs#templates-service-worker-js)).
### rollup.config.js / webpack.config.js
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.

View File

@@ -0,0 +1,127 @@
---
title: Routing
---
As we've seen, there are two types of route in Sapper — pages, and server routes.
### Pages
Pages are Svelte components written in `.svelte` 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.
The filename determines the route. For example, `src/routes/index.svelte` is the root of your site:
```html
<!-- src/routes/index.svelte -->
<svelte:head>
<title>Welcome</title>
</svelte:head>
<h1>Hello and welcome to my site!</h1>
```
A file called either `src/routes/about.svelte` or `src/routes/about/index.svelte` would correspond to the `/about` route:
```html
<!-- src/routes/about.svelte -->
<svelte:head>
<title>About</title>
</svelte:head>
<h1>About this site</h1>
<p>TODO...</p>
```
Dynamic parameters are encoded using `[brackets]`. For example, here's how you could create a page that renders a blog post:
```html
<!-- src/routes/blog/[slug].svelte -->
<script context="module">
// the (optional) preload function takes a
// `{ path, params, query }` object and turns it into
// the data we need to render the page
export async function preload(page, session) {
// the `slug` parameter is available because this file
// is called [slug].svelte
const { slug } = page.params;
// `this.fetch` is a wrapper around `fetch` that allows
// you to make credentialled requests on both
// server and client
const res = await this.fetch(`blog/${slug}.json`);
const article = await res.json();
return { article };
}
</script>
<script>
export let article;
</script>
<svelte:head>
<title>{article.title}</title>
</svelte:head>
<h1>{article.title}</h1>
<div class='content'>
{@html article.html}
</div>
```
> See the section on [preloading](docs#preloading) for more info about `preload` and `this.fetch`
### Server routes
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:
```js
// routes/blog/[slug].json.js
import db from './_database.js'; // the underscore tells Sapper this isn't a route
export async function get(req, res, next) {
// the `slug` parameter is available because this file
// is called [slug].json.js
const { slug } = req.params;
const article = await db.get(slug);
if (article !== null) {
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify(article));
} else {
next();
}
}
```
> `delete` is a reserved word in JavaScript. To handle DELETE requests, export a function called `del` instead.
### File naming rules
There are three simple rules for naming the files that define your routes:
* A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to `preload`
* The file `src/routes/index.svelte` corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`.
* 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
### Error page
In addition to regular pages, there is a 'special' page that Sapper expects to find — `src/routes/_error.svelte`. This will be shown when an error occurs while rendering a page.
The `error` object is made available to the template along with the HTTP `status` code.
### Regexes in routes
You can use a subset of regular expressions to qualify route parameters, by placing them in parentheses after the parameter name.
For example, `src/routes/items/[id([0-9]+)].svelte` would only match numeric IDs — `/items/123` would match, but `/items/xyz` would not.
Because of technical limitations, the following characters cannot be used: `/`, `\`, `?`, `:`, `(` and `)`.

View File

@@ -0,0 +1,47 @@
---
title: Client API
---
The `@sapper/app` module, which is generated by Sapper based on the shape of your app, contains functions for controlling Sapper programmatically and responding to events.
### start({ target })
* `target` — an element to render pages to
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.
Returns a `Promise` that resolves when the initial page has been hydrated.
```js
import * as sapper from '@sapper/app';
sapper.start({
target: document.querySelector('#sapper')
}).then(() => {
console.log('client-side app has started');
});
```
### goto(href, options?)
* `href` — the page to go to
* `options` — can include a `replaceState` property, which determines whether to use `history.pushState` (the default) or `history.replaceState`). Not required
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`.)
### prefetch(href)
* `href` — the page to prefetch
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](docs#prefetching).
### prefetchRoutes(routes?)
* `routes` — an optional array of strings representing routes to prefetch
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.svelte`) or `/blog/*` (to match `src/routes/blog/[slug].svelte`). Unlike `prefetch`, this won't call `preload` for individual pages.

View File

@@ -0,0 +1,114 @@
---
title: Preloading
---
As seen in the [routing](docs#routing) section, page components can have an optional `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.
```html
<script context="module">
export async function preload(page, session) {
const { slug } = page.params;
const res = await this.fetch(`blog/${slug}.json`);
const article = await res.json();
return { article };
}
</script>
```
It lives in a `context="module"` script — see the [tutorial](https://svelte.dev/tutorial/module-exports) — because it's not part of the component instance itself; instead, it runs *before* the component is created, allowing you to avoid flashes while data is fetched.
### Argument
The `preload` function receives two arguments — `page` and `session`.
`page` is a `{ path, params, query }` object where `path` is the URL's pathname, `params` is derived from `path` and the route filename, and `query` is an object of values in the query string.
So if the example above was `src/routes/blog/[slug].svelte` and the URL was `/blog/some-post?foo=bar&baz`, the following would be true:
* `page.path === '/blog/some-post'`
* `page.params.slug === 'some-post'`
* `page.query.foo === 'bar'`
* `page.query.baz === true`
`session` is generated on the server by the `session` option passed to `sapper.middleware` (TODO this needs further documentation. Perhaps a server API section?)
### Return value
If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object.
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`).
### Context
Inside `preload`, you have access to three methods:
* `this.fetch(url, options)`
* `this.error(statusCode, error)`
* `this.redirect(statusCode, location)`
#### this.fetch
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.
To fix this, Sapper provides `this.fetch`, which works on the server as well as in the client:
```html
<script context="module">
export async function preload() {
const res = await this.fetch(`secret-data.json`, {
credentials: 'include'
});
// ...
}
</script>
```
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.
#### this.error
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`:
```html
<script context="module">
export async function preload({ params, query }) {
const { slug } = params;
const res = await this.fetch(`blog/${slug}.json`);
if (res.status === 200) {
const article = await res.json();
return { article };
}
this.error(404, 'Not found');
}
</script>
```
The same applies to other error codes you might encounter.
#### this.redirect
You can abort rendering and redirect to a different location with `this.redirect`:
```html
<script context="module">
export async function preload(page, session) {
const { user } = session;
if (!user) {
return this.redirect(302, 'login');
}
return { user };
}
</script>
```

View File

@@ -0,0 +1,86 @@
---
title: Layouts
---
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.
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.
To create a layout component that applies to every page, make a file called `src/routes/_layout.svelte`. The default layout component (the one that Sapper uses if you don't bring your own) looks like this...
```html
<slot></slot>
```
...but we can add whatever markup, styles and behaviour we want. For example, let's add a nav bar:
```html
<!-- src/routes/_layout.svelte -->
<nav>
<a href=".">Home</a>
<a href="about">About</a>
<a href="settings">Settings</a>
</nav>
<slot></slot>
```
If we create pages for `/`, `/about` and `/settings`...
```html
<!-- src/routes/index.svelte -->
<h1>Home</h1>
```
```html
<!-- src/routes/about.svelte -->
<h1>About</h1>
```
```html
<!-- src/routes/settings.svelte -->
<h1>Settings</h1>
```
...the nav will always be visible, and clicking between the three pages will only result in the `<h1>` being replaced.
### Nested routes
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)).
We can create a layout that only applies to pages below `/settings` (while inheriting the root layout with the top-level nav):
```html
<!-- src/routes/settings/_layout.svelte -->
<h1>Settings</h1>
<div class="submenu">
<a href="settings/profile">Profile</a>
<a href="settings/notifications">Notifications</a>
</div>
<slot></slot>
```
Layout components receive a `segment` property which is useful for things like styling:
```diff
+<script>
+ export let segment;
+</script>
+
<div class="submenu">
- <a href="settings/profile">Profile</a>
- <a href="settings/notifications">Notifications</a>
+ <a
+ class:selected={segment === "profile"}
+ href="settings/profile"
+ >Profile</a>
+
+ <a
+ class:selected={segment === "notifications"}
+ href="settings/notifications"
+ >Notifications</a>
</div>
```

View File

@@ -0,0 +1,32 @@
---
title: Server-side rendering
---
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://svelte.dev/docs#server-side-rendering). This has benefits in performance and search engine indexing, among others, but comes with its own set of complexities.
### Making a component SSR compatible
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.
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:
```bash
ReferenceError: window is not defined
```
The way to get around this is to use a dynamic import for your component, from within the `onMount` function (which is only called on the client), so that your import code is never called on the server.
```html
<script>
import { onMount } from 'svelte';
let MyComponent;
onMount(async () => {
const module = await import('my-non-ssr-component');
MyComponent = module.default;
});
</script>
<svelte:component this={MyComponent} foo="bar"/>
```

View File

@@ -0,0 +1,40 @@
---
title: Stores
---
The `page` and `session` values passed to `preload` functions are available to components as [stores](https://svelte.dev/tutorial/writable-stores), along with `preloading`.
Inside a component, get references to the stores like so:
```html
<script>
import { stores } from '@sapper/app';
const { preloading, page, session } = stores();
</script>
```
* `preloading` contains a readonly boolean value, indicating whether or not a navigation is pending
* `page` contains a readonly `{ path, params, query }` object, identical to that passed to `preload` functions
* `session` contains whatever data was seeded on the server. It is a [writable store](https://svelte.dev/tutorial/writable-stores), meaning you can update it with new data (for example, after the user logs in) and your app will be refreshed
### Seeding session data
On the server, you can populate `session` by passing an option to `sapper.middleware`:
```js
// src/server.js
express() // or Polka, or a similar framework
.use(
serve('assets'),
authenticationMiddleware(),
sapper.middleware({
session: (req, res) => ({
user: req.user
})
})
)
.listen(process.env.PORT);
```
> Session data must be serializable (using [devalue](https://github.com/Rich-Harris/devalue)) — no functions or custom classes, just built-in JavaScript data types

View File

@@ -0,0 +1,22 @@
---
title: Prefetching
---
Sapper uses code splitting to break your app into small chunks (one per route), ensuring fast startup times.
For *dynamic* routes, such as our `src/routes/blog/[slug].svelte` 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.
### rel=prefetch
We can mitigate that by *prefetching* the data. Adding a `rel=prefetch` attribute to a link...
```html
<a rel=prefetch href='blog/what-is-sapper'>What is Sapper?</a>
```
...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.
> `rel=prefetch` is a Sapper idiom, not a standard attribute for `<a>` elements
<!-- TODO add a function to prefetch programmatically -->

View File

@@ -0,0 +1,15 @@
---
title: Building
---
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.
### sapper build
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.)
The output is a Node app that you can run from the project root:
```bash
node __sapper__/build
```

View File

@@ -0,0 +1,63 @@
---
title: Exporting
---
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.
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!
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.
### sapper export
Inside your Sapper project, try this:
```bash
# npx allows you to use locally-installed dependencies
npx sapper export
```
This will create a `__sapper__/export` folder with a production-ready build of your site. You can launch it like so:
```bash
npx serve __sapper__/export
```
Navigate to [localhost:5000](http://localhost:5000) (or whatever port `serve` picked), and verify that your site works as expected.
You can also add a script to your package.json...
```js
{
"scripts": {
...
"export": "sapper export"
}
}
```
...allowing you to `npm run export` your app.
### How it works
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.
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 `onMount` or elsewhere.
### When not to export
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`.
Note that you can still export apps with dynamic routes, like our `src/routes/blog/[slug].svelte` 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.
### Route conflicts
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.
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.)
For *pages*, we skirt around this problem by writing `export/foo/index.html` instead of `export/foo`.

View File

@@ -0,0 +1,64 @@
---
title: Deployment
---
Sapper apps run anywhere that supports Node 8 or higher.
### Deploying to Now
> This section relates to Now 1, not Now 2
We can very easily deploy our apps to [Now][]:
```bash
npm install -g now
now
```
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.
For other hosting environments, you may need to do `npm run build` yourself.
### Deploying service workers
Sapper makes the Service Worker file (`service-worker.js`) unique by including a timestamp in the source code
(calculated using `Date.now()`).
In environments where the app is deployed to multiple servers (such as [Now][]), it is advisable to use a
consistent timestamp for all deployments. Otherwise, users may run into issues where the Service Worker
updates unexpectedly because the app hits server 1, then server 2, and they have slightly different timestamps.
To override Sapper's timestamp, you can use an environment variable (e.g. `SAPPER_TIMESTAMP`) and then modify
the `service-worker.js`:
```js
const timestamp = process.env.SAPPER_TIMESTAMP; // instead of `import { timestamp }`
const ASSETS = `cache${timestamp}`;
export default {
/* ... */
plugins: [
/* ... */
replace({
/* ... */
'process.env.SAPPER_TIMESTAMP': process.env.SAPPER_TIMESTAMP || Date.now()
})
]
}
```
Then you can set it using the environment variable, e.g.:
```bash
SAPPER_TIMESTAMP=$(date +%s%3N) npm run build
```
When deploying to [Now][], you can pass the environment variable into Now itself:
```bash
now -e SAPPER_TIMESTAMP=$(date +%s%3N)
```
[Now]: https://zeit.co/now

View File

@@ -0,0 +1,39 @@
---
title: Security
---
By default, Sapper does not add security headers to your app, but you may add them yourself using middleware such as [Helmet][].
### Content Security Policy (CSP)
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`).
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][]:
```js
// server.js
import uuidv4 from 'uuid/v4';
import helmet from 'helmet';
app.use((req, res, next) => {
res.locals.nonce = uuidv4();
next();
});
app.use(helmet({
contentSecurityPolicy: {
directives: {
scriptSrc: [
"'self'",
(req, res) => `'nonce-${res.locals.nonce}'`
]
}
}
}));
app.use(sapper.middleware());
```
Using `res.locals.nonce` in this way follows the convention set by
[Helmet's CSP docs](https://helmetjs.github.io/docs/csp/#generating-nonces).
[Express]: https://expressjs.com/
[Helmet]: https://helmetjs.github.io/

View File

@@ -0,0 +1,28 @@
---
title: Base URLs
---
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.
This can be done like so:
```js
// app/server.js
express() // or Polka, or a similar framework
.use(
'/my-base-path', // <!-- add this line
compression({ threshold: 0 }),
serve('assets'),
sapper.middleware()
)
.listen(process.env.PORT);
```
Sapper will detect the base path and configure both the server-side and client-side routers accordingly.
If you're [exporting](docs#exporting) your app, you will need to tell the exporter where to begin crawling:
```bash
sapper export --basepath my-base-path
```

View File

@@ -0,0 +1,14 @@
---
title: Testing
---
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).
### Running the tests
```bash
npm test
```
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.

View File

@@ -0,0 +1,19 @@
---
title: Debugging
---
Debugging your server code is particularly easy with [ndb](https://github.com/GoogleChromeLabs/ndb). Install it globally...
```bash
npm install -g ndb
```
...then run Sapper:
```bash
ndb npm run dev
```
> 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`.
Note that you may not see any terminal output for a few seconds while ndb starts up.

View File

@@ -0,0 +1,367 @@
---
title: Migrating
---
Until we reach version 1.0, there may be occasional changes to the project structure Sapper expects.
### 0.25 to 0.26
The most significant change yet: Sapper is now built on Svelte 3.
#### Importing Sapper
Your app's runtime is now built to `src/node_modules/@sapper` this allows you to easily import it from anywhere in your source code. Update your `server.js`...
```diff
// src/server.js
-import * as sapper from '../__sapper__/server.js';
+import * as sapper from '@sapper/server';
```
...and client.js:
```diff
-import * as sapper from '../__sapper__/client.js';
+import * as sapper from '@sapper/app';
sapper.start({
target: document.querySelector('#sapper')
});
```
The same applies to imports like `goto` and `prefetchRoutes`.
#### Webpack config
If you're using webpack, you must update your configuration to recognise `.mjs` and `.svelte` files:
```js
resolve: {
extensions: ['.mjs', '.js', '.json', '.svelte', '.html']
}
```
If you're using .svelte files (recommended), you'll also need to tell `svelte-loader` to expect them:
```diff
-test: /\.html$/
+test: /\.(svelte|html)$/
```
#### Session data
Passing data from server to client is now accomplished with a `session` function passed to the middleware:
```js
// src/server.js
sapper.middleware({
session: (req, res) => ({
// session data goes here
})
})
```
This data is available in `preload` functions as the second argument:
```html
<!-- SomeComponent.svelte -->
<script context="module">
export function preload(page, session) {
const { path, params, query } = page; // as before
if (!session.user) return this.redirect(302, 'login');
// ...
}
</script>
```
#### Stores
It is also available, along with `page` and `preloading`, as a store inside components:
```html
<script>
import * as sapper from '@sapper/app';
const { page, preloading, session } = sapper.stores();
</script>
```
`page` and `preloading` are [readable stores](https://svelte.dev/tutorial/readable-stores), while `session` is [writable](https://svelte.dev/tutorial/writable-stores). Writing to the session store (for example, after the user logs in) will cause any `preload` functions that rely on session data to re-run; it will not persist anything to the server.
#### Layouts
Your layout components should now use a `<slot>` element to render nested routes, instead of `<svelte:component>`:
```diff
<main>
- <svelte:component this={child.component} {...child.props}/>
+ <slot></slot>
</main>
```
The layout component itself receives a `segment` prop, which is equivalent to `child.segment` in earlier versions.
### 0.21 to 0.22
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:
```diff
// src/client.js
-import { init } from 'sapper/runtime.js';
-import { manifest } from './manifest/client.js';
+import * as sapper from '../__sapper__/client.js';
-init({
+sapper.start({
target: document.querySelector('#sapper'),
- manifest
});
```
```diff
// src/server.js
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
-import sapper from 'sapper';
-import { manifest } from './manifest/server.js';
+import * as sapper from '../__sapper__/server.js';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
polka() // You can also use Express
.use(
compression({ threshold: 0 }),
- sirv('assets', { dev }),
+ sirv('static', { dev }),
- sapper({ manifest })
+ sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});
```
```diff
// src/service-worker.js
-import { assets, shell, routes, timestamp } from './manifest/service-worker.js';
+import { files, shell, routes, timestamp } from '../__sapper__/service-worker.js';
```
In addition, the default build and export directories are now `__sapper__/build` and `__sapper__/export` respectively.
### 0.20 to 0.21
* The `app` directory is now `src`
* The `routes` directory is now `src/routes`
* The `assets` directory is now `static` (remember to update your `src/server.js` file to reflect this change as well)
* 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.
### 0.17 to 0.18
The `sapper/webpack/config.js` file (required in the `webpack/*.config.js` files) is now `sapper/config/webpack.js`.
### 0.14 to 0.15
This release changed how routing is handled, resulting in a number of changes.
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:
```diff
-<!-- app/App.html -->
+<!-- routes/_layout.html -->
-<Nav path={props.path}/>
+<Nav segment={child.segment}/>
-<svelte:component this={Page} {...props}/>
+<svelte:component this={child.component} {...child.props}/>
```
You will then need to remove `App` from your client and server entry points, and replace `routes` with `manifest`:
```diff
// app/client.js
import { init } from 'sapper/runtime.js';
-import { routes } from './manifest/client.js';
-import App from './App.html';
+import { manifest } from './manifest/client.js';
init({
target: document.querySelector('#sapper'),
- routes,
- App
+ manifest
});
```
```diff
// app/server.js
import sirv from 'sirv';
import polka from 'polka';
import sapper from 'sapper';
import compression from 'compression';
-import { routes } from './manifest/server.js';
-import App from './App.html';
+import { manifest } from './manifest/server.js';
polka()
.use(
compression({ threshold: 0 }),
sirv('assets'),
- sapper({ routes, App })
+ sapper({ manifest })
)
.listen(process.env.PORT)
.catch(err => {
console.log('error', err);
});
```
`preload` functions no longer take the entire request object on the server; instead, they receive the same argument as on the client.
### 0.13 to 0.14
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`.
### 0.11 to 0.12
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.
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.
This component is rendered with the following values:
* `Page` — a component constructor for the current page
* `props` — an object with `params`, `query`, and any data returned from the page's `preload` function
* `preloading``true` during preload, `false` otherwise. Useful for showing progress indicators
Sapper needs to know about your app component. To that end, you will need to modify your `app/server.js` and `app/client.js`:
```diff
// app/server.js
import polka from 'polka';
import sapper from 'sapper';
import serve from 'serve-static';
import { routes } from './manifest/server.js';
+import App from './App.html';
polka()
.use(
serve('assets'),
- sapper({ routes })
+ sapper({ App, routes })
)
.listen(process.env.PORT);
```
```diff
// app/client.js
import { init } from 'sapper/runtime.js';
import { routes } from './manifest/client.js';
+import App from './App.html';
-init(target: document.querySelector('#sapper'), routes);
+init({
+ target: document.querySelector('#sapper'),
+ routes,
+ App
+});
```
Once your `App.html` has been created and your server and client apps updated, you can remove any `<Layout>` components from your individual pages.
### <0.9 to 0.10
##### app/template.html
* Your `<head>` element must contain `%sapper.base%` (see ([base URLs](docs#base-urls))
* Remove references to your service worker; this is now handled by `%sapper.scripts%`
##### Pages
* 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`.
### 0.6 to 0.7
Consult [sapper-template](https://github.com/sveltejs/sapper-template) for full examples of all the below points.
##### package.json
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.
##### Entry points
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.
```js
// app/client.js (formerly templates/main.js)
import { init } from 'sapper/runtime.js';
import { routes } from './manifest/client.js';
init(document.querySelector('#sapper'), routes);
if (module.hot) module.hot.accept(); // enable hot reloading
```
```js
// app/server.js (formerly server.js)
// Note that we're now using ES module syntax, because this
// file is processed by webpack like the rest of your app
import sapper from 'sapper';
import { routes } from './manifest/server.js';
// ..other imports
// we now pass the `routes` object to the Sapper middleware
app.use(sapper({
routes
}));
```
```js
// app/service-worker.js (formerly templates/service-worker.js)
import { assets, shell, timestamp, routes } from './manifest/service-worker.js';
// replace e.g. `__assets__` with `assets` in the rest of the file
```
##### Templates and error pages
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`.
For handling error states, we have a 'special' route: `routes/_error.html`.
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.
Note that you can now use `this.error(statusCode, error)` inside your `preload` functions.
##### Webpack configs
Your webpack configs now live in a `webpack` directory:
* `webpack.client.config.js` is now `webpack/client.config.js`
* `webpack.server.config.js` is now `webpack/server.config.js`
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.

4
site/cypress.json Normal file
View File

@@ -0,0 +1,4 @@
{
"baseUrl": "http://localhost:3000",
"video": false
}

View File

@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

View File

@@ -0,0 +1,19 @@
describe('Sapper template app', () => {
beforeEach(() => {
cy.visit('/')
});
it('has the correct <h1>', () => {
cy.contains('h1', 'Great success!')
});
it('navigates to /about', () => {
cy.get('nav a').contains('about').click();
cy.url().should('include', '/about');
});
it('navigates to /blog', () => {
cy.get('nav a').contains('blog').click();
cy.url().should('include', '/blog');
});
});

View File

@@ -0,0 +1,17 @@
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}

View File

@@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

View File

@@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')

3264
site/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

43
site/package.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "sapper.svelte.dev",
"description": "sapper.svelte.dev",
"version": "0.0.1",
"scripts": {
"dev": "sapper dev",
"export": "sapper export --legacy",
"stage": "netlify deploy --dir=__sapper__/export",
"deploy": "netlify deploy --dir=__sapper__/export --prod",
"prestage": "npm run export",
"predeploy": "npm run export",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
},
"dependencies": {
"@polka/send": "^0.4.0",
"compression": "^1.7.4",
"highlight.js": "^9.15.6",
"marked": "^0.6.2",
"polka": "^0.5.2",
"prismjs": "^1.16.0",
"sirv": "^0.4.2"
},
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/runtime": "^7.4.4",
"@sveltejs/site-kit": "^1.0.4",
"npm-run-all": "^4.1.5",
"rollup": "^1.11.3",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-node-resolve": "^4.2.3",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^4.0.4",
"sapper": "alpha",
"svelte": "^3.2.2"
}
}

87
site/rollup.config.js Normal file
View File

@@ -0,0 +1,87 @@
import resolve from 'rollup-plugin-node-resolve';
import replace from 'rollup-plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true
}),
resolve(),
commonjs(),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [
['@babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
generate: 'ssr',
dev
}),
resolve(),
commonjs()
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
commonjs(),
!dev && terser()
]
}
};

6
site/src/client.js Normal file
View File

@@ -0,0 +1,6 @@
import '@sveltejs/site-kit/base.css';
import * as sapper from '@sapper/app';
sapper.start({
target: document.querySelector('#sapper')
});

View File

@@ -0,0 +1,71 @@
<script>
const dev = process.env.NODE_ENV === 'development';
export let status;
export let error;
// we don't want to use <svelte:window bind:online> here,
// because we only care about the online state when
// the page first loads
let online = typeof navigator !== 'undefined'
? navigator.onLine
: true;
</script>
<style>
.container {
padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
}
h1, p { margin: 0 auto }
h1 {
font-size: 2.8em;
font-weight: 300;
margin: 0 0 0.5em 0;
}
p { margin: 1em auto }
.error {
background-color: #da106e;
color: white;
padding: 12px 16px;
font: 600 16px/1.7 var(--font);
border-radius: 2px;
}
/* @media (min-width: 480px) {
h1 { font-size: 4em }
} */
</style>
<svelte:head>
<title>{status}</title>
</svelte:head>
<div class="container">
{#if online}
<h1>Yikes!</h1>
{#if error.message}
<p class="error">{status}: {error.message}</p>
{:else}
<p class="error">Encountered a {status} error</p>
{/if}
{#if dev && error.stack}
<pre>{error.stack}</pre>
{:else}
{#if status >= 500}
<p>Please try reloading the page.</p>
{/if}
<p>If the error persists, please drop by <a href="https://discord.gg/yy75DKs">Discord chatroom</a> and let us know, or raise an issue on <a href="https://github.com/sveltejs/svelte">GitHub</a>. Thanks!</p>
{/if}
{:else}
<h1>It looks like you're offline</h1>
<p>Reload the page once you've found the internet.</p>
{/if}
</div>

View File

@@ -0,0 +1,40 @@
<script>
import { page } from '@sapper/app';
import { Icons, Icon, Nav, NavItem } from '@sveltejs/site-kit';
export let segment;
</script>
<style>
:global(html) {
--prime: rgb(21, 151, 148) !important; /* TODO remove .theme-default from shared, so we don't need !important */
}
main {
position: relative;
margin: 0 auto;
/* padding: var(--nav-h) var(--side-nav) 0 var(--side-nav); */
padding: var(--nav-h) 0 0 0;
overflow-x: hidden;
}
</style>
<Icons/>
<Nav {segment} {page} logo="sapper-logo-horizontal.svg">
<NavItem segment="docs">Docs</NavItem>
<NavItem external="https://svelte.dev">Svelte</NavItem>
<NavItem external="https://discord.gg/yy75DKs" title="Discord Chat">
<Icon name="message-square"/>
</NavItem>
<NavItem external="https://github.com/sveltejs/sapper" title="GitHub Repo">
<Icon name="github"/>
</NavItem>
</Nav>
<main>
<slot></slot>
</main>

View File

@@ -0,0 +1,14 @@
import send from '@polka/send';
import generate_docs from '../../utils/generate_docs.js';
let json;
export function get(req, res) {
if (!json || process.env.NODE_ENV !== 'production') {
json = JSON.stringify(generate_docs('docs')); // TODO it errors if I send the non-stringified value
}
send(res, 200, json, {
'Content-Type': 'application/json'
});
}

View File

@@ -0,0 +1,22 @@
<script context="module">
export async function preload() {
const sections = await this.fetch(`docs.json`).then(r => r.json());
return { sections };
}
</script>
<script>
import { Docs } from '@sveltejs/site-kit'
export let sections;
</script>
<svelte:head>
<title>Docs • Sapper</title>
<meta name="twitter:title" content="Sapper docs">
<meta name="twitter:description" content="The next small thing in web development">
<meta name="Description" content="The next small thing in web development">
</svelte:head>
<Docs {sections}/>

View File

@@ -0,0 +1,64 @@
<script>
import { Hero, Blurb } from '@sveltejs/site-kit';
</script>
<style>
</style>
<svelte:head>
<title>Sapper • The next small thing in web development</title>
</svelte:head>
<Hero
title="Sapper"
tagline="The next small thing in web development"
outline="sapper-logo-outline.svg"
logotype="sapper-logotype.svg"
/>
<Blurb>
<a href="https://svelte.dev" slot="one">
<h2>Powered by Svelte</h2>
<p>Sapper is an application framework powered by Svelte — build bigger apps with a smaller footprint</p>
<span class="learn-more">learn more</span>
</a>
<a href="docs" slot="two">
<h2>Best of both worlds</h2>
<p>All the SEO and progressive enhancement of a server-rendered app, with the slick navigation of an SPA</p>
<span class="learn-more">learn more</span>
</a>
<a href="docs" slot="three">
<h2>Build fast</h2>
<p>Hit the ground running with advanced routing, server-side rendering, code-splitting, offline support and more</p>
<span class="learn-more">learn more</span>
</a>
<div class="description" slot="what">
<p>Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.</p>
<p>Unlike single-page apps, Sapper doesn't compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.</p>
<p><a href="https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework">Read the introductory blog post</a> to learn more.</p>
</div>
<div style="grid-area: start; display: flex; flex-direction: column; min-width: 0" slot="how">
<pre class="language-bash" style="margin: 0 0 1em 0; min-width: 0; min-height: 0">
# for Rollup
npx degit sveltejs/sapper-template#rollup my-app
# for webpack
npx degit sveltejs/sapper-template#webpack my-app
cd my-app
npm install
npm run dev & open http://localhost:3000
</pre>
<p class="cta"><a rel="prefetch" href="docs">Learn Sapper</a></p>
</div>
</Blurb>

View File

@@ -0,0 +1,14 @@
import send from '@polka/send';
import generate_docs from '../../utils/generate_docs.js';
let json;
export function get(req, res) {
if (!json || process.env.NODE_ENV !== 'production') {
json = JSON.stringify(generate_docs('migrating')); // TODO it errors if I send the non-stringified value
}
send(res, 200, json, {
'Content-Type': 'application/json'
});
}

View File

@@ -0,0 +1,22 @@
<script context="module">
export async function preload() {
const sections = await this.fetch(`migrating.json`).then(r => r.json());
return { sections };
}
</script>
<script>
import { Docs } from '@sveltejs/site-kit'
export let sections;
</script>
<svelte:head>
<title>Migration • Sapper</title>
<meta name="twitter:title" content="Sapper migration guides">
<meta name="twitter:description" content="The next small thing in web development">
<meta name="Description" content="The next small thing in web development">
</svelte:head>
<Docs {sections}/>

17
site/src/server.js Normal file
View File

@@ -0,0 +1,17 @@
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
polka() // You can also use Express
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});

View File

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

52
site/src/template.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang='en' class="theme-default typo-default">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta name='theme-color' content='#159794'>
%sapper.base%
<link href=prism.css rel=stylesheet>
<link rel='manifest' href='manifest.json'>
<link rel='icon' type='image/png' href='favicon.png'>
<meta name='twitter:card' content='summary_large_image'>
<meta name='twitter:site' content='@sveltejs'>
<meta name='twitter:creator' content='@sveltejs'>
<meta name='twitter:image' content='https://sapper.svelte.dev/images/twitter-card.png'>
<!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is
lazily loaded when it precaches secondary pages -->
%sapper.styles%
<style>
.hljs, .hljs-subst { color: #333; }
.hljs-comment { color: #999; }
.hljs-tag { color: #170; }
.hljs-keyword { color: #708; }
.hljs-attr { color: #333; }
.hljs-number { color: #164; }
.hljs-type, .hljs-string, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion { color: rgb(16,94,16); }
.hljs-title, .hljs-section { color: rgb(16,94,16); }
.hljs-literal { color: #170; }
.hljs-meta { color: #555; }
.hljs-meta-string { color: #555; }
</style>
<!-- This contains the contents of the <svelte:head> component, if
the current page has one -->
%sapper.head%
</head>
<body>
<!-- The application will be rendered inside this element,
because `app/client.js` references it -->
<div id='sapper'>%sapper.html%</div>
<!-- Sapper creates a <script> tag containing `app/client.js`
and anything else it needs to hydrate the app and
initialise the router -->
%sapper.scripts%
</body>
</html>

View File

@@ -0,0 +1,158 @@
// TODO put this in site-kit? svelte.dev uses Prism instead of hljs
import fs from 'fs';
import path from 'path';
import { SLUG_SEPARATOR, SLUG_PRESERVE_UNICODE } from '../../config';
import { extract_frontmatter, extract_metadata, langs, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
import { make_session_slug_processor } from '@sveltejs/site-kit/utils/slug';
import marked from 'marked';
import hljs from 'highlight.js';
const escaped = {
'"': '&quot;',
"'": '&#39;',
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
};
const unescaped = Object.keys(escaped).reduce(
(unescaped, key) => ((unescaped[escaped[key]] = key), unescaped),
{}
);
function unescape(str) {
return String(str).replace(/&.+?;/g, match => unescaped[match] || match);
}
const block_types = [
'blockquote',
'html',
'heading',
'hr',
'list',
'listitem',
'paragraph',
'table',
'tablerow',
'tablecell'
];
export default function generate_docs(dir) {
const make_slug = make_session_slug_processor({
separator: SLUG_SEPARATOR,
preserve_unicode: SLUG_PRESERVE_UNICODE
});
return fs
.readdirSync(`content/${dir}`)
.filter(file => file[0] !== '.' && path.extname(file) === '.md')
.map(file => {
const markdown = fs.readFileSync(`content/${dir}/${file}`, 'utf-8');
const { content, metadata } = extract_frontmatter(markdown);
const section_slug = make_slug(metadata.title);
const subsections = [];
const renderer = new marked.Renderer();
let block_open = false;
renderer.link = link_renderer;
renderer.hr = () => {
block_open = true;
return '<div class="side-by-side"><div class="copy">';
};
renderer.code = (source, lang) => {
source = source.replace(/^ +/gm, match =>
match.split(' ').join('\t')
);
const lines = source.split('\n');
const meta = extract_metadata(lines[0], lang);
let prefix = '';
// let class_name = 'code-block';
let class_name = '';
if (meta) {
source = lines.slice(1).join('\n');
const filename = meta.filename || (lang === 'html' && 'App.svelte');
if (filename) {
prefix = `<span class='filename'>${prefix} ${filename}</span>`;
class_name += ' named';
}
}
if (meta && meta.hidden) {
return '';
}
const plang = langs[lang];
const { value: highlighted } = hljs.highlight(lang, source);
// const highlighted = PrismJS.highlight(
// source,
// PrismJS.languages[plang],
// lang
// );
const html = `<div class='${class_name}'>${prefix}<pre class='language-${plang}'><code>${highlighted}</code></pre></div>`;
if (block_open) {
block_open = false;
return `</div><div class="code">${html}</div></div>`;
}
return html;
};
renderer.heading = (text, level, rawtext) => {
const slug = level <= 4 && make_slug(rawtext);
if (level === 3 || level === 4) {
const title = unescape(
text
.replace(/<\/?code>/g, '')
.replace(/\.(\w+)(\((.+)?\))?/, (m, $1, $2, $3) => {
if ($3) return `.${$1}(...)`;
if ($2) return `.${$1}()`;
return `.${$1}`;
})
);
subsections.push({ slug, title, level });
}
return `
<h${level}>
<span id="${slug}" class="offset-anchor" ${level > 4 ? 'data-scrollignore' : ''}></span>
<a href="${dir}#${slug}" class="anchor" aria-hidden="true"></a>
${text}
</h${level}>`;
};
block_types.forEach(type => {
const fn = renderer[type];
renderer[type] = function() {
return fn.apply(this, arguments);
};
});
const html = marked(content, { renderer });
const hashes = {};
return {
html: html.replace(/@@(\d+)/g, (m, id) => hashes[id] || m),
metadata,
subsections,
slug: section_slug,
file,
};
});
}

BIN
site/static/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<g fill="none" stroke="white" stroke-width="2">
<line x1='5' y1='12' x2='19' y2='12' />
<polyline points='12 5 19 12 12 19' />
</g>
</svg>

After

Width:  |  Height:  |  Size: 275 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path style="fill: #aa1e1e" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
</svg>

After

Width:  |  Height:  |  Size: 229 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path style="stroke: #676778; stroke-width: 2; fill: none" d="M2,8 L12,16 L22,8"/>
</svg>

After

Width:  |  Height:  |  Size: 221 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path style="fill: #aa1e1e" d="M19.5,3.09L20.91,4.5L16.41,9H20V11H13V4H15V7.59L19.5,3.09M20.91,19.5L19.5,20.91L15,16.41V20H13V13H20V15H16.41L20.91,19.5M4.5,3.09L9,7.59V4H11V11H4V9H7.59L3.09,4.5L4.5,3.09M3.09,19.5L7.59,15H4V13H11V20H9V16.41L4.5,20.91L3.09,19.5Z" />
</svg>

After

Width:  |  Height:  |  Size: 405 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#aa1e1e" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
</svg>

After

Width:  |  Height:  |  Size: 212 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#999" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>

After

Width:  |  Height:  |  Size: 213 B

View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<g style="fill: none; stroke: white; stroke-width: 2;">
<path d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34' />
<polygon points='18 2 22 6 12 16 8 16 8 12 18 2' />
</g>
</svg>

After

Width:  |  Height:  |  Size: 333 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path style="fill: #aa1e1e" d="M9.5,13.09L10.91,14.5L6.41,19H10V21H3V14H5V17.59L9.5,13.09M10.91,9.5L9.5,10.91L5,6.41V10H3V3H10V5H6.41L10.91,9.5M14.5,13.09L19,17.59V14H21V21H14V19H17.59L13.09,14.5L14.5,13.09M13.09,9.5L17.59,5H14V3H21V10H19V6.41L14.5,10.91L13.09,9.5Z" />
</svg>

After

Width:  |  Height:  |  Size: 411 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#aa1e1e" d="M12,5C16.97,5 21,7.69 21,11C21,12.68 19.96,14.2 18.29,15.29C19.36,14.42 20,13.32 20,12.13C20,9.29 16.42,7 12,7V10L8,6L12,2V5M12,19C7.03,19 3,16.31 3,13C3,11.32 4.04,9.8 5.71,8.71C4.64,9.58 4,10.68 4,11.88C4,14.71 7.58,17 12,17V14L16,18L12,22V19Z" />
</svg>

After

Width:  |  Height:  |  Size: 415 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#aa1e1e" d="M3,4V12.5L6,9.5L9,13C10,14 10,15 10,15V21H14V14C14,14 14,13 13.47,12C12.94,11 12,10 12,10L9,6.58L11.5,4M18,4L13.54,8.47L14,9C14,9 14.93,10 15.47,11C15.68,11.4 15.8,11.79 15.87,12.13L21,7" />
</svg>

After

Width:  |  Height:  |  Size: 356 B

View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<g fill="none" stroke="#333">
<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
<path d="M7,12L17,12"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 290 B

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<circle id="spinner" cx="12" cy="12" r="8" fill="none" stroke="white" stroke-width="3" stroke-dasharray="50.2 50" />
<animate href="#spinner" attributeName="stroke-dashoffset" values="52;0;52" dur="5s" repeatCount="indefinite" />
<animateTransform href="#spinner" attributeName="transform" type="rotate" values="0 12 12;360 12 12;0 12 12" dur="9s" repeatCount="indefinite"/>
</svg>

After

Width:  |  Height:  |  Size: 519 B

View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#aa1e1e" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>

After

Width:  |  Height:  |  Size: 320 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

20
site/static/manifest.json Normal file
View File

@@ -0,0 +1,20 @@
{
"background_color": "#ffffff",
"theme_color": "#159794",
"name": "Sapper",
"short_name": "Sapper",
"display": "minimal-ui",
"start_url": "/",
"icons": [
{
"src": "images/sapper-android-chrome-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/sapper-android-chrome-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

96
site/static/prism.css Normal file
View File

@@ -0,0 +1,96 @@
/*
-----------------------------------------------
syntax-highlighting [prism]
-----------------------------------------------
*/
/* colors --------------------------------- */
pre[class*='language-'] {
--background: var(--back-light);
--base: hsl(45, 7%, 45%);
--comment: hsl(210, 25%, 60%);
--keyword: hsl(204, 58%, 45%);
--function: hsl(19, 67%, 45%);
--string: hsl(41, 37%, 45%);
--number: hsl(102, 27%, 50%);
--tags: var(--function);
--important: var(--string);
}
/* type-base ------------------------------ */
code[class*='language-'],
pre[class*='language-'] {
background: none;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
font: 300 var(--code-fs)/1.7 var(--font-mono);
color: var(--base);
tab-size: 2;
-moz-tab-size: 2;
-webkit-hyphens: none;
hyphens: none;
}
/* code-blocks ---------------------------- */
pre[class*='language-'] {
overflow: auto;
padding: 1.5rem 2rem;
margin: .8rem 0 2.4rem;
/* max-width: var(--code-w); */
border-radius: var(--border-r);
box-shadow: 1px 1px 1px rgba(68, 68, 68, .12) inset;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: var(--background);
}
/* tokens --------------------------------- */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: var(--comment) }
.token.punctuation { color: var(--base) }
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted { color: var(--tags) }
.token.boolean,
.token.number { color: var(--number) }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { color: var(--string) }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable { color: var(--base) }
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name { color: var(--function) }
.token.keyword { color: var(--keyword) }
.token.regex,
.token.important { color: var(--important) }
.token.important,
.token.bold { font-weight: bold }
.token.italic { font-style: italic }
.token.entity { cursor: help }

View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="svelte" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 519 139" style="enable-background:new 0 0 519 139;" xml:space="preserve">
<style type="text/css">
.st0{fill:#159497;}
.st1{fill:#FFFFFF;}
.st2{fill:#4A4A55;}
</style>
<path id="back" class="st0" d="M110.2,28.4C99.8,13.5,79.3,9.1,64.4,18.6L38.4,35.2c-7.1,4.5-12,11.7-13.5,20
c-1.2,6.9-0.2,14,3.1,20.2c-2.2,3.4-3.8,7.2-4.5,11.2c-1.5,8.4,0.5,17.1,5.5,24.1c10.4,14.9,30.9,19.3,45.8,9.8l26.1-16.6
c7.1-4.5,12-11.7,13.5-20c1.2-6.9,0.1-14-3.1-20.2c2.2-3.4,3.8-7.2,4.5-11.2C117.2,44.1,115.2,35.5,110.2,28.4"/>
<path id="front" class="st1" d="M61.9,112.2c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.3-14.5c0.1-0.8,0.4-1.6,0.6-2.4l0.5-1.5
l1.3,1c3.1,2.2,6.5,4,10.2,5.1l1,0.3l-0.1,1c-0.1,1.4,0.3,2.7,1.1,3.8c1.5,2.1,4.2,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l26-16.6
c1.3-0.8,2.2-2.1,2.4-3.6c0.3-1.5-0.1-3.1-1-4.4c-1.5-2.1-4.2-3.1-6.7-2.5c-0.6,0.2-1.1,0.4-1.6,0.7l-10,6.3c-1.6,1-3.4,1.8-5.3,2.3
c-8.4,2.2-17.3-1.1-22.2-8.2c-3-4.2-4.2-9.4-3.2-14.5c0.9-5,3.8-9.4,8.1-12.1L72,29.3c1.6-1,3.4-1.8,5.3-2.3
c8.4-2.2,17.3,1.1,22.2,8.2c3,4.2,4.2,9.4,3.3,14.5c-0.2,0.8-0.4,1.6-0.6,2.4l-0.5,1.5l-1.3-1c-3.1-2.3-6.5-4-10.2-5.1l-1-0.3l0.1-1
c0.1-1.4-0.3-2.8-1.1-3.9c-1.5-2.1-4.2-3.1-6.7-2.4c-0.6,0.2-1.1,0.4-1.6,0.7L53.8,57.3c-1.3,0.8-2.2,2.1-2.5,3.6
c-0.3,1.5,0.1,3.1,1,4.4c1.5,2.1,4.1,3.1,6.7,2.5c0.6-0.2,1.1-0.4,1.6-0.7l10-6.3c1.6-1,3.4-1.8,5.3-2.3c8.4-2.2,17.3,1.1,22.2,8.2
c3,4.2,4.2,9.4,3.3,14.5c-0.9,5-3.8,9.4-8.1,12.1l-26.1,16.6C65.6,110.9,63.8,111.7,61.9,112.2"/>
<g>
<path class="st2" d="M150.8,85.9l8.3-3.1c2.5,5.4,7.3,9,13.7,9c6.5,0,10.8-3.2,10.8-9.2c0-6.5-6.5-8.8-13.5-11.2
c-8.3-3-17.4-6.2-17.4-17.1c0-8.4,6.9-15.6,19-15.6c10.1,0,16.4,5,18.4,11.8l-8.2,2.7c-1.4-3.4-5.1-6-10.9-6
c-5.7,0-9.1,2.6-9.1,7.2c0,4.9,5.5,6.8,12,9c8.6,3.2,18.8,6.8,18.8,19.2c0,11.4-8.9,17.8-20.4,17.8
C161.9,100.4,153.8,94.8,150.8,85.9z"/>
<path class="st2" d="M241,85.7h-24.1l-4.9,13.7h-9.2l21.5-59.6h9.1L255,99.4h-9.2L241,85.7z M231,57.6c-0.7-1.9-1.6-4.7-2-6.7
c-0.5,2-1.4,4.8-2,6.7l-7.3,20.3h18.6L231,57.6z"/>
<path class="st2" d="M268.3,39.8h23.9c14.6,0,19.7,9.3,19.7,18.2c0,8.3-5.5,18.2-19.7,18.2h-15.1v23.2h-8.9V39.8z M302.8,58
c0-4.2-2.1-9.7-10-9.7h-15.6v19.4h15.6C300.2,67.7,302.8,62.6,302.8,58z"/>
<path class="st2" d="M326,39.8h23.9c14.6,0,19.7,9.3,19.7,18.2c0,8.3-5.5,18.2-19.7,18.2h-15.1v23.2H326V39.8z M360.4,58
c0-4.2-2.1-9.7-10-9.7h-15.6v19.4h15.6C357.9,67.7,360.4,62.6,360.4,58z"/>
<path class="st2" d="M383.7,39.8h37v8.3h-28.1v16.4h18.1v8.3h-18.1V91h30v8.3h-38.8V39.8z"/>
<path class="st2" d="M438.7,39.8h25.1c14.6,0,19.2,8.7,19.2,17.6c0,6.9-3.8,14.5-12.9,16.9l12.3,25.1h-10.1L460.5,75h-12.9v24.4
h-8.9V39.8z M464,66.5c7.4,0,9.9-4.5,9.9-9.1c0-4.2-2-9.1-9.9-9.1h-16.4v18.2H464z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

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