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

WIP towards 0.7 compatibility

Browse Source
This commit is contained in:
Rich Harris
2018-02-17 17:45:18 -05:00
parent c84ae160ef
commit 1f9b212794
15 changed files with 97 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/client.js Normal file
View File

@@ -0,0 +1,7 @@
import { init } from 'sapper/runtime.js';
import { routes } from './manifest/client.js';
// `routes` is an array of route objects injected by Sapper
init(document.querySelector('#sapper'), routes);
if (module.hot) module.hot.accept();

15
app/manifest/client.js Normal file
View File

@@ -0,0 +1,15 @@
// This file is generated by Sapper — do not edit it!
export const routes = [
{ pattern: /^\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_" */ '../../routes/index.html') },
{ pattern: /^\/4xx\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_4xx" */ '../../routes/4xx.html') },
{ pattern: /^\/5xx\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_5xx" */ '../../routes/5xx.html') },
{ pattern: /^\/about\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "about" */ '../../routes/about.html') },
{ pattern: /^\/blog\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "blog" */ '../../routes/blog/index.html') },
{ pattern: /^\/blog(?:\/([^\/]+))?\/?$/, params: match => ({ slug: match[1] }), load: () => import(/* webpackChunkName: "blog_$slug$" */ '../../routes/blog/[slug].html') }
];
if (module.hot) {
import('/Users/208311/Development/SVELTE/sapper/src/hmr-client.js').then(client => {
client.connect(23456);
});
}

20
app/manifest/server.js Normal file
View File

@@ -0,0 +1,20 @@
// This file is generated by Sapper — do not edit it!
import _ from '../../routes/index.html';
import _4xx from '../../routes/4xx.html';
import _5xx from '../../routes/5xx.html';
import about from '../../routes/about.html';
import blog from '../../routes/blog/index.html';
import * as api_blog_posts from '../../routes/api/blog-posts.js';
import * as api_blog_$slug$ from '../../routes/api/blog/[slug].js';
import blog_$slug$ from '../../routes/blog/[slug].html';
export const routes = [
{ id: '_', type: 'page', pattern: /^\/?$/, params: () => ({}), module: _ },
{ id: '_4xx', type: 'page', pattern: /^\/4xx\/?$/, params: () => ({}), module: _4xx },
{ id: '_5xx', type: 'page', pattern: /^\/5xx\/?$/, params: () => ({}), module: _5xx },
{ id: 'about', type: 'page', pattern: /^\/about\/?$/, params: () => ({}), module: about },
{ id: 'blog', type: 'page', pattern: /^\/blog\/?$/, params: () => ({}), module: blog },
{ id: 'api_blog_posts', type: 'route', pattern: /^\/api\/blog-posts\/?$/, params: () => ({}), module: api_blog_posts },
{ id: 'api_blog_$slug$', type: 'route', pattern: /^\/api\/blog(?:\/([^\/]+))?\/?$/, params: match => ({ slug: match[1] }), module: api_blog_$slug$ },
{ id: 'blog_$slug$', type: 'page', pattern: /^\/blog(?:\/([^\/]+))?\/?$/, params: match => ({ slug: match[1] }), module: blog_$slug$ }
];

33
app/manifest/service-worker.js Normal file
View File

@@ -0,0 +1,33 @@
// This file is generated by Sapper — do not edit it!
export const timestamp = 1518906946124;
export const assets = [
"favicon.png",
"global.css",
"great-success.png",
"manifest.json",
"svelte-logo-192.png",
"svelte-logo-512.png"
];
export const shell = [
"/client/_.0.15d69aa40f5cf2c235b5.js",
"/client/blog.1.15d69aa40f5cf2c235b5.js",
"/client/blog_$slug$.2.15d69aa40f5cf2c235b5.js",
"/client/about.3.15d69aa40f5cf2c235b5.js",
"/client/_5xx.4.15d69aa40f5cf2c235b5.js",
"/client/_4xx.5.15d69aa40f5cf2c235b5.js",
"/client/6.6.15d69aa40f5cf2c235b5.js",
"/client/main.15d69aa40f5cf2c235b5.js",
"/client/0.b91f3b4b0888fc3dc282.hot-update.js",
"/client/b91f3b4b0888fc3dc282.hot-update.json"
];
export const routes = [
{ pattern: /^\/?$/ },
{ pattern: /^\/4xx\/?$/ },
{ pattern: /^\/5xx\/?$/ },
{ pattern: /^\/about\/?$/ },
{ pattern: /^\/blog\/?$/ },
{ pattern: /^\/blog(?:\/([^\/]+))?\/?$/ }
];

19
server.js → app/server.js
View File

@@ -1,8 +1,11 @@
const fs = require('fs');
const app = require('express')();
const compression = require('compression');
const sapper = require('sapper');
const static = require('serve-static');
import fs from 'fs';
import express from 'express';
import compression from 'compression';
import sapper from 'sapper';
import serve from 'serve-static';
import { routes } from './manifest/server.js';
const app = express();
const { PORT = 3000 } = process.env;
@@ -15,9 +18,11 @@ global.fetch = (url, opts) => {
app.use(compression({ threshold: 0 }));
app.use(static('assets'));
app.use(serve('assets'));
app.use(sapper());
app.use(sapper({
routes
}));
app.listen(PORT, () => {
console.log(`listening on port ${PORT}`);

9
templates/service-worker.js → app/service-worker.js
View File

@@ -1,15 +1,12 @@
const timestamp = '__timestamp__';
import { timestamp, assets, shell, routes } from './manifest/service-worker.js';
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by webpack,
// `assets` is an array of everything in the `assets` directory
const to_cache = __shell__.concat(__assets__);
const to_cache = shell.concat(assets);
const cached = new Set(to_cache);
// `routes` is an array of `{ pattern: RegExp }` objects that
// match the pages in your app
const routes = __routes__;
self.addEventListener('install', event => {
event.waitUntil(
caches

6
templates/2xx.html → app/template.html
View File

@@ -10,9 +10,9 @@
<link rel='icon' type='image/png' href='/favicon.png'>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
// if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('/service-worker.js');
// }
</script>
<!-- Sapper generates a <style> tag containing critical CSS

4
package.json
View File

@@ -3,7 +3,7 @@
"description": "TODO",
"version": "0.0.1",
"scripts": {
"dev": "node server.js",
"dev": "sapper dev",
"build": "sapper build",
"start": "cross-env NODE_ENV=production node server.js",
"cy:run": "cypress run",
@@ -19,7 +19,7 @@
"glob": "^7.1.2",
"node-fetch": "^2.0.0",
"npm-run-all": "^4.1.2",
"sapper": "^0.6.3",
"sapper": "^0.6.4",
"serve-static": "^1.13.1",
"style-loader": "^0.20.1",
"svelte": "^1.51.1",

1
routes/4xx.html Normal file
View File

@@ -0,0 +1 @@
TODO 4xx

1
routes/5xx.html Normal file
View File

@@ -0,0 +1 @@
TODO 5xx

46
templates/4xx.html
View File

@@ -1,46 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<meta name='theme-color' content='#aa1e1e'>
<link rel='manifest' href='/manifest.json'>
<link rel='icon' type='image/png' href='/favicon.png'>
<!-- %sapper.status% is the HTTP status code, e.g. 404 -->
<title>%sapper.status%</title>
<style>
body {
max-width: 800px;
padding: 1em;
margin: 0 auto;
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background-color: #f4f4f4;
box-sizing: border-box;
}
h1 {
color: rgb(170,30,30);
border-bottom: 1px solid #aaa;
padding: 0 0 0.5em 0;
margin: 1em 0;
}
pre {
font-family: Menlo, monospace;
font-size: 14px;
line-height: 1.2;
overflow-x: auto;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>%sapper.title%</h1>
<p>Could not %sapper.method% %sapper.url%</p>
%sapper.scripts%
</body>
</html>

47
templates/5xx.html
View File

@@ -1,47 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<meta name='theme-color' content='#aa1e1e'>
<link rel='manifest' href='/manifest.json'>
<link rel='icon' type='image/png' href='/favicon.png'>
<title>%sapper.status%</title>
<style>
body {
max-width: 800px;
padding: 1em;
margin: 0 auto;
box-sizing: border-box;
}
h1 {
color: rgb(170,30,30);
border-bottom: 1px solid #aaa;
padding: 0 0 0.5em 0;
margin: 1em 0;
}
pre {
font-family: Menlo, monospace;
font-size: 14px;
line-height: 1.2;
overflow-x: auto;
white-space: pre-wrap;
}
.stack {
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<h1>%sapper.title%</h1>
<pre>%sapper.error%</pre>
<pre class='stack'>%sapper.stack%</pre>
</body>
</html>

4
templates/main.js
View File

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

0
webpack.client.config.js → webpack/client.config.js
View File

0
webpack.server.config.js → webpack/server.config.js
View File