Merge pull request #3 from sveltejs/master

update to last sapper version

.github/workflows/build-templates.yml

@@ -0,0 +1,18 @@
+name: Create templates
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+      -
+        env:
+          CI: true
+          SSH_KEY: ${{ secrets.SSH_KEY }}
+          SSH_KEY_ROLLUP: ${{ secrets.SSH_KEY_ROLLUP }}
+          SSH_KEY_WEBPACK: ${{ secrets.SSH_KEY_WEBPACK }}
+        run: _template/build.sh

.travis.yml

@@ -1,11 +0,0 @@
-sudo: false
-language: node_js
-node_js:
-  - "stable"
-env:
-  global:
-    - BUILD_TIMEOUT=10000
-branches:
-  only:
-    - master
-script: _template/build.sh

README.md

@@ -1,14 +1,35 @@
 # sapper-template
 
-The default [Sapper](https://github.com/sveltejs/sapper) template, with branches for Rollup and webpack. To clone it and get started:
+The default [Sapper](https://github.com/sveltejs/sapper) template, available for Rollup and webpack.
+
+
+## Getting started
+
+
+### Using `degit`
+
+[`degit`](https://github.com/Rich-Harris/degit) is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the `rollup` or `webpack` branch in `sapper-template`:
 
 ```bash
 # for Rollup
 npx degit "sveltejs/sapper-template#rollup" my-app
 # for webpack
 npx degit "sveltejs/sapper-template#webpack" my-app
+```
+
+
+### Using GitHub templates
+
+Alternatively, you can use GitHub's template feature with the [sapper-template-rollup](https://github.com/sveltejs/sapper-template-rollup) or [sapper-template-webpack](https://github.com/sveltejs/sapper-template-webpack) repositories.
+
+
+### Running the project
+
+However you get the code, you can install dependencies and run the project in development mode with:
+
+```bash
 cd my-app
-npm install # or yarn!
+npm install # or yarn
 npm run dev
 ```
 
@@ -46,7 +67,7 @@ There are three simple rules for naming the files that define your routes:
 
 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...
+In your [service-worker.js](src/service-worker.js) file, you can import these as `files` from the generated manifest...
 
 ```js
 import { files } from '@sapper/service-worker';
@@ -64,19 +85,21 @@ Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as
 
 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:
+You can deploy your application to any environment that supports Node 10 or above. As an example, to deploy to [Vercel Now](https://vercel.com) when using `sapper export`, run these commands:
 
 ```bash
-npm install -g now
-now
+npm install -g vercel
+vercel
 ```
 
+If your app can't be exported to a static site, you can use the [now-sapper](https://github.com/thgh/now-sapper) builder. You can find instructions on how to do so in its [README](https://github.com/thgh/now-sapper#basic-usage).
 
-## Using external components with webpack
+
+## Using external components
 
 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 under `server` in [webpack.config.js](webpack.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:
+Because of that, it's essential that the bundler doesn't treat the package as an *external dependency*. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.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
 npm install -D @sveltejs/svelte-virtual-list

_template/build.sh

@@ -1,19 +1,19 @@
 #!/bin/bash
-cd "$(dirname $0)"
+cd "$(dirname "$0")"
 
 if [ "$CI" ]; then
-	# write out SSH key
-	[ "$SSH_KEY" ] || exit 1
-	echo "$SSH_KEY" > ~/.ssh/id_rsa
-	chmod 600 ~/.ssh/id_rsa
+	(umask 0077; echo "$SSH_KEY" > ~/ssh_key; echo "$SSH_KEY_ROLLUP" > ~/ssh_key_rollup; echo "$SSH_KEY_WEBPACK" > ~/ssh_key_webpack)
+	git config user.email 'noreply@svelte.dev'
+	git config user.name '[bot]'
 fi
 
 # branch names
-DEFAULT=master
 ROLLUP=rollup
 WEBPACK=webpack
 
-./create-branches.sh $DEFAULT $ROLLUP $WEBPACK
+./create-branches.sh $ROLLUP $WEBPACK
 
-# force push rollup and webpack branches
-git push git@github.com:sveltejs/sapper-template.git $ROLLUP $WEBPACK -f
+# force push rollup and webpack branches and repos
+GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key' git push git@github.com:sveltejs/sapper-template.git $ROLLUP $WEBPACK -f
+GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key_rollup' git push git@github.com:sveltejs/sapper-template-rollup.git $ROLLUP:master -f
+GIT_SSH_COMMAND='ssh -o StrictHostKeyChecking=accept-new -i ~/ssh_key_webpack' git push git@github.com:sveltejs/sapper-template-webpack.git $WEBPACK:master -f

_template/create-branches.sh

@@ -1,31 +1,25 @@
 #!/bin/bash
-cd "$(dirname $0)"/..
+cd "$(dirname "$0")"/..
 
-DEFAULT=${1:-master}
-ROLLUP=${2:-rollup}
-WEBPACK=${3:-webpack}
+HEAD=$(git rev-parse HEAD)
 
-echo "Creating $ROLLUP and $WEBPACK branches from $DEFAULT"
+ROLLUP=${1:-rollup}
+WEBPACK=${2:-webpack}
 
-# make sure we're on master, and delete the $ROLLUP and $WEBPACK branches
-git symbolic-ref HEAD "refs/heads/$DEFAULT"
-git reset --hard
-git branch -D $ROLLUP $WEBPACK
+echo "Creating $ROLLUP and $WEBPACK branches from $REV"
 
-# create the $ROLLUP branch off the current master
-git checkout -b $ROLLUP
+# create the $ROLLUP branch off the current HEAD
+git symbolic-ref HEAD refs/heads/$ROLLUP
+git reset $HEAD --hard
 node _template/build-pkg.js rollup
-git rm -r --cached .travis.yml _template package_template.json webpack.config.js
+git rm -r --cached .github _template package_template.json webpack.config.js
 git add package.json
 git commit -m 'Sapper template for Rollup'
-git symbolic-ref HEAD "refs/heads/$DEFAULT"
-git reset --hard
 
-# create the $WEBPACK branch off the current master
-git checkout -b $WEBPACK
+# create the $WEBPACK branch off the current HEAD
+git symbolic-ref HEAD refs/heads/$WEBPACK
+git reset $HEAD --hard
 node _template/build-pkg.js webpack
-git rm -r --cached .travis.yml _template package_template.json rollup.config.js
+git rm -r --cached .github _template package_template.json rollup.config.js
 git add package.json
 git commit -m 'Sapper template for webpack'
-git symbolic-ref HEAD "refs/heads/$DEFAULT"
-git reset --hard

appveyor.yml

@@ -1,18 +0,0 @@
-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

package_template.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "compression": "^1.7.1",
-    "polka": "^0.5.0",
+    "polka": "next",
     "sirv": "^0.4.0"
   },
   "devDependencies": {
@@ -33,13 +33,13 @@
         "@babel/plugin-transform-runtime": "^7.0.0",
         "@babel/preset-env": "^7.0.0",
         "@babel/runtime": "^7.0.0",
-        "rollup": "^1.0.0",
-        "rollup-plugin-babel": "^4.0.2",
-        "rollup-plugin-commonjs": "^9.1.6",
-        "rollup-plugin-node-resolve": "^4.0.0",
-        "rollup-plugin-replace": "^2.0.0",
+        "@rollup/plugin-babel": "^5.0.0",
+        "@rollup/plugin-commonjs": "^12.0.0",
+        "@rollup/plugin-node-resolve": "^8.0.0",
+        "@rollup/plugin-replace": "^2.2.0",
+        "rollup": "^2.3.4",
         "rollup-plugin-svelte": "^5.0.1",
-        "rollup-plugin-terser": "^4.0.4"
+        "rollup-plugin-terser": "^5.3.0"
       }
     },
     "webpack": {

rollup.config.js

@@ -1,8 +1,8 @@
-import resolve from 'rollup-plugin-node-resolve';
-import replace from 'rollup-plugin-replace';
-import commonjs from 'rollup-plugin-commonjs';
+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 babel from '@rollup/plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import config from 'sapper/config/rollup.js';
 import pkg from './package.json';
@@ -28,13 +28,14 @@ export default {
 				emitCss: true
 			}),
 			resolve({
-				browser: true
+				browser: true,
+				dedupe: ['svelte']
 			}),
 			commonjs(),
 
 			legacy && babel({
 				extensions: ['.js', '.mjs', '.html', '.svelte'],
-				runtimeHelpers: true,
+				babelHelpers: 'runtime',
 				exclude: ['node_modules/@babel/**'],
 				presets: [
 					['@babel/preset-env', {
@@ -54,6 +55,7 @@ export default {
 			})
 		],
 
+		preserveEntrySignatures: false,
 		onwarn,
 	},
 
@@ -69,13 +71,16 @@ export default {
 				generate: 'ssr',
 				dev
 			}),
-			resolve(),
+			resolve({
+				dedupe: ['svelte']
+			}),
 			commonjs()
 		],
 		external: Object.keys(pkg.dependencies).concat(
 			require('module').builtinModules || Object.keys(process.binding('natives'))
 		),
 
+		preserveEntrySignatures: 'strict',
 		onwarn,
 	},
 
@@ -92,6 +97,7 @@ export default {
 			!dev && terser()
 		],
 
+		preserveEntrySignatures: false,
 		onwarn,
 	}
 };

src/components/Nav.svelte

@@ -26,12 +26,12 @@
 		float: left;
 	}
 
-	.selected {
+	[aria-current] {
 		position: relative;
 		display: inline-block;
 	}
 
-	.selected::after {
+	[aria-current]::after {
 		position: absolute;
 		content: '';
 		width: calc(100% - 1em);
@@ -50,11 +50,11 @@
 
 <nav>
 	<ul>
-		<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
-		<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
+		<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">home</a></li>
+		<li><a aria-current="{segment === 'about' ? 'page' : undefined}" 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>
+		<li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">blog</a></li>
 	</ul>
-</nav>
+</nav>

src/routes/blog/[slug].svelte

@@ -1,7 +1,7 @@
 <script context="module">
 	export async function preload({ params, query }) {
 		// the `slug` parameter is available because
-		// this file is called [slug].html
+		// this file is called [slug].svelte
 		const res = await this.fetch(`blog/${params.slug}.json`);
 		const data = await res.json();
 
@@ -61,4 +61,4 @@
 
 <div class='content'>
 	{@html post.html}
-</div>
+</div>

src/routes/blog/_posts.js

@@ -65,11 +65,11 @@ const posts = [
 		title: 'How is Sapper different from Next.js?',
 		slug: 'how-is-sapper-different-from-next',
 		html: `
-			<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://zeit.co'>Zeit</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
+			<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://vercel.com/'>Vercel</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
 
 			<ul>
 				<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
-				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].html</code></li>
+				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
 				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
 				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
 			</ul>

src/routes/index.svelte

@@ -39,8 +39,8 @@
 <h1>Great success!</h1>
 
 <figure>
-	<img alt='Borat' src='great-success.png'>
-	<figcaption>HIGH FIVE!</figcaption>
+	<img alt='Success Kid' src='successkid.jpg'>
+	<figcaption>Have fun with Sapper!</figcaption>
 </figure>
 
 <p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>

src/template.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang='en'>
 <head>
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1.0'>
@@ -8,7 +8,7 @@
 	%sapper.base%
 
 	<link rel='stylesheet' href='global.css'>
-	<link rel='manifest' href='manifest.json'>
+	<link rel='manifest' href='manifest.json' crossorigin='use-credentials'>
 	<link rel='icon' type='image/png' href='favicon.png'>
 
 	<!-- Sapper generates a <style> tag containing critical CSS
@@ -22,10 +22,10 @@
 </head>
 <body>
 	<!-- The application will be rendered inside this element,
-	     because `app/client.js` references it -->
+	     because `src/client.js` references it -->
 	<div id='sapper'>%sapper.html%</div>
 
-	<!-- Sapper creates a <script> tag containing `app/client.js`
+	<!-- Sapper creates a <script> tag containing `src/client.js`
 	     and anything else it needs to hydrate the app and
 	     initialise the router -->
 	%sapper.scripts%

webpack.config.js

@@ -1,10 +1,12 @@
 const webpack = require('webpack');
+const path = require('path');
 const config = require('sapper/config/webpack.js');
 const pkg = require('./package.json');
 
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
 
+const alias = { svelte: path.resolve('node_modules', 'svelte') };
 const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
 const mainFields = ['svelte', 'module', 'browser', 'main'];
 
@@ -12,7 +14,7 @@ module.exports = {
 	client: {
 		entry: config.client.entry(),
 		output: config.client.output(),
-		resolve: { extensions, mainFields },
+		resolve: { alias, extensions, mainFields },
 		module: {
 			rules: [
 				{
@@ -44,7 +46,7 @@ module.exports = {
 		entry: config.server.entry(),
 		output: config.server.output(),
 		target: 'node',
-		resolve: { extensions, mainFields },
+		resolve: { alias, extensions, mainFields },
 		externals: Object.keys(pkg.dependencies).concat('encoding'),
 		module: {
 			rules: [