From 1f9b212794a265ee0fc016b36bd06e6dc37df3ed Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 17 Feb 2018 17:45:18 -0500 Subject: [PATCH 1/4] WIP towards 0.7 compatibility --- app/client.js | 7 +++ app/manifest/client.js | 15 ++++++ app/manifest/server.js | 20 ++++++++ app/manifest/service-worker.js | 33 +++++++++++++ server.js => app/server.js | 19 +++++--- {templates => app}/service-worker.js | 9 ++-- templates/2xx.html => app/template.html | 6 +-- package.json | 4 +- routes/4xx.html | 1 + routes/5xx.html | 1 + templates/4xx.html | 46 ------------------ templates/5xx.html | 47 ------------------- templates/main.js | 4 -- .../client.config.js | 0 .../server.config.js | 0 15 files changed, 97 insertions(+), 115 deletions(-) create mode 100644 app/client.js create mode 100644 app/manifest/client.js create mode 100644 app/manifest/server.js create mode 100644 app/manifest/service-worker.js rename server.js => app/server.js (57%) rename {templates => app}/service-worker.js (90%) rename templates/2xx.html => app/template.html (89%) create mode 100644 routes/4xx.html create mode 100644 routes/5xx.html delete mode 100644 templates/4xx.html delete mode 100644 templates/5xx.html delete mode 100644 templates/main.js rename webpack.client.config.js => webpack/client.config.js (100%) rename webpack.server.config.js => webpack/server.config.js (100%) diff --git a/app/client.js b/app/client.js new file mode 100644 index 0000000..05d30aa --- /dev/null +++ b/app/client.js @@ -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(); \ No newline at end of file diff --git a/app/manifest/client.js b/app/manifest/client.js new file mode 100644 index 0000000..55e2bfd --- /dev/null +++ b/app/manifest/client.js @@ -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); + }); +} \ No newline at end of file diff --git a/app/manifest/server.js b/app/manifest/server.js new file mode 100644 index 0000000..6bc89c4 --- /dev/null +++ b/app/manifest/server.js @@ -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$ } +]; \ No newline at end of file diff --git a/app/manifest/service-worker.js b/app/manifest/service-worker.js new file mode 100644 index 0000000..0ea1a75 --- /dev/null +++ b/app/manifest/service-worker.js @@ -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(?:\/([^\/]+))?\/?$/ } +]; \ No newline at end of file diff --git a/server.js b/app/server.js similarity index 57% rename from server.js rename to app/server.js index cd79704..49743bc 100644 --- a/server.js +++ b/app/server.js @@ -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}`); diff --git a/templates/service-worker.js b/app/service-worker.js similarity index 90% rename from templates/service-worker.js rename to app/service-worker.js index cccb12a..542371d 100644 --- a/templates/service-worker.js +++ b/app/service-worker.js @@ -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 diff --git a/templates/2xx.html b/app/template.html similarity index 89% rename from templates/2xx.html rename to app/template.html index 5dc665a..a7e7d49 100644 --- a/templates/2xx.html +++ b/app/template.html @@ -10,9 +10,9 @@ - %sapper.status% - - - - -

%sapper.title%

-

Could not %sapper.method% %sapper.url%

- - %sapper.scripts% - - \ No newline at end of file diff --git a/templates/5xx.html b/templates/5xx.html deleted file mode 100644 index 357152d..0000000 --- a/templates/5xx.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - %sapper.status% - - - - -

%sapper.title%

- 
%sapper.error%
- 
%sapper.stack%
- - \ No newline at end of file diff --git a/templates/main.js b/templates/main.js deleted file mode 100644 index aa08cb0..0000000 --- a/templates/main.js +++ /dev/null @@ -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__); \ No newline at end of file diff --git a/webpack.client.config.js b/webpack/client.config.js similarity index 100% rename from webpack.client.config.js rename to webpack/client.config.js diff --git a/webpack.server.config.js b/webpack/server.config.js similarity index 100% rename from webpack.server.config.js rename to webpack/server.config.js From ad0da849fbe88d5def104bf5f1372f6e959eface Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 17 Feb 2018 18:39:46 -0500 Subject: [PATCH 2/4] example error pages --- app/manifest/client.js | 4 ++-- app/manifest/server.js | 4 ++-- app/manifest/service-worker.js | 22 +++++++---------- app/server.js | 2 +- routes/4xx.html | 44 +++++++++++++++++++++++++++++++++- routes/5xx.html | 42 +++++++++++++++++++++++++++++++- 6 files changed, 98 insertions(+), 20 deletions(-) diff --git a/app/manifest/client.js b/app/manifest/client.js index 55e2bfd..8c71326 100644 --- a/app/manifest/client.js +++ b/app/manifest/client.js @@ -1,8 +1,8 @@ // 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') }, + { error: '4xx', load: () => import(/* webpackChunkName: "_4xx" */ '../../routes/4xx.html') }, + { error: '5xx', 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') } diff --git a/app/manifest/server.js b/app/manifest/server.js index 6bc89c4..48f7bd9 100644 --- a/app/manifest/server.js +++ b/app/manifest/server.js @@ -10,8 +10,8 @@ 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 }, + { error: '4xx', module: _4xx }, + { error: '5xx', 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 }, diff --git a/app/manifest/service-worker.js b/app/manifest/service-worker.js index 0ea1a75..cb87744 100644 --- a/app/manifest/service-worker.js +++ b/app/manifest/service-worker.js @@ -1,5 +1,5 @@ // This file is generated by Sapper — do not edit it! -export const timestamp = 1518906946124; +export const timestamp = 1518910653621; export const assets = [ "favicon.png", @@ -11,22 +11,18 @@ export const assets = [ ]; 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" + "/client/_.0.6b48eb953c3d3763d72b.js", + "/client/blog.1.6b48eb953c3d3763d72b.js", + "/client/blog_$slug$.2.6b48eb953c3d3763d72b.js", + "/client/about.3.6b48eb953c3d3763d72b.js", + "/client/_5xx.4.6b48eb953c3d3763d72b.js", + "/client/_4xx.5.6b48eb953c3d3763d72b.js", + "/client/6.6.6b48eb953c3d3763d72b.js", + "/client/main.6b48eb953c3d3763d72b.js" ]; export const routes = [ { pattern: /^\/?$/ }, - { pattern: /^\/4xx\/?$/ }, - { pattern: /^\/5xx\/?$/ }, { pattern: /^\/about\/?$/ }, { pattern: /^\/blog\/?$/ }, { pattern: /^\/blog(?:\/([^\/]+))?\/?$/ } diff --git a/app/server.js b/app/server.js index 49743bc..0af7864 100644 --- a/app/server.js +++ b/app/server.js @@ -3,6 +3,7 @@ import express from 'express'; import compression from 'compression'; import sapper from 'sapper'; import serve from 'serve-static'; +import fetch from 'node-fetch'; import { routes } from './manifest/server.js'; const app = express(); @@ -10,7 +11,6 @@ const app = express(); const { PORT = 3000 } = process.env; // this allows us to do e.g. `fetch('/api/blog-posts')` on the server -const fetch = require('node-fetch'); global.fetch = (url, opts) => { if (url[0] === '/') url = `http://localhost:${PORT}${url}`; return fetch(url, opts); diff --git a/routes/4xx.html b/routes/4xx.html index efe6e3b..0a98eb7 100644 --- a/routes/4xx.html +++ b/routes/4xx.html @@ -1 +1,43 @@ -TODO 4xx \ No newline at end of file +<:Head> + Not found + + + +

