[WIP] v3 site

.eslintrc.json

@@ -1,46 +1,45 @@
 {
-    "root": true,
-    "rules": {
-        "indent": [ 2, "tab", { "SwitchCase": 1 } ],
-        "semi": [ 2, "always" ],
-        "keyword-spacing": [ 2, { "before": true, "after": true } ],
-        "space-before-blocks": [ 2, "always" ],
-        "no-mixed-spaces-and-tabs": [ 2, "smart-tabs" ],
-        "no-cond-assign": 0,
-        "no-unused-vars": 2,
-        "object-shorthand":  [ 2, "always" ],
-        "no-const-assign": 2,
-        "no-class-assign": 2,
-        "no-this-before-super": 2,
-        "no-var": 2,
-        "no-unreachable": 2,
-        "valid-typeof": 2,
-        "quote-props": [ 2, "as-needed" ],
-        "one-var": [ 2, "never" ],
-        "prefer-arrow-callback": 2,
-        "prefer-const": [ 2, { "destructuring": "all" } ],
-        "arrow-spacing": 2,
-        "no-inner-declarations": 0
-    },
-    "env": {
-        "es6": true,
-        "browser": true,
-        "node": true,
-        "mocha": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:import/errors",
-        "plugin:import/warnings"
-    ],
-    "plugins": [
-        "html"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module"
-    },
-    "settings": {
-        "import/core-modules": [ "svelte" ]
-    }
+	"root": true,
+	"rules": {
+		"indent": [2, "tab", { "SwitchCase": 1 }],
+		"semi": [2, "always"],
+		"keyword-spacing": [2, { "before": true, "after": true }],
+		"space-before-blocks": [2, "always"],
+		"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
+		"no-cond-assign": 0,
+		"no-unused-vars": 2,
+		"object-shorthand": [2, "always"],
+		"no-const-assign": 2,
+		"no-class-assign": 2,
+		"no-this-before-super": 2,
+		"no-var": 2,
+		"no-unreachable": 2,
+		"valid-typeof": 2,
+		"quote-props": [2, "as-needed"],
+		"one-var": [2, "never"],
+		"prefer-arrow-callback": 2,
+		"prefer-const": [2, { "destructuring": "all" }],
+		"arrow-spacing": 2,
+		"no-inner-declarations": 0
+	},
+	"env": {
+		"es6": true,
+		"browser": true,
+		"node": true,
+		"mocha": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:import/errors",
+		"plugin:import/warnings"
+	],
+	"plugins": ["svelte3"],
+	"parserOptions": {
+		"ecmaVersion": 6,
+		"sourceType": "module"
+	},
+	"settings": {
+		"import/core-modules": ["svelte"],
+		"svelte3/extensions": ["html"]
+	}
 }

.gitignore

@@ -17,4 +17,8 @@ node_modules
 /test/sourcemaps/samples/*/output.css.map
 /yarn-error.log
 _actual*.*
-_*/
+
+/site/cypress/screenshots/
+/site/__sapper__/
+/site/.env
+/site/.sessions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.0.0-alpha6",
+  "version": "3.0.0-alpha8",
   "description": "The magical disappearing UI framework",
   "module": "index.mjs",
   "main": "index.js",

site/.eslintrc.json

@@ -0,0 +1,45 @@
+{
+	"root": true,
+	"rules": {
+		"indent": [2, "tab", { "SwitchCase": 1 }],
+		"semi": [2, "always"],
+		"keyword-spacing": [2, { "before": true, "after": true }],
+		"space-before-blocks": [2, "always"],
+		"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
+		"no-cond-assign": 0,
+		"no-unused-vars": 2,
+		"object-shorthand": [2, "always"],
+		"no-const-assign": 2,
+		"no-class-assign": 2,
+		"no-this-before-super": 2,
+		"no-var": 2,
+		"no-unreachable": 2,
+		"valid-typeof": 2,
+		"quote-props": [2, "as-needed"],
+		"one-var": [2, "never"],
+		"prefer-arrow-callback": 2,
+		"prefer-const": [2, { "destructuring": "all" }],
+		"arrow-spacing": 2,
+		"no-inner-declarations": 0
+	},
+	"env": {
+		"es6": true,
+		"browser": true,
+		"node": true,
+		"mocha": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:import/errors",
+		"plugin:import/warnings"
+	],
+	"plugins": ["svelte3"],
+	"parserOptions": {
+		"ecmaVersion": 6,
+		"sourceType": "module"
+	},
+	"settings": {
+		"import/core-modules": ["svelte"],
+		"svelte3/extensions": [".html"]
+	}
+}

