mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-16 21:04:34 +00:00
@@ -1,5 +1,5 @@
|
||||
import * as path from 'path';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import puppeteer from 'puppeteer';
|
||||
import * as ports from 'port-authority';
|
||||
import { fork, ChildProcess } from 'child_process';
|
||||
|
||||
@@ -64,11 +64,11 @@ export class AppRunner {
|
||||
base: `http://localhost:${this.port}`,
|
||||
|
||||
// helpers
|
||||
start: () => this.page.evaluate(() => start()),
|
||||
prefetchRoutes: () => this.page.evaluate(() => prefetchRoutes()),
|
||||
prefetch: (href: string) => this.page.evaluate((href: string) => prefetch(href), href),
|
||||
goto: (href: string) => this.page.evaluate((href: string) => goto(href), href),
|
||||
title: () => this.page.$eval('h1', node => node.textContent)
|
||||
start: () => this.page.evaluate(() => start()).then(() => void 0),
|
||||
prefetchRoutes: () => this.page.evaluate(() => prefetchRoutes()).then(() => void 0),
|
||||
prefetch: (href: string) => this.page.evaluate((href: string) => prefetch(href), href).then(() => void 0),
|
||||
goto: (href: string) => this.page.evaluate((href: string) => goto(href), href).then(() => void 0),
|
||||
title: () => this.page.$eval('h1', node => node.textContent).then(serializable => String(serializable))
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1 +1,5 @@
|
||||
<h1>{params.slug.toUpperCase()}</h1>
|
||||
<script>
|
||||
import { page } from '@sapper/app';
|
||||
</script>
|
||||
|
||||
<h1>{$page.params.slug.toUpperCase()}</h1>
|
||||
@@ -1,11 +1,13 @@
|
||||
<h1>{letter}</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return this.fetch('b.json').then(r => r.json()).then(letter => {
|
||||
return { letter };
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return this.fetch('b.json').then(r => r.json()).then(letter => {
|
||||
return { letter };
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
export let letter;
|
||||
</script>
|
||||
|
||||
<h1>{letter}</h1>
|
||||
@@ -1,19 +1,17 @@
|
||||
<button class='del' on:click='del()'>delete</button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
oncreate() {
|
||||
window.deleted = null;
|
||||
},
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
methods: {
|
||||
del() {
|
||||
fetch(`delete-test/42.json`, { method: 'DELETE' })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
window.deleted = data;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
onMount(() => {
|
||||
window.deleted = null;
|
||||
});
|
||||
|
||||
function del() {
|
||||
fetch(`delete-test/42.json`, { method: 'DELETE' })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
window.deleted = data;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="del" on:click={del}>delete</button>
|
||||
@@ -1 +1,5 @@
|
||||
<h1>{JSON.stringify(query)}</h1>
|
||||
<script>
|
||||
import { page } from '@sapper/app';
|
||||
</script>
|
||||
|
||||
<h1>{JSON.stringify($page.query)}</h1>
|
||||
@@ -1,9 +1,7 @@
|
||||
$&
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return '$&';
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return '$&';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
$&
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
// `app.shell` is an array of all the files generated by webpack,
|
||||
// `app.files` is an array of everything in the `static` directory
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -52,7 +52,6 @@ self.addEventListener('fetch', event => {
|
||||
// which Sapper has generated for you. It's not right for every
|
||||
// app, but if it's right for yours then uncomment this section
|
||||
/*
|
||||
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
|
||||
event.respondWith(caches.match('/index.html'));
|
||||
return;
|
||||
}
|
||||
@@ -65,7 +64,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -20,19 +20,18 @@ describe('basics', function() {
|
||||
let prefetchRoutes: () => Promise<void>;
|
||||
let prefetch: (href: string) => Promise<void>;
|
||||
let goto: (href: string) => Promise<void>;
|
||||
let title: () => Promise<string>;
|
||||
|
||||
// hooks
|
||||
before(async () => {
|
||||
await build({ cwd: __dirname });
|
||||
|
||||
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
|
||||
({ base, page, start, prefetchRoutes, prefetch, goto } = await runner.start());
|
||||
({ base, page, start, prefetchRoutes, prefetch, goto, title } = await runner.start());
|
||||
});
|
||||
|
||||
after(() => runner.end());
|
||||
|
||||
const title = () => page.$eval('h1', node => node.textContent);
|
||||
|
||||
it('serves /', async () => {
|
||||
await page.goto(base);
|
||||
|
||||
@@ -262,7 +261,7 @@ describe('basics', function() {
|
||||
await page.goto(`${base}/unsafe-replacement`);
|
||||
await start();
|
||||
|
||||
const html = await page.evaluate(() => document.body.innerHTML);
|
||||
const html = String(await page.evaluate(() => document.body.innerHTML));
|
||||
assert.equal(html.indexOf('%sapper'), -1);
|
||||
});
|
||||
});
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka', 'cookie'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka', 'cookie']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<h1>{message}</h1>
|
||||
<script context="module">
|
||||
export function preload({ query }) {
|
||||
return this.fetch(`credentials/test.json`, {
|
||||
credentials: query.creds
|
||||
}).then(r => r.json());
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload({ query }) {
|
||||
return this.fetch(`credentials/test.json`, {
|
||||
credentials: query.creds
|
||||
}).then(r => r.json());
|
||||
}
|
||||
};
|
||||
</script>
|
||||
export let message;
|
||||
</script>
|
||||
|
||||
<h1>{message}</h1>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<svelte:component this={Title}/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
oncreate() {
|
||||
import('./_components/Title.html').then(({ default: Title }) => {
|
||||
this.set({ Title });
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let Title;
|
||||
|
||||
onMount(() => {
|
||||
import('./_components/Title.html').then(mod => {
|
||||
Title = mod.default;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:component this={Title}/>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<h1>{slug} {JSON.stringify(query)}</h1>
|
||||
<script context="module">
|
||||
export function preload({ params }) {
|
||||
return {
|
||||
slug: params.slug
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload({ params }) {
|
||||
return {
|
||||
slug: params.slug
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
import { page } from '@sapper/app';
|
||||
export let slug;
|
||||
</script>
|
||||
|
||||
<h1>{slug} {JSON.stringify($page.query)}</h1>
|
||||
@@ -1,11 +1,13 @@
|
||||
<h1>{phrase}</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return this.fetch('fünke.json').then(r => r.json()).then(phrase => {
|
||||
return { phrase };
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return this.fetch('fünke.json').then(r => r.json()).then(phrase => {
|
||||
return { phrase };
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
export let phrase;
|
||||
</script>
|
||||
|
||||
<h1>{phrase}</h1>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
<h1>{post.title}</h1>
|
||||
<script context="module">
|
||||
export function preload({ params }) {
|
||||
const { slug } = params;
|
||||
|
||||
return this.fetch(`blog/${slug}.json`).then(r => {
|
||||
return r.json().then(data => {
|
||||
if (r.status !== 200) {
|
||||
this.error(r.status, data);
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload({ params }) {
|
||||
const { slug } = params;
|
||||
export let post;
|
||||
</script>
|
||||
|
||||
return this.fetch(`blog/${slug}.json`).then(r => {
|
||||
return r.json().then(data => {
|
||||
if (r.status !== 200) {
|
||||
this.error(r.status, data);
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<h1>{post.title}</h1>
|
||||
@@ -1,7 +1,5 @@
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
this.error(420, 'Enhance your calm');
|
||||
}
|
||||
};
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
this.error(420, 'Enhance your calm');
|
||||
}
|
||||
</script>
|
||||
@@ -1,7 +1,5 @@
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
throw new Error('nope');
|
||||
}
|
||||
};
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
throw new Error('nope');
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<h1>{post.title}</h1>
|
||||
<script context="module">
|
||||
export function preload({ params }) {
|
||||
return this.fetch(`blog/${params.slug}.json`).then(r => r.json()).then(post => {
|
||||
return { post };
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload({ params }) {
|
||||
return this.fetch(`blog/${params.slug}.json`).then(r => r.json()).then(post => {
|
||||
return { post };
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
export let post;
|
||||
</script>
|
||||
|
||||
<h1>{post.title}</h1>
|
||||
@@ -1,15 +1,17 @@
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return this.fetch('blog.json').then(r => r.json()).then(posts => {
|
||||
return { posts };
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export let posts;
|
||||
</script>
|
||||
|
||||
<h1>blog</h1>
|
||||
|
||||
{#each posts as post}
|
||||
<p><a href="blog/{post.slug}">{post.title}</a></p>
|
||||
{/each}
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return this.fetch('blog.json').then(r => r.json()).then(posts => {
|
||||
return { posts };
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{/each}
|
||||
@@ -1,6 +1,6 @@
|
||||
import sirv from 'sirv';
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT, NODE_ENV } = process.env;
|
||||
const dev = NODE_ENV === 'development';
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<h1>{letter}</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return this.fetch('b.json').then(r => r.json()).then(letter => {
|
||||
return { letter };
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return this.fetch('b.json').then(r => r.json()).then(letter => {
|
||||
return { letter };
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
export let letter;
|
||||
</script>
|
||||
|
||||
<h1>{letter}</h1>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
<span>z: {segment} {count}</span>
|
||||
<a href="foo/bar/qux">click me</a>
|
||||
|
||||
<script>
|
||||
<script context="module">
|
||||
import counts from '../_counts.js';
|
||||
|
||||
export default {
|
||||
preload() {
|
||||
return {
|
||||
count: counts.z += 1
|
||||
};
|
||||
},
|
||||
export function preload() {
|
||||
return {
|
||||
count: counts.z += 1
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
oncreate() {
|
||||
this.set({
|
||||
segment: this.get().params.z
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
import { page } from '@sapper/app';
|
||||
|
||||
export let count;
|
||||
</script>
|
||||
|
||||
<span>z: {$page.params.z} {count}</span>
|
||||
<a href="foo/bar/qux">click me</a>
|
||||
@@ -1,22 +1,21 @@
|
||||
<span>y: {segment} {count}</span>
|
||||
<svelte:component this={child.component} {...child.props}/>
|
||||
|
||||
<span>child segment: {child.segment}</span>
|
||||
|
||||
<script>
|
||||
<script context="module">
|
||||
import counts from '../_counts.js';
|
||||
|
||||
export default {
|
||||
preload() {
|
||||
return {
|
||||
count: counts.y += 1
|
||||
};
|
||||
},
|
||||
export function preload() {
|
||||
return {
|
||||
count: counts.y += 1
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
oncreate() {
|
||||
this.set({
|
||||
segment: this.get().params.y
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
import { page } from '@sapper/app';
|
||||
|
||||
export let count;
|
||||
export let child;
|
||||
</script>
|
||||
|
||||
<span>y: {$page.params.y} {count}</span>
|
||||
<svelte:component this={child.component} {...child.props}/>
|
||||
|
||||
<span>child segment: {child.segment}</span>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -26,10 +26,18 @@ describe('layout', function() {
|
||||
|
||||
it('only recreates components when necessary', async () => {
|
||||
await page.goto(`${base}/foo/bar/baz`);
|
||||
await start();
|
||||
|
||||
const text1 = await page.evaluate(() => document.querySelector('#sapper').textContent);
|
||||
assert.deepEqual(text1.split('\n').filter(Boolean), [
|
||||
const text1 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
|
||||
assert.deepEqual(text1.split('\n').filter(Boolean).map(str => str.trim()), [
|
||||
'y: bar 1',
|
||||
'z: baz 1',
|
||||
'click me',
|
||||
'child segment: baz'
|
||||
]);
|
||||
|
||||
await start();
|
||||
const text2 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
|
||||
assert.deepEqual(text2.split('\n').filter(Boolean).map(str => str.trim()), [
|
||||
'y: bar 1',
|
||||
'z: baz 1',
|
||||
'click me',
|
||||
@@ -39,8 +47,8 @@ describe('layout', function() {
|
||||
await page.click('[href="foo/bar/qux"]');
|
||||
await wait(50);
|
||||
|
||||
const text2 = await page.evaluate(() => document.querySelector('#sapper').textContent);
|
||||
assert.deepEqual(text2.split('\n').filter(Boolean), [
|
||||
const text3 = String(await page.evaluate(() => document.querySelector('#sapper').textContent));
|
||||
assert.deepEqual(text3.split('\n').filter(Boolean).map(str => str.trim()), [
|
||||
'y: bar 1',
|
||||
'z: qux 2',
|
||||
'click me',
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
{#if preloading}
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return {
|
||||
rootPreloadFunctionRan: true
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { preloading } from '@sapper/app';
|
||||
|
||||
export let child;
|
||||
export let rootPreloadFunctionRan;
|
||||
</script>
|
||||
|
||||
{#if $preloading}
|
||||
<progress class='preloading-progress' value=0.5/>
|
||||
{/if}
|
||||
|
||||
<svelte:component this={child.component} {rootPreloadFunctionRan} {...child.props}/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return {
|
||||
rootPreloadFunctionRan: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<svelte:component this={child.component} {rootPreloadFunctionRan} {...child.props}/>
|
||||
@@ -1 +1,5 @@
|
||||
<h1>{params.slug}</h1>
|
||||
<script>
|
||||
import { page } from '@sapper/app';
|
||||
</script>
|
||||
|
||||
<h1>{$page.params.slug}</h1>
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
<h1>{foo.bar()}</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
class Foo {
|
||||
bar() {
|
||||
return 42;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
foo: new Foo()
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
class Foo {
|
||||
bar() {
|
||||
return 42;
|
||||
}
|
||||
}
|
||||
export let foo;
|
||||
</script>
|
||||
|
||||
return {
|
||||
foo: new Foo()
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<h1>{foo.bar()}</h1>
|
||||
@@ -1,11 +1,13 @@
|
||||
<h1>{set.has('x')}</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return {
|
||||
set: new Set(['x'])
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return {
|
||||
set: new Set(['x'])
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
export let set;
|
||||
</script>
|
||||
|
||||
<h1>{set.has('x')}</h1>
|
||||
@@ -1,15 +1,13 @@
|
||||
<h1>This page should never render</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
return new Promise(fulfil => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.fulfil = fulfil;
|
||||
} else {
|
||||
fulfil({});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return new Promise(fulfil => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.fulfil = fulfil;
|
||||
} else {
|
||||
fulfil({});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<h1>This page should never render</h1>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import * as path from 'path';
|
||||
import * as assert from 'assert';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import { build } from '../../../api';
|
||||
@@ -17,19 +16,18 @@ describe('preloading', function() {
|
||||
// helpers
|
||||
let start: () => Promise<void>;
|
||||
let prefetchRoutes: () => Promise<void>;
|
||||
let title: () => Promise<string>;
|
||||
|
||||
// hooks
|
||||
before(async () => {
|
||||
await build({ cwd: __dirname });
|
||||
|
||||
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
|
||||
({ base, page, start, prefetchRoutes } = await runner.start());
|
||||
({ base, page, start, prefetchRoutes, title } = await runner.start());
|
||||
});
|
||||
|
||||
after(() => runner.end());
|
||||
|
||||
const title = () => page.$eval('h1', node => node.textContent);
|
||||
|
||||
it('serializes Set objects returned from preload', async () => {
|
||||
await page.goto(`${base}/preload-values/set`);
|
||||
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<h1>unredirected</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
this.redirect(301, 'redirect-to');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
this.redirect(301, 'redirect-to');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<h1>unredirected</h1>
|
||||
@@ -1,9 +1,7 @@
|
||||
<h1>unredirected</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
this.redirect(301, 'https://example.com');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
this.redirect(301, 'https://example.com');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<h1>unredirected</h1>
|
||||
@@ -1,9 +1,7 @@
|
||||
<h1>unredirected</h1>
|
||||
<script context="module">
|
||||
export function preload() {
|
||||
this.redirect(301, '/');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
this.redirect(301, '/');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<h1>unredirected</h1>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,2 +1,4 @@
|
||||
<h1>Another tall page</h1>
|
||||
|
||||
<div style="height: 9999px"></div>
|
||||
<p id="bar">element</p>
|
||||
@@ -1,3 +1,15 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let barLink = false;
|
||||
|
||||
onMount(() => {
|
||||
barLink = true
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1>A tall page</h1>
|
||||
|
||||
<a href="tall-page#foo">scroll to foo</a>
|
||||
<div style="height: 9999px"></div>
|
||||
|
||||
@@ -7,18 +19,4 @@
|
||||
{#if barLink}
|
||||
<a href="another-tall-page#bar">link</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
barLink: false
|
||||
};
|
||||
},
|
||||
|
||||
oncreate() {
|
||||
this.set({ barLink: true })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -14,13 +14,14 @@ describe('scroll', function() {
|
||||
// helpers
|
||||
let start: () => Promise<void>;
|
||||
let prefetchRoutes: () => Promise<void>;
|
||||
let title: () => Promise<string>;
|
||||
|
||||
// hooks
|
||||
before(async () => {
|
||||
await build({ cwd: __dirname });
|
||||
|
||||
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
|
||||
({ base, page, start, prefetchRoutes } = await runner.start());
|
||||
({ base, page, start, prefetchRoutes, title } = await runner.start());
|
||||
});
|
||||
|
||||
after(() => runner.end());
|
||||
@@ -30,7 +31,7 @@ describe('scroll', function() {
|
||||
await start();
|
||||
|
||||
const scrollY = await page.evaluate(() => window.scrollY);
|
||||
assert.ok(scrollY > 0, scrollY);
|
||||
assert.ok(scrollY > 0, String(scrollY));
|
||||
});
|
||||
|
||||
it('scrolls to any deeplink if it was already active', async () => {
|
||||
@@ -38,17 +39,17 @@ describe('scroll', function() {
|
||||
await start();
|
||||
|
||||
let scrollY = await page.evaluate(() => window.scrollY);
|
||||
assert.ok(scrollY > 0, scrollY);
|
||||
assert.ok(scrollY > 0, String(scrollY));
|
||||
|
||||
scrollY = await page.evaluate(() => {
|
||||
window.scrollTo(0, 0)
|
||||
return window.scrollY
|
||||
});
|
||||
assert.ok(scrollY === 0, scrollY);
|
||||
assert.ok(scrollY === 0, String(scrollY));
|
||||
|
||||
await page.click('[href="tall-page#foo"]');
|
||||
scrollY = await page.evaluate(() => window.scrollY);
|
||||
assert.ok(scrollY > 0, scrollY);
|
||||
assert.ok(scrollY > 0, String(scrollY));
|
||||
});
|
||||
|
||||
it('resets scroll when a link is clicked', async () => {
|
||||
@@ -85,6 +86,7 @@ describe('scroll', function() {
|
||||
|
||||
await page.click('[href="another-tall-page#bar"]');
|
||||
await wait(50);
|
||||
assert.equal(await title(), 'Another tall page');
|
||||
const scrollY = await page.evaluate(() => window.scrollY);
|
||||
assert.ok(scrollY > 0);
|
||||
});
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
@@ -1,9 +1,7 @@
|
||||
import { Store } from 'svelte/store.js';
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper'),
|
||||
store: data => new Store(data)
|
||||
target: document.querySelector('#sapper')
|
||||
});
|
||||
|
||||
window.prefetchRoutes = () => sapper.prefetchRoutes();
|
||||
1
test/apps/session/src/routes/index.html
Normal file
1
test/apps/session/src/routes/index.html
Normal file
@@ -0,0 +1 @@
|
||||
<h1>Great success!</h1>
|
||||
18
test/apps/session/src/routes/preloaded.html
Normal file
18
test/apps/session/src/routes/preloaded.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<script context="module">
|
||||
export function preload(page, { title }) {
|
||||
return { title };
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { getSession } from '@sapper/app';
|
||||
const session = getSession();
|
||||
|
||||
export let title;
|
||||
</script>
|
||||
|
||||
<h1>{title}</h1>
|
||||
|
||||
<button on:click="{() => session.set({ title: 'changed' })}">
|
||||
click me
|
||||
</button>
|
||||
10
test/apps/session/src/routes/session.html
Normal file
10
test/apps/session/src/routes/session.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { getSession } from '@sapper/app';
|
||||
const session = getSession();
|
||||
</script>
|
||||
|
||||
<h1>{$session.title}</h1>
|
||||
|
||||
<button on:click="{() => session.set({ title: 'changed' })}">
|
||||
click me
|
||||
</button>
|
||||
@@ -1,6 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import { Store } from 'svelte/store.js';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
@@ -12,11 +11,9 @@ polka()
|
||||
})
|
||||
.use(
|
||||
sapper.middleware({
|
||||
store: (req, res) => {
|
||||
return new Store({
|
||||
title: `${req.hello} ${res.locals.name}`
|
||||
});
|
||||
}
|
||||
session: (req, res) => ({
|
||||
title: `${req.hello} ${res.locals.name}`
|
||||
})
|
||||
})
|
||||
)
|
||||
.listen(PORT);
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
@@ -3,7 +3,7 @@ import * as puppeteer from 'puppeteer';
|
||||
import { build } from '../../../api';
|
||||
import { AppRunner } from '../AppRunner';
|
||||
|
||||
describe('store', function() {
|
||||
describe('session', function() {
|
||||
this.timeout(10000);
|
||||
|
||||
let runner: AppRunner;
|
||||
@@ -12,25 +12,39 @@ describe('store', function() {
|
||||
|
||||
// helpers
|
||||
let start: () => Promise<void>;
|
||||
let title: () => Promise<string>;
|
||||
|
||||
// hooks
|
||||
before(async () => {
|
||||
await build({ cwd: __dirname });
|
||||
|
||||
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
|
||||
({ base, page, start } = await runner.start());
|
||||
({ base, page, start, title } = await runner.start());
|
||||
});
|
||||
|
||||
after(() => runner.end());
|
||||
|
||||
const title = () => page.$eval('h1', node => node.textContent);
|
||||
|
||||
it('renders store props', async () => {
|
||||
await page.goto(`${base}/store`);
|
||||
it('renders session props', async () => {
|
||||
await page.goto(`${base}/session`);
|
||||
|
||||
assert.equal(await title(), 'hello world');
|
||||
|
||||
await start();
|
||||
assert.equal(await title(), 'hello world');
|
||||
|
||||
await page.click('button');
|
||||
assert.equal(await title(), 'changed');
|
||||
});
|
||||
|
||||
it('preloads session props', async () => {
|
||||
await page.goto(`${base}/preloaded`);
|
||||
|
||||
assert.equal(await title(), 'hello world');
|
||||
|
||||
await start();
|
||||
assert.equal(await title(), 'hello world');
|
||||
|
||||
await page.click('button');
|
||||
assert.equal(await title(), 'changed');
|
||||
});
|
||||
});
|
||||
@@ -1,7 +0,0 @@
|
||||
<h1>Great success!</h1>
|
||||
|
||||
<a href="a">a</a>
|
||||
<a href="ambiguous/ok.json">ok</a>
|
||||
<a href="echo-query?message">ok</a>
|
||||
|
||||
<div class='hydrate-test'></div>
|
||||
@@ -1 +0,0 @@
|
||||
<h1>{$title}</h1>
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import sirv from 'sirv';
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT, NODE_ENV } = process.env;
|
||||
const dev = NODE_ENV === 'development';
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { timestamp, files, shell, routes } from '../__sapper__/service-worker.js';
|
||||
import * as sapper from '@sapper/service-worker';
|
||||
|
||||
const ASSETS = `cache${timestamp}`;
|
||||
const ASSETS = `cache${sapper.timestamp}`;
|
||||
|
||||
// `shell` is an array of all the files generated by webpack,
|
||||
// `files` is an array of everything in the `static` directory
|
||||
const to_cache = shell.concat(ASSETS);
|
||||
const to_cache = sapper.shell.concat(sapper.files);
|
||||
const cached = new Set(to_cache);
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
@@ -65,7 +65,7 @@ self.addEventListener('fetch', event => {
|
||||
// might prefer a cache-first approach to a network-first one.)
|
||||
event.respondWith(
|
||||
caches
|
||||
.open(`offline${timestamp}`)
|
||||
.open(`offline${sapper.timestamp}`)
|
||||
.then(async cache => {
|
||||
try {
|
||||
const response = await fetch(event.request);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
@@ -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}`;
|
||||
|
||||
|
||||
@@ -1,34 +1,20 @@
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import { build } from '../../../api';
|
||||
import * as assert from "assert";
|
||||
import { AppRunner } from '../AppRunner';
|
||||
import * as fs from "fs";
|
||||
import * as fs from 'fs';
|
||||
import * as path from "path";
|
||||
|
||||
describe('with-sourcemaps-webpack', function() {
|
||||
describe('with-sourcemaps', function() {
|
||||
this.timeout(10000);
|
||||
|
||||
let runner: AppRunner;
|
||||
let page: puppeteer.Page;
|
||||
let base: string;
|
||||
|
||||
// helpers
|
||||
let start: () => Promise<void>;
|
||||
let prefetchRoutes: () => Promise<void>;
|
||||
let prefetch: (href: string) => Promise<void>;
|
||||
let goto: (href: string) => Promise<void>;
|
||||
|
||||
// hooks
|
||||
before(async () => {
|
||||
await build({ cwd: __dirname, bundler: 'webpack' });
|
||||
|
||||
runner = new AppRunner(__dirname, '__sapper__/build/server/server.js');
|
||||
({ base, page, start, prefetchRoutes, prefetch, goto } = await runner.start());
|
||||
});
|
||||
|
||||
it('does not put sourcemap files in service worker shell', async () => {
|
||||
const serviceWorker = await import(`${__dirname}/__sapper__/service-worker.js`);
|
||||
const shell: string[] = serviceWorker.shell;
|
||||
const service_worker_source = fs.readFileSync(`${__dirname}/src/node_modules/@sapper/service-worker.js`, 'utf-8');
|
||||
const shell_source = /shell = (\[[\s\S]+?\])/.exec(service_worker_source)[1];
|
||||
const shell = JSON.parse(shell_source);
|
||||
|
||||
assert.equal(shell.filter(_ => _.endsWith('.map')).length, 0,
|
||||
'sourcemap files are not cached in SW');
|
||||
@@ -37,7 +23,4 @@ describe('with-sourcemaps-webpack', function() {
|
||||
const sourcemapFiles = fs.readdirSync(clientShellDir).filter(_ => _.endsWith('.map'));
|
||||
assert.ok(sourcemapFiles.length > 0, 'sourcemap files exist');
|
||||
});
|
||||
|
||||
after(() => runner.end());
|
||||
|
||||
});
|
||||
@@ -9,7 +9,7 @@ module.exports = {
|
||||
entry: config.client.entry(),
|
||||
output: config.client.output(),
|
||||
resolve: {
|
||||
extensions: ['.js', '.json', '.html'],
|
||||
extensions: ['.mjs', '.js', '.json', '.html'],
|
||||
mainFields: ['svelte', 'module', 'browser', 'main']
|
||||
},
|
||||
module: {
|
||||
@@ -43,7 +43,7 @@ module.exports = {
|
||||
output: config.server.output(),
|
||||
target: 'node',
|
||||
resolve: {
|
||||
extensions: ['.js', '.json', '.html'],
|
||||
extensions: ['.mjs', '.js', '.json', '.html'],
|
||||
mainFields: ['svelte', 'module', 'browser', 'main']
|
||||
},
|
||||
module: {
|
||||
|
||||
@@ -22,10 +22,7 @@ export default {
|
||||
emitCss: true
|
||||
}),
|
||||
resolve()
|
||||
],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
]
|
||||
},
|
||||
|
||||
server: {
|
||||
@@ -44,10 +41,7 @@ export default {
|
||||
preferBuiltins: true
|
||||
})
|
||||
],
|
||||
external: ['sirv', 'polka'],
|
||||
|
||||
// temporary, pending Rollup 1.0
|
||||
experimentalCodeSplitting: true
|
||||
external: ['sirv', 'polka']
|
||||
},
|
||||
|
||||
serviceworker: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import * as sapper from '../__sapper__/client.js';
|
||||
import * as sapper from '@sapper/app';
|
||||
|
||||
window.start = () => sapper.start({
|
||||
target: document.querySelector('#sapper')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import polka from 'polka';
|
||||
import * as sapper from '../__sapper__/server.js';
|
||||
import * as sapper from '@sapper/server';
|
||||
|
||||
const { PORT } = process.env;
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user