Not found

+ +

Please check the URL

+ + + + + diff --git a/routes/5xx.html b/routes/5xx.html index 9391ebe..efcc337 100644 --- a/routes/5xx.html +++ b/routes/5xx.html @@ -1 +1,41 @@ -TODO 5xx \ No newline at end of file +<:Head> + Internal server error + + + +

Internal server error

+ + + + + From 220af2b1dd714663514273d1033ee2a3d1cacec0 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 18 Feb 2018 12:15:32 -0500 Subject: [PATCH 3/4] remove generated files --- .gitignore | 3 ++- app/manifest/client.js | 15 --------------- app/manifest/server.js | 20 -------------------- app/manifest/service-worker.js | 29 ----------------------------- 4 files changed, 2 insertions(+), 65 deletions(-) delete mode 100644 app/manifest/client.js delete mode 100644 app/manifest/server.js delete mode 100644 app/manifest/service-worker.js diff --git a/.gitignore b/.gitignore index f20aae2..7800c23 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ node_modules yarn.lock cypress/screenshots templates/.* -dist \ No newline at end of file +dist +app/manifest \ No newline at end of file diff --git a/app/manifest/client.js b/app/manifest/client.js deleted file mode 100644 index 8c71326..0000000 --- a/app/manifest/client.js +++ /dev/null @@ -1,15 +0,0 @@ -// This file is generated by Sapper — do not edit it! -export const routes = [ - { pattern: /^\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_" */ '../../routes/index.html') }, - { error: '4xx', load: () => import(/* webpackChunkName: "_4xx" */ '../../routes/4xx.html') }, - { error: '5xx', 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); - }); -} \ No newline at end of file diff --git a/app/manifest/server.js b/app/manifest/server.js deleted file mode 100644 index 48f7bd9..0000000 --- a/app/manifest/server.js +++ /dev/null @@ -1,20 +0,0 @@ -// 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: _ }, - { error: '4xx', module: _4xx }, - { error: '5xx', 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$ } -]; \ No newline at end of file diff --git a/app/manifest/service-worker.js b/app/manifest/service-worker.js deleted file mode 100644 index cb87744..0000000 --- a/app/manifest/service-worker.js +++ /dev/null @@ -1,29 +0,0 @@ -// This file is generated by Sapper — do not edit it! -export const timestamp = 1518910653621; - -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.6b48eb953c3d3763d72b.js", - "/client/blog.1.6b48eb953c3d3763d72b.js", - "/client/blog_$slug$.2.6b48eb953c3d3763d72b.js", - "/client/about.3.6b48eb953c3d3763d72b.js", - "/client/_5xx.4.6b48eb953c3d3763d72b.js", - "/client/_4xx.5.6b48eb953c3d3763d72b.js", - "/client/6.6.6b48eb953c3d3763d72b.js", - "/client/main.6b48eb953c3d3763d72b.js" -]; - -export const routes = [ - { pattern: /^\/?$/ }, - { pattern: /^\/about\/?$/ }, - { pattern: /^\/blog\/?$/ }, - { pattern: /^\/blog(?:\/([^\/]+))?\/?$/ } -]; \ No newline at end of file From 4d9250e7a72ab9e772565e8f8a369571a545e7f0 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sun, 18 Feb 2018 12:48:20 -0500 Subject: [PATCH 4/4] add service worker config --- package.json | 3 ++- webpack/service-worker.config.js | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 webpack/service-worker.config.js diff --git a/package.json b/package.json index 0be5f52..7deb2f7 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "scripts": { "dev": "sapper dev", "build": "sapper build", - "start": "cross-env NODE_ENV=production node server.js", + "export": "sapper export", + "start": "cross-env NODE_ENV=production node .sapper/server.js", "cy:run": "cypress run", "cy:open": "cypress open", "test": "run-p --race dev cy:run" diff --git a/webpack/service-worker.config.js b/webpack/service-worker.config.js new file mode 100644 index 0000000..d29ca30 --- /dev/null +++ b/webpack/service-worker.config.js @@ -0,0 +1,17 @@ +const path = require('path'); +const config = require('sapper/webpack/config.js'); +const webpack = require('webpack'); + +module.exports = { + entry: { + 'service-worker': './app/service-worker.js' + }, + output: { + path: path.resolve(`.sapper`), + filename: '[name].js', + chunkFilename: '[name].[id].[hash].js' + }, + plugins: [ + !config.dev && new webpack.optimize.ModuleConcatenationPlugin() + ].filter(Boolean) +}; \ No newline at end of file