site/.travis.yml

@@ -0,0 +1,11 @@
+sudo: false
+language: node_js
+node_js:
+  - "stable"
+env:
+  global:
+    - BUILD_TIMEOUT=10000
+install:
+  - npm install
+  - npm install cypress
+

site/README.md

@@ -0,0 +1,75 @@
+# sapper-template-rollup
+
+A version of the default [Sapper](https://github.com/sveltejs/sapper) template that uses Rollup instead of webpack. To clone it and get started:
+
+```bash
+npx degit sveltejs/sapper-template#rollup my-app
+cd my-app
+npm install # or yarn!
+npm run dev
+```
+
+Open up [localhost:3000](http://localhost:3000) and start clicking around.
+
+Consult [sapper.svelte.technology](https://sapper.svelte.technology) for help getting started.
+
+*[Click here for the webpack version of this template](https://github.com/sveltejs/sapper-template)*
+
+## Structure
+
+Sapper expects to find three directories in the root of your project —  `app`, `assets` and `routes`.
+
+
+### app
+
+The [app](app) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file.
+
+
+### assets
+
+The [assets](assets) 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 `assets` from the generated manifest...
+
+```js
+import { assets } from './manifest/service-worker.js';
+```
+
+...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).
+
+
+### routes
+
+This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*.
+
+**Pages** are Svelte components written in `.html` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)
+
+**Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example.
+
+There are three simple rules for naming the files that define your routes:
+
+* A file called `routes/about.html` corresponds to the `/about` route. A file called `routes/blog/[slug].html` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route
+* The file `routes/index.html` (or `routes/index.js`) corresponds to the root of your app. `routes/about/index.html` is treated the same as `routes/about.html`.
+* Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route
+
+
+## Rollup config
+
+Sapper uses Rollup to provide code-splitting and dynamic imports, as well as compiling your Svelte components. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.
+
+
+## Production mode and deployment
+
+To start a production version of your app, run `npm run build && npm start`.
+
+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:
+
+```bash
+npm install -g now
+now
+```
+
+
+## Bugs and feedback
+
+Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues).

site/appveyor.yml

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

site/content/blog/2016-11-26-frameworks-without-the-framework.md

@@ -0,0 +1,56 @@
+---
+title: Frameworks without the framework: why didn't we think of this sooner?
+description: You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.
+pubdate: 2016-11-26
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+> Wait, this new framework has a *runtime*? Ugh. Thanks, I'll pass.
+> **– front end developers in 2018**
+
+We're shipping too much code to our users. Like a lot of front end developers, I've been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use [one less .jpg!](https://twitter.com/miketaylr/status/227056824275333120) – and that what *really* mattered was performance once your app was already interactive.
+
+But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.
+
+If you're not convinced that this is a problem, follow [Alex Russell](https://twitter.com/slightlylate) on Twitter. Alex [hasn't been making many friends in the framework community lately](https://twitter.com/slightlylate/status/728355959022587905), but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – [Polymer](https://www.polymer-project.org/1.0/) – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.
+
+Perhaps we need to rethink the whole thing.
+
+
+## What problem do frameworks *really* solve?
+
+The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that's not really true. At best, frameworks *move the complexity around*, away from code that you had to write and into code you didn't.
+
+Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your *concepts*. Frameworks are primarily a tool for structuring your thoughts, not your code.
+
+Given that, what if the framework *didn't actually run in the browser*? What if, instead, it converted your application into pure vanilla JavaScript, just like Babel converts ES2016+ to ES5? You'd pay no upfront cost of shipping a hefty runtime, and your app would get seriously fast, because there'd be no layers of abstraction between your app and the browser.
+
+
+## Introducing Svelte
+
+Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can [learn in under 5 minutes](/guide)), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible.
+
+The [Svelte implementation of TodoMVC](http://svelte-todomvc.surge.sh/) weighs 3.6kb zipped. For comparison, React plus ReactDOM *without any app code* weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
+
+And once your app *is* up and running, according to [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) **Svelte is fast as heck**. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because [Dominic Gannaway](https://twitter.com/trueadm) is a wizard. (Svelte is slower at removing elements. We're [working on it](https://github.com/sveltejs/svelte/issues/26).)
+
+It's basically as fast as vanilla JS, which makes sense because it *is* vanilla JS – just vanilla JS that you didn't have to write.
+
+
+## But that's not the important thing
+
+Well, it *is* important – performance matters a great deal. What's really exciting about this approach, though, is that we can finally solve some of the thorniest problems in web development.
+
+Consider interoperability. Want to `npm install cool-calendar-widget` and use it in your app? Previously, you could only do that if you were already using (a correct version of) the framework that the widget was designed for – if `cool-calendar-widget` was built in React and you're using Angular then, well, hard cheese. But if the widget author used Svelte, apps that use it can be built using whatever technology you like. (On the TODO list: a way to convert Svelte components into web components.)
+
+Or [code splitting](https://twitter.com/samccone/status/797528710085652480). It's a great idea (only load the code the user needs for the initial view, then get the rest later), but there's a problem – even if you only initially serve one React component instead of 100, *you still have to serve React itself*. With Svelte, code splitting can be much more effective, because the framework is embedded in the component, and the component is tiny.
+
+Finally, something I've wrestled with a great deal as an open source maintainer: your users always want *their* features prioritised, and underestimate the cost of those features to people who don't need them. A framework author must always balance the long-term health of the project with the desire to meet their users' needs. That's incredibly difficult, because it's hard to anticipate – much less articulate – the consequences of incremental bloat, and it takes serious soft skills to tell people (who may have been enthusiastically evangelising your tool up to that point) that their feature isn't important enough. But with an approach like Svelte's, many features can be added with absolutely no cost to people who don't use them, because the code that implements those features just doesn't get generated by the compiler if it's unnecessary.
+
+
+## We're just getting started
+
+Svelte is very new. There's a lot of work still left to do – creating build tool integrations, adding a server-side renderer, hot reloading, transitions, more documentation and examples, starter kits, and so on.
+
+But you can already build rich components with it, which is why we've gone straight to a stable 1.0.0 release. [Read the guide](/guide), [try it out in the REPL](/repl), and head over to [GitHub](https://github.com/sveltejs/svelte) to help kickstart the next era of front end development.

site/content/blog/2017-08-07-the-easiest-way-to-get-started.md

@@ -0,0 +1,66 @@
+---
+title: The easiest way to get started with Svelte
+description: This'll only take a minute.
+pubdate: 2017-08-07
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+Svelte is a [new kind of framework](/blog/frameworks-without-the-framework). Rather than putting a `<script src='svelte.js'>` tag on the page, or bringing it into your app with `import` or `require`, Svelte is a compiler that works behind the scenes to turn your component files into beautifully optimised JavaScript.
+
+Because of that, getting started with it can be a little bit confusing at first. How, you might reasonably ask, do you make a Svelte app?
+
+
+## 1. Use the REPL
+
+The [Svelte REPL](https://svelte.technology/repl) is the easiest way to begin. You can choose from a list of examples to get you started, and tweak them until they do what you want.
+
+<aside>You'll need to have [Node.js](https://nodejs.org/) installed, and know how to use the terminal</aside>
+
+At some point, your app will outgrow the REPL. Click the **download** button to save a `svelte-app.zip` file to your computer and uncompress it.
+
+Open a terminal window and set the project up...
+
+```bash
+cd /path/to/svelte-app
+npm install
+```
+
+...then start up a development server:
+
+```bash
+npm run dev
+```
+
+This will serve your app on [localhost:5000](http://localhost:5000) and rebuild it with [Rollup](https://rollupjs.org) every time you make a change to the files in `svelte-app/src`.
+
+
+## 2. Use degit
+
+When you download from the REPL, you're getting a customised version of the [sveltejs/template](https://github.com/sveltejs/template) repo. You can skip messing around with zip files by using [degit](https://github.com/Rich-Harris/degit), a project scaffolding tool.
+
+In the terminal, install degit globally (you only need to do this once):
+
+```bash
+npm install -g degit
+```
+
+After that, you can instantly create a new project like so:
+
+```bash
+degit sveltejs/template my-new-project
+cd my-new-project
+
+npm install
+npm run dev
+```
+
+Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead:
+
+```bash
+degit your-name/template my-new-project
+```
+
+And that's it! Do `npm run build` to create a production-ready version of your app, and check the project template's [README](https://github.com/sveltejs/template/blob/master/README.md) for instructions on how to easily deploy your app to the web with [Now](https://zeit.co/now) or [Surge](http://surge.sh/).
+
+You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) or the [API](https://github.com/sveltejs/svelte#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Gitter chatroom](https://gitter.im/sveltejs/svelte), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!