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

Merge pull request #132 from sveltejs/v3

Browse Source 
Update for v3
This commit is contained in:
Rich Harris
2019-05-02 09:24:14 -04:00
committed by GitHub
parent 5548d71e70 b0520f447e
commit 1b83796dba
16 changed files with 4077 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.travis.yml
View File

@@ -8,4 +8,5 @@ env:
branches:
only:
- master
- v3
script: _template/build.sh

3950
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

8
package_template.json
View File

@@ -13,13 +13,13 @@
},
"dependencies": {
"compression": "^1.7.1",
"polka": "^0.4.0",
"polka": "^0.5.0",
"sirv": "^0.4.0"
},
"devDependencies": {
"npm-run-all": "^4.1.5",
"sapper": "^0.24.2",
"svelte": "^2.0.0"
"sapper": "alpha",
"svelte": "^3.0.0"
},
"merge-configs": {
"rollup": {
@@ -40,7 +40,7 @@
"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-svelte": "^5.0.1",
"rollup-plugin-terser": "^1.0.1"
"rollup-plugin-terser": "^4.0.4"
}
},
"webpack": {

2
rollup.config.js
View File

@@ -29,7 +29,7 @@ export default {
commonjs(),
legacy && babel({
extensions: ['.js', '.html'],
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/@babel/**'],
presets: [

2
src/client.js
View File

@@ -1,4 +1,4 @@
import * as sapper from '../__sapper__/client.js';
import * as sapper from '@sapper/app';
sapper.start({
target: document.querySelector('#sapper')

24
src/components/Nav.html → src/components/Nav.svelte
View File

@@ -1,13 +1,6 @@
<nav>
<ul>
<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
</ul>
</nav>
<script>
export let segment;
</script>
<style>
nav {
@@ -54,3 +47,14 @@
display: block;
}
</style>
<nav>
<ul>
<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
</ul>
</nav>

33
src/routes/_error.html → src/routes/_error.svelte
View File

@@ -1,14 +1,9 @@
<svelte:head>
<title>{status}</title>
</svelte:head>
<script>
export let status;
export let error;
<h1>{status}</h1>
<p>{error.message}</p>
{#if dev && error.stack}
<pre>{error.stack}</pre>
{/if}
const dev = process.env.NODE_ENV === 'development';
</script>
<style>
h1, p {
@@ -32,10 +27,14 @@
}
</style>
<script>
export default {
helpers: {
dev: process.env.NODE_ENV === 'development'
}
};
</script>
<svelte:head>
<title>{status}</title>
</svelte:head>
<h1>{status}</h1>
<p>{error.message}</p>
{#if dev && error.stack}
<pre>{error.stack}</pre>
{/if}

24
src/routes/_layout.html
View File

@@ -1,24 +0,0 @@
<Nav segment={child.segment}/>
<main>
<svelte:component this={child.component} {...child.props}/>
</main>
<style>
main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}
</style>
<script>
export default {
components: {
Nav: '../components/Nav.html'
}
};
</script>

22
src/routes/_layout.svelte Normal file
View File

@@ -0,0 +1,22 @@
<script>
import Nav from '../components/Nav.svelte';
export let segment;
</script>
<style>
main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}
</style>
<Nav {segment}/>
<main>
<slot></slot>
</main>

0
src/routes/about.html → src/routes/about.svelte
View File

46
src/routes/blog/[slug].html → src/routes/blog/[slug].svelte
View File

@@ -1,12 +1,21 @@
<svelte:head>
<title>{post.title}</title>
</svelte:head>
<script context="module">
export async function preload({ params, query }) {
// the `slug` parameter is available because
// this file is called [slug].html
const res = await this.fetch(`blog/${params.slug}.json`);
const data = await res.json();
<h1>{post.title}</h1>
if (res.status === 200) {
return { post: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<div class='content'>
{@html post.html}
</div>
<script>
export let post;
</script>
<style>
/*
@@ -44,19 +53,12 @@
}
</style>
<script>
export default {
async preload({ params, query }) {
// the `slug` parameter is available because
// this file is called [slug].html
const res = await this.fetch(`blog/${params.slug}.json`);
const data = await res.json();
<svelte:head>
<title>{post.title}</title>
</svelte:head>
if (res.status === 200) {
return { post: data };
} else {
this.error(res.status, data.message);
}
}
};
</script>
<h1>{post.title}</h1>
<div class='content'>
{@html post.html}
</div>

36
src/routes/blog/index.html → src/routes/blog/index.svelte
View File

@@ -1,3 +1,22 @@
<script context="module">
export function preload({ params, query }) {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
});
}
</script>
<script>
export let posts;
</script>
<style>
ul {
margin: 0 0 1em 0;
line-height: 1.5;
}
</style>
<svelte:head>
<title>Blog</title>
</svelte:head>
@@ -13,20 +32,3 @@
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
{/each}
</ul>
<style>
ul {
margin: 0 0 1em 0;
line-height: 1.5;
}
</style>
<script>
export default {
preload({ params, query }) {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
});
}
};
</script>

26
src/routes/index.html → src/routes/index.svelte
View File

@@ -1,16 +1,3 @@
<svelte:head>
<title>Sapper project template</title>
</svelte:head>
<h1>Great success!</h1>
<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
<style>
h1, figure, p {
text-align: center;
@@ -44,3 +31,16 @@
}
}
</style>
<svelte:head>
<title>Sapper project template</title>
</svelte:head>
<h1>Great success!</h1>
<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>

2
src/server.js
View File

@@ -1,7 +1,7 @@
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '../__sapper__/server.js';
import * as sapper from '@sapper/server';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

2
src/service-worker.js
View File

@@ -1,4 +1,4 @@
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
import { timestamp, files, shell, routes } from '@sapper/service-worker';
const ASSETS = `cache${timestamp}`;

17
webpack.config.js
View File

@@ -5,18 +5,18 @@ const pkg = require('./package.json');
const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
const mainFields = ['svelte', 'module', 'browser', 'main'];
module.exports = {
client: {
entry: config.client.entry(),
output: config.client.output(),
resolve: {
extensions: ['.js', '.json', '.html'],
mainFields: ['svelte', 'module', 'browser', 'main']
},
resolve: { extensions, mainFields },
module: {
rules: [
{
test: /\.html$/,
test: /\.(svelte|html)$/,
use: {
loader: 'svelte-loader',
options: {
@@ -43,15 +43,12 @@ module.exports = {
entry: config.server.entry(),
output: config.server.output(),
target: 'node',
resolve: {
extensions: ['.js', '.json', '.html'],
mainFields: ['svelte', 'module', 'browser', 'main']
},
resolve: { extensions, mainFields },
externals: Object.keys(pkg.dependencies).concat('encoding'),
module: {
rules: [
{
test: /\.html$/,
test: /\.(svelte|html)$/,
use: {
loader: 'svelte-loader',
options: {